Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

371
LINES

< > BotCompany Repo | #1029895 // https://raw.githubusercontent.com/thednp/navbar.js/master/dist/css/navbar.css

Document

1  
/*!
2  
* Navbar.js v2.1.0 (http://thednp.github.io/navbar.js)
3  
* Copyright 2016-2020 © thednp
4  
* Licensed under MIT (https://github.com/thednp/navbar.js/blob/master/LICENSE)
5  
*/
6  
.navbar {
7  
  display: flex;
8  
  flex-direction: row;
9  
  justify-content: space-between;
10  
  flex-wrap: wrap;
11  
  line-height: 1.5rem;
12  
  font-size: 14px;
13  
  padding: 0;
14  
}
15  
.navbar > div {
16  
  display: none;
17  
  flex-direction: column;
18  
  flex-basis: 100%;
19  
  flex-grow: 1;
20  
}
21  
.navbar.open-mobile > div {
22  
  display: flex;
23  
}
24  
.navbar .nav {
25  
  flex-direction: column;
26  
}
27  
.navbar .brand {
28  
  display: flex;
29  
  text-decoration: none;
30  
  white-space: nowrap;
31  
  align-items: center;
32  
  padding: 0.5rem 1rem;
33  
  font-size: 18px;
34  
}
35  
36  
.navbar-toggle {
37  
  border-radius: 0.25rem;
38  
  color: currentColor;
39  
  border: 1px solid transparent;
40  
  background: transparent;
41  
  margin: auto 1rem;
42  
  align-self: center;
43  
  display: flex;
44  
  align-items: center;
45  
  padding: 0.125rem 0.5rem;
46  
}
47  
.navbar-toggle:focus {
48  
  outline: none;
49  
}
50  
51  
.open-mobile .navbar-toggle {
52  
  border-color: currentColor;
53  
}
54  
55  
@media (min-width: 768px) {
56  
  .navbar {
57  
    align-items: center;
58  
    flex-direction: row;
59  
    flex-wrap: nowrap;
60  
    justify-content: flex-start;
61  
  }
62  
  .navbar > div {
63  
    justify-content: space-between;
64  
    display: flex;
65  
    flex-direction: row;
66  
    align-items: center;
67  
    flex-basis: auto;
68  
  }
69  
  .navbar .nav {
70  
    flex-direction: row;
71  
  }
72  
73  
  .navbar-toggle {
74  
    display: none;
75  
  }
76  
}
77  
.navbar-content a:not([class]), .navbar-content b,
78  
.subnav-content a:not([class]),
79  
.subnav-content b {
80  
  color: rgba(255, 255, 255, 0.75);
81  
}
82  
83  
@media (min-width: 768px) {
84  
  .navbar-content a:not([class]):hover {
85  
    color: rgba(255, 255, 255, 0.95);
86  
  }
87  
}
88  
.navbar {
89  
  background: #687c86;
90  
  color: rgba(255, 255, 255, 0.55);
91  
}
92  
.navbar .brand {
93  
  color: rgba(255, 255, 255, 0.85);
94  
}
95  
@media (min-width: 768px) {
96  
  .navbar .brand {
97  
    background: #2c3c44;
98  
    color: rgba(255, 255, 255, 0.85);
99  
  }
100  
  .navbar .brand:hover {
101  
    color: rgba(255, 255, 255, 0.95);
102  
  }
103  
}
104  
105  
.nav li > a,
106  
.nav li > span,
107  
.navbar-content,
108  
.subnav-content {
109  
  padding: 0.5rem 1rem;
110  
}
111  
112  
.nav {
113  
  display: flex;
114  
}
115  
.nav, .nav ul {
116  
  margin: 0;
117  
  padding: 0;
118  
  list-style: none;
119  
}
120  
.nav li {
121  
  position: relative;
122  
  transition: margin 0.3s ease 0s;
123  
}
124  
.nav li > span,
125  
.nav li > a {
126  
  display: flex;
127  
  flex-direction: row;
128  
  justify-content: space-between;
129  
  align-items: center;
130  
  overflow: hidden;
131  
  font-size: 14px;
132  
  line-height: 1.5rem;
133  
}
134  
.nav li > a {
135  
  text-decoration: none;
136  
}
137  
.nav li > span > span,
138  
.nav li > a > span {
139  
  white-space: nowrap;
140  
  overflow: hidden;
141  
  text-overflow: ellipsis;
142  
}
143  
144  
div.subnav > ul > li.open-mobile > span + ul,
145  
div.subnav > ul > li.open-mobile > span + div,
146  
li.open-mobile > .subnav {
147  
  display: block;
148  
}
149  
150  
.open-mobile > span > .parent-toggle,
151  
.open-mobile > a > .parent-toggle,
152  
.open-mobile .parent-toggle:focus {
153  
  border-color: currentColor;
154  
}
155  
.open-mobile + .open-mobile {
156  
  margin-top: 0.5rem;
157  
}
158  
159  
.subnav,
160  
div.subnav > ul > li > span + ul,
161  
div.subnav > ul > li > span + div,
162  
.parent-icon {
163  
  display: none;
164  
}
165  
166  
.subnav-content p, .subnav-content ul {
167  
  margin-bottom: 0.5rem;
168  
}
169  
170  
ul.subnav,
171  
div.subnav ul {
172  
  padding: 0 0 0 1rem;
173  
}
174  
175  
.menu-icon,
176  
.parent-icon,
177  
.parent-toggle {
178  
  width: 1.5rem;
179  
  height: 1.5rem;
180  
  fill: currentColor;
181  
  text-align: center;
182  
  line-height: 1.5rem;
183  
}
184  
185  
.menu-icon {
186  
  font-size: 1.4rem;
187  
}
188  
189  
.parent-toggle {
190  
  border-radius: 0.25rem;
191  
  border: 1px solid transparent;
192  
}
193  
194  
.menu-icon + span {
195  
  flex: auto;
196  
  margin-left: 0.5rem;
197  
}
198  
199  
span > .parent-toggle {
200  
  cursor: pointer;
201  
}
202  
203  
@media (min-width: 768px) {
204  
  .parent-toggle {
205  
    display: none;
206  
  }
207  
208  
  .parent-icon,
209  
div.subnav > ul > li > span + div,
210  
div.subnav > ul > li > span + ul {
211  
    display: block;
212  
  }
213  
214  
  .subnav {
215  
    opacity: 0;
216  
    position: absolute;
217  
    display: block;
218  
    line-height: 1.5rem;
219  
    font-size: 14px;
220  
  }
221  
  ul.subnav,
222  
div.subnav ul {
223  
    padding: 0;
224  
  }
225  
226  
  li.open-mobile {
227  
    background: none;
228  
    transition: none;
229  
  }
230  
  li.open-mobile + .open-mobile {
231  
    margin: 0;
232  
  }
233  
234  
  .column-title,
235  
div.subnav > ul > li > span {
236  
    font-size: 120%;
237  
  }
238  
239  
  .subnav li > a,
240  
.subnav li > span,
241  
.subnav-content {
242  
    padding: 0.5rem 1rem;
243  
  }
244  
245  
  .nav > li > .subnav {
246  
    margin: 0 0 0;
247  
  }
248  
249  
  ul.subnav {
250  
    width: 200px;
251  
  }
252  
253  
  div.subnav {
254  
    min-width: 600px;
255  
  }
256  
  div.subnav > ul {
257  
    margin: 0;
258  
  }
259  
  div.subnav.m1 {
260  
    min-width: 200px;
261  
  }
262  
  div.subnav.m2 {
263  
    min-width: 400px;
264  
  }
265  
  div.subnav.m3 {
266  
    min-width: 600px;
267  
  }
268  
  div.subnav.m4 {
269  
    min-width: 800px;
270  
  }
271  
}
272  
.nav li > a,
273  
.nav li > span {
274  
  color: rgba(255, 255, 255, 0.55);
275  
}
276  
.nav li.open-mobile {
277  
  background: rgba(0, 0, 0, 0.075);
278  
}
279  
@media (min-width: 768px) {
280  
  .nav > li.open > span,
281  
.nav > li.open > a,
282  
.nav > li:hover > span,
283  
.nav > li:hover > a {
284  
    background: rgba(0, 0, 0, 0.35);
285  
    color: rgba(255, 255, 255, 0.75);
286  
  }
287  
  .nav > li.active > span,
288  
.nav > li.active > a,
289  
.nav > li.active.open > span,
290  
.nav > li.active.open > a,
291  
.nav > li.active:hover > span,
292  
.nav > li.active:hover > a {
293  
    background: #006699;
294  
    color: #fff;
295  
  }
296  
}
297  
298  
@media (min-width: 768px) {
299  
  .subnav {
300  
    background: #dadee0;
301  
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.25), 1px 1px 0 0px rgba(0, 0, 0, 0.15) inset;
302  
  }
