foundation-scss 6.3.1.0

Sign up to get free protection for your applications and to get access to all the features.
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
+ }