mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-14 00:54:08 +02:00
Code Issues Releases Wiki Activity

feat: rewrite partials to use CSS variables

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

14
src/parts/_base.scss
View File

@@ -6,16 +6,16 @@ body {
margin: 20px auto; margin: 20px auto;
padding: 0 10px; padding: 0 10px;
color: $text-main; color: var(--text-main);
background: $background; background: var(--background);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
button, input, textarea { button, input, textarea {
transition: background-color $animation-duration linear, transition: background-color var(--animation-duration) linear,
border-color $animation-duration linear, border-color var(--animation-duration) linear,
color $animation-duration linear, color var(--animation-duration) linear,
box-shadow $animation-duration linear, box-shadow var(--animation-duration) linear,
transform $animation-duration ease; transform var(--animation-duration) ease;
} }

4
src/parts/_code.scss
View File

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

10
src/parts/_forms.scss
View File

@@ -11,8 +11,8 @@ select {
} }
input, select, button, textarea { input, select, button, textarea {
color: $form-text; color: var(--form-text);
background-color: $background-alt; background-color: var(--background-alt);
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
@@ -46,14 +46,14 @@ button, input[type='submit'], input[type='button'] {
button:hover, button:hover,
input[type='submit']:hover, input[type='submit']:hover,
input[type='button']:hover { input[type='button']:hover {
background: $button-hover; background: var(--button-hover);
} }
input:focus, input:focus,
select:focus, select:focus,
button:focus, button:focus,
textarea:focus { textarea:focus {
box-shadow: 0 0 0 2px $focus; box-shadow: 0 0 0 2px var(--focus);
} }
input[type='checkbox']:active, input[type='checkbox']:active,
@@ -73,5 +73,5 @@ textarea:disabled {
} }
::placeholder { ::placeholder {
color: $form-placeholder; color: var(--form-placeholder);
} }

2
src/parts/_links.scss
View File

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

14
src/parts/_misc.scss
View File

@@ -5,7 +5,7 @@ img {
hr { hr {
border: none; border: none;
border-top: 1px solid $border; border-top: 1px solid var(--border);
} }
table { table {
@@ -20,11 +20,11 @@ td, th {
} }
th { th {
border-bottom: 1px solid $border; border-bottom: 1px solid var(--border);
} }
tbody tr:nth-child(even) { tbody tr:nth-child(even) {
background-color: $background-alt; background-color: var(--background-alt);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -33,19 +33,19 @@ tbody tr:nth-child(even) {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: $background-alt; background: var(--background-alt);
border-radius: 6px; border-radius: 6px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: $scrollbar-thumb; background: var(--scrollbar-thumb);
border-radius: 6px; border-radius: 6px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: $scrollbar-thumb-hover; background: var(--scrollbar-thumb-hover);
} }
::selection { ::selection {
background-color: $selection; background-color: var(--selection);
} }

4
src/parts/_typography.scss
View File

@@ -19,7 +19,7 @@ h4,
h5, h5,
h6, h6,
strong { strong {
color: $text-bright; color: var(--text-bright);
} }
h1, h1,
@@ -35,7 +35,7 @@ th {
} }
blockquote { blockquote {
border-left: 4px solid $focus; border-left: 4px solid var(--focus);
margin: 1.5em 0em; margin: 1.5em 0em;
padding: 0.5em 1em; padding: 0.5em 1em;
font-style: italic; font-style: italic;