1
0
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:
Jonas Kuske 2019-05-06 00:26:54 +02:00
parent bc0daa5de6
commit 550e4a72fc
6 changed files with 24 additions and 24 deletions

View File

@ -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;
}

View File

@ -1,6 +1,6 @@
code, kbd {
background: $background-alt;
color: $code;
background: var(--background-alt);
color: var(--code);
padding: 5px;
border-radius: 6px;
}

View File

@ -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);
}

View File

@ -1,6 +1,6 @@
a {
text-decoration: none;
color: $links;
color: var(--links);
}
a:hover {

View File

@ -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);
}

View File

@ -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;