303  
  .subnav .subnav {
304  
    background: #ccd2d4;
305  
  }
306  
  .subnav .subnav .subnav {
307  
    background: #c5cbcf;
308  
  }
309  
  .subnav li > span,
310  
.subnav li > a {
311  
    color: rgba(0, 0, 0, 0.55);
312  
  }
313  
  .subnav li.open > a, .subnav li:hover > a {
314  
    background: rgba(0, 0, 0, 0.4);
315  
    color: rgba(255, 255, 255, 0.75);
316  
  }
317  
  .subnav li.active > span,
318  
.subnav li.active > a, .subnav li.active:hover > span,
319  
.subnav li.active:hover > a {
320  
    background: #006699;
321  
    color: #fff;
322  
  }
323  
324  
  .column-title,
325  
div.subnav > ul > li > span {
326  
    color: rgba(0, 0, 0, 0.95);
327  
  }
328  
329  
  div.subnav > ul > li > ul > li.open > span,
330  
div.subnav > ul > li > ul > li:hover > span,
331  
ul.subnav > li.open > span,
332  
ul.subnav > li:hover > span {
333  
    background: rgba(0, 0, 0, 0.4);
334  
    color: rgba(255, 255, 255, 0.8);
335  
  }
336  
337  
  div.subnav {
338  
    color: rgba(0, 0, 0, 0.55);
339  
  }
