KevinMidboe/seasoned
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasoned.git synced 2026-04-27 10:03:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finished dark mode! This means re-doing all sass variables in the

Browse Source 
variables.scss file and defining css variables in :root and alterting
them based on prefered color scheme. This gives us a mechanism to set
custom color schemes for the entire site from one place and changing
between them just by setting a class to the body element. This is done
by overwriting the css variables and then our scss variables use these
changes and apply them downward. This seems like a really nice setup for
the switching between- and adding color schemes.
Also did a lot of cleanup of unused, duplicate or errors styling
throughout the application.
This commit is contained in:
Kevin
2019-10-21 00:05:46 +02:00
parent 49c418c3f1
commit fa50dd3455
20 changed files with 520 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ui/SeasonedInput.vue
View File

@@ -46,20 +46,20 @@ export default {
&:hover, &:focus {
.group__input {
border-color: $c-dark;
border-color: $text-color;
&-icon {
fill: $c-dark;
fill: $text-color;
}
}
}
&.completed {
.group__input {
border-color: $c-dark;
border-color: $text-color;
&-icon {
fill: $c-dark;
fill: $text-color;
}
}
}
@@ -70,12 +70,13 @@ export default {
padding: 10px 10px 10px 45px;
// padding: 15px 10px 15px 45px;
outline: none;
background-color: $c-white;
color: $c-dark;
background-color: $background-color-secondary;
color: $text-color;
font-weight: 100;
font-size: 1.2rem;
border: 1px solid rgba($c-dark, 0.5);
margin-left: -2.2rem;
border: 1px solid $text-color-50;
margin: 0;
margin-left: -2.2rem !important;
// margin-bottom: 1rem;
z-index: 3;
transition: border-color .5s ease;
@@ -91,14 +92,14 @@ export default {
height: 100%;
font-size: 0.9rem;
cursor: pointer;
color: rgba($c-dark, 0.5);
color: $text-color-50;
}
}
&__input-icon {
width: 24px;
height: 24px;
fill: rgba($c-dark, 0.5);
fill: $text-color-50;
transition: fill 0.5s ease;
pointer-events: none;
margin-top: 10px;