Rewrite sass variables to support themes

This commit is contained in:
Zed
2019-10-23 11:15:57 +02:00
parent d31ada9bad
commit 81160b1915
16 changed files with 173 additions and 94 deletions

View File

@@ -3,9 +3,9 @@
button {
@include input-colors;
background-color: $bg_elements;
color: $fg_color;
border: 1px solid $accent_border;
background-color: var(--bg_elements);
color: var(--fg_color);
border: 1px solid var(--accent_border);
padding: 3px 6px;
font-size: 14px;
cursor: pointer;
@@ -15,10 +15,10 @@ button {
input[type="text"],
input[type="date"] {
@include input-colors;
background-color: $bg_elements;
background-color: var(--bg_elements);
padding: 1px 4px;
color: $fg_color;
border: 1px solid $accent_border;
color: var(--fg_color);
border: 1px solid var(--accent_border);
border-radius: 0;
font-size: 14px;
}
@@ -40,8 +40,8 @@ input::-webkit-calendar-picker-indicator {
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
background-color: $accent;
color: $fg_color;
background-color: var(--accent);
color: var(--fg_color);
outline: none;
}
@@ -64,7 +64,7 @@ input::-webkit-datetime-edit-year-field:focus {
}
.icon-button button {
color: $accent;
color: var(--accent);
text-decoration: none;
background: none;
border: none;
@@ -73,7 +73,7 @@ input::-webkit-datetime-edit-year-field:focus {
padding-left: 4px;
&:hover {
color: $accent_light;
color: var(--accent_light);
}
}
@@ -83,8 +83,8 @@ input::-webkit-datetime-edit-year-field:focus {
right: 0;
height: 17px;
width: 17px;
background-color: $bg_elements;
border: 1px solid $accent_border;
background-color: var(--bg_elements);
border: 1px solid var(--accent_border);
&:after {
content: "";
@@ -114,11 +114,11 @@ input::-webkit-datetime-edit-year-field:focus {
}
&:hover input ~ .checkbox {
border-color: $accent;
border-color: var(--accent);
}
&:active input ~ .checkbox {
border-color: $accent_light;
border-color: var(--accent_light);
}
.checkbox:after {