-
Notifications
You must be signed in to change notification settings - Fork 5.5k
/
_top-bar.scss
175 lines (147 loc) · 3.49 KB
/
_top-bar.scss
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
// Foundation for Sites
// https://get.foundation
// Licensed under MIT Open Source
////
/// @group top-bar
////
/// Padding for the top bar.
/// @type Number
$topbar-padding: 0.5rem !default;
/// Background color for the top bar. This color also cascades to menus within the top bar.
/// @type Color
$topbar-background: $light-gray !default;
/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
/// @type Color
$topbar-submenu-background: $topbar-background !default;
/// Spacing for the top bar title.
/// @type Number
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default;
/// Maximum width of `<input>` elements inside the top bar.
/// @type Number
$topbar-input-width: 200px !default;
/// Breakpoint at which top bar switches from mobile to desktop view.
/// @type Breakpoint
$topbar-unstack-breakpoint: medium !default;
/// Adds styles for a top bar container.
@mixin top-bar-container {
@if $global-flexbox {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
@else {
@include clearfix;
}
padding: $topbar-padding;
&,
ul {
background-color: $topbar-background;
}
// Check if $topbar-background is differnt from $topbar-background-submenu
@if ($topbar-background != $topbar-submenu-background) {
ul ul {
background-color: $topbar-submenu-background;
}
}
// Restrain width of inputs by default to make them easier to arrange
input {
max-width: $topbar-input-width;
margin-#{$global-right}: 1rem;
}
// The above styles shouldn't apply to input group fields
.input-group-field {
width: 100%;
margin-#{$global-right}: 0;
}
input.button { // sass-lint:disable-line no-qualifying-elements
width: auto;
}
}
/// Makes sections of a top bar stack on top of each other.
@mixin top-bar-stacked {
@if $global-flexbox {
flex-wrap: wrap;
// Sub-sections
.top-bar-left,
.top-bar-right {
flex: 0 0 100%;
max-width: 100%;
}
}
@else {
// Sub-sections
.top-bar-left,
.top-bar-right {
width: 100%;
}
}
}
/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
@mixin top-bar-unstack {
@if $global-flexbox {
flex-wrap: nowrap;
.top-bar-left {
flex: 1 1 auto;
margin-right: auto;
}
.top-bar-right {
flex: 0 1 auto;
margin-left: auto;
}
}
@else {
.top-bar-left,
.top-bar-right {
width: auto;
}
}
}
@mixin foundation-top-bar {
// Top bar container
.top-bar {
@include top-bar-container;
// Stack on small screens by default
@include top-bar-stacked;
@include breakpoint($topbar-unstack-breakpoint) {
@include top-bar-unstack;
}
// Generate classes for stacking on each screen size (defined in $breakpoint-classes)
@each $size in $breakpoint-classes {
@if $size != $-zf-zero-breakpoint {
&.stacked-for-#{$size} {
@include breakpoint($size down) {
@include top-bar-stacked;
}
}
}
}
}
// Sub-sections
@if $global-flexbox {
.top-bar-title {
flex: 0 0 auto;
margin: $topbar-title-spacing;
}
.top-bar-left,
.top-bar-right {
flex: 0 0 auto;
}
}
@else {
.top-bar-title {
display: inline-block;
float: left;
padding: $topbar-title-spacing;
.menu-icon {
bottom: 2px;
}
}
.top-bar-left {
float: left;
}
.top-bar-right {
float: right;
}
}
}