mfbs

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

commit
1c9c82d7543147c5c83f831c9a111c7b06cf516c
parent
aa5149a4c0cac6ce9a10ccc1db15a93889a9a581
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2024-04-04 21:52
fix: nested selectors

Diffstat

M css/base.css 22 ++++++++++------------
M css/form.css 60 +++++++++++++++++++++++++++++++++++++-----------------------

2 files changed, 47 insertions, 35 deletions


diff --git a/css/base.css b/css/base.css

@@ -45,20 +45,19 @@ h1, h2, h3, h4, h5, h6 {
   45    45     line-height: 1.2;
   46    46     margin-block: 0 0.8rem;
   47    47     break-after: avoid;
   48    -1 
   49    -1     * + & {
   50    -1         margin-block-start: calc(1.5 * var(--spacer));
   51    -1     }
   -1    48 }
   -1    49 * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
   -1    50     margin-block-start: calc(1.5 * var(--spacer));
   52    51 }
   53    52 
   54    53 :link,
   55    54 :visited {
   56    55     color: var(--color-link);
   57    56     text-decoration: underline;
   58    -1 
   59    -1     &:hover {
   60    -1         color: var(--color-link-focus);
   61    -1     }
   -1    57 }
   -1    58 :link:hover,
   -1    59 :visited:hover {
   -1    60     color: var(--color-link-focus);
   62    61 }
   63    62 
   64    63 hr {
@@ -79,10 +78,9 @@ pre {
   79    78     padding: var(--padding);
   80    79     overflow: auto;
   81    80     border: 1px solid var(--color-border);
   82    -1 
   83    -1     code {
   84    -1         all: revert;
   85    -1     }
   -1    81 }
   -1    82 pre code {
   -1    83     all: revert;
   86    84 }
   87    85 
   88    86 ol, ul {

diff --git a/css/form.css b/css/form.css

@@ -21,16 +21,19 @@ textarea,
   21    21 select {
   22    22     background: var(--color-bg);
   23    23     color: var(--color-fg);
   24    -1 
   25    -1     &:focus-visible {
   26    -1         border-color: var(--color-link-focus);
   27    -1     }
   28    -1     &:disabled {
   29    -1         border-color: var(--color-border);
   30    -1         background: var(--color-bg-tint);
   31    -1         color: var(--color-border);
   32    -1         cursor: not-allowed;
   33    -1     }
   -1    24 }
   -1    25 input:focus-visible,
   -1    26 textarea:focus-visible,
   -1    27 select:focus-visible {
   -1    28     border-color: var(--color-link-focus);
   -1    29 }
   -1    30 input:disabled,
   -1    31 textarea:disabled,
   -1    32 select:disabled {
   -1    33     border-color: var(--color-border);
   -1    34     background: var(--color-bg-tint);
   -1    35     color: var(--color-border);
   -1    36     cursor: not-allowed;
   34    37 }
   35    38 
   36    39 textarea {
@@ -59,20 +62,31 @@ button,
   59    62     cursor: pointer;
   60    63     text-align: center;
   61    64     border-radius: 0.3em;
   62    -1 
   63    65     animation: 100s color-link linear forwards paused;
   64    -1 
   65    -1     &:hover, &:focus-visible {
   66    -1         animation-delay: -50s;
   67    -1     }
   68    -1     &:active {
   69    -1         animation-delay: -100s;
   70    -1     }
   71    -1     &:disabled {
   72    -1         animation-delay: 0s;
   73    -1         opacity: 0.5;
   74    -1         cursor: not-allowed;
   75    -1     }
   -1    66 }
   -1    67 .button:hover,
   -1    68 .button:focus-visible,
   -1    69 button:hover,
   -1    70 button:focus-visible,
   -1    71 [type=button]:hover,
   -1    72 [type=button]:focus-visible,
   -1    73 [type=submit]:hover,
   -1    74 [type=submit]:focus-visible {
   -1    75     animation-delay: -50s;
   -1    76 }
   -1    77 .button:active,
   -1    78 button:active,
   -1    79 [type=button]:active,
   -1    80 [type=submit]:active {
   -1    81     animation-delay: -100s;
   -1    82 }
   -1    83 .button:disabled,
   -1    84 button:disabled,
   -1    85 [type=button]:disabled,
   -1    86 [type=submit]:disabled {
   -1    87     animation-delay: 0s;
   -1    88     opacity: 0.5;
   -1    89     cursor: not-allowed;
   76    90 }
   77    91 
   78    92 input[type="file"]::file-selector-button {