foundation-rails 5.5.3.2 → 6.1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE.txt +1 -1
- data/README.md +2 -8
- data/Rakefile +23 -0
- data/app/views/foundation/rails/styleguide/show.html.erb +2 -5
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/install_generator.rb +6 -3
- data/lib/generators/foundation/templates/_settings.scss +546 -0
- data/lib/generators/foundation/templates/application.html.erb +0 -1
- data/lib/generators/foundation/templates/application.html.haml +0 -2
- data/lib/generators/foundation/templates/application.html.slim +0 -2
- data/lib/generators/foundation/templates/foundation_and_overrides.scss +51 -0
- data/vendor/assets/js/foundation.abide.js +418 -0
- data/vendor/assets/js/foundation.accordion.js +229 -0
- data/vendor/assets/js/foundation.accordionMenu.js +262 -0
- data/vendor/assets/js/foundation.core.js +378 -0
- data/vendor/assets/js/foundation.drilldown.js +321 -0
- data/vendor/assets/js/foundation.dropdown.js +390 -0
- data/vendor/assets/js/foundation.dropdownMenu.js +391 -0
- data/vendor/assets/js/foundation.equalizer.js +274 -0
- data/vendor/assets/js/foundation.interchange.js +184 -0
- data/vendor/assets/js/foundation.js +28 -0
- data/vendor/assets/js/foundation.magellan.js +212 -0
- data/vendor/assets/js/foundation.offcanvas.js +371 -0
- data/vendor/assets/js/foundation.orbit.js +419 -0
- data/vendor/assets/js/foundation.responsiveMenu.js +145 -0
- data/vendor/assets/js/foundation.responsiveToggle.js +106 -0
- data/vendor/assets/js/foundation.reveal.js +478 -0
- data/vendor/assets/js/foundation.slider.js +484 -0
- data/vendor/assets/js/foundation.sticky.js +436 -0
- data/vendor/assets/js/foundation.tabs.js +306 -0
- data/vendor/assets/js/foundation.toggler.js +147 -0
- data/vendor/assets/js/foundation.tooltip.js +429 -0
- data/vendor/assets/js/foundation.util.box.js +169 -0
- data/vendor/assets/js/foundation.util.keyboard.js +115 -0
- data/vendor/assets/js/foundation.util.mediaQuery.js +210 -0
- data/vendor/assets/js/foundation.util.motion.js +89 -0
- data/vendor/assets/js/foundation.util.nest.js +64 -0
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +78 -0
- data/vendor/assets/js/foundation.util.touch.js +339 -0
- data/vendor/assets/js/foundation.util.triggers.js +222 -0
- data/vendor/assets/scss/_global.scss +626 -0
- data/vendor/assets/scss/components/_accordion-menu.scss +32 -0
- data/vendor/assets/scss/components/_accordion.scss +113 -0
- data/vendor/assets/scss/components/_badge.scss +55 -0
- data/vendor/assets/scss/components/_breadcrumbs.scss +94 -0
- data/vendor/assets/scss/components/_button-group.scss +130 -0
- data/vendor/assets/scss/components/_button.scss +265 -0
- data/vendor/assets/scss/components/_callout.scss +105 -0
- data/vendor/assets/scss/components/_close-button.scss +61 -0
- data/vendor/assets/scss/components/_drilldown.scss +75 -0
- data/vendor/assets/scss/components/_dropdown-menu.scss +148 -0
- data/vendor/assets/scss/components/_dropdown.scss +64 -0
- data/vendor/assets/scss/components/_flex-video.scss +63 -0
- data/vendor/assets/scss/components/_float.scss +27 -0
- data/vendor/assets/scss/components/_label.scss +56 -0
- data/vendor/assets/scss/components/_media-object.scss +74 -0
- data/vendor/assets/scss/components/_menu.scss +209 -0
- data/vendor/assets/scss/components/_off-canvas.scss +180 -0
- data/vendor/assets/scss/components/_orbit.scss +193 -0
- data/vendor/assets/scss/components/_pagination.scss +158 -0
- data/vendor/assets/scss/components/_progress-bar.scss +83 -0
- data/vendor/assets/scss/components/_reveal.scss +156 -0
- data/vendor/assets/scss/components/_slider.scss +158 -0
- data/vendor/assets/scss/components/_sticky.scss +38 -0
- data/vendor/assets/scss/components/_switch.scss +232 -0
- data/vendor/assets/scss/components/_table.scss +213 -0
- data/vendor/assets/scss/components/_tabs.scss +170 -0
- data/vendor/assets/scss/components/_thumbnail.scss +54 -0
- data/vendor/assets/scss/components/_title-bar.scss +68 -0
- data/vendor/assets/scss/components/_tooltip.scss +100 -0
- data/vendor/assets/scss/components/_top-bar.scss +89 -0
- data/vendor/assets/scss/components/_visibility.scss +131 -0
- data/vendor/assets/scss/forms/_checkbox.scss +36 -0
- data/vendor/assets/scss/forms/_error.scss +82 -0
- data/vendor/assets/scss/forms/_fieldset.scss +53 -0
- data/vendor/assets/scss/forms/_forms.scss +32 -0
- data/vendor/assets/scss/forms/_help-text.scss +30 -0
- data/vendor/assets/scss/forms/_input-group.scss +91 -0
- data/vendor/assets/scss/forms/_label.scss +48 -0
- data/vendor/assets/scss/forms/_select.scss +63 -0
- data/vendor/assets/scss/forms/_text.scss +154 -0
- data/vendor/assets/scss/foundation.scss +91 -0
- data/vendor/assets/scss/grid/_classes.scss +153 -0
- data/vendor/assets/scss/grid/_column.scss +124 -0
- data/vendor/assets/scss/grid/_flex-grid.scss +281 -0
- data/vendor/assets/scss/grid/_grid.scss +48 -0
- data/vendor/assets/scss/grid/_gutter.scss +34 -0
- data/vendor/assets/scss/grid/_layout.scss +33 -0
- data/vendor/assets/scss/grid/_position.scss +72 -0
- data/vendor/assets/scss/grid/_row.scss +97 -0
- data/vendor/assets/scss/grid/_size.scss +24 -0
- data/vendor/assets/scss/settings/_settings.scss +547 -0
- data/vendor/assets/scss/typography/_alignment.scss +22 -0
- data/vendor/assets/scss/typography/_base.scss +439 -0
- data/vendor/assets/scss/typography/_helpers.scss +77 -0
- data/vendor/assets/scss/typography/_print.scss +73 -0
- data/vendor/assets/scss/typography/_typography.scss +28 -0
- data/vendor/assets/scss/util/_breakpoint.scss +266 -0
- data/vendor/assets/scss/util/_color.scss +41 -0
- data/vendor/assets/scss/util/_mixins.scss +223 -0
- data/vendor/assets/scss/util/_selector.scss +40 -0
- data/vendor/assets/scss/util/_unit.scss +90 -0
- data/vendor/assets/scss/util/_util.scss +15 -0
- data/vendor/assets/scss/util/_value.scss +126 -0
- metadata +97 -64
- data/update-gem.sh +0 -20
- data/vendor/assets/javascripts/foundation.js +0 -17
- data/vendor/assets/javascripts/foundation/foundation.abide.js +0 -426
- data/vendor/assets/javascripts/foundation/foundation.accordion.js +0 -125
- data/vendor/assets/javascripts/foundation/foundation.alert.js +0 -43
- data/vendor/assets/javascripts/foundation/foundation.clearing.js +0 -586
- data/vendor/assets/javascripts/foundation/foundation.dropdown.js +0 -468
- data/vendor/assets/javascripts/foundation/foundation.equalizer.js +0 -104
- data/vendor/assets/javascripts/foundation/foundation.interchange.js +0 -360
- data/vendor/assets/javascripts/foundation/foundation.joyride.js +0 -935
- data/vendor/assets/javascripts/foundation/foundation.js +0 -732
- data/vendor/assets/javascripts/foundation/foundation.magellan.js +0 -214
- data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +0 -225
- data/vendor/assets/javascripts/foundation/foundation.orbit.js +0 -476
- data/vendor/assets/javascripts/foundation/foundation.reveal.js +0 -522
- data/vendor/assets/javascripts/foundation/foundation.slider.js +0 -296
- data/vendor/assets/javascripts/foundation/foundation.tab.js +0 -247
- data/vendor/assets/javascripts/foundation/foundation.tooltip.js +0 -348
- data/vendor/assets/javascripts/foundation/foundation.topbar.js +0 -458
- data/vendor/assets/javascripts/vendor/modernizr.js +0 -1406
- data/vendor/assets/stylesheets/foundation.scss +0 -42
- data/vendor/assets/stylesheets/foundation/_functions.scss +0 -156
- data/vendor/assets/stylesheets/foundation/_settings.scss +0 -1489
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +0 -161
- data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +0 -128
- data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +0 -133
- data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +0 -132
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +0 -208
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +0 -261
- data/vendor/assets/stylesheets/foundation/components/_clearing.scss +0 -260
- data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +0 -130
- data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +0 -269
- data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +0 -51
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +0 -607
- data/vendor/assets/stylesheets/foundation/components/_global.scss +0 -566
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +0 -292
- data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +0 -460
- data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +0 -58
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +0 -220
- data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +0 -60
- data/vendor/assets/stylesheets/foundation/components/_labels.scss +0 -106
- data/vendor/assets/stylesheets/foundation/components/_magellan.scss +0 -34
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +0 -606
- data/vendor/assets/stylesheets/foundation/components/_orbit.scss +0 -388
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +0 -163
- data/vendor/assets/stylesheets/foundation/components/_panels.scss +0 -107
- data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +0 -150
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +0 -85
- data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +0 -177
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +0 -212
- data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +0 -120
- data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +0 -203
- data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +0 -125
- data/vendor/assets/stylesheets/foundation/components/_switches.scss +0 -241
- data/vendor/assets/stylesheets/foundation/components/_tables.scss +0 -135
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +0 -142
- data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +0 -66
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +0 -142
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +0 -745
- data/vendor/assets/stylesheets/foundation/components/_type.scss +0 -525
- data/vendor/assets/stylesheets/foundation/components/_visibility.scss +0 -425
- data/vendor/assets/stylesheets/normalize.scss +0 -424
@@ -0,0 +1,223 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group functions
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
|
10
|
+
///
|
11
|
+
/// @param {Number} $triangle-size - Width of the triangle.
|
12
|
+
/// @param {Color} $triangle-color - Color of the triangle.
|
13
|
+
/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
|
14
|
+
@mixin css-triangle(
|
15
|
+
$triangle-size,
|
16
|
+
$triangle-color,
|
17
|
+
$triangle-direction
|
18
|
+
) {
|
19
|
+
content: '';
|
20
|
+
display: block;
|
21
|
+
width: 0;
|
22
|
+
height: 0;
|
23
|
+
border: inset $triangle-size;
|
24
|
+
|
25
|
+
@if ($triangle-direction == down) {
|
26
|
+
border-color: $triangle-color transparent transparent;
|
27
|
+
border-top-style: solid;
|
28
|
+
}
|
29
|
+
@if ($triangle-direction == up) {
|
30
|
+
border-color: transparent transparent $triangle-color;
|
31
|
+
border-bottom-style: solid;
|
32
|
+
}
|
33
|
+
@if ($triangle-direction == right) {
|
34
|
+
border-color: transparent transparent transparent $triangle-color;
|
35
|
+
border-left-style: solid;
|
36
|
+
}
|
37
|
+
@if ($triangle-direction == left) {
|
38
|
+
border-color: transparent $triangle-color transparent transparent;
|
39
|
+
border-right-style: solid;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
|
44
|
+
///
|
45
|
+
/// @param {Color} $color - Color to use for the icon.
|
46
|
+
/// @param {Color} $color-hover - Color to use when the icon is hovered over.
|
47
|
+
/// @param {Number} $width - Width of the icon.
|
48
|
+
/// @param {Number} $height - Height of the icon.
|
49
|
+
/// @param {Number} $weight - Height of individual bars in the icon.
|
50
|
+
/// @param {Number} $bars - Number of bars in the icon.
|
51
|
+
@mixin hamburger(
|
52
|
+
$color: #000,
|
53
|
+
$color-hover: #666,
|
54
|
+
$width: 20px,
|
55
|
+
$height: 16px,
|
56
|
+
$weight: 2px,
|
57
|
+
$bars: 3
|
58
|
+
) {
|
59
|
+
// box-shadow CSS output
|
60
|
+
$shadow: ();
|
61
|
+
$hover-shadow: ();
|
62
|
+
|
63
|
+
// Spacing between bars is calculated based on the total height of the icon and the weight of each bar
|
64
|
+
$spacing: floor(($height - ($weight * $bars)) / ($bars - 1));
|
65
|
+
|
66
|
+
// Icon container
|
67
|
+
position: relative;
|
68
|
+
display: inline-block;
|
69
|
+
vertical-align: middle;
|
70
|
+
cursor: pointer;
|
71
|
+
width: $width;
|
72
|
+
height: $height;
|
73
|
+
|
74
|
+
// Icon bars
|
75
|
+
&::after {
|
76
|
+
content: '';
|
77
|
+
position: absolute;
|
78
|
+
display: block;
|
79
|
+
width: 100%;
|
80
|
+
height: $weight;
|
81
|
+
background: $color;
|
82
|
+
top: 0;
|
83
|
+
left: 0;
|
84
|
+
|
85
|
+
@for $i from 2 through $bars {
|
86
|
+
$offset: ($weight + $spacing) * ($i - 1);
|
87
|
+
$shadow: append($shadow, 0 $offset 0 $color, comma);
|
88
|
+
}
|
89
|
+
|
90
|
+
box-shadow: $shadow;
|
91
|
+
}
|
92
|
+
|
93
|
+
// Hover state
|
94
|
+
@if $color-hover {
|
95
|
+
// Generate CSS
|
96
|
+
@for $i from 2 through $bars {
|
97
|
+
$offset: ($weight + $spacing) * ($i - 1);
|
98
|
+
$hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);
|
99
|
+
}
|
100
|
+
|
101
|
+
&:hover::after {
|
102
|
+
background: $color-hover;
|
103
|
+
box-shadow: $hover-shadow;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.
|
109
|
+
/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.
|
110
|
+
///
|
111
|
+
/// @param {Color} $color [$black] - Color to use for the triangle.
|
112
|
+
@mixin background-triangle($color: $black) {
|
113
|
+
$rgb: 'rgb%28#{red($color)}, #{green($color)}, #{blue($color)}%29';
|
114
|
+
|
115
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
|
116
|
+
|
117
|
+
@media screen and (min-width:0\0) {
|
118
|
+
@if lightness($color) < 50% {
|
119
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
|
120
|
+
}
|
121
|
+
@else {
|
122
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
|
123
|
+
}
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
|
128
|
+
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
|
129
|
+
@mixin clearfix {
|
130
|
+
&::before,
|
131
|
+
&::after {
|
132
|
+
content: ' ';
|
133
|
+
display: table;
|
134
|
+
}
|
135
|
+
|
136
|
+
&::after {
|
137
|
+
clear: both;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
|
141
|
+
/// Adds CSS for a "quantity query" selector that automatically sizes elements based on how many there are inside a container.
|
142
|
+
/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS
|
143
|
+
///
|
144
|
+
/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.
|
145
|
+
/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.
|
146
|
+
@mixin auto-width($max, $elem: li) {
|
147
|
+
@for $i from 2 through $max {
|
148
|
+
&:nth-last-child(#{$i}):first-child,
|
149
|
+
&:nth-last-child(#{$i}):first-child ~ #{$elem} {
|
150
|
+
width: percentage(1 / $i);
|
151
|
+
}
|
152
|
+
}
|
153
|
+
}
|
154
|
+
|
155
|
+
/// Removes the focus ring around an element when a mouse input is detected.
|
156
|
+
@mixin disable-mouse-outline {
|
157
|
+
[data-whatinput='mouse'] & {
|
158
|
+
outline: 0;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
|
163
|
+
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
|
164
|
+
@mixin element-invisible {
|
165
|
+
position: absolute !important;
|
166
|
+
width: 1px;
|
167
|
+
height: 1px;
|
168
|
+
overflow: hidden;
|
169
|
+
clip: rect(0, 0, 0, 0);
|
170
|
+
}
|
171
|
+
|
172
|
+
/// Reverses the CSS output created by the `element-invisible()` mixin.
|
173
|
+
@mixin element-invisible-off {
|
174
|
+
position: static !important;
|
175
|
+
height: auto;
|
176
|
+
width: auto;
|
177
|
+
overflow: visible;
|
178
|
+
clip: auto;
|
179
|
+
}
|
180
|
+
|
181
|
+
/// Vertically centers the element inside of its first non-static parent,
|
182
|
+
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
|
183
|
+
@mixin vertical-center {
|
184
|
+
position: absolute;
|
185
|
+
top: 50%;
|
186
|
+
transform: translateY(-50%);
|
187
|
+
}
|
188
|
+
|
189
|
+
/// Horizontally centers the element inside of its first non-static parent,
|
190
|
+
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
|
191
|
+
@mixin horizontal-center {
|
192
|
+
position: absolute;
|
193
|
+
left: 50%;
|
194
|
+
transform: translateX(-50%);
|
195
|
+
}
|
196
|
+
|
197
|
+
/// Absolutely centers the element inside of its first non-static parent,
|
198
|
+
/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass
|
199
|
+
@mixin absolute-center {
|
200
|
+
position: absolute;
|
201
|
+
top: 50%;
|
202
|
+
left: 50%;
|
203
|
+
transform: translate(-50%, -50%);
|
204
|
+
}
|
205
|
+
|
206
|
+
/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
|
207
|
+
///
|
208
|
+
/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
|
209
|
+
@mixin -zf-each-breakpoint($small: true) {
|
210
|
+
$map: $breakpoint-classes;
|
211
|
+
|
212
|
+
@if not $small {
|
213
|
+
$map: map-remove($map, small);
|
214
|
+
}
|
215
|
+
|
216
|
+
@each $size in $map {
|
217
|
+
$-zf-size: $size !global;
|
218
|
+
|
219
|
+
@include breakpoint($size) {
|
220
|
+
@content;
|
221
|
+
}
|
222
|
+
}
|
223
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group functions
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.
|
10
|
+
///
|
11
|
+
/// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them.
|
12
|
+
@function text-inputs($types: ()) {
|
13
|
+
$return: ();
|
14
|
+
|
15
|
+
$all-types:
|
16
|
+
text
|
17
|
+
password
|
18
|
+
date
|
19
|
+
datetime
|
20
|
+
datetime-local
|
21
|
+
month
|
22
|
+
week
|
23
|
+
email
|
24
|
+
number
|
25
|
+
search
|
26
|
+
tel
|
27
|
+
time
|
28
|
+
url
|
29
|
+
color;
|
30
|
+
|
31
|
+
@if not has-value($types) {
|
32
|
+
$types: $all-types;
|
33
|
+
}
|
34
|
+
|
35
|
+
@each $type in $types {
|
36
|
+
$return: append($return, unquote('[type=\'#{$type}\']'), comma);
|
37
|
+
}
|
38
|
+
|
39
|
+
@return $return;
|
40
|
+
}
|
@@ -0,0 +1,90 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group functions
|
7
|
+
////
|
8
|
+
|
9
|
+
$global-font-size: 100% !default;
|
10
|
+
|
11
|
+
// scss-lint:disable ZeroUnit
|
12
|
+
|
13
|
+
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
|
14
|
+
///
|
15
|
+
/// @param {Number} $num - Number to strip unit from.
|
16
|
+
///
|
17
|
+
/// @returns {Number} The same number, sans unit.
|
18
|
+
@function strip-unit($num) {
|
19
|
+
@return $num / ($num * 0 + 1);
|
20
|
+
}
|
21
|
+
|
22
|
+
/// Converts one or more pixel values into matching rem values.
|
23
|
+
///
|
24
|
+
/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
|
25
|
+
/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
|
26
|
+
///
|
27
|
+
/// @returns {List} A list of converted values.
|
28
|
+
@function rem-calc($values, $base: null) {
|
29
|
+
$rem-values: ();
|
30
|
+
$count: length($values);
|
31
|
+
|
32
|
+
// If no base is defined, defer to the global font size
|
33
|
+
@if $base == null {
|
34
|
+
$base: $global-font-size;
|
35
|
+
}
|
36
|
+
|
37
|
+
// If the base font size is a %, then multiply it by 16px
|
38
|
+
// This is because 100% font size = 16px in most all browsers
|
39
|
+
@if unit($base) == '%' {
|
40
|
+
$base: ($base / 100%) * 16px;
|
41
|
+
}
|
42
|
+
|
43
|
+
@if $count == 1 {
|
44
|
+
@return -zf-to-rem($values, $base);
|
45
|
+
}
|
46
|
+
|
47
|
+
@for $i from 1 through $count {
|
48
|
+
$rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
|
49
|
+
}
|
50
|
+
|
51
|
+
@return $rem-values;
|
52
|
+
}
|
53
|
+
|
54
|
+
// Converts a unitless, pixel, or rem value to em, for use in breakpoints.
|
55
|
+
@function -zf-bp-to-em($value) {
|
56
|
+
// Pixel and unitless values are converted to rems
|
57
|
+
@if unit($value) == 'px' or unitless($value) {
|
58
|
+
$value: rem-calc($value, $base: 16px);
|
59
|
+
}
|
60
|
+
|
61
|
+
// Then the value is converted to ems
|
62
|
+
@return strip-unit($value) * 1em;
|
63
|
+
}
|
64
|
+
|
65
|
+
/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
|
66
|
+
/// @access private
|
67
|
+
///
|
68
|
+
/// @param {Number} $value - Pixel value to convert.
|
69
|
+
/// @param {Number} $base [null] - Base for pixel conversion.
|
70
|
+
///
|
71
|
+
/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
|
72
|
+
@function -zf-to-rem($value, $base: null) {
|
73
|
+
// Check if the value is a number
|
74
|
+
@if type-of($value) != 'number' {
|
75
|
+
@warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
|
76
|
+
@return $value;
|
77
|
+
}
|
78
|
+
|
79
|
+
// Calculate rem if units for $value is not rem
|
80
|
+
@if unit($value) != 'rem' {
|
81
|
+
$value: strip-unit($value) / strip-unit($base) * 1rem;
|
82
|
+
}
|
83
|
+
|
84
|
+
// Turn 0rem into 0
|
85
|
+
@if $value == 0rem {
|
86
|
+
$value: 0;
|
87
|
+
}
|
88
|
+
|
89
|
+
@return $value;
|
90
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
// Utilities
|
6
|
+
@import 'unit';
|
7
|
+
@import 'value';
|
8
|
+
@import 'color';
|
9
|
+
@import 'selector';
|
10
|
+
|
11
|
+
// Libraries
|
12
|
+
@import 'breakpoint';
|
13
|
+
|
14
|
+
// Mixins
|
15
|
+
@import 'mixins';
|
@@ -0,0 +1,126 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group functions
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
|
10
|
+
///
|
11
|
+
/// @param {Mixed} $val - Value to check.
|
12
|
+
///
|
13
|
+
/// @returns {Boolean} `true` if `$val` is not falsey.
|
14
|
+
@function has-value($val) {
|
15
|
+
@if $val == null or $val == none {
|
16
|
+
@return false;
|
17
|
+
}
|
18
|
+
@if type-of($val) == 'number' and strip-unit($val) == 0 {
|
19
|
+
@return false;
|
20
|
+
}
|
21
|
+
@if type-of($val) == 'list' and length($val) == 0 {
|
22
|
+
@return false;
|
23
|
+
}
|
24
|
+
@return true;
|
25
|
+
}
|
26
|
+
|
27
|
+
/// Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
|
28
|
+
///
|
29
|
+
/// @param {List|Number} $val - Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em"
|
30
|
+
/// @param {Keyword} $side - Side to return. Should be `top`, `right`, `bottom`, or `left`.
|
31
|
+
///
|
32
|
+
/// @returns {Number} A single value based on `$val` and `$side`.
|
33
|
+
@function get-side($val, $side) {
|
34
|
+
$length: length($val);
|
35
|
+
|
36
|
+
@if $length == 1 {
|
37
|
+
@return $val;
|
38
|
+
}
|
39
|
+
@if $length == 2 {
|
40
|
+
@return map-get((
|
41
|
+
top: nth($val, 1),
|
42
|
+
bottom: nth($val, 1),
|
43
|
+
left: nth($val, 2),
|
44
|
+
right: nth($val, 2),
|
45
|
+
), $side);
|
46
|
+
}
|
47
|
+
@if $length == 3 {
|
48
|
+
@return map-get((
|
49
|
+
top: nth($val, 1),
|
50
|
+
left: nth($val, 2),
|
51
|
+
right: nth($val, 2),
|
52
|
+
bottom: nth($val, 3),
|
53
|
+
), $side);
|
54
|
+
}
|
55
|
+
@if $length == 4 {
|
56
|
+
@return map-get((
|
57
|
+
top: nth($val, 1),
|
58
|
+
right: nth($val, 2),
|
59
|
+
bottom: nth($val, 3),
|
60
|
+
left: nth($val, 4),
|
61
|
+
), $side);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
/// Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
|
66
|
+
///
|
67
|
+
/// @param {List} $val - Border value to find a value in.
|
68
|
+
/// @param {Keyword} $elem - Border component to extract.
|
69
|
+
///
|
70
|
+
/// @returns {Mixed} If the value exists, returns the value. If the value is not in the border definition, the function will return a 0px width, solid style, or black border.
|
71
|
+
@function get-border-value($val, $elem) {
|
72
|
+
// Find the width, style, or color and return it
|
73
|
+
@each $v in $val {
|
74
|
+
$type: type-of($v);
|
75
|
+
@if $elem == width and $type == 'number' {
|
76
|
+
@return $v;
|
77
|
+
}
|
78
|
+
@if $elem == style and $type == 'string' {
|
79
|
+
@return $v;
|
80
|
+
}
|
81
|
+
@if $elem == color and $type == 'color' {
|
82
|
+
@return $v;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
// Defaults
|
87
|
+
$defaults: (
|
88
|
+
width: 0,
|
89
|
+
style: solid,
|
90
|
+
color: #000,
|
91
|
+
);
|
92
|
+
@return map-get($defaults, $elem);
|
93
|
+
}
|
94
|
+
|
95
|
+
/// Calculates x^y, where x is `$base` and y is `$power`.
|
96
|
+
/// @access private
|
97
|
+
///
|
98
|
+
/// @param {Number} $base - Base number (x).
|
99
|
+
/// @param {Number} $power - Exponent (y).
|
100
|
+
@function pow($base, $power) {
|
101
|
+
@if $power == 0 { @return 1; }
|
102
|
+
@return $base * pow($base, $power - 1);
|
103
|
+
}
|
104
|
+
|
105
|
+
// TODO: Remove this (it's used by the grid but is overkill)
|
106
|
+
/// Given a user-defined list of keywords and a list of possible keywords, find the ones that were passed in.
|
107
|
+
/// @access private
|
108
|
+
///
|
109
|
+
/// @param {List} $opts - List of values to find keywords in.
|
110
|
+
/// @param {List} $seeking - List of all possible keywords.
|
111
|
+
///
|
112
|
+
/// @returns {Map} A map of all keywords in $seeking. If a keyword was found in $opts, its value is true, otherwise false.
|
113
|
+
@function -zf-get-options($opts, $seeking) {
|
114
|
+
@if type-of($opts) != 'list' {
|
115
|
+
$opts: ($opts);
|
116
|
+
}
|
117
|
+
|
118
|
+
$map: ();
|
119
|
+
@each $keyword in $seeking {
|
120
|
+
$val: if(index($opts, $keyword) != null, true, false);
|
121
|
+
$item: ($keyword: $val);
|
122
|
+
$map: map-merge($map, $item);
|
123
|
+
}
|
124
|
+
|
125
|
+
@return $map;
|
126
|
+
}
|