mfbs

CSS microframework
git clone https://git.ce9e.org/mfbs.git

commit
fa3eba7b9f5475374adbc45f7c83982d46133d7d
parent
7d79794add65ee99e8a835186b4cdef4bab7b9b4
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2021-07-15 06:33
use focus-visible

see https://css-tricks.com/the-focus-visible-trick/

Diffstat

M sass/base.scss 6 ++++++
M sass/form.scss 8 ++++++++

2 files changed, 14 insertions, 0 deletions


diff --git a/sass/base.scss b/sass/base.scss

@@ -44,6 +44,9 @@ h1, h2, h3, h4, h5, h6 {
   44    44     &:hover, &:focus, &:active {
   45    45         color: $color-link-focus;
   46    46     }
   -1    47     &:focus:not(:focus-visible) {
   -1    48         color: $color-link;
   -1    49     }
   47    50 }
   48    51 
   49    52 :visited {
@@ -53,6 +56,9 @@ h1, h2, h3, h4, h5, h6 {
   53    56     &:hover, &:focus, &:active {
   54    57         color: $color-link-visited-focus;
   55    58     }
   -1    59     &:focus:not(:focus-visible) {
   -1    60         color: $color-link-visited;
   -1    61     }
   56    62 }
   57    63 
   58    64 hr {

diff --git a/sass/form.scss b/sass/form.scss

@@ -20,6 +20,9 @@ select {
   20    20     &:focus {
   21    21         border-color: $color-link-focus;
   22    22     }
   -1    23     &:focus:not(:focus-visible) {
   -1    24         border-color: $color-border;
   -1    25     }
   23    26     &:disabled {
   24    27         border-color: $color-border;
   25    28         background: $color-bg-tint;
@@ -42,6 +45,11 @@ textarea {
   42    45         background: mix($color, $color-focus, 50%);
   43    46         color: $color-contrast;
   44    47     }
   -1    48     &:focus:not(:focus-visible) {
   -1    49         border-color: $color;
   -1    50         background: $color;
   -1    51         color: $color-contrast;
   -1    52     }
   45    53     &:active {
   46    54         border-color: $color-focus;
   47    55         background: $color-focus;