foundation-scss 6.3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
- data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
- data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
- data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
- data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
- data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
- data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
- data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
- data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
- data/foundation-scss.gemspec +9 -0
- data/lib/foundation/scss/in/sass_path.rb +6 -0
- data/scss/_global.scss +219 -0
- data/scss/components/_accordion-menu.scss +36 -0
- data/scss/components/_accordion.scss +150 -0
- data/scss/components/_badge.scss +63 -0
- data/scss/components/_breadcrumbs.scss +100 -0
- data/scss/components/_button-group.scss +253 -0
- data/scss/components/_button.scss +332 -0
- data/scss/components/_callout.scss +106 -0
- data/scss/components/_card.scss +121 -0
- data/scss/components/_close-button.scss +102 -0
- data/scss/components/_drilldown.scss +93 -0
- data/scss/components/_dropdown-menu.scss +226 -0
- data/scss/components/_dropdown.scss +72 -0
- data/scss/components/_flex-video.scss +1 -0
- data/scss/components/_flex.scss +34 -0
- data/scss/components/_float.scss +27 -0
- data/scss/components/_label.scss +64 -0
- data/scss/components/_media-object.scss +114 -0
- data/scss/components/_menu-icon.scss +9 -0
- data/scss/components/_menu.scss +376 -0
- data/scss/components/_off-canvas.scss +329 -0
- data/scss/components/_orbit.scss +196 -0
- data/scss/components/_pagination.scss +193 -0
- data/scss/components/_progress-bar.scss +64 -0
- data/scss/components/_responsive-embed.scss +70 -0
- data/scss/components/_reveal.scss +178 -0
- data/scss/components/_slider.scss +138 -0
- data/scss/components/_sticky.scss +38 -0
- data/scss/components/_switch.scss +247 -0
- data/scss/components/_table.scss +329 -0
- data/scss/components/_tabs.scss +196 -0
- data/scss/components/_thumbnail.scss +67 -0
- data/scss/components/_title-bar.scss +84 -0
- data/scss/components/_tooltip.scss +107 -0
- data/scss/components/_top-bar.scss +173 -0
- data/scss/components/_visibility.scss +132 -0
- data/scss/forms/_checkbox.scss +41 -0
- data/scss/forms/_error.scss +88 -0
- data/scss/forms/_fieldset.scss +54 -0
- data/scss/forms/_forms.scss +34 -0
- data/scss/forms/_help-text.scss +30 -0
- data/scss/forms/_input-group.scss +135 -0
- data/scss/forms/_label.scss +50 -0
- data/scss/forms/_meter.scss +110 -0
- data/scss/forms/_progress.scss +94 -0
- data/scss/forms/_range.scss +149 -0
- data/scss/forms/_select.scss +85 -0
- data/scss/forms/_text.scss +170 -0
- data/scss/foundation.scss +118 -0
- data/scss/grid/_classes.scss +176 -0
- data/scss/grid/_column.scss +112 -0
- data/scss/grid/_flex-grid.scss +312 -0
- data/scss/grid/_grid.scss +48 -0
- data/scss/grid/_gutter.scss +82 -0
- data/scss/grid/_layout.scss +76 -0
- data/scss/grid/_position.scss +76 -0
- data/scss/grid/_row.scss +99 -0
- data/scss/grid/_size.scss +24 -0
- data/scss/settings/_settings.scss +620 -0
- data/scss/typography/_alignment.scss +22 -0
- data/scss/typography/_base.scss +509 -0
- data/scss/typography/_helpers.scss +78 -0
- data/scss/typography/_print.scss +86 -0
- data/scss/typography/_typography.scss +26 -0
- data/scss/util/_breakpoint.scss +281 -0
- data/scss/util/_color.scss +126 -0
- data/scss/util/_direction.scss +31 -0
- data/scss/util/_flex.scss +85 -0
- data/scss/util/_math.scss +72 -0
- data/scss/util/_mixins.scss +276 -0
- data/scss/util/_selector.scss +41 -0
- data/scss/util/_typography.scss +26 -0
- data/scss/util/_unit.scss +152 -0
- data/scss/util/_util.scss +14 -0
- data/scss/util/_value.scss +160 -0
- metadata +144 -0
@@ -0,0 +1 @@
|
|
1
|
+
@import 'responsive-embed';
|
@@ -0,0 +1,34 @@
|
|
1
|
+
@mixin foundation-flex-classes {
|
2
|
+
// Horizontal alignment using justify-content
|
3
|
+
@each $hdir, $prop in map-remove($-zf-flex-justify, left) {
|
4
|
+
.align-#{$hdir} {
|
5
|
+
@include flex-align($x: $hdir);
|
6
|
+
}
|
7
|
+
}
|
8
|
+
|
9
|
+
// Vertical alignment using align-items and align-self
|
10
|
+
@each $vdir, $prop in $-zf-flex-align {
|
11
|
+
.align-#{$vdir} {
|
12
|
+
@include flex-align($y: $vdir);
|
13
|
+
}
|
14
|
+
|
15
|
+
.align-self-#{$vdir} {
|
16
|
+
@include flex-align-self($y: $vdir);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
|
20
|
+
// Central alignment of content
|
21
|
+
.align-center-middle {
|
22
|
+
@include flex-align($x: center, $y: middle);
|
23
|
+
align-content: center;
|
24
|
+
}
|
25
|
+
|
26
|
+
// Source ordering
|
27
|
+
@include -zf-each-breakpoint {
|
28
|
+
@for $i from 1 through 6 {
|
29
|
+
.#{$-zf-size}-order-#{$i} {
|
30
|
+
@include flex-order($i);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group float
|
7
|
+
////
|
8
|
+
|
9
|
+
@mixin foundation-float-classes {
|
10
|
+
.float-left {
|
11
|
+
float: left !important;
|
12
|
+
}
|
13
|
+
|
14
|
+
.float-right {
|
15
|
+
float: right !important;
|
16
|
+
}
|
17
|
+
|
18
|
+
.float-center {
|
19
|
+
display: block;
|
20
|
+
margin-right: auto;
|
21
|
+
margin-left: auto;
|
22
|
+
}
|
23
|
+
|
24
|
+
.clearfix {
|
25
|
+
@include clearfix;
|
26
|
+
}
|
27
|
+
}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group label
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Default background color for labels.
|
10
|
+
/// @type Color
|
11
|
+
$label-background: $primary-color !default;
|
12
|
+
|
13
|
+
/// Default text color for labels.
|
14
|
+
/// @type Color
|
15
|
+
$label-color: $white !default;
|
16
|
+
|
17
|
+
/// Alternate text color for labels.
|
18
|
+
/// @type Color
|
19
|
+
$label-color-alt: $black !default;
|
20
|
+
|
21
|
+
/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
|
22
|
+
/// @type Map
|
23
|
+
$label-palette: $foundation-palette !default;
|
24
|
+
|
25
|
+
/// Default font size for labels.
|
26
|
+
/// @type Number
|
27
|
+
$label-font-size: 0.8rem !default;
|
28
|
+
|
29
|
+
/// Default padding inside labels.
|
30
|
+
/// @type Number
|
31
|
+
$label-padding: 0.33333rem 0.5rem !default;
|
32
|
+
|
33
|
+
/// Default radius of labels.
|
34
|
+
/// @type Number
|
35
|
+
$label-radius: $global-radius !default;
|
36
|
+
|
37
|
+
/// Generates base styles for a label.
|
38
|
+
@mixin label {
|
39
|
+
display: inline-block;
|
40
|
+
padding: $label-padding;
|
41
|
+
|
42
|
+
border-radius: $label-radius;
|
43
|
+
|
44
|
+
font-size: $label-font-size;
|
45
|
+
line-height: 1;
|
46
|
+
white-space: nowrap;
|
47
|
+
cursor: default;
|
48
|
+
}
|
49
|
+
|
50
|
+
@mixin foundation-label {
|
51
|
+
.label {
|
52
|
+
@include label;
|
53
|
+
|
54
|
+
background: $label-background;
|
55
|
+
color: $label-color;
|
56
|
+
|
57
|
+
@each $name, $color in $label-palette {
|
58
|
+
&.#{$name} {
|
59
|
+
background: $color;
|
60
|
+
color: color-pick-contrast($color, ($label-color, $label-color-alt));
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
@@ -0,0 +1,114 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group media-object
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Bottom margin of a media object.
|
10
|
+
/// @type Number
|
11
|
+
$mediaobject-margin-bottom: $global-margin !default;
|
12
|
+
|
13
|
+
/// Left and right padding on sections within a media object.
|
14
|
+
/// @type Number
|
15
|
+
$mediaobject-section-padding: $global-padding !default;
|
16
|
+
|
17
|
+
/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
|
18
|
+
/// @type Number
|
19
|
+
$mediaobject-image-width-stacked: 100% !default;
|
20
|
+
|
21
|
+
/// Adds styles for a media object container.
|
22
|
+
@mixin media-object-container {
|
23
|
+
display: if($global-flexbox, flex, block);
|
24
|
+
margin-bottom: $mediaobject-margin-bottom;
|
25
|
+
|
26
|
+
@if $global-flexbox {
|
27
|
+
flex-wrap: nowrap;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
/// Adds styles for sections within a media object.
|
32
|
+
/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
|
33
|
+
@mixin media-object-section($padding: $mediaobject-section-padding) {
|
34
|
+
@if $global-flexbox {
|
35
|
+
flex: 0 1 auto;
|
36
|
+
}
|
37
|
+
@else {
|
38
|
+
display: table-cell;
|
39
|
+
vertical-align: top;
|
40
|
+
}
|
41
|
+
|
42
|
+
&:first-child {
|
43
|
+
padding-#{$global-right}: $padding;
|
44
|
+
}
|
45
|
+
|
46
|
+
&:last-child:not(:nth-child(2)) {
|
47
|
+
padding-#{$global-left}: $padding;
|
48
|
+
}
|
49
|
+
|
50
|
+
> :last-child {
|
51
|
+
margin-bottom: 0;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
|
56
|
+
@mixin media-object-stack {
|
57
|
+
padding: 0;
|
58
|
+
padding-bottom: $mediaobject-section-padding;
|
59
|
+
|
60
|
+
@if $global-flexbox {
|
61
|
+
flex-basis: 100%;
|
62
|
+
max-width: 100%;
|
63
|
+
}
|
64
|
+
@else {
|
65
|
+
display: block;
|
66
|
+
}
|
67
|
+
|
68
|
+
img {
|
69
|
+
width: $mediaobject-image-width-stacked;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
@mixin foundation-media-object {
|
74
|
+
.media-object {
|
75
|
+
@include media-object-container;
|
76
|
+
|
77
|
+
img {
|
78
|
+
max-width: none;
|
79
|
+
}
|
80
|
+
|
81
|
+
@if $global-flexbox {
|
82
|
+
&.stack-for-#{$-zf-zero-breakpoint} {
|
83
|
+
@include breakpoint($-zf-zero-breakpoint only) {
|
84
|
+
flex-wrap: wrap;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
&.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
|
90
|
+
@include breakpoint($-zf-zero-breakpoint only) {
|
91
|
+
@include media-object-stack;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
.media-object-section {
|
97
|
+
@include media-object-section;
|
98
|
+
|
99
|
+
@if $global-flexbox {
|
100
|
+
&.main-section {
|
101
|
+
flex: 1 1 0px; // sass-lint:disable-line zero-unit
|
102
|
+
}
|
103
|
+
}
|
104
|
+
@else {
|
105
|
+
&.middle {
|
106
|
+
vertical-align: middle;
|
107
|
+
}
|
108
|
+
|
109
|
+
&.bottom {
|
110
|
+
vertical-align: bottom;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
}
|
114
|
+
}
|
@@ -0,0 +1,376 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group menu
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Margin of a menu.
|
10
|
+
/// @type Number
|
11
|
+
$menu-margin: 0 !default;
|
12
|
+
|
13
|
+
/// Left-hand margin of a nested menu.
|
14
|
+
/// @type Number
|
15
|
+
$menu-margin-nested: 1rem !default;
|
16
|
+
|
17
|
+
/// Padding for items in a menu.
|
18
|
+
/// @type Number
|
19
|
+
$menu-item-padding: 0.7rem 1rem !default;
|
20
|
+
|
21
|
+
/// Text color of an active menu item.
|
22
|
+
/// @type Color
|
23
|
+
$menu-item-color-active: $white !default;
|
24
|
+
|
25
|
+
/// Background color of an active menu item.
|
26
|
+
/// @type Color
|
27
|
+
$menu-item-background-active: get-color(primary) !default;
|
28
|
+
|
29
|
+
/// Spacing between an icon and text in a menu item.
|
30
|
+
/// @type Number
|
31
|
+
$menu-icon-spacing: 0.25rem !default;
|
32
|
+
|
33
|
+
/// Background color for an hovered menu item.
|
34
|
+
/// @type Color
|
35
|
+
$menu-item-background-hover: $light-gray !default;
|
36
|
+
|
37
|
+
/// Color for bordered menu
|
38
|
+
/// @type Color
|
39
|
+
$menu-border: $light-gray !default;
|
40
|
+
|
41
|
+
/// Creates the base styles for a Menu.
|
42
|
+
@mixin menu-base {
|
43
|
+
margin: $menu-margin;
|
44
|
+
list-style-type: none;
|
45
|
+
|
46
|
+
@if $global-flexbox {
|
47
|
+
display: flex;
|
48
|
+
flex-wrap: nowrap;
|
49
|
+
align-items: center;
|
50
|
+
width: 100%;
|
51
|
+
}
|
52
|
+
|
53
|
+
// List items are table cell to allow for vertical alignment
|
54
|
+
> li {
|
55
|
+
@include disable-mouse-outline;
|
56
|
+
|
57
|
+
@if $global-flexbox {
|
58
|
+
flex: 0 0 auto;
|
59
|
+
}
|
60
|
+
@else {
|
61
|
+
display: table-cell;
|
62
|
+
vertical-align: middle;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
// Reset line height to make the height of the overall item easier to calculate
|
67
|
+
> li > a {
|
68
|
+
display: block;
|
69
|
+
padding: $menu-item-padding;
|
70
|
+
line-height: 1;
|
71
|
+
}
|
72
|
+
|
73
|
+
// Reset styles of inner elements
|
74
|
+
input,
|
75
|
+
select,
|
76
|
+
a,
|
77
|
+
button {
|
78
|
+
margin-bottom: 0;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
/// Expands the items of a Menu, so each item is the same width.
|
83
|
+
@mixin menu-expand {
|
84
|
+
@if $global-flexbox {
|
85
|
+
> li {
|
86
|
+
flex: 1 1 0px; // sass-lint:disable-line zero-unit
|
87
|
+
}
|
88
|
+
}
|
89
|
+
@else {
|
90
|
+
display: table;
|
91
|
+
width: 100%;
|
92
|
+
table-layout: fixed;
|
93
|
+
}
|
94
|
+
|
95
|
+
> li:first-child:last-child {
|
96
|
+
width: 100%;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
/// Sets the direction of a Menu.
|
101
|
+
/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
|
102
|
+
@mixin menu-direction($dir: horizontal) {
|
103
|
+
@if $dir == horizontal {
|
104
|
+
@if $global-flexbox {
|
105
|
+
flex-wrap: nowrap;
|
106
|
+
|
107
|
+
> li {
|
108
|
+
flex: 0 0 auto;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
@else {
|
112
|
+
> li {
|
113
|
+
display: table-cell;
|
114
|
+
}
|
115
|
+
}
|
116
|
+
}
|
117
|
+
@else if $dir == vertical {
|
118
|
+
@if $global-flexbox {
|
119
|
+
flex-wrap: wrap;
|
120
|
+
|
121
|
+
> li {
|
122
|
+
flex: 0 0 100%;
|
123
|
+
max-width: 100%;
|
124
|
+
}
|
125
|
+
|
126
|
+
> li > a {
|
127
|
+
justify-content: flex-start;
|
128
|
+
align-items: flex-start;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
@else {
|
132
|
+
> li {
|
133
|
+
display: block;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
}
|
137
|
+
@else {
|
138
|
+
@warn 'The direction used for menu-direction() must be horizontal or vertical.';
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
/// Creates a simple Menu, which has no padding or hover state.
|
143
|
+
/// @param {Keyword} $dir [$global-left] - Direction of the menu. Set to `null` to do not generate styles for direction.
|
144
|
+
@mixin menu-simple($dir: $global-left) {
|
145
|
+
li {
|
146
|
+
display: inline-block;
|
147
|
+
vertical-align: top;
|
148
|
+
line-height: 1;
|
149
|
+
}
|
150
|
+
|
151
|
+
a {
|
152
|
+
padding: 0;
|
153
|
+
}
|
154
|
+
|
155
|
+
@if $dir != null {
|
156
|
+
@include menu-simple-direction($dir);
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
/// Direction modifier for a simple Menu
|
161
|
+
/// @param {Keyword} $dir [$global-left] - Direction of the menu
|
162
|
+
@mixin menu-simple-direction($dir: $global-left) {
|
163
|
+
$no-margin-dir: $dir;
|
164
|
+
$margin-dir: direction-opposite($dir);
|
165
|
+
|
166
|
+
li {
|
167
|
+
margin-#{$no-margin-dir}: 0;
|
168
|
+
margin-#{$margin-dir}: get-side($menu-item-padding, $margin-dir);
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
172
|
+
/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
|
173
|
+
/// @param {Keyword|Number} $padding [auto] - Length of the margin.
|
174
|
+
@mixin menu-nested($margin: $menu-margin-nested) {
|
175
|
+
margin-#{$global-left}: $margin;
|
176
|
+
}
|
177
|
+
|
178
|
+
/// Adds support for icons to Menu items.
|
179
|
+
/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
|
180
|
+
/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
|
181
|
+
@mixin menu-icons($position: side, $base: true) {
|
182
|
+
@if $base {
|
183
|
+
@if $global-flexbox {
|
184
|
+
> li > a {
|
185
|
+
display: flex;
|
186
|
+
}
|
187
|
+
}
|
188
|
+
@else {
|
189
|
+
> li > a {
|
190
|
+
img,
|
191
|
+
i,
|
192
|
+
svg {
|
193
|
+
vertical-align: middle;
|
194
|
+
|
195
|
+
+ span {
|
196
|
+
vertical-align: middle;
|
197
|
+
}
|
198
|
+
}
|
199
|
+
}
|
200
|
+
}
|
201
|
+
}
|
202
|
+
|
203
|
+
@if $position == side {
|
204
|
+
> li > a {
|
205
|
+
@if $global-flexbox {
|
206
|
+
flex-flow: row nowrap;
|
207
|
+
}
|
208
|
+
|
209
|
+
img,
|
210
|
+
i,
|
211
|
+
svg {
|
212
|
+
margin-#{$global-right}: $menu-icon-spacing;
|
213
|
+
|
214
|
+
@if not $global-flexbox {
|
215
|
+
display: inline-block;
|
216
|
+
}
|
217
|
+
}
|
218
|
+
}
|
219
|
+
}
|
220
|
+
@else if $position == top {
|
221
|
+
> li > a {
|
222
|
+
@if $global-flexbox {
|
223
|
+
flex-flow: column nowrap;
|
224
|
+
}
|
225
|
+
@else {
|
226
|
+
text-align: center;
|
227
|
+
}
|
228
|
+
|
229
|
+
img,
|
230
|
+
i,
|
231
|
+
svg {
|
232
|
+
@if not $global-flexbox {
|
233
|
+
display: block;
|
234
|
+
margin: 0 auto $menu-icon-spacing;
|
235
|
+
}
|
236
|
+
@else {
|
237
|
+
align-self: stretch;
|
238
|
+
margin-bottom: $menu-icon-spacing;
|
239
|
+
text-align: center;
|
240
|
+
}
|
241
|
+
}
|
242
|
+
}
|
243
|
+
}
|
244
|
+
}
|
245
|
+
|
246
|
+
@mixin menu-text {
|
247
|
+
padding-top: 0;
|
248
|
+
padding-bottom: 0;
|
249
|
+
padding: $menu-item-padding;
|
250
|
+
|
251
|
+
font-weight: bold;
|
252
|
+
line-height: 1;
|
253
|
+
color: inherit;
|
254
|
+
}
|
255
|
+
|
256
|
+
@mixin foundation-menu {
|
257
|
+
.menu {
|
258
|
+
@include menu-base;
|
259
|
+
@include menu-icons;
|
260
|
+
|
261
|
+
// Default orientation: horizontal
|
262
|
+
&, &.horizontal {
|
263
|
+
@include menu-direction(horizontal);
|
264
|
+
}
|
265
|
+
|
266
|
+
// Even-width modifier for horizontal orientation
|
267
|
+
&.expanded {
|
268
|
+
@include menu-expand;
|
269
|
+
}
|
270
|
+
|
271
|
+
// Vertical orientation modifier
|
272
|
+
&.vertical {
|
273
|
+
@include menu-direction(vertical);
|
274
|
+
}
|
275
|
+
|
276
|
+
@include -zf-each-breakpoint($small: false) {
|
277
|
+
&.#{$-zf-size}-horizontal {
|
278
|
+
@include menu-direction(horizontal);
|
279
|
+
}
|
280
|
+
|
281
|
+
&.#{$-zf-size}-expanded {
|
282
|
+
@include menu-expand;
|
283
|
+
}
|
284
|
+
|
285
|
+
&.#{$-zf-size}-vertical {
|
286
|
+
@include menu-direction(vertical);
|
287
|
+
}
|
288
|
+
}
|
289
|
+
|
290
|
+
// Simple
|
291
|
+
&.simple {
|
292
|
+
@include menu-simple;
|
293
|
+
|
294
|
+
&.align-#{$global-right} {
|
295
|
+
@include menu-simple-direction($global-right);
|
296
|
+
}
|
297
|
+
}
|
298
|
+
|
299
|
+
// Align right
|
300
|
+
&.align-#{$global-right} {
|
301
|
+
@if $global-flexbox {
|
302
|
+
justify-content: flex-end;
|
303
|
+
}
|
304
|
+
@else {
|
305
|
+
@include clearfix;
|
306
|
+
|
307
|
+
> li {
|
308
|
+
float: $global-right;
|
309
|
+
}
|
310
|
+
}
|
311
|
+
}
|
312
|
+
|
313
|
+
// Vertical icons
|
314
|
+
&.icon-top {
|
315
|
+
@include menu-icons(top, $base: false);
|
316
|
+
// Make vertical menu with icons on top work
|
317
|
+
&.vertical {
|
318
|
+
a > span {
|
319
|
+
margin: auto;
|
320
|
+
}
|
321
|
+
}
|
322
|
+
}
|
323
|
+
|
324
|
+
// Nesting
|
325
|
+
&.nested {
|
326
|
+
@include menu-nested;
|
327
|
+
}
|
328
|
+
|
329
|
+
// Active state
|
330
|
+
.active > a {
|
331
|
+
background: $menu-item-background-active;
|
332
|
+
color: $menu-item-color-active;
|
333
|
+
}
|
334
|
+
|
335
|
+
// Menu with border
|
336
|
+
&.menu-bordered {
|
337
|
+
li {
|
338
|
+
border: 1px solid $menu-border;
|
339
|
+
&:not(:first-child) {
|
340
|
+
border-top: 0;
|
341
|
+
}
|
342
|
+
}
|
343
|
+
}
|
344
|
+
|
345
|
+
// Menu with background hover
|
346
|
+
&.menu-hover {
|
347
|
+
li:hover {
|
348
|
+
background-color: $menu-item-background-hover;
|
349
|
+
}
|
350
|
+
}
|
351
|
+
}
|
352
|
+
|
353
|
+
.menu-text {
|
354
|
+
@include menu-text;
|
355
|
+
}
|
356
|
+
|
357
|
+
// Align center
|
358
|
+
.menu-centered {
|
359
|
+
text-align: center;
|
360
|
+
|
361
|
+
> .menu {
|
362
|
+
@if $global-flexbox {
|
363
|
+
@include flex-align($x: center, $y: top);
|
364
|
+
}
|
365
|
+
@else {
|
366
|
+
display: inline-block;
|
367
|
+
vertical-align: top;
|
368
|
+
}
|
369
|
+
}
|
370
|
+
}
|
371
|
+
|
372
|
+
// Prevent FOUC when using the Responsive Menu plugin
|
373
|
+
.no-js [data-responsive-menu] ul {
|
374
|
+
display: none;
|
375
|
+
}
|
376
|
+
}
|