- commit
- d03c76eb2919a4878e867018020d21581aca5be9
- parent
- 47628ed7edefd0adf6ac06daf077f34c0b4c0b73
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-07-06 06:03
rm scss dependency
Diffstat
| M | .gitignore | 1 | - |
| M | Makefile | 3 | --- |
| R | src/outline.scss -> outline.css | 219 | ++++++++++++++++++++++++++++++------------------------------- |
3 files changed, 108 insertions, 115 deletions
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@ 1 1 vendor2 -1 /outline.css3 2 /icon-128.png 4 3 *.zip
diff --git a/Makefile b/Makefile
@@ -9,8 +9,5 @@ vendor: 9 9 icon-128.png: icon.svg 10 10 convert -resize 128x -background transparent $< $@ 11 1112 -1 outline.css: src/outline.scss13 -1 npx sass $< $@14 -115 12 clean: 16 13 rm -rf vendor outline.css
diff --git a/src/outline.scss b/outline.css
@@ -3,22 +3,17 @@ 3 3 to {transform: rotate(1turn)} 4 4 } 5 56 -1 %button-base {7 -1 font-size: inherit;8 -1 line-height: 1.2;9 -1 color: inherit;10 -1 padding: 0.5em;11 -1 background-color: var(--color-tint);12 -1 border: 1px solid var(--color-border);13 -1 border-radius: 0;14 -1 }15 -116 6 .a11y-outline-target { 17 7 outline: 5px solid #26c !important; -1 8 } 18 919 -1 @media (prefers-color-scheme: dark) {20 -1 outline-color: #3ae !important;21 -1 }-1 10 #a11y-outline, -1 11 #a11y-outline * { -1 12 all: revert; -1 13 } -1 14 -1 15 #a11y-outline [hidden] { -1 16 display: none !important; 22 17 } 23 18 24 19 #a11y-outline { @@ -26,21 +21,6 @@ 26 21 --color-focus: #26c; 27 22 --color-tint: rgba(0,0,0,0.1); 28 2329 -1 @media (prefers-color-scheme: dark) {30 -1 --color-border: rgba(255,255,255,0.2);31 -1 --color-focus: #3ae;32 -1 --color-tint: rgba(255,255,255,0.1);33 -1 color-scheme: dark;34 -1 }35 -136 -1 [hidden] {37 -1 display: none !important;38 -1 }39 -140 -1 &, * {41 -1 all: revert;42 -1 }43 -144 24 font-size: initial; 45 25 line-height: 1.4; 46 26 text-align: start; @@ -48,93 +28,110 @@ 48 28 border: 1px solid var(--color-border); 49 29 border-radius: 0.3em; 50 30 box-shadow: 0 0 0.5em rgba(0,0,0,0.3); -1 31 } 51 3252 -1 header {53 -1 display: flex;54 -1 gap: 0.5em;55 -1 margin: 0 0 1em;56 -1 }-1 33 #a11y-outline header { -1 34 display: flex; -1 35 gap: 0.5em; -1 36 margin: 0 0 1em; -1 37 } 57 3858 -1 .close {59 -1 @extend %button-base;60 -1 box-sizing: content-box;61 -1 min-width: 1.2em;62 -1 text-align: center;63 -1 }-1 39 #a11y-outline .close, -1 40 #a11y-outline select, -1 41 #a11y-outline .treeview button { -1 42 font-size: inherit; -1 43 line-height: 1.2; -1 44 color: inherit; -1 45 padding: 0.5em; -1 46 background-color: var(--color-tint); -1 47 border: 1px solid var(--color-border); -1 48 border-radius: 0; -1 49 } 64 5065 -1 select {66 -1 @extend %button-base;67 -1 flex-grow: 1;68 -1 }-1 51 #a11y-outline .close { -1 52 box-sizing: content-box; -1 53 min-width: 1.2em; -1 54 text-align: center; -1 55 } 69 5670 -1 ul {71 -1 margin: 0;72 -1 padding-left: 1.5em;73 -1 list-style: initial;74 -1 }-1 57 #a11y-outline select { -1 58 flex-grow: 1; -1 59 } -1 60 -1 61 #a11y-outline ul { -1 62 margin: 0; -1 63 padding-left: 1.5em; -1 64 list-style: initial; -1 65 } -1 66 -1 67 #a11y-outline .treeview { -1 68 outline: 0; -1 69 } -1 70 -1 71 #a11y-outline .treeview:empty { -1 72 box-sizing: border-box; -1 73 width: 2em; -1 74 height: 2em; -1 75 margin: 0 auto; -1 76 border: 3px solid; -1 77 border-top-color: transparent; -1 78 border-radius: 50%; -1 79 animation: spin 2s infinite linear; -1 80 } -1 81 -1 82 #a11y-outline .treeview [aria-expanded=false] ul { -1 83 display: none; -1 84 } -1 85 -1 86 /* link */ -1 87 #a11y-outline .treeview a { -1 88 color: inherit; -1 89 text-decoration: none; -1 90 } -1 91 #a11y-outline .treeview [aria-selected=true] > a { -1 92 outline: 1px dotted; -1 93 } -1 94 #a11y-outline .treeview:focus [aria-selected=true] > a { -1 95 color: var(--color-focus); -1 96 } -1 97 -1 98 /* toggle */ -1 99 #a11y-outline .treeview [role=treeitem] { -1 100 position: relative; -1 101 } -1 102 -1 103 #a11y-outline .treeview button { -1 104 box-sizing: content-box; -1 105 height: auto; 75 10676 -1 .treeview {77 -1 outline: 0;78 -179 -1 &:empty {80 -1 box-sizing: border-box;81 -1 width: 2em;82 -1 height: 2em;83 -1 margin: 0 auto;84 -1 border: 3px solid;85 -1 border-top-color: transparent;86 -1 border-radius: 50%;87 -1 animation: spin 2s infinite linear;88 -1 }89 -190 -1 [aria-expanded="false"] ul {91 -1 display: none;92 -1 }93 -194 -1 // link95 -1 a {96 -1 color: inherit;97 -1 text-decoration: none;98 -1 }99 -1100 -1 [aria-selected="true"] > a {101 -1 outline: 1px dotted;102 -1 }103 -1104 -1 &:focus [aria-selected="true"] > a {105 -1 color: var(--color-focus);106 -1 }107 -1108 -1 // toggle109 -1 [role="treeitem"] {110 -1 position: relative;111 -1 }112 -1113 -1 button {114 -1 @extend %button-base;115 -1 box-sizing: content-box;116 -1117 -1 // reset118 -1 height: auto;119 -1 min-height: 0;120 -1121 -1 // layout122 -1 position: absolute;123 -1 left: -1.3em;124 -1 top: 0.3em;125 -1 padding: 0;126 -1 min-width: 0.8em;127 -1 line-height: 0.8;128 -1129 -1 text-align: center;130 -1131 -1 &::after {132 -1 content: "+";133 -1 }134 -1 }135 -1136 -1 [aria-expanded="true"] > button::after {137 -1 content: "−";138 -1 }-1 107 /* reset */ -1 108 min-height: 0; -1 109 position: absolute; -1 110 -1 111 /* layout */ -1 112 left: -1.3em; -1 113 top: 0.3em; -1 114 padding: 0; -1 115 min-width: 0.8em; -1 116 line-height: 0.8; -1 117 -1 118 text-align: center; -1 119 } -1 120 #a11y-outline .treeview button::after { -1 121 content: "+"; -1 122 } -1 123 #a11y-outline .treeview [aria-expanded=true] > button::after { -1 124 content: "−"; -1 125 } -1 126 -1 127 @media (prefers-color-scheme: dark) { -1 128 #a11y-outline { -1 129 --color-border: rgba(255,255,255,0.2); -1 130 --color-focus: #3ae; -1 131 --color-tint: rgba(255,255,255,0.1); -1 132 color-scheme: dark; -1 133 } -1 134 .a11y-outline-target { -1 135 outline-color: #3ae !important; 139 136 } 140 137 }