foundation-sass-rails 5.5.3.2
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/.gitignore +11 -0
- data/.rspec +3 -0
- data/.travis.yml +5 -0
- data/Gemfile +6 -0
- data/Gemfile.lock +37 -0
- data/LICENSE.txt +21 -0
- data/README.md +62 -0
- data/Rakefile +6 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/foundation-sass-rails.gemspec +29 -0
- data/lib/foundation-sass-rails.rb +8 -0
- data/lib/foundation/version.rb +5 -0
- data/lib/generators/foundation/overrides_generator.rb +39 -0
- data/vendor/assets/stylesheets/foundation.scss +42 -0
- data/vendor/assets/stylesheets/foundation/_functions.scss +156 -0
- data/vendor/assets/stylesheets/foundation/_settings.scss +1489 -0
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +161 -0
- data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +128 -0
- data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +133 -0
- data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +132 -0
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +208 -0
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +261 -0
- data/vendor/assets/stylesheets/foundation/components/_clearing.scss +260 -0
- data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +130 -0
- data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +269 -0
- data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +51 -0
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +607 -0
- data/vendor/assets/stylesheets/foundation/components/_global.scss +566 -0
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +292 -0
- data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +460 -0
- data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +58 -0
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +220 -0
- data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +60 -0
- data/vendor/assets/stylesheets/foundation/components/_labels.scss +106 -0
- data/vendor/assets/stylesheets/foundation/components/_magellan.scss +34 -0
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +606 -0
- data/vendor/assets/stylesheets/foundation/components/_orbit.scss +388 -0
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +163 -0
- data/vendor/assets/stylesheets/foundation/components/_panels.scss +107 -0
- data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +150 -0
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +85 -0
- data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +177 -0
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +212 -0
- data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +120 -0
- data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +203 -0
- data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +125 -0
- data/vendor/assets/stylesheets/foundation/components/_switches.scss +241 -0
- data/vendor/assets/stylesheets/foundation/components/_tables.scss +135 -0
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +142 -0
- data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +66 -0
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +142 -0
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +745 -0
- data/vendor/assets/stylesheets/foundation/components/_type.scss +525 -0
- data/vendor/assets/stylesheets/foundation/components/_visibility.scss +425 -0
- data/vendor/assets/stylesheets/normalize.scss +424 -0
- metadata +163 -0
@@ -0,0 +1,260 @@
|
|
1
|
+
// Foundation by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
@import 'global';
|
6
|
+
|
7
|
+
//
|
8
|
+
// @variables
|
9
|
+
//
|
10
|
+
$include-html-clearing-classes: $include-html-classes !default;
|
11
|
+
|
12
|
+
// We use these to set the background colors for parts of Clearing.
|
13
|
+
$clearing-bg: $oil !default;
|
14
|
+
$clearing-caption-bg: $clearing-bg !default;
|
15
|
+
$clearing-carousel-bg: rgba(51,51,51,0.8) !default;
|
16
|
+
$clearing-img-bg: $clearing-bg !default;
|
17
|
+
|
18
|
+
// We use these to style the close button
|
19
|
+
$clearing-close-color: $iron !default;
|
20
|
+
$clearing-close-size: 30px !default;
|
21
|
+
|
22
|
+
// We use these to style the arrows
|
23
|
+
$clearing-arrow-size: 12px !default;
|
24
|
+
$clearing-arrow-color: $clearing-close-color !default;
|
25
|
+
|
26
|
+
// We use these to style captions
|
27
|
+
$clearing-caption-font-color: $iron !default;
|
28
|
+
$clearing-caption-font-size: .875em !default;
|
29
|
+
$clearing-caption-padding: 10px 30px 20px !default;
|
30
|
+
|
31
|
+
// We use these to make the image and carousel height and style
|
32
|
+
$clearing-active-img-height: 85% !default;
|
33
|
+
$clearing-carousel-height: 120px !default;
|
34
|
+
$clearing-carousel-thumb-width: 120px !default;
|
35
|
+
$clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
|
36
|
+
|
37
|
+
@include exports("clearing") {
|
38
|
+
@if $include-html-clearing-classes {
|
39
|
+
// We decided to not create a mixin for Clearing because it relies
|
40
|
+
// on predefined classes and structure to work properly.
|
41
|
+
// The variables above should give enough control.
|
42
|
+
|
43
|
+
/* Clearing Styles */
|
44
|
+
.clearing-thumbs, #{data('clearing')} {
|
45
|
+
@include clearfix;
|
46
|
+
list-style: none;
|
47
|
+
margin-#{$default-float}: 0;
|
48
|
+
margin-bottom: 0;
|
49
|
+
|
50
|
+
li {
|
51
|
+
float: $default-float;
|
52
|
+
margin-#{$opposite-direction}: 10px;
|
53
|
+
}
|
54
|
+
|
55
|
+
&[class*="block-grid-"] li {
|
56
|
+
margin-#{$opposite-direction}: 0;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
.clearing-blackout {
|
61
|
+
background: $clearing-bg;
|
62
|
+
height: 100%;
|
63
|
+
position: fixed;
|
64
|
+
top: 0;
|
65
|
+
width: 100%;
|
66
|
+
z-index: 998;
|
67
|
+
#{$default-float}: 0;
|
68
|
+
|
69
|
+
.clearing-close { display: block; }
|
70
|
+
}
|
71
|
+
|
72
|
+
.clearing-container {
|
73
|
+
height: 100%;
|
74
|
+
margin: 0;
|
75
|
+
overflow: hidden;
|
76
|
+
position: relative;
|
77
|
+
z-index: 998;
|
78
|
+
}
|
79
|
+
|
80
|
+
.clearing-touch-label {
|
81
|
+
color: $base;
|
82
|
+
font-size: .6em;
|
83
|
+
left: 50%;
|
84
|
+
position: absolute;
|
85
|
+
top: 50%;
|
86
|
+
}
|
87
|
+
|
88
|
+
.visible-img {
|
89
|
+
height: 95%;
|
90
|
+
position: relative;
|
91
|
+
|
92
|
+
img {
|
93
|
+
position: absolute;
|
94
|
+
#{$default-float}: 50%;
|
95
|
+
top: 50%;
|
96
|
+
@if $default-float == left {
|
97
|
+
-webkit-transform: translateY(-50%) translateX(-50%);
|
98
|
+
-moz-transform: translateY(-50%) translateX(-50%);
|
99
|
+
-ms-transform: translateY(-50%) translateX(-50%);
|
100
|
+
-o-transform: translateY(-50%) translateX(-50%);
|
101
|
+
transform: translateY(-50%) translateX(-50%);
|
102
|
+
}
|
103
|
+
@else {
|
104
|
+
-webkit-transform: translateY(-50%) translateX(50%);
|
105
|
+
-moz-transform: translateY(-50%) translateX(50%);
|
106
|
+
-ms-transform: translateY(-50%) translateX(50%);
|
107
|
+
-o-transform: translateY(-50%) translateX(50%);
|
108
|
+
transform: translateY(-50%) translateX(50%);
|
109
|
+
};
|
110
|
+
max-height: 100%;
|
111
|
+
max-width: 100%;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
.clearing-caption {
|
116
|
+
background: $clearing-caption-bg;
|
117
|
+
bottom: 0;
|
118
|
+
color: $clearing-caption-font-color;
|
119
|
+
font-size: $clearing-caption-font-size;
|
120
|
+
line-height: 1.3;
|
121
|
+
margin-bottom: 0;
|
122
|
+
padding: $clearing-caption-padding;
|
123
|
+
position: absolute;
|
124
|
+
text-align: center;
|
125
|
+
width: 100%;
|
126
|
+
#{$default-float}: 0;
|
127
|
+
}
|
128
|
+
|
129
|
+
.clearing-close {
|
130
|
+
color: $clearing-close-color;
|
131
|
+
display: none;
|
132
|
+
font-size: $clearing-close-size;
|
133
|
+
line-height: 1;
|
134
|
+
padding-#{$default-float}: 20px;
|
135
|
+
padding-top: 10px;
|
136
|
+
z-index: 999;
|
137
|
+
|
138
|
+
&:hover,
|
139
|
+
&:focus { color: $iron; }
|
140
|
+
}
|
141
|
+
|
142
|
+
.clearing-assembled .clearing-container { height: 100%;
|
143
|
+
.carousel > ul { display: none; }
|
144
|
+
}
|
145
|
+
|
146
|
+
// If you want to show a lightbox, but only have a single image come through as the thumbnail
|
147
|
+
.clearing-feature li {
|
148
|
+
display: none;
|
149
|
+
&.clearing-featured-img {
|
150
|
+
display: block;
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
// Large screen overrides
|
155
|
+
@media #{$medium-up} {
|
156
|
+
.clearing-main-prev,
|
157
|
+
.clearing-main-next {
|
158
|
+
height: 100%;
|
159
|
+
position: absolute;
|
160
|
+
top: 0;
|
161
|
+
width: 40px;
|
162
|
+
> span {
|
163
|
+
border: solid $clearing-arrow-size;
|
164
|
+
display: block;
|
165
|
+
height: 0;
|
166
|
+
position: absolute;
|
167
|
+
top: 50%;
|
168
|
+
width: 0;
|
169
|
+
&:hover { opacity: .8; }
|
170
|
+
}
|
171
|
+
}
|
172
|
+
.clearing-main-prev {
|
173
|
+
#{$default-float}: 0;
|
174
|
+
> span {
|
175
|
+
#{$default-float}: 5px;
|
176
|
+
border-color: transparent;
|
177
|
+
border-#{$opposite-direction}-color: $clearing-arrow-color;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
.clearing-main-next {
|
181
|
+
#{$opposite-direction}: 0;
|
182
|
+
> span {
|
183
|
+
border-color: transparent;
|
184
|
+
border-#{$default-float}-color: $clearing-arrow-color;
|
185
|
+
}
|
186
|
+
}
|
187
|
+
|
188
|
+
.clearing-main-prev.disabled,
|
189
|
+
.clearing-main-next.disabled { opacity: .3; }
|
190
|
+
|
191
|
+
.clearing-assembled .clearing-container {
|
192
|
+
|
193
|
+
.carousel {
|
194
|
+
background: $clearing-carousel-bg;
|
195
|
+
height: $clearing-carousel-height;
|
196
|
+
margin-top: 10px;
|
197
|
+
text-align: center;
|
198
|
+
|
199
|
+
> ul {
|
200
|
+
display: inline-block;
|
201
|
+
z-index: 999;
|
202
|
+
height: 100%;
|
203
|
+
position: relative;
|
204
|
+
float: none;
|
205
|
+
|
206
|
+
li {
|
207
|
+
clear: none;
|
208
|
+
cursor: $cursor-pointer-value;
|
209
|
+
display: block;
|
210
|
+
float: $default-float;
|
211
|
+
margin-#{$opposite-direction}: 0;
|
212
|
+
min-height: inherit;
|
213
|
+
opacity: .4;
|
214
|
+
overflow: hidden;
|
215
|
+
padding: 0;
|
216
|
+
position: relative;
|
217
|
+
width: $clearing-carousel-thumb-width;
|
218
|
+
|
219
|
+
&.fix-height {
|
220
|
+
img {
|
221
|
+
height: 100%;
|
222
|
+
max-width: none;
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
a.th {
|
227
|
+
border: none;
|
228
|
+
box-shadow: none;
|
229
|
+
display: block;
|
230
|
+
}
|
231
|
+
|
232
|
+
img {
|
233
|
+
cursor: $cursor-pointer-value !important;
|
234
|
+
width: 100% !important;
|
235
|
+
}
|
236
|
+
|
237
|
+
&.visible { opacity: 1; }
|
238
|
+
&:hover { opacity: .8; }
|
239
|
+
}
|
240
|
+
}
|
241
|
+
}
|
242
|
+
|
243
|
+
.visible-img {
|
244
|
+
background: $clearing-img-bg;
|
245
|
+
height: $clearing-active-img-height;
|
246
|
+
overflow: hidden;
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
.clearing-close {
|
251
|
+
padding-#{$default-float}: 0;
|
252
|
+
padding-top: 0;
|
253
|
+
position: absolute;
|
254
|
+
top: 10px;
|
255
|
+
#{$opposite-direction}: 20px;
|
256
|
+
}
|
257
|
+
}
|
258
|
+
|
259
|
+
}
|
260
|
+
}
|
@@ -0,0 +1,130 @@
|
|
1
|
+
// Foundation by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
@import 'global';
|
6
|
+
|
7
|
+
//
|
8
|
+
// @variables
|
9
|
+
//
|
10
|
+
$include-html-button-classes: $include-html-classes !default;
|
11
|
+
|
12
|
+
// We use these to set the color of the pip in dropdown buttons
|
13
|
+
$dropdown-button-pip-color: $white !default;
|
14
|
+
$dropdown-button-pip-color-alt: $oil !default;
|
15
|
+
|
16
|
+
// We use these to set the size of the pip in dropdown buttons
|
17
|
+
$button-pip-tny: rem-calc(6) !default;
|
18
|
+
$button-pip-sml: rem-calc(7) !default;
|
19
|
+
$button-pip-med: rem-calc(9) !default;
|
20
|
+
$button-pip-lrg: rem-calc(11) !default;
|
21
|
+
|
22
|
+
// We use these to style tiny dropdown buttons
|
23
|
+
$dropdown-button-padding-tny: $button-pip-tny * 7 !default;
|
24
|
+
$dropdown-button-pip-size-tny: $button-pip-tny !default;
|
25
|
+
$dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
|
26
|
+
$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
|
27
|
+
|
28
|
+
// We use these to style small dropdown buttons
|
29
|
+
$dropdown-button-padding-sml: $button-pip-sml * 7 !default;
|
30
|
+
$dropdown-button-pip-size-sml: $button-pip-sml !default;
|
31
|
+
$dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
|
32
|
+
$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
|
33
|
+
|
34
|
+
// We use these to style medium dropdown buttons
|
35
|
+
$dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
|
36
|
+
$dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
|
37
|
+
$dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
|
38
|
+
$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
|
39
|
+
|
40
|
+
// We use these to style large dropdown buttons
|
41
|
+
$dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
|
42
|
+
$dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
|
43
|
+
$dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
|
44
|
+
$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
|
45
|
+
|
46
|
+
// @mixins
|
47
|
+
//
|
48
|
+
// Dropdown Button Mixin
|
49
|
+
//
|
50
|
+
// We use this mixin to build off of the button mixin and add dropdown button styles
|
51
|
+
//
|
52
|
+
// $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
|
53
|
+
// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
|
54
|
+
// $base-style - Add in base-styles. This can be set to false. Default:true
|
55
|
+
|
56
|
+
@mixin dropdown-button($padding:medium, $pip-color:$dropdown-button-pip-color, $base-style:true) {
|
57
|
+
|
58
|
+
// We add in base styles, but they can be negated by setting to 'false'.
|
59
|
+
@if $base-style {
|
60
|
+
position: relative;
|
61
|
+
|
62
|
+
// This creates the base styles for the triangle pip
|
63
|
+
&::after {
|
64
|
+
border-color: $dropdown-button-pip-color transparent transparent transparent;
|
65
|
+
border-style: solid;
|
66
|
+
content: "";
|
67
|
+
display: block;
|
68
|
+
height: 0;
|
69
|
+
position: absolute;
|
70
|
+
top: 50%;
|
71
|
+
width: 0;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
// If we're dealing with tiny buttons, use these styles
|
76
|
+
@if $padding == tiny {
|
77
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
|
78
|
+
&:after {
|
79
|
+
border-width: $dropdown-button-pip-size-tny;
|
80
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
|
81
|
+
margin-top: $dropdown-button-pip-top-tny;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
|
85
|
+
// If we're dealing with small buttons, use these styles
|
86
|
+
@if $padding == small {
|
87
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
|
88
|
+
&::after {
|
89
|
+
border-width: $dropdown-button-pip-size-sml;
|
90
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
|
91
|
+
margin-top: $dropdown-button-pip-top-sml;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
// If we're dealing with default (medium) buttons, use these styles
|
96
|
+
@if $padding == medium {
|
97
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-med;
|
98
|
+
&::after {
|
99
|
+
border-width: $dropdown-button-pip-size-med;
|
100
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
|
101
|
+
margin-top: $dropdown-button-pip-top-med;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
// If we're dealing with large buttons, use these styles
|
106
|
+
@if $padding == large {
|
107
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
|
108
|
+
&::after {
|
109
|
+
border-width: $dropdown-button-pip-size-lrg;
|
110
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
|
111
|
+
margin-top: $dropdown-button-pip-top-lrg;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
|
116
|
+
@if $pip-color {
|
117
|
+
&::after { border-color: $pip-color transparent transparent transparent; }
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
@include exports("dropdown-button") {
|
122
|
+
@if $include-html-button-classes {
|
123
|
+
.dropdown.button, button.dropdown { @include dropdown-button;
|
124
|
+
&.tiny { @include dropdown-button(tiny, $base-style:false); }
|
125
|
+
&.small { @include dropdown-button(small, $base-style:false); }
|
126
|
+
&.large { @include dropdown-button(large, $base-style:false); }
|
127
|
+
&.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
128
|
+
}
|
129
|
+
}
|
130
|
+
}
|
@@ -0,0 +1,269 @@
|
|
1
|
+
// Foundation by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
@import 'global';
|
6
|
+
|
7
|
+
//
|
8
|
+
// @variables
|
9
|
+
//
|
10
|
+
$include-html-dropdown-classes: $include-html-classes !default;
|
11
|
+
|
12
|
+
// We use these to controls height and width styles.
|
13
|
+
$f-dropdown-max-width: 200px !default;
|
14
|
+
$f-dropdown-height: auto !default;
|
15
|
+
$f-dropdown-max-height: none !default;
|
16
|
+
|
17
|
+
// Used for bottom position
|
18
|
+
$f-dropdown-margin-top: 2px !default;
|
19
|
+
|
20
|
+
// Used for right position
|
21
|
+
$f-dropdown-margin-left: $f-dropdown-margin-top !default;
|
22
|
+
|
23
|
+
// Used for left position
|
24
|
+
$f-dropdown-margin-right: $f-dropdown-margin-top !default;
|
25
|
+
|
26
|
+
// Used for top position
|
27
|
+
$f-dropdown-margin-bottom: $f-dropdown-margin-top !default;
|
28
|
+
|
29
|
+
// We use this to control the background color
|
30
|
+
$f-dropdown-bg: $white !default;
|
31
|
+
|
32
|
+
// We use this to set the border styles for dropdowns.
|
33
|
+
$f-dropdown-border-style: solid !default;
|
34
|
+
$f-dropdown-border-width: 1px !default;
|
35
|
+
$f-dropdown-border-color: scale-color($white, $lightness: -20%) !default;
|
36
|
+
|
37
|
+
// We use these to style the triangle pip.
|
38
|
+
$f-dropdown-triangle-size: 6px !default;
|
39
|
+
$f-dropdown-triangle-color: $white !default;
|
40
|
+
$f-dropdown-triangle-side-offset: 10px !default;
|
41
|
+
|
42
|
+
// We use these to control styles for the list elements.
|
43
|
+
$f-dropdown-list-style: none !default;
|
44
|
+
$f-dropdown-font-color: $charcoal !default;
|
45
|
+
$f-dropdown-font-size: rem-calc(14) !default;
|
46
|
+
$f-dropdown-list-padding: rem-calc(5, 10) !default;
|
47
|
+
$f-dropdown-line-height: rem-calc(18) !default;
|
48
|
+
$f-dropdown-list-hover-bg: $smoke !default;
|
49
|
+
$dropdown-mobile-default-float: 0 !default;
|
50
|
+
|
51
|
+
// We use this to control the styles for when the dropdown has custom content.
|
52
|
+
$f-dropdown-content-padding: rem-calc(20) !default;
|
53
|
+
|
54
|
+
// Default radius for dropdown.
|
55
|
+
$f-dropdown-radius: $global-radius !default;
|
56
|
+
|
57
|
+
//
|
58
|
+
// @mixins
|
59
|
+
//
|
60
|
+
//
|
61
|
+
// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
|
62
|
+
// We use this to style the dropdown container element.
|
63
|
+
// $content-list - Sets list-style. Default: list. Options: [list, content]
|
64
|
+
// $triangle - Sets if dropdown has triangle. Default:true.
|
65
|
+
// $max-width - Default: $f-dropdown-max-width || 200px.
|
66
|
+
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
|
67
|
+
display: none;
|
68
|
+
left: -9999px;
|
69
|
+
list-style: $f-dropdown-list-style;
|
70
|
+
margin-#{$default-float}: 0;
|
71
|
+
position: absolute;
|
72
|
+
|
73
|
+
&.open {
|
74
|
+
display: block;
|
75
|
+
}
|
76
|
+
|
77
|
+
> *:first-child { margin-top: 0; }
|
78
|
+
> *:last-child { margin-bottom: 0; }
|
79
|
+
|
80
|
+
@if $content == list {
|
81
|
+
background: $f-dropdown-bg;
|
82
|
+
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
83
|
+
font-size: $f-dropdown-font-size;
|
84
|
+
height: $f-dropdown-height;
|
85
|
+
max-height: $f-dropdown-max-height;
|
86
|
+
width: 100%;
|
87
|
+
z-index: 89;
|
88
|
+
}
|
89
|
+
@else if $content == content {
|
90
|
+
background: $f-dropdown-bg;
|
91
|
+
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
92
|
+
font-size: $f-dropdown-font-size;
|
93
|
+
height: $f-dropdown-height;
|
94
|
+
max-height: $f-dropdown-max-height;
|
95
|
+
padding: $f-dropdown-content-padding;
|
96
|
+
width: 100%;
|
97
|
+
z-index: 89;
|
98
|
+
}
|
99
|
+
|
100
|
+
@if $triangle == bottom {
|
101
|
+
margin-top: $f-dropdown-margin-top;
|
102
|
+
|
103
|
+
@if $f-dropdown-triangle-size != 0px {
|
104
|
+
|
105
|
+
&:before {
|
106
|
+
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
|
107
|
+
position: absolute;
|
108
|
+
top: -($f-dropdown-triangle-size * 2);
|
109
|
+
#{$default-float}: $f-dropdown-triangle-side-offset;
|
110
|
+
z-index: 89;
|
111
|
+
}
|
112
|
+
&:after {
|
113
|
+
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
|
114
|
+
position: absolute;
|
115
|
+
top: -(($f-dropdown-triangle-size + 1) * 2);
|
116
|
+
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
|
117
|
+
z-index: 88;
|
118
|
+
}
|
119
|
+
|
120
|
+
&.right:before {
|
121
|
+
#{$default-float}: auto;
|
122
|
+
#{$opposite-direction}: $f-dropdown-triangle-side-offset;
|
123
|
+
}
|
124
|
+
&.right:after {
|
125
|
+
#{$default-float}: auto;
|
126
|
+
#{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
}
|
130
|
+
|
131
|
+
@if $triangle == $default-float {
|
132
|
+
margin-top: 0;
|
133
|
+
margin-#{$default-float}: $f-dropdown-margin-right;
|
134
|
+
|
135
|
+
&:before {
|
136
|
+
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
|
137
|
+
position: absolute;
|
138
|
+
top: $f-dropdown-triangle-side-offset;
|
139
|
+
#{$default-float}: -($f-dropdown-triangle-size * 2);
|
140
|
+
z-index: 89;
|
141
|
+
}
|
142
|
+
&:after {
|
143
|
+
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
|
144
|
+
position: absolute;
|
145
|
+
top: $f-dropdown-triangle-side-offset - 1;
|
146
|
+
#{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
|
147
|
+
z-index: 88;
|
148
|
+
}
|
149
|
+
|
150
|
+
}
|
151
|
+
|
152
|
+
@if $triangle == $opposite-direction {
|
153
|
+
margin-top: 0;
|
154
|
+
margin-#{$default-float}: -$f-dropdown-margin-right;
|
155
|
+
|
156
|
+
&:before {
|
157
|
+
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
|
158
|
+
position: absolute;
|
159
|
+
top: $f-dropdown-triangle-side-offset;
|
160
|
+
#{$opposite-direction}: -($f-dropdown-triangle-size * 2);
|
161
|
+
#{$default-float}: auto;
|
162
|
+
z-index: 89;
|
163
|
+
}
|
164
|
+
&:after {
|
165
|
+
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
|
166
|
+
position: absolute;
|
167
|
+
top: $f-dropdown-triangle-side-offset - 1;
|
168
|
+
#{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
|
169
|
+
#{$default-float}: auto;
|
170
|
+
z-index: 88;
|
171
|
+
}
|
172
|
+
|
173
|
+
}
|
174
|
+
|
175
|
+
@if $triangle == top {
|
176
|
+
margin-left: 0;
|
177
|
+
margin-top: -$f-dropdown-margin-bottom;
|
178
|
+
|
179
|
+
&:before {
|
180
|
+
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top);
|
181
|
+
bottom: -($f-dropdown-triangle-size * 2);
|
182
|
+
position: absolute;
|
183
|
+
top: auto;
|
184
|
+
#{$default-float}: $f-dropdown-triangle-side-offset;
|
185
|
+
#{$opposite-direction}: auto;
|
186
|
+
z-index: 89;
|
187
|
+
}
|
188
|
+
&:after {
|
189
|
+
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
|
190
|
+
bottom: -($f-dropdown-triangle-size * 2) - 2;
|
191
|
+
position: absolute;
|
192
|
+
top: auto;
|
193
|
+
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
|
194
|
+
#{$opposite-direction}: auto;
|
195
|
+
z-index: 88;
|
196
|
+
}
|
197
|
+
|
198
|
+
}
|
199
|
+
|
200
|
+
@if $max-width { max-width: $max-width; }
|
201
|
+
@else { max-width: $f-dropdown-max-width; }
|
202
|
+
|
203
|
+
}
|
204
|
+
|
205
|
+
// @MIXIN
|
206
|
+
//
|
207
|
+
// We use this to style the list elements or content inside the dropdown.
|
208
|
+
|
209
|
+
@mixin dropdown-style {
|
210
|
+
cursor: $cursor-pointer-value;
|
211
|
+
font-size: $f-dropdown-font-size;
|
212
|
+
line-height: $f-dropdown-line-height;
|
213
|
+
margin: 0;
|
214
|
+
|
215
|
+
&:hover,
|
216
|
+
&:focus { background: $f-dropdown-list-hover-bg; }
|
217
|
+
|
218
|
+
a {
|
219
|
+
display: block;
|
220
|
+
padding: $f-dropdown-list-padding;
|
221
|
+
color: $f-dropdown-font-color;
|
222
|
+
}
|
223
|
+
}
|
224
|
+
|
225
|
+
@include exports("dropdown") {
|
226
|
+
@if $include-html-dropdown-classes {
|
227
|
+
|
228
|
+
/* Foundation Dropdowns */
|
229
|
+
.f-dropdown {
|
230
|
+
@include dropdown-container(list, bottom);
|
231
|
+
|
232
|
+
&.drop-#{$opposite-direction} {
|
233
|
+
@include dropdown-container(list, #{$default-float});
|
234
|
+
}
|
235
|
+
|
236
|
+
&.drop-#{$default-float} {
|
237
|
+
@include dropdown-container(list, #{$opposite-direction});
|
238
|
+
}
|
239
|
+
|
240
|
+
&.drop-top {
|
241
|
+
@include dropdown-container(list, top);
|
242
|
+
}
|
243
|
+
// max-width: none;
|
244
|
+
|
245
|
+
li { @include dropdown-style; }
|
246
|
+
|
247
|
+
// You can also put custom content in these dropdowns
|
248
|
+
&.content { @include dropdown-container(content, $triangle:false); }
|
249
|
+
|
250
|
+
// Radius of Dropdown
|
251
|
+
&.radius { @include radius($f-dropdown-radius); }
|
252
|
+
|
253
|
+
// Sizes
|
254
|
+
&.tiny { max-width: 200px; }
|
255
|
+
&.small { max-width: 300px; }
|
256
|
+
&.medium { max-width: 500px; }
|
257
|
+
&.large { max-width: 800px; }
|
258
|
+
&.mega {
|
259
|
+
width:100%!important;
|
260
|
+
max-width:100%!important;
|
261
|
+
|
262
|
+
&.open{
|
263
|
+
left:0!important;
|
264
|
+
}
|
265
|
+
}
|
266
|
+
}
|
267
|
+
|
268
|
+
}
|
269
|
+
}
|