sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Add dark button color variants

Browse source
This commit is contained in:
Sonny Bakker 2021-02-07 13:06:29 +01:00
parent 6e01353e89
commit 6abb9bfbd9
5 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/newsreader/scss/components/post/_post.scss
View file

@ -87,7 +87,7 @@
}
&__close-button {
background-color: $blue;
background-color: var(--info-color);
color: var(--font-color);
// TODO add mixin for default font awesome padding

23
src/newsreader/scss/elements/button/_button.scss
View file

@ -16,30 +16,17 @@
&--success, &--confirm {
color: $white !important;
background-color: $green; // TODO add dark variant
&:hover {
background-color: lighten($green, +5%);
}
background-color: var(--confirm-color);
}
&--error, &--cancel {
color: $white !important;
background-color: $red; // TODO add dark variant
&:hover {
background-color: lighten($red, +5%);
}
background-color: var(--danger-color);
}
&--primary {
color: $white !important;
background-color: $blue; // TODO add dark variant
&:hover {
background-color: lighten($blue, 5%);
}
background-color: var(--info-color);
}
&--reddit {
@ -61,7 +48,7 @@
}
&--disabled {
color: $font-color !important;
background-color: $gray !important; // TODO add dark variant
color: var(--font-color) !important;
background-color: $gray !important;
}
}

2
src/newsreader/scss/elements/button/_read-button.scss
View file

@ -4,7 +4,7 @@
color: var(--font-color);
// TODO add dark colored confirm green #007965
background-color: $green;
background-color: var(--confirm-color);
// TODO add mixin for default font awesome padding
& i {

12
src/newsreader/scss/partials/_colors.scss
View file

@ -27,7 +27,7 @@ $checkbox-blue: rgba(34, 170, 253, 1);
// White theme
$background-color: $white;
$font-color: rgba(48, 51, 53, 1);
$font-color: rgba(83, 87, 91, 1);
$link-color: darken($azureish-white, 30%);
$read-color: darken($gainsboro, 10%);
@ -35,6 +35,11 @@ $accent-color: $gainsboro;
$lighter-accent-color: $gainsboro;
$lightest-accent-color: $orange;
$confirm-color: rgba(89, 181, 128, 1);
$danger-color: rgba(237, 118, 105, 1);
$warning-color: rgba(255, 218, 119, 1);
$info-color: rgba(40, 171, 185, 1);
// Dark theme
$dark-background-color: rgba(29, 45, 80, 1);
@ -45,3 +50,8 @@ $dark-read-color: darken($dark-font-color, 20%);
$dark-accent-color: rgba(19, 59, 92, 1);
$dark-lighter-accent-color: rgba(30, 95, 116, 1);
$dark-lightest-accent-color: rgba(252, 218, 183, 1);
$dark-confirm-color: rgba(0, 121, 101, 1);
$dark-danger-color: rgba(175, 45, 45, 1);
$dark-warning-color: rgba(238, 187, 77, 1);
$dark-info-color: rgba(31, 111, 139, 1);

10
src/newsreader/scss/partials/_root.scss
View file

@ -9,6 +9,11 @@
--lighter-accent-color: #{$lighter-accent-color};
--lightest-accent-color: #{$lightest-accent-color};
--confirm-color: #{$confirm-color};
--danger-color: #{$danger-color};
--warning-color: #{$warning-color};
--info-color: #{$info-color};
&.dark-theme {
--background-color: #{$dark-background-color};
@ -19,6 +24,11 @@
--accent-color: #{$dark-accent-color};
--lighter-accent-color: #{$dark-lighter-accent-color};
--lightest-accent-color: #{$dark-lightest-accent-color};
--confirm-color: #{$dark-confirm-color};
--danger-color: #{$dark-danger-color};
--warning-color: #{$dark-warning-color};
--info-color: #{$dark-info-color};
}
color: var(--font-color);