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.
Files changed (90) hide show
  1. checksums.yaml +7 -0
  2. data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
  3. data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
  4. data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
  5. data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
  6. data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
  7. data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
  8. data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
  9. data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
  10. data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
  11. data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
  12. data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
  13. data/foundation-scss.gemspec +9 -0
  14. data/lib/foundation/scss/in/sass_path.rb +6 -0
  15. data/scss/_global.scss +219 -0
  16. data/scss/components/_accordion-menu.scss +36 -0
  17. data/scss/components/_accordion.scss +150 -0
  18. data/scss/components/_badge.scss +63 -0
  19. data/scss/components/_breadcrumbs.scss +100 -0
  20. data/scss/components/_button-group.scss +253 -0
  21. data/scss/components/_button.scss +332 -0
  22. data/scss/components/_callout.scss +106 -0
  23. data/scss/components/_card.scss +121 -0
  24. data/scss/components/_close-button.scss +102 -0
  25. data/scss/components/_drilldown.scss +93 -0
  26. data/scss/components/_dropdown-menu.scss +226 -0
  27. data/scss/components/_dropdown.scss +72 -0
  28. data/scss/components/_flex-video.scss +1 -0
  29. data/scss/components/_flex.scss +34 -0
  30. data/scss/components/_float.scss +27 -0
  31. data/scss/components/_label.scss +64 -0
  32. data/scss/components/_media-object.scss +114 -0
  33. data/scss/components/_menu-icon.scss +9 -0
  34. data/scss/components/_menu.scss +376 -0
  35. data/scss/components/_off-canvas.scss +329 -0
  36. data/scss/components/_orbit.scss +196 -0
  37. data/scss/components/_pagination.scss +193 -0
  38. data/scss/components/_progress-bar.scss +64 -0
  39. data/scss/components/_responsive-embed.scss +70 -0
  40. data/scss/components/_reveal.scss +178 -0
  41. data/scss/components/_slider.scss +138 -0
  42. data/scss/components/_sticky.scss +38 -0
  43. data/scss/components/_switch.scss +247 -0
  44. data/scss/components/_table.scss +329 -0
  45. data/scss/components/_tabs.scss +196 -0
  46. data/scss/components/_thumbnail.scss +67 -0
  47. data/scss/components/_title-bar.scss +84 -0
  48. data/scss/components/_tooltip.scss +107 -0
  49. data/scss/components/_top-bar.scss +173 -0
  50. data/scss/components/_visibility.scss +132 -0
  51. data/scss/forms/_checkbox.scss +41 -0
  52. data/scss/forms/_error.scss +88 -0
  53. data/scss/forms/_fieldset.scss +54 -0
  54. data/scss/forms/_forms.scss +34 -0
  55. data/scss/forms/_help-text.scss +30 -0
  56. data/scss/forms/_input-group.scss +135 -0
  57. data/scss/forms/_label.scss +50 -0
  58. data/scss/forms/_meter.scss +110 -0
  59. data/scss/forms/_progress.scss +94 -0
  60. data/scss/forms/_range.scss +149 -0
  61. data/scss/forms/_select.scss +85 -0
  62. data/scss/forms/_text.scss +170 -0
  63. data/scss/foundation.scss +118 -0
  64. data/scss/grid/_classes.scss +176 -0
  65. data/scss/grid/_column.scss +112 -0
  66. data/scss/grid/_flex-grid.scss +312 -0
  67. data/scss/grid/_grid.scss +48 -0
  68. data/scss/grid/_gutter.scss +82 -0
  69. data/scss/grid/_layout.scss +76 -0
  70. data/scss/grid/_position.scss +76 -0
  71. data/scss/grid/_row.scss +99 -0
  72. data/scss/grid/_size.scss +24 -0
  73. data/scss/settings/_settings.scss +620 -0
  74. data/scss/typography/_alignment.scss +22 -0
  75. data/scss/typography/_base.scss +509 -0
  76. data/scss/typography/_helpers.scss +78 -0
  77. data/scss/typography/_print.scss +86 -0
  78. data/scss/typography/_typography.scss +26 -0
  79. data/scss/util/_breakpoint.scss +281 -0
  80. data/scss/util/_color.scss +126 -0
  81. data/scss/util/_direction.scss +31 -0
  82. data/scss/util/_flex.scss +85 -0
  83. data/scss/util/_math.scss +72 -0
  84. data/scss/util/_mixins.scss +276 -0
  85. data/scss/util/_selector.scss +41 -0
  86. data/scss/util/_typography.scss +26 -0
  87. data/scss/util/_unit.scss +152 -0
  88. data/scss/util/_util.scss +14 -0
  89. data/scss/util/_value.scss +160 -0
  90. 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
+ }