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,102 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group close-button
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
|
10
|
+
/// @type List
|
11
|
+
$closebutton-position: right top !default;
|
12
|
+
|
13
|
+
/// Right (or left) offset(s) for a close button.
|
14
|
+
/// @type Number|Map
|
15
|
+
$closebutton-offset-horizontal: (
|
16
|
+
small: 0.66rem,
|
17
|
+
medium: 1rem,
|
18
|
+
) !default;
|
19
|
+
|
20
|
+
/// Top (or bottom) offset(s) for a close button.
|
21
|
+
/// @type Number|Map
|
22
|
+
$closebutton-offset-vertical: (
|
23
|
+
small: 0.33em,
|
24
|
+
medium: 0.5rem,
|
25
|
+
) !default;
|
26
|
+
|
27
|
+
/// Default font size(s) of the close button.
|
28
|
+
/// @type Number|Map
|
29
|
+
$closebutton-size: (
|
30
|
+
small: 1.5em,
|
31
|
+
medium: 2em,
|
32
|
+
) !default;
|
33
|
+
|
34
|
+
/// The line-height of the close button. It affects the spacing of the element.
|
35
|
+
/// @type Number
|
36
|
+
$closebutton-lineheight: 1 !default;
|
37
|
+
|
38
|
+
/// Default color of the close button.
|
39
|
+
/// @type Color
|
40
|
+
$closebutton-color: $dark-gray !default;
|
41
|
+
|
42
|
+
/// Default color of the close button when being hovered on.
|
43
|
+
/// @type Color
|
44
|
+
$closebutton-color-hover: $black !default;
|
45
|
+
|
46
|
+
|
47
|
+
/// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.
|
48
|
+
///
|
49
|
+
/// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.
|
50
|
+
/// @param {Keyword} $size - The size of the close button to use.
|
51
|
+
///
|
52
|
+
/// @return {Number} The given number or the value found in the map.
|
53
|
+
@function -zf-get-size-val($value, $size) {
|
54
|
+
// Check if the value is a number
|
55
|
+
@if type-of($value) == 'number' {
|
56
|
+
// If it is, just return the number
|
57
|
+
@return $value;
|
58
|
+
}
|
59
|
+
|
60
|
+
// Check if the size name exists in the value map
|
61
|
+
@else if map-has-key($value, $size) {
|
62
|
+
// If it does, return the value
|
63
|
+
@return map-get($value, $size);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
/// Sets the size and position of a close button.
|
68
|
+
/// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
|
69
|
+
@mixin close-button-size($size) {
|
70
|
+
$x: nth($closebutton-position, 1);
|
71
|
+
$y: nth($closebutton-position, 2);
|
72
|
+
|
73
|
+
#{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
|
74
|
+
#{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
|
75
|
+
font-size: -zf-get-size-val($closebutton-size, $size);
|
76
|
+
line-height: -zf-get-size-val($closebutton-lineheight, $size);
|
77
|
+
}
|
78
|
+
|
79
|
+
/// Adds styles for a close button, using the styles in the settings variables.
|
80
|
+
@mixin close-button {
|
81
|
+
$x: nth($closebutton-position, 1);
|
82
|
+
$y: nth($closebutton-position, 2);
|
83
|
+
|
84
|
+
@include disable-mouse-outline;
|
85
|
+
position: absolute;
|
86
|
+
color: $closebutton-color;
|
87
|
+
cursor: pointer;
|
88
|
+
|
89
|
+
&:hover,
|
90
|
+
&:focus {
|
91
|
+
color: $closebutton-color-hover;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
@mixin foundation-close-button {
|
96
|
+
.close-button {
|
97
|
+
@include close-button;
|
98
|
+
|
99
|
+
&.small { @include close-button-size(small) }
|
100
|
+
&, &.medium { @include close-button-size(medium) }
|
101
|
+
}
|
102
|
+
}
|
@@ -0,0 +1,93 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group drilldown
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Transition property to use for animating menus.
|
10
|
+
/// @type Transition
|
11
|
+
$drilldown-transition: transform 0.15s linear !default;
|
12
|
+
|
13
|
+
/// Adds arrows to drilldown items with submenus, as well as the back button.
|
14
|
+
/// @type Boolean
|
15
|
+
$drilldown-arrows: true !default;
|
16
|
+
|
17
|
+
/// Sets drilldown arrow color if arrow is used.
|
18
|
+
/// @type Color
|
19
|
+
$drilldown-arrow-color: $primary-color !default;
|
20
|
+
|
21
|
+
/// Sets drilldown arrow size if arrow is used.
|
22
|
+
/// @type Length
|
23
|
+
$drilldown-arrow-size: 6px !default;
|
24
|
+
|
25
|
+
/// Background color for drilldown submenus.
|
26
|
+
/// @type Color
|
27
|
+
$drilldown-background: $white !default;
|
28
|
+
|
29
|
+
@mixin foundation-drilldown-menu {
|
30
|
+
// Applied to the Menu container
|
31
|
+
.is-drilldown {
|
32
|
+
position: relative;
|
33
|
+
overflow: hidden;
|
34
|
+
|
35
|
+
li {
|
36
|
+
display: block;
|
37
|
+
}
|
38
|
+
|
39
|
+
&.animate-height {
|
40
|
+
transition: height 0.5s;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
// Applied to nested <ul>s
|
45
|
+
.is-drilldown-submenu {
|
46
|
+
position: absolute;
|
47
|
+
top: 0;
|
48
|
+
#{$global-left}: 100%;
|
49
|
+
z-index: -1;
|
50
|
+
|
51
|
+
width: 100%;
|
52
|
+
background: $drilldown-background;
|
53
|
+
transition: $drilldown-transition;
|
54
|
+
|
55
|
+
&.is-active {
|
56
|
+
z-index: 1;
|
57
|
+
display: block;
|
58
|
+
transform: translateX(if($global-text-direction == ltr, -100%, 100%));
|
59
|
+
}
|
60
|
+
|
61
|
+
&.is-closing {
|
62
|
+
transform: translateX(if($global-text-direction == ltr, 100%, -100%));
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
.drilldown-submenu-cover-previous {
|
67
|
+
min-height: 100%;
|
68
|
+
}
|
69
|
+
|
70
|
+
@if $drilldown-arrows {
|
71
|
+
.is-drilldown-submenu-parent > a {
|
72
|
+
position: relative;
|
73
|
+
|
74
|
+
&::after {
|
75
|
+
@include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
|
76
|
+
position: absolute;
|
77
|
+
top: 50%;
|
78
|
+
margin-top: -1 * $drilldown-arrow-size;
|
79
|
+
#{$global-right}: 1rem;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
.js-drilldown-back > a::before {
|
84
|
+
@include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
|
85
|
+
border-#{$global-left}-width: 0;
|
86
|
+
display: inline-block;
|
87
|
+
vertical-align: middle;
|
88
|
+
margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
|
89
|
+
|
90
|
+
border-#{$global-left}-width: 0;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
}
|
@@ -0,0 +1,226 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group dropdown-menu
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Enables arrows for items with dropdown menus.
|
10
|
+
/// @type Boolean
|
11
|
+
$dropdownmenu-arrows: true !default;
|
12
|
+
|
13
|
+
/// Sets dropdown menu arrow color if arrow is used.
|
14
|
+
/// @type Color
|
15
|
+
$dropdownmenu-arrow-color: $anchor-color !default;
|
16
|
+
|
17
|
+
/// Sets dropdown menu arrow size if arrow is used.
|
18
|
+
/// @type Length
|
19
|
+
$dropdownmenu-arrow-size: 6px !default;
|
20
|
+
|
21
|
+
/// Minimum width of dropdown sub-menus.
|
22
|
+
/// @type Length
|
23
|
+
$dropdownmenu-min-width: 200px !default;
|
24
|
+
|
25
|
+
/// Background color for dropdowns.
|
26
|
+
/// @type Color
|
27
|
+
$dropdownmenu-background: $white !default;
|
28
|
+
|
29
|
+
/// Border for dropdown sub-menus.
|
30
|
+
/// @type List
|
31
|
+
$dropdownmenu-border: 1px solid $medium-gray !default;
|
32
|
+
|
33
|
+
// Border width for dropdown sub-menus.
|
34
|
+
// Used to adjust top margin of a sub-menu if a border is used.
|
35
|
+
// @type Length
|
36
|
+
$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
|
37
|
+
|
38
|
+
@mixin left-right-arrows {
|
39
|
+
> a::after {
|
40
|
+
#{$global-right}: 14px;
|
41
|
+
}
|
42
|
+
|
43
|
+
&.opens-left > a::after {
|
44
|
+
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
|
45
|
+
}
|
46
|
+
|
47
|
+
&.opens-right > a::after {
|
48
|
+
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
@mixin dropdown-menu-direction($dir: horizontal) {
|
53
|
+
@if $dir == horizontal {
|
54
|
+
> li.opens-left {
|
55
|
+
> .is-dropdown-submenu {
|
56
|
+
top: 100%;
|
57
|
+
right: 0;
|
58
|
+
left: auto;
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
> li.opens-right {
|
63
|
+
> .is-dropdown-submenu {
|
64
|
+
top: 100%;
|
65
|
+
right: auto;
|
66
|
+
left: 0;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
@if $dropdownmenu-arrows {
|
71
|
+
> li.is-dropdown-submenu-parent > a {
|
72
|
+
position: relative;
|
73
|
+
padding-#{$global-right}: 1.5rem;
|
74
|
+
}
|
75
|
+
|
76
|
+
> li.is-dropdown-submenu-parent > a::after {
|
77
|
+
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
|
78
|
+
#{$global-right}: 5px;
|
79
|
+
margin-top: -1 * ($dropdownmenu-arrow-size / 2);
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}
|
83
|
+
@else if $dir == vertical {
|
84
|
+
> li {
|
85
|
+
.is-dropdown-submenu {
|
86
|
+
top: 0;
|
87
|
+
}
|
88
|
+
|
89
|
+
&.opens-left {
|
90
|
+
> .is-dropdown-submenu {
|
91
|
+
right: 100%;
|
92
|
+
left: auto;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
&.opens-right {
|
97
|
+
> .is-dropdown-submenu {
|
98
|
+
right: auto;
|
99
|
+
left: 100%;
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
@if $dropdownmenu-arrows {
|
104
|
+
@include left-right-arrows;
|
105
|
+
}
|
106
|
+
}
|
107
|
+
}
|
108
|
+
@else {
|
109
|
+
@warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
|
110
|
+
}
|
111
|
+
}
|
112
|
+
|
113
|
+
@mixin foundation-dropdown-menu {
|
114
|
+
.dropdown.menu {
|
115
|
+
@include dropdown-menu-direction(horizontal);
|
116
|
+
|
117
|
+
a {
|
118
|
+
@include disable-mouse-outline;
|
119
|
+
}
|
120
|
+
|
121
|
+
.no-js & ul {
|
122
|
+
display: none;
|
123
|
+
}
|
124
|
+
|
125
|
+
&.vertical {
|
126
|
+
@include dropdown-menu-direction(vertical);
|
127
|
+
}
|
128
|
+
|
129
|
+
@each $size in $breakpoint-classes {
|
130
|
+
@if $size != $-zf-zero-breakpoint {
|
131
|
+
@include breakpoint($size) {
|
132
|
+
&.#{$size}-horizontal {
|
133
|
+
@include dropdown-menu-direction(horizontal);
|
134
|
+
}
|
135
|
+
|
136
|
+
&.#{$size}-vertical {
|
137
|
+
@include dropdown-menu-direction(vertical);
|
138
|
+
}
|
139
|
+
}
|
140
|
+
}
|
141
|
+
}
|
142
|
+
|
143
|
+
&.align-right {
|
144
|
+
.is-dropdown-submenu.first-sub {
|
145
|
+
top: 100%;
|
146
|
+
right: 0;
|
147
|
+
left: auto;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
}
|
151
|
+
|
152
|
+
.is-dropdown-menu.vertical {
|
153
|
+
width: 100px;
|
154
|
+
|
155
|
+
&.align-right {
|
156
|
+
float: right;
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
.is-dropdown-submenu-parent {
|
161
|
+
position: relative;
|
162
|
+
|
163
|
+
a::after {
|
164
|
+
position: absolute;
|
165
|
+
top: 50%;
|
166
|
+
#{$global-right}: 5px;
|
167
|
+
margin-top: -1 * $dropdownmenu-arrow-size;
|
168
|
+
}
|
169
|
+
|
170
|
+
&.opens-inner > .is-dropdown-submenu {
|
171
|
+
|
172
|
+
top: 100%;
|
173
|
+
@if $global-text-direction == 'rtl' {
|
174
|
+
right: auto;
|
175
|
+
}
|
176
|
+
@else {
|
177
|
+
left: auto;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
&.opens-left > .is-dropdown-submenu {
|
182
|
+
right: 100%;
|
183
|
+
left: auto;
|
184
|
+
}
|
185
|
+
|
186
|
+
&.opens-right > .is-dropdown-submenu {
|
187
|
+
right: auto;
|
188
|
+
left: 100%;
|
189
|
+
}
|
190
|
+
}
|
191
|
+
|
192
|
+
.is-dropdown-submenu {
|
193
|
+
position: absolute;
|
194
|
+
top: 0;
|
195
|
+
#{$global-left}: 100%;
|
196
|
+
z-index: 1;
|
197
|
+
|
198
|
+
display: none;
|
199
|
+
min-width: $dropdownmenu-min-width;
|
200
|
+
|
201
|
+
border: $dropdownmenu-border;
|
202
|
+
background: $dropdownmenu-background;
|
203
|
+
|
204
|
+
.is-dropdown-submenu-parent {
|
205
|
+
@if $dropdownmenu-arrows {
|
206
|
+
@include left-right-arrows;
|
207
|
+
}
|
208
|
+
}
|
209
|
+
|
210
|
+
@if (type-of($dropdownmenu-border-width) == 'number') {
|
211
|
+
.is-dropdown-submenu {
|
212
|
+
margin-top: (-$dropdownmenu-border-width);
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
> li {
|
217
|
+
width: 100%;
|
218
|
+
}
|
219
|
+
|
220
|
+
// [TODO] Cut back specificity
|
221
|
+
//&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
|
222
|
+
&.js-dropdown-active {
|
223
|
+
display: block;
|
224
|
+
}
|
225
|
+
}
|
226
|
+
}
|
@@ -0,0 +1,72 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group dropdown
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Padding for dropdown panes.
|
10
|
+
/// @type List
|
11
|
+
$dropdown-padding: 1rem !default;
|
12
|
+
|
13
|
+
/// Background for dropdown panes.
|
14
|
+
/// @type Color
|
15
|
+
$dropdown-background: $body-background !default;
|
16
|
+
|
17
|
+
/// Border for dropdown panes.
|
18
|
+
/// @type List
|
19
|
+
$dropdown-border: 1px solid $medium-gray !default;
|
20
|
+
|
21
|
+
/// Font size for dropdown panes.
|
22
|
+
/// @type List
|
23
|
+
$dropdown-font-size: 1rem !default;
|
24
|
+
|
25
|
+
/// Width for dropdown panes.
|
26
|
+
/// @type Number
|
27
|
+
$dropdown-width: 300px !default;
|
28
|
+
|
29
|
+
/// Border radius dropdown panes.
|
30
|
+
/// @type Number
|
31
|
+
$dropdown-radius: $global-radius !default;
|
32
|
+
|
33
|
+
/// Sizes for dropdown panes. Each size is a CSS class you can apply.
|
34
|
+
/// @type Map
|
35
|
+
$dropdown-sizes: (
|
36
|
+
tiny: 100px,
|
37
|
+
small: 200px,
|
38
|
+
large: 400px,
|
39
|
+
) !default;
|
40
|
+
|
41
|
+
/// Applies styles for a basic dropdown.
|
42
|
+
@mixin dropdown-container {
|
43
|
+
position: absolute;
|
44
|
+
z-index: 10;
|
45
|
+
|
46
|
+
display: block;
|
47
|
+
width: $dropdown-width;
|
48
|
+
padding: $dropdown-padding;
|
49
|
+
|
50
|
+
visibility: hidden;
|
51
|
+
border: $dropdown-border;
|
52
|
+
border-radius: $dropdown-radius;
|
53
|
+
background-color: $dropdown-background;
|
54
|
+
|
55
|
+
font-size: $dropdown-font-size;
|
56
|
+
|
57
|
+
&.is-open {
|
58
|
+
visibility: visible;
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
@mixin foundation-dropdown {
|
63
|
+
.dropdown-pane {
|
64
|
+
@include dropdown-container;
|
65
|
+
}
|
66
|
+
|
67
|
+
@each $name, $size in $dropdown-sizes {
|
68
|
+
.dropdown-pane.#{$name} {
|
69
|
+
width: $size;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|