1 | @import "mixins/components.navs";
|
2 |
|
3 | .c-nav {
|
4 | @include nav--color;
|
5 | width: $nav-width;
|
6 | margin: $nav-margin;
|
7 | padding: $nav-padding;
|
8 | z-index: $nav-z-index;
|
9 | }
|
10 |
|
11 | .c-nav__item,
|
12 | .c-nav__content {
|
13 | display: block;
|
14 | height: $nav-height;
|
15 | padding: 0 $nav-item-padding;
|
16 | color: inherit;
|
17 | line-height: $nav-height;
|
18 | vertical-align: middle;
|
19 |
|
20 | .o-image {
|
21 | height: 100%;
|
22 | }
|
23 | }
|
24 |
|
25 | .c-nav__item {
|
26 | @include nav__item--color;
|
27 | text-decoration: none;
|
28 | cursor: pointer;
|
29 | }
|
30 |
|
31 | .c-nav--inline {
|
32 | .c-nav__item,
|
33 | .c-nav__content {
|
34 | display: inline-block;
|
35 | }
|
36 |
|
37 | .c-nav__item--right,
|
38 | .c-nav__content--right {
|
39 | float: right;
|
40 | }
|
41 | }
|
42 |
|
43 | .c-nav--light {
|
44 | @include nav--color($nav-light-background-color, $nav-light-color);
|
45 | }
|
46 |
|
47 | .c-nav--top {
|
48 | position: absolute;
|
49 | top: 0;
|
50 | right: 0;
|
51 | bottom: auto;
|
52 | left: 0;
|
53 |
|
54 | }
|
55 |
|
56 | .c-nav--bottom {
|
57 | position: absolute;
|
58 | top: auto;
|
59 | right: 0;
|
60 | bottom: 0;
|
61 | left: 0;
|
62 | }
|
63 |
|
64 | .c-nav--left {
|
65 | position: absolute;
|
66 | top: 0;
|
67 | right: auto;
|
68 | bottom: 0;
|
69 | left: 0;
|
70 | }
|
71 |
|
72 | .c-nav--right {
|
73 | position: absolute;
|
74 | top: 0;
|
75 | right: 0;
|
76 | bottom: 0;
|
77 | left: auto;
|
78 | }
|
79 |
|
80 | .c-nav--fixed {
|
81 | position: fixed;
|
82 | }
|
83 |
|
84 | .c-nav__item--active {
|
85 | @include nav__item--active;
|
86 | }
|
87 |
|
88 | .c-nav__item--brand {
|
89 | @include nav__item--color($nav-item-brand-hover-background-color, $nav-item-brand-hover-color);
|
90 |
|
91 | &.c-nav__item--active {
|
92 | @include nav__item--active($nav-item-brand-active-background-color, $nav-item-brand-active-color);
|
93 | }
|
94 | }
|
95 |
|
96 | .c-nav__item--info {
|
97 | @include nav__item--color($nav-item-info-hover-background-color, $nav-item-info-hover-color);
|
98 |
|
99 | &.c-nav__item--active {
|
100 | @include nav__item--active($nav-item-info-active-background-color, $nav-item-info-active-color);
|
101 | }
|
102 | }
|
103 |
|
104 | .c-nav__item--warning {
|
105 | @include nav__item--color($color-warning);
|
106 |
|
107 | &.c-nav__item--active {
|
108 | @include nav__item--active($nav-item-warning-active-background-color, $nav-item-warning-active-color);
|
109 | }
|
110 | }
|
111 |
|
112 | .c-nav__item--success {
|
113 | @include nav__item--color($color-success);
|
114 |
|
115 | &.c-nav__item--active {
|
116 | @include nav__item--active($nav-item-success-active-background-color, $nav-item-success-active-color);
|
117 | }
|
118 | }
|
119 |
|
120 | .c-nav__item--error {
|
121 | @include nav__item--color($color-error);
|
122 |
|
123 | &.c-nav__item--active {
|
124 | @include nav__item--active($nav-item-error-active-background-color, $nav-item-error-active-color);
|
125 | }
|
126 | }
|