mfbs

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

commit
865c97668f860f8be14ecab68df455dc98235287
parent
f84ade68a67e02faf0b8a3f3aa36914ea97678eb
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2024-04-04 20:58
use static interpolation instead of sass color mixing

Diffstat

M sass/form.scss 23 +++++++++++++++--------

1 files changed, 15 insertions, 8 deletions


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

@@ -33,10 +33,17 @@ textarea {
   33    33     line-height: inherit;
   34    34 }
   35    35 
   36    -1 @mixin color-link($amount) {
   37    -1     border-color: mix($color-link, $color-link-focus, $amount);
   38    -1     background: mix($color-link, $color-link-focus, $amount);
   39    -1     color: $color-bg;
   -1    36 @keyframes color-link {
   -1    37     from {
   -1    38         border-color: $color-link;
   -1    39         background: $color-link;
   -1    40         color: $color-bg;
   -1    41     }
   -1    42     to {
   -1    43         border-color: $color-link-focus;
   -1    44         background: $color-link-focus;
   -1    45         color: $color-bg;
   -1    46     }
   40    47 }
   41    48 
   42    49 .button,
@@ -50,16 +57,16 @@ button,
   50    57     text-align: center;
   51    58     border-radius: 0.3em;
   52    59 
   53    -1     @inline color-link(0%);
   -1    60     animation: 100s color-link linear forwards paused;
   54    61 
   55    62     &:hover, &:focus-visible {
   56    -1         @inline color-link(50%);
   -1    63         animation-delay: -50s;
   57    64     }
   58    65     &:active {
   59    -1         @inline color-link(100%);
   -1    66         animation-delay: -100s;
   60    67     }
   61    68     &:disabled {
   62    -1         @inline color-link(0%);
   -1    69         animation-delay: 0s;
   63    70         opacity: 0.6;
   64    71         cursor: not-allowed;
   65    72     }