ratchet_design 0.1.17 → 0.1.18
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 +4 -4
- data/app/assets/javascripts/ratchet/core.js +4 -0
- data/app/assets/javascripts/ratchet/shim/object_fit.js +236 -0
- data/app/assets/javascripts/ratchet/utility/load_font.js +24 -11
- data/app/assets/stylesheets/ratchet/base/_document.scss +8 -30
- data/app/assets/stylesheets/ratchet/base/_form.scss +42 -58
- data/app/assets/stylesheets/ratchet/base/_section.scss +140 -159
- data/app/assets/stylesheets/ratchet/base/_text.scss +1 -1
- data/app/assets/stylesheets/ratchet/base/_validation.scss +3 -3
- data/app/assets/stylesheets/ratchet/fonts-woff.css +22 -6
- data/app/assets/stylesheets/ratchet/fonts-woff2.css +22 -6
- data/app/assets/stylesheets/ratchet/utility/_color.scss +80 -54
- data/app/assets/stylesheets/ratchet/utility/_global.scss +96 -21
- data/app/assets/stylesheets/ratchet/utility/_grid.scss +54 -5
- data/app/helpers/ratchet/application_helper.rb +10 -11
- data/app/views/layouts/ratchet/default.html.slim +7 -7
- data/app/views/shared/ratchet/_defs.html.slim +23 -2
- data/app/views/shared/ratchet/_footer.html.slim +2 -4
- data/app/views/shared/ratchet/_icons.html.slim +197 -128
- data/lib/ratchet_design/version.rb +1 -1
- data/public/{core-0.1.17.js → core-0.1.18.js} +68 -64
- data/public/core-0.1.18.js.gz +0 -0
- data/public/core-0.1.18.map.json +1 -0
- data/public/fonts-woff-0.1.18.css +71 -0
- data/public/fonts-woff-0.1.18.css.gz +0 -0
- data/public/fonts-woff2-0.1.18.css +71 -0
- data/public/fonts-woff2-0.1.18.css.gz +0 -0
- metadata +10 -9
- data/public/core-0.1.17.js.gz +0 -0
- data/public/core-0.1.17.map.json +0 -1
- data/public/fonts-woff-0.1.17.css +0 -55
- data/public/fonts-woff-0.1.17.css.gz +0 -0
- data/public/fonts-woff2-0.1.17.css +0 -55
- data/public/fonts-woff2-0.1.17.css.gz +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ab32714804189a0aebc1663da68347d5cdef6dfb
|
4
|
+
data.tar.gz: 8bd3261cd9231a7f8a9551c90f35c42fb68359ee
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7b7f21a2a69fb8a4dcc903b96406cabdb8b717b7dfcab5fb93f3fdd6ed42e888e5d29ccc17033caaf63962376bdcbe15bd0696d0ad3b71a4708a2da0812f2cb2
|
7
|
+
data.tar.gz: 2b558d5a3befcebd8dfcd4963fb8371ea4cde5a48f958a46582f41ccfbb4ad344db16a06548b242d240c3be9738470d3334e43b319d7fa170ec13786269f2b12
|
@@ -0,0 +1,236 @@
|
|
1
|
+
/**
|
2
|
+
* Polyfill for object-fit & object-position
|
3
|
+
* @source https://github.com/bfred-it/object-fit-images
|
4
|
+
* @author Federico Brigante ( @bfred-it )
|
5
|
+
* @license MIT
|
6
|
+
*/
|
7
|
+
var objectFitImages = (function () {
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
var OFI = 'bfred-it:object-fit-images';
|
11
|
+
var propRegex = /(object-fit|object-position)\s*:\s*([-\w\s%]+)/g;
|
12
|
+
var testImg = typeof Image === 'undefined' ? {style: {'object-position': 1}} : new Image();
|
13
|
+
var supportsObjectFit = 'object-fit' in testImg.style;
|
14
|
+
var supportsObjectPosition = 'object-position' in testImg.style;
|
15
|
+
var supportsOFI = 'background-size' in testImg.style;
|
16
|
+
var supportsCurrentSrc = typeof testImg.currentSrc === 'string';
|
17
|
+
var nativeGetAttribute = testImg.getAttribute;
|
18
|
+
var nativeSetAttribute = testImg.setAttribute;
|
19
|
+
var autoModeEnabled = false;
|
20
|
+
|
21
|
+
function createPlaceholder(w, h) {
|
22
|
+
return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E");
|
23
|
+
}
|
24
|
+
|
25
|
+
function polyfillCurrentSrc(el) {
|
26
|
+
if (el.srcset && !supportsCurrentSrc && window.picturefill) {
|
27
|
+
var pf = window.picturefill._;
|
28
|
+
// parse srcset with picturefill where currentSrc isn't available
|
29
|
+
if (!el[pf.ns] || !el[pf.ns].evaled) {
|
30
|
+
// force synchronous srcset parsing
|
31
|
+
pf.fillImg(el, {reselect: true});
|
32
|
+
}
|
33
|
+
|
34
|
+
if (!el[pf.ns].curSrc) {
|
35
|
+
// force picturefill to parse srcset
|
36
|
+
el[pf.ns].supported = false;
|
37
|
+
pf.fillImg(el, {reselect: true});
|
38
|
+
}
|
39
|
+
|
40
|
+
// retrieve parsed currentSrc, if any
|
41
|
+
el.currentSrc = el[pf.ns].curSrc || el.src;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
function getStyle(el) {
|
46
|
+
var style = getComputedStyle(el).fontFamily;
|
47
|
+
var parsed;
|
48
|
+
var props = {};
|
49
|
+
while ((parsed = propRegex.exec(style)) !== null) {
|
50
|
+
props[parsed[1]] = parsed[2];
|
51
|
+
}
|
52
|
+
return props;
|
53
|
+
}
|
54
|
+
|
55
|
+
function setPlaceholder(img, width, height) {
|
56
|
+
// Default: fill width, no height
|
57
|
+
var placeholder = createPlaceholder(width || 1, height || 0);
|
58
|
+
|
59
|
+
// Only set placeholder if it's different
|
60
|
+
if (nativeGetAttribute.call(img, 'src') !== placeholder) {
|
61
|
+
nativeSetAttribute.call(img, 'src', placeholder);
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
function onImageReady(img, callback) {
|
66
|
+
// naturalWidth is only available when the image headers are loaded,
|
67
|
+
// this loop will poll it every 100ms.
|
68
|
+
if (img.naturalWidth) {
|
69
|
+
callback(img);
|
70
|
+
} else {
|
71
|
+
setTimeout(onImageReady, 100, img, callback);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
function fixOne(el) {
|
76
|
+
var style = getStyle(el);
|
77
|
+
var ofi = el[OFI];
|
78
|
+
style['object-fit'] = style['object-fit'] || 'fill'; // default value
|
79
|
+
|
80
|
+
// Avoid running where unnecessary, unless OFI had already done its deed
|
81
|
+
if (!ofi.img) {
|
82
|
+
// fill is the default behavior so no action is necessary
|
83
|
+
if (style['object-fit'] === 'fill') {
|
84
|
+
return;
|
85
|
+
}
|
86
|
+
|
87
|
+
// Where object-fit is supported and object-position isn't (Safari < 10)
|
88
|
+
if (
|
89
|
+
!ofi.skipTest && // unless user wants to apply regardless of browser support
|
90
|
+
supportsObjectFit && // if browser already supports object-fit
|
91
|
+
!style['object-position'] // unless object-position is used
|
92
|
+
) {
|
93
|
+
return;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
// keep a clone in memory while resetting the original to a blank
|
98
|
+
if (!ofi.img) {
|
99
|
+
ofi.img = new Image(el.width, el.height);
|
100
|
+
ofi.img.srcset = nativeGetAttribute.call(el, "data-ofi-srcset") || el.srcset;
|
101
|
+
ofi.img.src = nativeGetAttribute.call(el, "data-ofi-src") || el.src;
|
102
|
+
|
103
|
+
// preserve for any future cloneNode calls
|
104
|
+
// https://github.com/bfred-it/object-fit-images/issues/53
|
105
|
+
nativeSetAttribute.call(el, "data-ofi-src", el.src);
|
106
|
+
if (el.srcset) {
|
107
|
+
nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset);
|
108
|
+
}
|
109
|
+
|
110
|
+
setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height);
|
111
|
+
|
112
|
+
// remove srcset because it overrides src
|
113
|
+
if (el.srcset) {
|
114
|
+
el.srcset = '';
|
115
|
+
}
|
116
|
+
try {
|
117
|
+
keepSrcUsable(el);
|
118
|
+
} catch (err) {
|
119
|
+
if (window.console) {
|
120
|
+
console.log('http://bit.ly/ofi-old-browser');
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
125
|
+
polyfillCurrentSrc(ofi.img);
|
126
|
+
|
127
|
+
el.style.backgroundImage = "url(\"" + ((ofi.img.currentSrc || ofi.img.src).replace(/"/g, '\\"')) + "\")";
|
128
|
+
el.style.backgroundPosition = style['object-position'] || 'center';
|
129
|
+
el.style.backgroundRepeat = 'no-repeat';
|
130
|
+
|
131
|
+
if (/scale-down/.test(style['object-fit'])) {
|
132
|
+
onImageReady(ofi.img, function () {
|
133
|
+
if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {
|
134
|
+
el.style.backgroundSize = 'contain';
|
135
|
+
} else {
|
136
|
+
el.style.backgroundSize = 'auto';
|
137
|
+
}
|
138
|
+
});
|
139
|
+
} else {
|
140
|
+
el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');
|
141
|
+
}
|
142
|
+
|
143
|
+
onImageReady(ofi.img, function (img) {
|
144
|
+
setPlaceholder(el, img.naturalWidth, img.naturalHeight);
|
145
|
+
});
|
146
|
+
}
|
147
|
+
|
148
|
+
function keepSrcUsable(el) {
|
149
|
+
var descriptors = {
|
150
|
+
get: function get(prop) {
|
151
|
+
return el[OFI].img[prop ? prop : 'src'];
|
152
|
+
},
|
153
|
+
set: function set(value, prop) {
|
154
|
+
el[OFI].img[prop ? prop : 'src'] = value;
|
155
|
+
nativeSetAttribute.call(el, ("data-ofi-" + prop), value); // preserve for any future cloneNode
|
156
|
+
fixOne(el);
|
157
|
+
return value;
|
158
|
+
}
|
159
|
+
};
|
160
|
+
Object.defineProperty(el, 'src', descriptors);
|
161
|
+
Object.defineProperty(el, 'currentSrc', {
|
162
|
+
get: function () { return descriptors.get('currentSrc'); }
|
163
|
+
});
|
164
|
+
Object.defineProperty(el, 'srcset', {
|
165
|
+
get: function () { return descriptors.get('srcset'); },
|
166
|
+
set: function (ss) { return descriptors.set(ss, 'srcset'); }
|
167
|
+
});
|
168
|
+
}
|
169
|
+
|
170
|
+
function hijackAttributes() {
|
171
|
+
function getOfiImageMaybe(el, name) {
|
172
|
+
return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;
|
173
|
+
}
|
174
|
+
if (!supportsObjectPosition) {
|
175
|
+
HTMLImageElement.prototype.getAttribute = function (name) {
|
176
|
+
return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);
|
177
|
+
};
|
178
|
+
|
179
|
+
HTMLImageElement.prototype.setAttribute = function (name, value) {
|
180
|
+
return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));
|
181
|
+
};
|
182
|
+
}
|
183
|
+
}
|
184
|
+
|
185
|
+
function fix(imgs, opts) {
|
186
|
+
var startAutoMode = !autoModeEnabled && !imgs;
|
187
|
+
opts = opts || {};
|
188
|
+
imgs = imgs || 'img';
|
189
|
+
|
190
|
+
if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) {
|
191
|
+
return false;
|
192
|
+
}
|
193
|
+
|
194
|
+
// use imgs as a selector or just select all images
|
195
|
+
if (typeof imgs === 'string') {
|
196
|
+
imgs = document.querySelectorAll(imgs);
|
197
|
+
} else if (!('length' in imgs)) {
|
198
|
+
imgs = [imgs];
|
199
|
+
}
|
200
|
+
|
201
|
+
// apply fix to all
|
202
|
+
for (var i = 0; i < imgs.length; i++) {
|
203
|
+
imgs[i][OFI] = imgs[i][OFI] || {
|
204
|
+
skipTest: opts.skipTest
|
205
|
+
};
|
206
|
+
fixOne(imgs[i]);
|
207
|
+
}
|
208
|
+
|
209
|
+
if (startAutoMode) {
|
210
|
+
document.body.addEventListener('load', function (e) {
|
211
|
+
if (e.target.tagName === 'IMG') {
|
212
|
+
fix(e.target, {
|
213
|
+
skipTest: opts.skipTest
|
214
|
+
});
|
215
|
+
}
|
216
|
+
}, true);
|
217
|
+
autoModeEnabled = true;
|
218
|
+
imgs = 'img'; // reset to a generic selector for watchMQ
|
219
|
+
}
|
220
|
+
|
221
|
+
// if requested, watch media queries for object-fit change
|
222
|
+
if (opts.watchMQ) {
|
223
|
+
window.addEventListener('resize', fix.bind(null, imgs, {
|
224
|
+
skipTest: opts.skipTest
|
225
|
+
}));
|
226
|
+
}
|
227
|
+
}
|
228
|
+
|
229
|
+
fix.supportsObjectFit = supportsObjectFit;
|
230
|
+
fix.supportsObjectPosition = supportsObjectPosition;
|
231
|
+
|
232
|
+
hijackAttributes();
|
233
|
+
|
234
|
+
return fix;
|
235
|
+
|
236
|
+
}());
|
@@ -14,12 +14,25 @@ var supportsWoff2 = ( function( win ) {
|
|
14
14
|
return f.status == 'loading' || f.status == 'loaded';
|
15
15
|
})( window );
|
16
16
|
|
17
|
-
//
|
17
|
+
// Catch-all LocalStorage availability check
|
18
|
+
var localStorageAvailable = function() {
|
19
|
+
var testKey = 'test', storage = window.localStorage;
|
20
|
+
try {
|
21
|
+
storage.setItem( testKey, '1' );
|
22
|
+
storage.removeItem( testKey );
|
23
|
+
return true;
|
24
|
+
} catch ( error ) {
|
25
|
+
return false;
|
26
|
+
}
|
27
|
+
};
|
28
|
+
|
29
|
+
// Public API function
|
18
30
|
var loadFont = function( fontName, woffUrl, woff2Url, onlyLoadFontOnSecondPageload ){
|
19
31
|
|
20
32
|
// Many unsupported browsers should stop here
|
21
33
|
var nua = navigator.userAgent,
|
22
|
-
|
34
|
+
pass = localStorageAvailable(),
|
35
|
+
nope = !window.addEventListener || !pass || ( nua.match( /(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/ ) && !nua.match( /Chrome/ ) );
|
23
36
|
|
24
37
|
if ( nope ) return;
|
25
38
|
|
@@ -30,19 +43,20 @@ var loadFont = function( fontName, woffUrl, woff2Url, onlyLoadFontOnSecondPagelo
|
|
30
43
|
try { loSto = localStorage || {}; }
|
31
44
|
catch( ex ) {}
|
32
45
|
|
33
|
-
var loStoPrefix
|
34
|
-
loStoUrlKey
|
35
|
-
loStoCssKey
|
36
|
-
storedFontUrl
|
37
|
-
storedFontCss
|
38
|
-
|
46
|
+
var loStoPrefix = 'x-font-' + fontName,
|
47
|
+
loStoUrlKey = loStoPrefix + 'url',
|
48
|
+
loStoCssKey = loStoPrefix + 'css',
|
49
|
+
storedFontUrl = loSto[ loStoUrlKey ],
|
50
|
+
storedFontCss = loSto[ loStoCssKey ],
|
51
|
+
storedUrlMatch = storedFontUrl === woffUrl || storedFontUrl === woff2Url,
|
52
|
+
styleElement = document.createElement( 'style' );
|
39
53
|
|
40
54
|
// Make <style> element & apply base64 encoded font data
|
41
55
|
styleElement.rel = 'stylesheet';
|
42
56
|
document.head.appendChild( styleElement );
|
43
57
|
|
44
58
|
// CSS in LocalStorage & loaded from one of the current URLs
|
45
|
-
if ( storedFontCss &&
|
59
|
+
if ( storedFontCss && storedUrlMatch ) {
|
46
60
|
|
47
61
|
styleElement.textContent = storedFontCss;
|
48
62
|
|
@@ -68,5 +82,4 @@ var loadFont = function( fontName, woffUrl, woff2Url, onlyLoadFontOnSecondPagelo
|
|
68
82
|
}
|
69
83
|
};
|
70
84
|
|
71
|
-
|
72
|
-
module.exports = loadFont;
|
85
|
+
module.exports = loadFont
|
@@ -6,17 +6,10 @@
|
|
6
6
|
* i. Utility
|
7
7
|
* ------------------------------------- */
|
8
8
|
|
9
|
-
// Point at which mobile menu is visible
|
10
|
-
$breakpoint-xlg: 1500px;
|
11
|
-
$breakpoint-lg: 1100px;
|
12
|
-
$breakpoint: 800px;
|
13
|
-
$breakpoint-sm: 550px;
|
14
|
-
$breakpoint-xsm: 400px;
|
15
|
-
|
16
9
|
// Transparent headers (for use with hero banners)
|
17
10
|
@mixin transparent-header {
|
18
11
|
margin-bottom: -$header-height;
|
19
|
-
z-index:
|
12
|
+
z-index: 3;
|
20
13
|
|
21
14
|
&,
|
22
15
|
&:before {
|
@@ -37,7 +30,7 @@ $breakpoint-xsm: 400px;
|
|
37
30
|
cursor: pointer;
|
38
31
|
flex-shrink: 0;
|
39
32
|
font-size: 14px;
|
40
|
-
font-weight:
|
33
|
+
font-weight: 600;
|
41
34
|
// text-transform: uppercase;
|
42
35
|
}
|
43
36
|
|
@@ -45,6 +38,7 @@ $breakpoint-xsm: 400px;
|
|
45
38
|
%logo {
|
46
39
|
height: $header-height;
|
47
40
|
z-index: 4;
|
41
|
+
display: inline-block;
|
48
42
|
|
49
43
|
// SVG inherits structure & color
|
50
44
|
svg {
|
@@ -56,7 +50,7 @@ $breakpoint-xsm: 400px;
|
|
56
50
|
// Header button styles
|
57
51
|
%header-button {
|
58
52
|
@include button($size: small, $color: $white, $fill: off, $bevel: on);
|
59
|
-
font-weight:
|
53
|
+
font-weight: 600;
|
60
54
|
margin-top: 0;
|
61
55
|
margin-bottom: 0;
|
62
56
|
}
|
@@ -124,6 +118,9 @@ $breakpoint-xsm: 400px;
|
|
124
118
|
padding: 0;
|
125
119
|
outline: 0;
|
126
120
|
box-sizing: border-box;
|
121
|
+
transition-duration: .25s;
|
122
|
+
transition-property: none;
|
123
|
+
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
127
124
|
}
|
128
125
|
|
129
126
|
/* ===================================== *
|
@@ -261,23 +258,4 @@ header[role=banner] > nav[role=navigation] {
|
|
261
258
|
// Main content
|
262
259
|
main {
|
263
260
|
flex: 1;
|
264
|
-
|
265
|
-
padding-bottom: $header-height;
|
266
|
-
}
|
267
|
-
|
268
|
-
/* ===================================== *
|
269
|
-
* vii. Ratchet Footer
|
270
|
-
* ------------------------------------- */
|
271
|
-
|
272
|
-
// Main site footer
|
273
|
-
footer[role=contentinfo] {
|
274
|
-
color: $pewter;
|
275
|
-
font-size: vr(1);
|
276
|
-
@include padded-module; // 1100px width & 30px padding
|
277
|
-
@include cover-background($shark);
|
278
|
-
|
279
|
-
> * {
|
280
|
-
@include grid;
|
281
|
-
padding: vr(3) 0;
|
282
|
-
}
|
283
|
-
}
|
261
|
+
}
|
@@ -1,10 +1,9 @@
|
|
1
1
|
$text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
|
2
2
|
|
3
|
-
$formBlue: $cerulean;//#4392f9;
|
4
|
-
//$steel: darken($page-border, 25); // Blue-Gray
|
5
|
-
$alabaster: hsl(0, 0%, 79%); // Light Blue
|
6
|
-
$
|
7
|
-
$duration: .2s;
|
3
|
+
// $formBlue: $cerulean;//#4392f9;
|
4
|
+
// //$steel: darken($page-border, 25); // Blue-Gray
|
5
|
+
// // $alabaster: hsl(0, 0%, 79%); // Light Blue // $isabella: #dde8eb; // Off-Cream
|
6
|
+
// $duration: .2s;
|
8
7
|
|
9
8
|
@mixin input-active {
|
10
9
|
&:focus,
|
@@ -14,37 +13,23 @@ $duration: .2s;
|
|
14
13
|
}
|
15
14
|
}
|
16
15
|
|
17
|
-
$input-weight-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
18
|
-
$empty-shadow: 0 0 0 transparent;
|
19
|
-
$background-shadow: 0 0 0 1000px $white inset;
|
16
|
+
$input-weight-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
17
|
+
$empty-shadow: 0 0 0 transparent;
|
18
|
+
$background-shadow: 0 0 0 1000px $white inset;
|
20
19
|
|
21
|
-
@function input-shadow($color: $alabaster, $size: 1px) {
|
22
|
-
|
23
|
-
}
|
24
|
-
@function input-focus-shadow($color: $steel) {
|
25
|
-
|
26
|
-
}
|
27
|
-
|
28
|
-
@function select-shadow($color: $alabaster, $size: 1px) {
|
29
|
-
@return 0 0 0 $size $color inset, $empty-shadow;
|
30
|
-
}
|
31
|
-
@function select-focus-shadow($color: $steel) {
|
32
|
-
@return 0 0 0 1px $color inset, $input-weight-shadow;
|
33
|
-
}
|
34
|
-
|
35
|
-
*, *:before, *:after {
|
36
|
-
transition-duration: .25s;
|
37
|
-
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
38
|
-
}
|
39
|
-
|
40
|
-
form {
|
41
|
-
width: 100%;
|
42
|
-
|
43
|
-
&.max {
|
44
|
-
max-width: 100%;
|
45
|
-
}
|
20
|
+
@function input-shadow($color: $alabaster, $size: 1px) {
|
21
|
+
@return 0 0 0 $size $color inset, $empty-shadow, $background-shadow;
|
22
|
+
}
|
23
|
+
@function input-focus-shadow($color: $steel) {
|
24
|
+
@return 0 0 0 1px $color inset, $input-weight-shadow, $background-shadow;
|
25
|
+
}
|
46
26
|
|
47
|
-
|
27
|
+
@function select-shadow($color: $alabaster, $size: 1px) {
|
28
|
+
@return 0 0 0 $size $color inset, $empty-shadow;
|
29
|
+
}
|
30
|
+
@function select-focus-shadow($color: $steel) {
|
31
|
+
@return 0 0 0 1px $color inset, $input-weight-shadow;
|
32
|
+
}
|
48
33
|
|
49
34
|
.switch-label, .tick-label {
|
50
35
|
pointer-events: none;
|
@@ -66,7 +51,7 @@ label {
|
|
66
51
|
opacity: 0;
|
67
52
|
z-index: -1;
|
68
53
|
}
|
69
|
-
}
|
54
|
+
}
|
70
55
|
|
71
56
|
fieldset {
|
72
57
|
border: 0;
|
@@ -102,7 +87,6 @@ fieldset h2, legend.header {
|
|
102
87
|
+ * { clear: both; }
|
103
88
|
}
|
104
89
|
|
105
|
-
|
106
90
|
@mixin input-base {
|
107
91
|
width: 100%;
|
108
92
|
font-size: 16px;
|
@@ -114,7 +98,7 @@ fieldset h2, legend.header {
|
|
114
98
|
appearance: none;
|
115
99
|
|
116
100
|
&:disabled:not([type="submit"]) {
|
117
|
-
color: $isabella;
|
101
|
+
// color: $isabella;
|
118
102
|
cursor: default;
|
119
103
|
}
|
120
104
|
}
|
@@ -131,34 +115,34 @@ input, select, textarea {
|
|
131
115
|
|
132
116
|
}
|
133
117
|
|
134
|
-
#{$text-inputs}, select, textarea {
|
135
|
-
|
136
|
-
}
|
118
|
+
#{$text-inputs}, select, textarea {
|
119
|
+
@include input-base;
|
120
|
+
}
|
137
121
|
|
138
|
-
#{$text-inputs}, textarea {
|
139
|
-
|
122
|
+
#{$text-inputs}, textarea {
|
123
|
+
box-shadow: input-shadow();
|
140
124
|
|
141
|
-
|
142
|
-
|
143
|
-
|
125
|
+
&:-webkit-autofill {
|
126
|
+
box-shadow: input-shadow();
|
127
|
+
}
|
144
128
|
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
}
|
129
|
+
@include input-active {
|
130
|
+
box-shadow: input-focus-shadow();
|
131
|
+
}
|
132
|
+
}
|
149
133
|
|
150
|
-
select {
|
151
|
-
|
134
|
+
select {
|
135
|
+
box-shadow: select-shadow();
|
152
136
|
|
153
|
-
|
154
|
-
|
155
|
-
|
137
|
+
&:-webkit-autofill {
|
138
|
+
box-shadow: select-shadow();
|
139
|
+
}
|
156
140
|
|
157
|
-
|
158
|
-
|
159
|
-
|
141
|
+
@include input-active {
|
142
|
+
box-shadow: select-focus-shadow();
|
143
|
+
}
|
160
144
|
|
161
|
-
}
|
145
|
+
}
|
162
146
|
|
163
147
|
textarea {
|
164
148
|
line-height: vr(1.5);
|