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.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ratchet/core.js +4 -0
  3. data/app/assets/javascripts/ratchet/shim/object_fit.js +236 -0
  4. data/app/assets/javascripts/ratchet/utility/load_font.js +24 -11
  5. data/app/assets/stylesheets/ratchet/base/_document.scss +8 -30
  6. data/app/assets/stylesheets/ratchet/base/_form.scss +42 -58
  7. data/app/assets/stylesheets/ratchet/base/_section.scss +140 -159
  8. data/app/assets/stylesheets/ratchet/base/_text.scss +1 -1
  9. data/app/assets/stylesheets/ratchet/base/_validation.scss +3 -3
  10. data/app/assets/stylesheets/ratchet/fonts-woff.css +22 -6
  11. data/app/assets/stylesheets/ratchet/fonts-woff2.css +22 -6
  12. data/app/assets/stylesheets/ratchet/utility/_color.scss +80 -54
  13. data/app/assets/stylesheets/ratchet/utility/_global.scss +96 -21
  14. data/app/assets/stylesheets/ratchet/utility/_grid.scss +54 -5
  15. data/app/helpers/ratchet/application_helper.rb +10 -11
  16. data/app/views/layouts/ratchet/default.html.slim +7 -7
  17. data/app/views/shared/ratchet/_defs.html.slim +23 -2
  18. data/app/views/shared/ratchet/_footer.html.slim +2 -4
  19. data/app/views/shared/ratchet/_icons.html.slim +197 -128
  20. data/lib/ratchet_design/version.rb +1 -1
  21. data/public/{core-0.1.17.js → core-0.1.18.js} +68 -64
  22. data/public/core-0.1.18.js.gz +0 -0
  23. data/public/core-0.1.18.map.json +1 -0
  24. data/public/fonts-woff-0.1.18.css +71 -0
  25. data/public/fonts-woff-0.1.18.css.gz +0 -0
  26. data/public/fonts-woff2-0.1.18.css +71 -0
  27. data/public/fonts-woff2-0.1.18.css.gz +0 -0
  28. metadata +10 -9
  29. data/public/core-0.1.17.js.gz +0 -0
  30. data/public/core-0.1.17.map.json +0 -1
  31. data/public/fonts-woff-0.1.17.css +0 -55
  32. data/public/fonts-woff-0.1.17.css.gz +0 -0
  33. data/public/fonts-woff2-0.1.17.css +0 -55
  34. 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: aa2cc12ed79853e64afc9ecee2a1ad894bd46ded
4
- data.tar.gz: 0fd055dfd76329487557080e2f17a9892b0d1a02
3
+ metadata.gz: ab32714804189a0aebc1663da68347d5cdef6dfb
4
+ data.tar.gz: 8bd3261cd9231a7f8a9551c90f35c42fb68359ee
5
5
  SHA512:
6
- metadata.gz: 82ce272bda62087a1cc46a45635ab5a6c180a2eff90a73668d64fd2584ee2f9067a223bd34db312547cf154cba232e6d4195ccc4cf492a8c96c75d74728c47c1
7
- data.tar.gz: 7fc0540eca557bcbfd9221a0749c693ae84f5d27e871621ea4d030368cd9936e6008b4dc2a5d269a7a43fc2c300f2cf3b904d22c58d8d6ee7c6d6fcf24d977c0
6
+ metadata.gz: 7b7f21a2a69fb8a4dcc903b96406cabdb8b717b7dfcab5fb93f3fdd6ed42e888e5d29ccc17033caaf63962376bdcbe15bd0696d0ad3b71a4708a2da0812f2cb2
7
+ data.tar.gz: 2b558d5a3befcebd8dfcd4963fb8371ea4cde5a48f958a46582f41ccfbb4ad344db16a06548b242d240c3be9738470d3334e43b319d7fa170ec13786269f2b12
@@ -1,3 +1,7 @@
1
+ // Shim modules
2
+ require( './shim/object_fit' );
3
+ require( './shim/scope' );
4
+
1
5
  // Utility modules
2
6
  var loadFont = require( './utility/load_font' );
3
7
  var loadScript = require( './utility/load_script' );
@@ -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
- // Public API function -
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
- nope = !window.addEventListener || ( nua.match( /(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/ ) && !nua.match( /Chrome/ ) );
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 = 'x-font-' + fontName,
34
- loStoUrlKey = loStoPrefix + 'url',
35
- loStoCssKey = loStoPrefix + 'css',
36
- storedFontUrl = loSto[ loStoUrlKey ],
37
- storedFontCss = loSto[ loStoCssKey ],
38
- styleElement = document.createElement( 'style' );
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 && ( storedFontUrl === woffUrl || storedFontUrl === woff2Url ) ) {
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
- // Public API
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: 2;
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: 400;
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: 400;
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
- padding-top: $header-height;
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
- $isabella: #dde8eb; // Off-Cream
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
- @return 0 0 0 $size $color inset, $empty-shadow, $background-shadow;
23
- }
24
- @function input-focus-shadow($color: $steel) {
25
- @return 0 0 0 1px $color inset, $input-weight-shadow, $background-shadow;
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
- @include input-base;
136
- }
118
+ #{$text-inputs}, select, textarea {
119
+ @include input-base;
120
+ }
137
121
 
138
- #{$text-inputs}, textarea {
139
- box-shadow: input-shadow();
122
+ #{$text-inputs}, textarea {
123
+ box-shadow: input-shadow();
140
124
 
141
- &:-webkit-autofill {
142
- box-shadow: input-shadow();
143
- }
125
+ &:-webkit-autofill {
126
+ box-shadow: input-shadow();
127
+ }
144
128
 
145
- @include input-active {
146
- box-shadow: input-focus-shadow();
147
- }
148
- }
129
+ @include input-active {
130
+ box-shadow: input-focus-shadow();
131
+ }
132
+ }
149
133
 
150
- select {
151
- box-shadow: select-shadow();
134
+ select {
135
+ box-shadow: select-shadow();
152
136
 
153
- &:-webkit-autofill {
154
- box-shadow: select-shadow();
155
- }
137
+ &:-webkit-autofill {
138
+ box-shadow: select-shadow();
139
+ }
156
140
 
157
- @include input-active {
158
- box-shadow: select-focus-shadow();
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);