Attribute changed material-kit
[bootswatch] / material-kit / sass / material-kit / _navbar.scss
1 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
2
3 .navbar {
4 //   background-color: $brand-primary;
5   border: 0;
6   border-radius: $border-radius-base;
7   @include shadow-big-navbar();
8
9   @extend .animation-transition-fast;
10
11   padding: 10px 0;
12
13   .navbar-brand {
14     position: relative;
15     height: 50px;
16     line-height: 30px;
17     color: inherit;
18     padding: 10px 15px;
19
20     &:hover,
21     &:focus {
22       color: inherit;
23       background-color: transparent;
24     }
25   }
26
27   .navbar-text {
28     color: inherit;
29     margin-top: 15px;
30     margin-bottom: 15px;
31   }
32
33   .navbar-nav {
34     > li > a {
35       color: inherit;
36       padding-top: 15px;
37       padding-bottom: 15px;
38
39       font-weight: $font-weight-default;
40       font-size: $mdb-btn-font-size-base;
41       text-transform: uppercase;
42
43       border-radius: $border-radius-base;
44
45       &:hover,
46       &:focus {
47         color: inherit;
48         background-color: transparent;
49       }
50
51
52       .material-icons,
53       .fa{
54             font-size: 20px;
55             max-width: 20px;
56       }
57
58       &:not(.btn-just-icon){
59           .fa{
60             position: relative;
61             top: 2px;
62             margin-top: -4px;
63             margin-right: 4px;
64           }
65       }
66     }
67
68     > li > .dropdown-menu{
69         margin-top: -20px;
70     }
71
72     > li.open > .dropdown-menu{
73         margin-top: 0;
74     }
75
76     > .active > a {
77       &,
78       &:hover,
79       &:focus {
80         color: inherit;
81         background-color: rgba(255, 255, 255, 0.1);
82       }
83     }
84     > .disabled > a {
85       &,
86       &:hover,
87       &:focus {
88         color: inherit;
89         background-color: transparent;
90         opacity: 0.9;
91       }
92     }
93   }
94
95   // Darken the responsive nav toggle
96   .navbar-toggle {
97     border: 0;
98     &:hover,
99     &:focus {
100       background-color: transparent;
101     }
102     .icon-bar {
103       background-color: inherit;
104       border: 1px solid;
105     }
106   }
107
108   .navbar-default .navbar-toggle,
109   .navbar-inverse .navbar-toggle {
110     border-color: transparent;
111   }
112
113   .navbar-collapse,
114   .navbar-form {
115     border-top: none;
116     box-shadow: none;
117   }
118
119   // Dropdowns
120   .navbar-nav {
121     > .open > a {
122       &,
123       &:hover,
124       &:focus {
125         background-color: transparent;
126         color: inherit;
127       }
128     }
129
130     @media (max-width: $grid-float-breakpoint-max) {
131       .navbar-text {
132         color: inherit;
133         margin-top: 15px;
134         margin-bottom: 15px;
135       }
136
137       // Dropdowns get custom display
138       .open .dropdown-menu {
139         > .dropdown-header {
140           border: 0;
141           color: inherit;
142         }
143         .divider {
144           border-bottom: 1px solid;
145           opacity: 0.08;
146         }
147         > li > a {
148           color: inherit;
149           &:hover,
150           &:focus {
151             color: inherit;
152             background-color: transparent;
153           }
154         }
155         > .active > a {
156           &,
157           &:hover,
158           &:focus {
159             color: inherit;
160             background-color: transparent;
161           }
162         }
163         > .disabled > a {
164           &,
165           &:hover,
166           &:focus {
167             color: inherit;
168             background-color: transparent;
169           }
170         }
171       }
172     }
173   }
174
175     &.navbar-default{
176         .logo-container .brand{
177             color: $gray;
178         }
179     }
180
181   .navbar-link {
182     color: inherit;
183     &:hover {
184       color: inherit;
185     }
186   }
187
188   .btn{
189       margin-top: 0;
190       margin-bottom: 0;
191   }
192   .btn-link {
193     color: inherit;
194     &:hover,
195     &:focus {
196       color: inherit;
197     }
198     &[disabled],
199     fieldset[disabled] & {
200       &:hover,
201       &:focus {
202         color: inherit;
203       }
204     }
205   }
206
207   .navbar-form {
208     margin: 4px 0 0;
209     .form-group {
210       margin: 0;
211       padding: 0;
212
213       .material-input:before,
214       &.is-focused .material-input:after {
215         background-color: inherit;
216       }
217     }
218
219     .form-group .form-control,
220     .form-control {
221       border-color: inherit;
222       color: inherit;
223       padding: 0;
224       margin: 0;
225
226       // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
227       //---
228       //height: $mdb-input-height-base;
229       $bs-line-height-base: 1.428571429 !default;
230       $bs-line-height-computed:    floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
231       height: ($bs-line-height-computed + 8px);
232       font-size: $font-size-base;
233       line-height: $bs-line-height-base;
234       //---
235     }
236   }
237
238   // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
239   @include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary);
240
241
242   &-inverse {
243     background-color: $indigo;
244   }
245
246   &.navbar-transparent{
247       background-color: transparent;
248       box-shadow: none;
249       color: #fff;
250       padding-top: 25px;
251
252       .logo-container .brand{
253           color: $white-color;
254       }
255   }
256   &-fixed-top{
257       border-radius: 0;
258   }
259   @media (max-width: $screen-md-max) {
260
261     .navbar-brand {
262       height: 50px;
263       padding: 10px 15px;
264     }
265 /*
266     .navbar-form {
267       margin-top: 10px;
268     }
269 */
270
271     .navbar-nav > li > a {
272       padding-top: 15px;
273       padding-bottom: 15px;
274     }
275   }
276
277     .alert{
278         border-radius: 0;
279         left: 0;
280         position: absolute;
281         right: 0;
282         top: 85px;
283         width: 100%;
284         z-index: 3;
285         transition: all 0.3s;
286     }
287 }