340  
341  
  .subnav-content a:not([class]), .subnav-content b {
342  
    color: rgba(0, 0, 0, 0.75);
343  
  }
344  
  .subnav-content a:not([class]):hover {
345  
    color: rgba(0, 0, 0, 0.95);
346  
  }
347  
}
348  
@media (min-width: 768px) {
349  
  .nav li > .subnav {
350  
    top: -99999em;
351  
    left: -99999em;
352  
    transform: translate(0, -10px);
353  
    transition: transform 0.5s ease, opacity 0.4s linear;
354  
  }
355  
  .nav li li > .subnav {
356  
    transform: translate(-10px);
357  
  }
358  
  .nav li li.open-position > .subnav {
359  
    top: 0;
360  
    left: 100%;
361  
  }
362  
  .nav li.open-position > .subnav {
363  
    top: 100%;
364  
    left: 0;
365  
    z-index: 1;
366  
  }
367  
  .nav li.open > .subnav {
368  
    transform: translate(0);
369  
    opacity: 1;
370  
  }
371  
}

download  show line numbers   

Travelled to 5 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, tvejysmllsmz, vouqrxazstgt

No comments. add comment

Snippet ID: #1029895
Snippet name: https://raw.githubusercontent.com/thednp/navbar.js/master/dist/css/navbar.css
Eternal ID of this version: #1029895/1
Text MD5: 3c7ee53a5b253e9c27581d73aa2d785c
Author: stefan
Category:
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-09-28 16:44:43
Source code size: 6671 bytes / 371 lines
Pitched / IR pitched: No / No
Views / Downloads: 189 / 66
Referenced in: [show references]