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.
Files changed (58) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +11 -0
  3. data/.rspec +3 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +6 -0
  6. data/Gemfile.lock +37 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +62 -0
  9. data/Rakefile +6 -0
  10. data/bin/console +14 -0
  11. data/bin/setup +8 -0
  12. data/foundation-sass-rails.gemspec +29 -0
  13. data/lib/foundation-sass-rails.rb +8 -0
  14. data/lib/foundation/version.rb +5 -0
  15. data/lib/generators/foundation/overrides_generator.rb +39 -0
  16. data/vendor/assets/stylesheets/foundation.scss +42 -0
  17. data/vendor/assets/stylesheets/foundation/_functions.scss +156 -0
  18. data/vendor/assets/stylesheets/foundation/_settings.scss +1489 -0
  19. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +161 -0
  20. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +128 -0
  21. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +133 -0
  22. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +132 -0
  23. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +208 -0
  24. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +261 -0
  25. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +260 -0
  26. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +130 -0
  27. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +269 -0
  28. data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +51 -0
  29. data/vendor/assets/stylesheets/foundation/components/_forms.scss +607 -0
  30. data/vendor/assets/stylesheets/foundation/components/_global.scss +566 -0
  31. data/vendor/assets/stylesheets/foundation/components/_grid.scss +292 -0
  32. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +460 -0
  33. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +58 -0
  34. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +220 -0
  35. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +60 -0
  36. data/vendor/assets/stylesheets/foundation/components/_labels.scss +106 -0
  37. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +34 -0
  38. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +606 -0
  39. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +388 -0
  40. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +163 -0
  41. data/vendor/assets/stylesheets/foundation/components/_panels.scss +107 -0
  42. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +150 -0
  43. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +85 -0
  44. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +177 -0
  45. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +212 -0
  46. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +120 -0
  47. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +203 -0
  48. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +125 -0
  49. data/vendor/assets/stylesheets/foundation/components/_switches.scss +241 -0
  50. data/vendor/assets/stylesheets/foundation/components/_tables.scss +135 -0
  51. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +142 -0
  52. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +66 -0
  53. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +142 -0
  54. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +745 -0
  55. data/vendor/assets/stylesheets/foundation/components/_type.scss +525 -0
  56. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +425 -0
  57. data/vendor/assets/stylesheets/normalize.scss +424 -0
  58. 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
+ }