a11y-outline

commit

04f0ee4b988ec60d0c4614df8dd2b4a62993c507

parent

2630f44fad3841887e06d3c0229a58c84d6cae90

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-10-11 05:18

use CSS custom properties instead of Sass variables

Diffstat

1 files changed, 12 insertions, 12 deletions

diff --git a/src/outline.scss b/src/outline.scss

@@ -1,20 +1,20 @@
    1    -1 $color-bg: #fff;
    2    -1 $color-fg: #111;
    3    -1 $color-border: #ccc;
    4    -1 $color-focus: #26c;
    5    -1 $color-tint: #eee;
    6    -1 
    7     1 %button-base {
    8     2 	font-size: inherit;
    9     3 	line-height: 1.2;
   10     4 	color: inherit;
   11     5 	padding: 0.5em;
   12    -1 	background-color: $color-tint;
   13    -1 	border: 1px solid $color-border;
   -1     6 	background-color: var(--color-tint);
   -1     7 	border: 1px solid var(--color-border);
   14     8 	border-radius: 0;
   15     9 }
   16    10 
   17    11 #a11y-outline {
   -1    12 	--color-bg: #fff;
   -1    13 	--color-fg: #111;
   -1    14 	--color-border: #ccc;
   -1    15 	--color-focus: #26c;
   -1    16 	--color-tint: #eee;
   -1    17 
   18    18 	[hidden] {
   19    19 		display: none !important;
   20    20 	}
@@ -25,11 +25,11 @@ $color-tint: #eee;
   25    25 
   26    26 	font-size: 0.9em;
   27    27 	line-height: 1.4;
   28    -1 	background: $color-bg;
   29    -1 	color: $color-fg;
   -1    28 	background: var(--color-bg);
   -1    29 	color: var(--color-fg);
   30    30 	max-width: 40em;
   31    31 	text-align: start;
   32    -1 	border: 1px solid $color-border;
   -1    32 	border: 1px solid var(--color-border);
   33    33 	border-radius: 0.3em;
   34    34 	box-shadow: 0 0 0.5em rgba(0,0,0,0.3);
   35    35 
@@ -75,7 +75,7 @@ $color-tint: #eee;
   75    75 		}
   76    76 
   77    77 		&:focus [aria-selected="true"] > a {
   78    -1 			color: $color-focus;
   -1    78 			color: var(--color-focus);
   79    79 		}
   80    80 
   81    81 		// toggle