mirror of
https://github.com/kognise/water.css.git
synced 2025-02-24 22:02:50 +01:00
feat: rewrite partials to use CSS variables
This commit is contained in:
parent
bc0daa5de6
commit
550e4a72fc
@ -6,16 +6,16 @@ body {
|
||||
margin: 20px auto;
|
||||
padding: 0 10px;
|
||||
|
||||
color: $text-main;
|
||||
background: $background;
|
||||
color: var(--text-main);
|
||||
background: var(--background);
|
||||
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
transition: background-color $animation-duration linear,
|
||||
border-color $animation-duration linear,
|
||||
color $animation-duration linear,
|
||||
box-shadow $animation-duration linear,
|
||||
transform $animation-duration ease;
|
||||
transition: background-color var(--animation-duration) linear,
|
||||
border-color var(--animation-duration) linear,
|
||||
color var(--animation-duration) linear,
|
||||
box-shadow var(--animation-duration) linear,
|
||||
transform var(--animation-duration) ease;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
code, kbd {
|
||||
background: $background-alt;
|
||||
color: $code;
|
||||
background: var(--background-alt);
|
||||
color: var(--code);
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
@ -11,8 +11,8 @@ select {
|
||||
}
|
||||
|
||||
input, select, button, textarea {
|
||||
color: $form-text;
|
||||
background-color: $background-alt;
|
||||
color: var(--form-text);
|
||||
background-color: var(--background-alt);
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
@ -46,14 +46,14 @@ button, input[type='submit'], input[type='button'] {
|
||||
button:hover,
|
||||
input[type='submit']:hover,
|
||||
input[type='button']:hover {
|
||||
background: $button-hover;
|
||||
background: var(--button-hover);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
button:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 2px $focus;
|
||||
box-shadow: 0 0 0 2px var(--focus);
|
||||
}
|
||||
|
||||
input[type='checkbox']:active,
|
||||
@ -73,5 +73,5 @@ textarea:disabled {
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: $form-placeholder;
|
||||
color: var(--form-placeholder);
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $links;
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
@ -5,7 +5,7 @@ img {
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid $border;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
table {
|
||||
@ -20,11 +20,11 @@ td, th {
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid $border;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: $background-alt;
|
||||
background-color: var(--background-alt);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@ -33,19 +33,19 @@ tbody tr:nth-child(even) {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $background-alt;
|
||||
background: var(--background-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $scrollbar-thumb;
|
||||
background: var(--scrollbar-thumb);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $scrollbar-thumb-hover;
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: $selection;
|
||||
background-color: var(--selection);
|
||||
}
|
@ -19,7 +19,7 @@ h4,
|
||||
h5,
|
||||
h6,
|
||||
strong {
|
||||
color: $text-bright;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -35,7 +35,7 @@ th {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid $focus;
|
||||
border-left: 4px solid var(--focus);
|
||||
margin: 1.5em 0em;
|
||||
padding: 0.5em 1em;
|
||||
font-style: italic;
|
||||
|
Loading…
x
Reference in New Issue
Block a user