-
Notifications
You must be signed in to change notification settings - Fork 0
/
6_navbar.styl
141 lines (141 loc) · 3.19 KB
/
6_navbar.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@require "./2_variables"
@require "./4_zLevels"
nav
&.nav-extended
height: auto
.nav-wrapper
min-height: $navbar-height-mobile
height: auto
.nav-content
position: relative
line-height: normal
color: $navbar-font-color
@extend .z-depth-1
background-color: $primary-color
width: 100%
height: $navbar-height-mobile
line-height: $navbar-line-height-mobile
a
color: $navbar-font-color
i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons
display: block
font-size: 24px
height: $navbar-height-mobile
line-height: $navbar-line-height-mobile
.nav-wrapper
position: relative
height: 100%
+screenOnlyAnd($large-and-up)
a.button-collapse
display: none
// Collapse button
.button-collapse
float: left
position: relative
z-index: 1
height: $navbar-height-mobile
margin: 0 18px
i
height: $navbar-height-mobile
line-height: $navbar-line-height-mobile
// Logo
.brand-logo
position: absolute
color: $navbar-font-color
display: inline-block
font-size: $navbar-brand-font-size
padding: 0
&.center
left: 50%
transform: translateX(-50%)
+screenOnlyAnd($medium-and-down)
left: 50%
transform: translateX(-50%)
&.left, &.right
padding: 0
transform: none
&.left
left: 0.5rem
&.right
right: 0.5rem
left: auto
&.right
right: 0.5rem
padding: 0
i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons
float: left
margin-right: 15px
// Title
.nav-title
display: inline-block
font-size: 32px
padding: 28px 0
// Navbar Links
ul
margin: 0
li
transition: background-color .3s
float: left
padding: 0
&.active
background-color: rgba(0, 0, 0, 0.1)
a
transition: background-color .3s
font-size: $navbar-font-size
color: $navbar-font-color
display: block
padding: 0 15px
cursor: pointer
&.btn, &.btn-large, &.btn-flat, &.btn-floating
margin-top: -2px
margin-left: 15px
margin-right: 15px
& > .material-icons
height: inherit
line-height: inherit
&:hover
background-color: rgba(0, 0, 0, 0.1)
&.left
float: left
// Navbar Search Form
form
height: 100%
.input-field
margin: 0
height: 100%
input
height: 100%
font-size: 1.2rem
border: none
padding-left: 2rem
&:focus, &[type=text]:valid, &[type=password]:valid,
&[type=email]:valid, &[type=url]:valid, &[type=date]:valid
border: none
box-shadow: none
label
top: 0
left: 0
i
color: rgba(255, 255, 255, 0.7)
transition: color .3s
&.active i
color: $navbar-font-color
// Fixed Navbar
.navbar-fixed
position: relative
height: $navbar-height-mobile
z-index: 997
nav
position: fixed
+screenOnlyAnd($medium-and-up)
nav.nav-extended .nav-wrapper
min-height: $navbar-height
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i
height: $navbar-height
line-height: $navbar-line-height
.navbar-fixed
height: $navbar-height