Created
August 23, 2023 02:19
-
-
Save SimeonC/cc833096163075c943d9b849e15e66d0 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $alpha: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z; | |
| :root { | |
| --pending-key: 0 0 0px 8px rgb(171, 67, 255) inset; | |
| --error-key: 0 0 0px 40px rgb(255, 58, 58) inset; | |
| } | |
| @each $letter in $alpha { | |
| body:has( [data-testid="tile"][data-state="tbd"][aria-label$=#{to-upper-case($letter)}]:not([data-animation="flip-in"])) [aria-label="Keyboard"] [data-key=#{$letter}] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has( [data-testid="tile"][data-state="tbd"][aria-label$=#{to-upper-case($letter)}]:not([data-animation="flip-in"])) [aria-label="Keyboard"] [data-key=#{$letter}][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --pending-key: 0 0 0px 8px rgb(171, 67, 255) inset; | |
| --error-key: 0 0 0px 40px rgb(255, 58, 58) inset; | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=A]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=a] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=A]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=a][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=B]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=b] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=B]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=b][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=C]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=c] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=C]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=c][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=D]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=d] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=D]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=d][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=E]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=e] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=E]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=e][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=F]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=f] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=F]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=f][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=G]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=g] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=G]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=g][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=H]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=h] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=H]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=h][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=I]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=i] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=I]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=i][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=J]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=j] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=J]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=j][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=K]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=k] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=K]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=k][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=L]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=l] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=L]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=l][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=M]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=m] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=M]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=m][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=N]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=n] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=N]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=n][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=O]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=o] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=O]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=o][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=P]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=p] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=P]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=p][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=Q]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=q] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=Q]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=q][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=R]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=r] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=R]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=r][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=S]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=s] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=S]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=s][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=T]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=t] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=T]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=t][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=U]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=u] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=U]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=u][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=V]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=v] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=V]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=v][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=W]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=w] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=W]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=w][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=X]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=x] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=X]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=x][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=Y]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=y] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=Y]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=y][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=Z]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=z] { | |
| box-shadow: var(--pending-key); | |
| } | |
| body:has([data-testid=tile][data-state=tbd][aria-label$=Z]:not([data-animation=flip-in])) [aria-label=Keyboard] [data-key=z][data-state=absent] { | |
| box-shadow: var(--error-key); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.32.12", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment