1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict';
|
7 |
|
8 | const px = require('add-px-to-style');
|
9 | const fonts = require('google-fonts');
|
10 | const color = require('tinycolor2');
|
11 | const scopeCss = require('scope-css');
|
12 | const interpolate = require('color-interpolate');
|
13 | const none = require('./none');
|
14 |
|
15 |
|
16 | module.exports = typer;
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | typer.palette = ['white', 'black'];
|
22 |
|
23 | typer.active = '#24D4C0';
|
24 |
|
25 | typer.fontSize = 12;
|
26 | typer.fontFamily = '"Montserrat", sans-serif';
|
27 | typer.labelWidth = '9em';
|
28 | typer.inputHeight = 2;
|
29 | typer.padding = 1/5;
|
30 |
|
31 |
|
32 | typer.bg = .9;
|
33 | typer.radius = 2;
|
34 | typer.fg = .08;
|
35 |
|
36 | fonts.add({
|
37 | 'Montserrat': [400, 600],
|
38 | 'Material Icons': 400
|
39 | });
|
40 |
|
41 |
|
42 | function typer (opts) {
|
43 | opts = opts || {};
|
44 |
|
45 | let h = opts.inputHeight || typer.inputHeight;
|
46 | let labelWidth = opts.labelWidth || typer.labelWidth;
|
47 | let fontSize = opts.fontSize || typer.fontSize;
|
48 | let font = opts.fontFamily || typer.fontFamily;
|
49 | let radius = opts.radius || typer.radius;
|
50 | let padding = opts.padding || typer.padding;
|
51 |
|
52 |
|
53 | let bg = opts.bg || typer.bg;
|
54 | let fg = opts.fg || typer.fg;
|
55 |
|
56 |
|
57 |
|
58 | let palette = opts.palette || typer.palette;
|
59 | let pick = interpolate(palette);
|
60 |
|
61 |
|
62 | let nPalette = palette.slice().sort((a, b) => color(a).getLuminance() - color(b).getLuminance());
|
63 | let npick = interpolate(nPalette);
|
64 |
|
65 |
|
66 | let light = color.mix('white', nPalette[nPalette.length - 1], 25).toString();
|
67 | let shadow = color.mix('black', nPalette[0], 25).toString();
|
68 |
|
69 | let active = opts.active || tone(.5);
|
70 |
|
71 |
|
72 | function tone (amt) {
|
73 | if (typeof amt === 'number') {
|
74 | amt = Math.max(Math.min(amt, 1), 0);
|
75 | return color(pick(amt)).toString();
|
76 | }
|
77 | return amt;
|
78 | }
|
79 | function ntone (amt) {
|
80 | if (typeof amt === 'number') {
|
81 | amt = Math.max(Math.min(amt, 1), 0);
|
82 | return color(npick(amt)).toString();
|
83 | }
|
84 | return amt;
|
85 | }
|
86 | function lighten (v, amt, t = tone) {
|
87 | return color(t(v)).lighten(amt*100);
|
88 | }
|
89 | function darken (v, amt, t = tone) {
|
90 | return color(t(v)).darken(amt*100);
|
91 | }
|
92 | function alpha (c, value) {
|
93 | return color(c).setAlpha(value).toString();
|
94 | }
|
95 |
|
96 | let inversed = color(palette[0]).getLuminance() > color(palette[palette.length - 1]).getLuminance();
|
97 |
|
98 |
|
99 | let pop = (v = .9, d = .05, t = tone) => `
|
100 | ${text(fg, v)}
|
101 | background-color: ${t(v)};
|
102 | background-image: linear-gradient(to bottom, ${lighten(v, d, t)}, ${darken(v, d, t)});
|
103 | box-shadow: inset 1px 0px ${alpha(light, .04)}, inset 0px 1px ${alpha(light, .15)}, inset 0px -1px 1px ${alpha(light, .07)}, 0 1px 2px ${alpha(shadow, .35)};
|
104 | `;
|
105 | let push = (v = .1, d = .05, t = tone) => `
|
106 | background: ${t(v)};
|
107 | /*background-image: linear-gradient(to bottom, ${darken(v, d, t)}, ${lighten(v, d, t)});*/
|
108 | box-shadow: inset 0 1px 2px ${alpha(shadow, .18)}, 0 1px ${alpha(light, .2)};
|
109 | color: ${t(1 - fg)};
|
110 | text-shadow: none;
|
111 | `;
|
112 | let text = (v, bg) => color(tone(v)).getLuminance() > color(tone(bg)).getLuminance() ? `
|
113 | color: ${tone(v)};
|
114 | background: ${tone(bg)};
|
115 | text-shadow: 0 -1px ${color.mix(tone(bg), shadow, 50)};
|
116 | ` : `
|
117 | color: ${tone(v)};
|
118 | background: ${tone(bg)};
|
119 | text-shadow: 0 1px ${color.mix(tone(bg), light, 50)};
|
120 | `;
|
121 |
|
122 | return none({
|
123 | fontSize: fontSize,
|
124 | fontFamily: font,
|
125 | inputHeight: h,
|
126 | labelWidth: labelWidth,
|
127 | palette: [tone(fg), tone(bg)],
|
128 | padding: padding
|
129 | }) + `
|
130 | :host {
|
131 | ${text(fg, bg)};
|
132 | box-shadow: inset 0 1px ${alpha(light, .15)}, 0 1.5px 11px -2px ${alpha(shadow, .666)};
|
133 | border-radius: ${radius*2}px;
|
134 | }
|
135 |
|
136 | :host a {
|
137 | text-decoration: none;
|
138 | border-bottom: 1px solid ${alpha(tone(.0), .1)};
|
139 | }
|
140 | :host a:hover {
|
141 | text-decoration: none;
|
142 | border-bottom: 1px solid ${alpha(tone(.0), 1)};
|
143 | }
|
144 |
|
145 | .settings-panel-title {
|
146 | font-weight: 400;
|
147 | ${text(fg, bg)};
|
148 | background: none;
|
149 | }
|
150 |
|
151 | .settings-panel-label {
|
152 | ${text(.25, bg)};
|
153 | background: none;
|
154 | }
|
155 |
|
156 | .settings-panel-field:hover .settings-panel-label {
|
157 | color: ${tone(fg)};
|
158 | }
|
159 |
|
160 |
|
161 |
|
162 | /** Values */
|
163 | .settings-panel-value {
|
164 | }
|
165 | .settings-panel-value:first-child {
|
166 | }
|
167 | .settings-panel-value:hover,
|
168 | .settings-panel-value:focus {
|
169 | }
|
170 |
|
171 |
|
172 |
|
173 | /** Sliders */
|
174 | .settings-panel-range {
|
175 | -webkit-appearance: none;
|
176 | -moz-appearance: none;
|
177 | appearance: none;
|
178 | background: none;
|
179 | border: 0;
|
180 | }
|
181 | .settings-panel-field--range:hover .settings-panel-range,
|
182 | .settings-panel-range:focus {
|
183 | outline: none;
|
184 | }
|
185 | .settings-panel-range::-webkit-slider-runnable-track {
|
186 | height: .5em;
|
187 | border-radius: .5em;
|
188 | ${push(fg, .05)}
|
189 | }
|
190 | .settings-panel-range::-moz-range-track {
|
191 | height: .5em;
|
192 | border-radius: .5em;
|
193 | ${push(fg, .05)}
|
194 | }
|
195 | .settings-panel-range::-ms-track {
|
196 | ${push(fg, .05)}
|
197 | outline: none;
|
198 | color: transparent;
|
199 | border: none;
|
200 | height: .5em;
|
201 | border-radius: .5em;
|
202 | }
|
203 | .settings-panel-range::-ms-fill-lower {
|
204 | border-radius: .5em;
|
205 | ${push(fg, .05)}
|
206 | }
|
207 | .settings-panel-range::-ms-fill-upper {
|
208 | border-radius: .5em;
|
209 | ${push(.93, .05)}
|
210 | }
|
211 |
|
212 | @supports (--css: variables) {
|
213 | .settings-panel-range {
|
214 | width: 100%;
|
215 | --active: ${active};
|
216 | --bg: ${tone(.9)};
|
217 | --track-background: linear-gradient(to right, var(--active) 0, var(--active) var(--value), var(--bg) 0) no-repeat;
|
218 | }
|
219 | .settings-panel-range::-webkit-slider-runnable-track {
|
220 | background: var(--track-background);
|
221 | }
|
222 | .settings-panel-range::-moz-range-track {
|
223 | background: var(--track-background);
|
224 | }
|
225 | .settings-panel-field--range .settings-panel-input {
|
226 | margin-right: ${h}em;
|
227 | }
|
228 | .settings-panel-field--range:hover .settings-panel-range,
|
229 | .settings-panel-range:focus {
|
230 | --bg: ${tone(.93)};
|
231 | }
|
232 | .settings-panel-range-value {
|
233 | display: none;
|
234 | position: absolute;
|
235 | top: -${h*1.25}em;
|
236 | text-align: center;
|
237 | padding: 0;
|
238 | color: ${tone(fg)};
|
239 | background: ${tone(1)};
|
240 | box-shadow: 0 1px 5px -1px ${alpha(shadow, .5)};
|
241 | border-radius: ${radius}px;
|
242 | z-index: 3;
|
243 | margin-left: ${-h*.65}em;
|
244 | width: ${h*2}em;
|
245 | text-shadow: none;
|
246 | left: calc(var(--value) - var(--coef) * ${h*.8}em);
|
247 | }
|
248 | .settings-panel-field--range .settings-panel-value-tip {
|
249 | position: absolute;
|
250 | height: 0;
|
251 | top: -${h*.25}em;
|
252 | left: calc(var(--value) - var(--coef) * ${h*.8}em);
|
253 | margin-left: ${h*.1}em;
|
254 | display: none;
|
255 | z-index: 3;
|
256 | border-top: ${h*.3}em solid ${tone(1)};
|
257 | border-left: ${h*.3}em solid transparent;
|
258 | border-right: ${h*.3}em solid transparent;
|
259 | border-bottom: none;
|
260 | }
|
261 | .settings-panel-input:before {
|
262 | border-top: ${h*.3}em solid ${alpha(shadow, .25)};
|
263 | }
|
264 | .settings-panel-field--range:hover .settings-panel-value-tip,
|
265 | .settings-panel-range:focus ~ .settings-panel-value-tip {
|
266 | display: block;
|
267 | }
|
268 | .settings-panel-field--range:hover .settings-panel-value,
|
269 | .settings-panel-range:focus ~ .settings-panel-value {
|
270 | display: block;
|
271 | }
|
272 | }
|
273 |
|
274 | .settings-panel-range::-webkit-slider-thumb {
|
275 | ${pop(fg, -.05)};
|
276 | height: ${h*.8}em;
|
277 | width: ${h*.8}em;
|
278 | border-radius: ${h*.8}em;
|
279 | margin-top: -${h*.4}em;
|
280 | border: 0;
|
281 | position: relative;
|
282 | top: .25em;
|
283 | -webkit-appearance: none;
|
284 | appearance: none;
|
285 | z-index: 3;
|
286 | }
|
287 | .settings-panel-range:focus::-webkit-slider-thumb,
|
288 | .settings-panel-range:hover::-webkit-slider-thumb,
|
289 | .settings-panel-field--range:hover .settings-panel-range::-webkit-slider-thumb {
|
290 | }
|
291 | .settings-panel-range::-webkit-slider-thumb:active {
|
292 | }
|
293 |
|
294 | .settings-panel-range::-moz-range-thumb {
|
295 | ${pop(fg, -.05)};
|
296 | height: ${h*.8}em;
|
297 | width: ${h*.8}em;
|
298 | border-radius: ${h*.8}em;
|
299 | margin-top: -${h*.4}em;
|
300 | border: 0;
|
301 | position: relative;
|
302 | top: .25em;
|
303 | -moz-appearance: none;
|
304 | appearance: none;
|
305 | z-index: 3;
|
306 | }
|
307 | .settings-panel-range:focus::-moz-range-thumb,
|
308 | .settings-panel-range::-moz-range-thumb:hover,
|
309 | .settings-panel-field--range:hover .settings-panel-range::-moz-range-thumb {
|
310 | }
|
311 | .settings-panel-range::-moz-range-thumb:active {
|
312 | }
|
313 |
|
314 | .settings-panel-range::-ms-thumb {
|
315 | ${pop(fg, -.05)};
|
316 | height: ${h*.8}em;
|
317 | width: ${h*.8}em;
|
318 | border-radius: ${h*.8}em;
|
319 | border: 0;
|
320 | position: relative;
|
321 | top: .25em;
|
322 | -ms-appearance: none;
|
323 | appearance: none;
|
324 | z-index: 3;
|
325 | }
|
326 | .settings-panel-range:focus::-ms-thumb,
|
327 | .settings-panel-range:hover::-ms-thumb,
|
328 | .settings-panel-field--range:hover .settings-panel-range::-ms-thumb {
|
329 | }
|
330 | .settings-panel-range::-ms-thumb:active {
|
331 | }
|
332 |
|
333 |
|
334 | /** Interval */
|
335 | .settings-panel-interval {
|
336 | background: none;
|
337 | }
|
338 | .settings-panel-interval:after {
|
339 | content: '';
|
340 | position: absolute;
|
341 | width: 100%;
|
342 | left: 0;
|
343 | bottom: 0;
|
344 | top: 0;
|
345 | height: .5em;
|
346 | border-radius: .5em;
|
347 | margin-top: auto;
|
348 | margin-bottom: auto;
|
349 | ${push(.9, .05)}
|
350 | background: ${tone(.9)};
|
351 | }
|
352 | .settings-panel-field--interval:hover .settings-panel-interval:after,
|
353 | .settings-panel-interval-dragging .settings-panel-interval:after {
|
354 | background: ${tone(.93)};
|
355 | }
|
356 | .settings-panel-interval-handle {
|
357 | position: absolute;
|
358 | z-index: 1;
|
359 | top: 0;
|
360 | height: .5em;
|
361 | bottom: 0;
|
362 | margin-top: auto;
|
363 | margin-bottom: auto;
|
364 | background: ${active};
|
365 | }
|
366 | .settings-panel-interval-handle:after,
|
367 | .settings-panel-interval-handle:before {
|
368 | content: '';
|
369 | position: absolute;
|
370 | right: -${h*.4}em;
|
371 | top: 0;
|
372 | bottom: 0;
|
373 | margin: auto;
|
374 | height: ${h*.8}em;
|
375 | width: ${h*.8}em;
|
376 | border-radius: ${h*.8}em;
|
377 | ${pop(fg, -.05)};
|
378 | }
|
379 | .settings-panel-interval-handle:before {
|
380 | left: -${h*.4}em;
|
381 | right: auto;
|
382 | }
|
383 |
|
384 | .settings-panel-field--interval:hover .settings-panel-interval-handle:after,
|
385 | .settings-panel-field--interval:hover .settings-panel-interval-handle:before,
|
386 | .settings-panel-interval-dragging .settings-panel-interval-handle:after,
|
387 | .settings-panel-interval-dragging .settings-panel-interval-handle:before {
|
388 | ${pop(fg, -.05)};
|
389 | }
|
390 |
|
391 | @supports (--css: variables) {
|
392 | .settings-panel-interval {
|
393 | width: 100%;
|
394 | }
|
395 |
|
396 | .settings-panel-interval-value {
|
397 | position: absolute;
|
398 | top: -${h*1.25}em;
|
399 | text-align: center;
|
400 | padding: 0;
|
401 | display: none;
|
402 | color: ${tone(fg)};
|
403 | background: ${tone(1)};
|
404 | box-shadow: 0 1px 5px -1px ${alpha(shadow, .5)};
|
405 | border-radius: ${radius}px;
|
406 | z-index: 3;
|
407 | margin-left: ${-h}em;
|
408 | width: ${h*2}em;
|
409 | text-shadow: none;
|
410 | left: var(--value);
|
411 | }
|
412 |
|
413 | .settings-panel-field--interval .settings-panel-value-tip {
|
414 | position: absolute;
|
415 | height: 0;
|
416 | display: none;
|
417 | top: -${h*.25}em;
|
418 | left: var(--low);
|
419 | margin-left: ${-h*.3}em;
|
420 | z-index: 3;
|
421 | border-top: ${h*.3}em solid ${tone(1)};
|
422 | border-left: ${h*.3}em solid transparent;
|
423 | border-right: ${h*.3}em solid transparent;
|
424 | border-bottom: none;
|
425 | }
|
426 | .settings-panel-interval-value--right + .settings-panel-value-tip {
|
427 | left: var(--high);
|
428 | }
|
429 |
|
430 | .settings-panel-input:before {
|
431 | border-top: ${h*.3}em solid ${alpha(shadow, .25)};
|
432 | }
|
433 | .settings-panel-field--interval:hover .settings-panel-interval-value,
|
434 | .settings-panel-interval-dragging .settings-panel-interval-value {
|
435 | display: block;
|
436 | }
|
437 | @media (min-width: 640px) {
|
438 | .settings-panel-field--interval:hover .settings-panel-value-tip,
|
439 | .settings-panel-interval-dragging .settings-panel-value-tip {
|
440 | display: block;
|
441 | }
|
442 | }
|
443 | }
|
444 |
|
445 |
|
446 | /** Switch style */
|
447 | .settings-panel-switch {
|
448 | }
|
449 | .settings-panel-switch-input {
|
450 | display: none;
|
451 | }
|
452 | .settings-panel-switch-label {
|
453 | position: relative;
|
454 | display: inline-block;
|
455 | padding: 0 ${h/2}em;
|
456 | margin: 0;
|
457 | z-index: 2;
|
458 | text-align: center;
|
459 | ${pop(bg * .95, .07)};
|
460 | color: ${tone(.25)};
|
461 | }
|
462 | .settings-panel-switch-input:checked + .settings-panel-switch-label {
|
463 | ${push(.95, bg)};
|
464 | color: ${tone(fg)};
|
465 | }
|
466 |
|
467 | .settings-panel-switch-input:first-child + .settings-panel-switch-label {
|
468 | border-top-left-radius: 2px;
|
469 | border-bottom-left-radius: 2px;
|
470 | }
|
471 | .settings-panel-switch-label:last-child {
|
472 | border-top-right-radius: 2px;
|
473 | border-bottom-right-radius: 2px;
|
474 | }
|
475 |
|
476 | .settings-panel-switch-label:hover {
|
477 | ${pop(bg * .95 + (inversed ? -.07 : .07), .07)};
|
478 | }
|
479 | .settings-panel-switch-label:active {
|
480 | ${pop(bg * .95 + (inversed ? .07 : -.07), .07)};
|
481 | }
|
482 |
|
483 |
|
484 |
|
485 | .settings-panel-select {
|
486 | border-radius: ${radius}px;
|
487 | padding-left: ${h/4}em;
|
488 | outline: none;
|
489 | border: none;
|
490 | -webkit-appearance: none;
|
491 | -moz-appearance: none;
|
492 | -o-appearance:none;
|
493 | appearance:none;
|
494 | ${pop(bg * .95, .07)};
|
495 | color: ${tone(.25)};
|
496 | }
|
497 | .settings-panel-select:hover,
|
498 | .settings-panel-select:active,
|
499 | .settings-panel-select:focus {
|
500 | ${pop(bg * .95 + (inversed ? -.07 : .07), .07)};
|
501 | }
|
502 | .settings-panel-select::-ms-expand {
|
503 | display: none;
|
504 | }
|
505 | .settings-panel-select-triangle {
|
506 | color: inherit;
|
507 | display: block;
|
508 | transform: scale(.8);
|
509 | }
|
510 |
|
511 |
|
512 |
|
513 | .settings-panel-button {
|
514 | text-align: center;
|
515 | border: none;
|
516 | border-radius: ${radius}px;
|
517 | ${pop(bg * .95, .07)};
|
518 | color: ${tone(.25)};
|
519 | }
|
520 | .settings-panel-button:focus {
|
521 | outline: none;
|
522 | }
|
523 | .settings-panel-button:hover {
|
524 | ${pop(bg * .95 + (inversed ? -.07 : .07), .07)};
|
525 | color: ${tone(fg)};
|
526 | }
|
527 | .settings-panel-button:active {
|
528 | ${push(fg, .05)};
|
529 | }
|
530 |
|
531 |
|
532 |
|
533 | .settings-panel-text,
|
534 | .settings-panel-textarea {
|
535 | -webkit-appearance: none;
|
536 | -moz-appearance: none;
|
537 | -o-appearance:none;
|
538 | border: none;
|
539 | height: ${h}em;
|
540 | padding: 0;
|
541 | width: 100%;
|
542 | border-radius: ${radius}px;
|
543 | padding-left: .4em;
|
544 | ${push(bg*.95)};
|
545 | color: ${tone(fg)};
|
546 | text-shadow: none;
|
547 | }
|
548 | .settings-panel-textarea {
|
549 | padding-top: .35em;
|
550 | }
|
551 |
|
552 | .settings-panel-text:hover,
|
553 | .settings-panel-textarea:hover,
|
554 | .settings-panel-text:focus,
|
555 | .settings-panel-textarea:focus {
|
556 | ${push(bg * .95 - .04)};
|
557 | color: ${tone(fg)};
|
558 | outline: none;
|
559 | }
|
560 |
|
561 |
|
562 | .settings-panel-color {
|
563 | position: relative;
|
564 | width: ${h}em;
|
565 | border-top-left-radius: 3px;
|
566 | border-bottom-left-radius: 3px;
|
567 | display: inline-block;
|
568 | vertical-align: baseline;
|
569 | box-shadow: 0 1px ${alpha(light, .2)};
|
570 | }
|
571 | .settings-panel-color-value {
|
572 | -webkit-appearance: none;
|
573 | -moz-appearance: none;
|
574 | -o-appearance:none;
|
575 | border: none;
|
576 | padding-left: ${h/4}em;
|
577 | width: calc(100% - ${h}em);
|
578 | font-family: inherit;
|
579 | border-top-left-radius: 0;
|
580 | border-bottom-left-radius: 0;
|
581 | border-top-right-radius: 3px;
|
582 | border-bottom-right-radius: 3px;
|
583 | ${push(bg*.95)};
|
584 | color: ${tone(fg)};
|
585 | text-shadow: none;
|
586 | }
|
587 | .settings-panel-color-value:hover,
|
588 | .settings-panel-color-value:focus {
|
589 | outline: none;
|
590 | ${push(bg * .95 - .04)};
|
591 | color: ${tone(fg)};
|
592 | }
|
593 |
|
594 |
|
595 |
|
596 | .settings-panel-checkbox {
|
597 | display: none;
|
598 | }
|
599 | .settings-panel-checkbox-label {
|
600 | display: inline-block;
|
601 | ${text(.25, bg)};
|
602 | position: relative;
|
603 | margin-right: ${h}em;
|
604 | }
|
605 | .settings-panel-checkbox-label:before {
|
606 | font-family: "Material Icons";
|
607 | content: '';
|
608 | font-weight: bolder;
|
609 | font-size: ${h*.75}em;
|
610 | display: block;
|
611 | float: left;
|
612 | width: 2em;
|
613 | margin-right: -2em;
|
614 | margin-top: -${h*.1}em;
|
615 | opacity: 0;
|
616 | z-index: 1;
|
617 | position: relative;
|
618 | color: ${tone(fg)};
|
619 | text-shadow: 0 1px 2px ${alpha(shadow, .5)};
|
620 | }
|
621 | .settings-panel-checkbox-label:after {
|
622 | content: '';
|
623 | display: block;
|
624 | float: left;
|
625 | margin-top: -${h*.05}em;
|
626 | width: ${h*.666}em;
|
627 | height: ${h*.666}em;
|
628 | border-radius: ${radius}px;
|
629 | position: relative;
|
630 | margin-right: ${h/3}em;
|
631 | line-height: ${h/2}em;
|
632 | text-align: center;
|
633 | z-index: 0;
|
634 | ${push(.915)};
|
635 | }
|
636 | .settings-panel-checkbox-label:hover {
|
637 | color: ${tone(fg)};
|
638 | }
|
639 | .settings-panel-checkbox-label:hover:after {
|
640 | ${push(.93, .07)};
|
641 | }
|
642 | .settings-panel-checkbox:checked + .settings-panel-checkbox-label {
|
643 | }
|
644 | .settings-panel-checkbox:checked + .settings-panel-checkbox-label:before {
|
645 | opacity: 1;
|
646 | }
|
647 | .settings-panel-checkbox:checked + .settings-panel-checkbox-label:after {
|
648 | ${push(.93, .1)};
|
649 | }
|
650 |
|
651 |
|
652 |
|
653 | ::-webkit-input-placeholder {
|
654 | color: ${alpha(tone(0), .5)};
|
655 | }
|
656 | ::-moz-placeholder {
|
657 | color: ${alpha(tone(0), .5)};
|
658 | }
|
659 | :-ms-input-placeholder {
|
660 | color: ${alpha(tone(0), .5)};
|
661 | }
|
662 | :-moz-placeholder {
|
663 | color: ${alpha(tone(0), .5)};
|
664 | }
|
665 | ::-moz-selection {
|
666 | background: ${tone(fg)};
|
667 | color: ${tone(bg)};
|
668 | }
|
669 | ::selection {
|
670 | background: ${tone(fg)};
|
671 | color: ${tone(bg)};
|
672 | }
|
673 | :host hr {
|
674 | border: none;
|
675 | height: 3px;
|
676 | border-radius: ${radius}px;
|
677 | margin: ${h/3}em 0;
|
678 | ${push(bg * .98, .05)};
|
679 | }
|
680 | `;
|
681 | };
|
682 |
|
\ | No newline at end of file |