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

Add specific color for confirm buttons

Browse source
This commit is contained in:
Sonny Bakker 2021-02-19 09:22:01 +01:00
parent a24d06b257
commit 9c88cfde59
4 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@
}
&--success, &--confirm {
color: $white !important;
color: var(--confirm-button-font-color) !important;
background-color: var(--confirm-color);
}

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

@ -1,8 +1,7 @@
.read-button {
@extend .button;
color: var(--font-color);
color: var(--confirm-button-font-color);
background-color: var(--confirm-color);
& i {

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

@ -30,6 +30,7 @@ $background-color: $white;
$font-color: rgba(83, 87, 91, 1);
$link-color: darken($azureish-white, 30%);
$read-color: darken($gainsboro, 10%);
$confirm-button-font-color: rgba(255, 255, 255, 1);
$accent-color: $gainsboro;
$lighter-accent-color: $gainsboro;
@ -46,6 +47,7 @@ $dark-background-color: rgba(29, 45, 80, 1);
$dark-font-color: darken($gray, 10%);
$dark-link-color: $link-color;
$dark-read-color: darken($dark-font-color, 20%);
$dark-confirm-button-font-color: $dark-font-color;
$dark-accent-color: rgba(19, 59, 92, 1);
$dark-lighter-accent-color: rgba(30, 95, 116, 1);

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

@ -4,6 +4,7 @@
--font-color: #{$font-color};
--link-color: #{$link-color};
--read-color: #{$read-color};
--confirm-button-font-color: #{$confirm-button-font-color};
--accent-color: #{$accent-color};
--lighter-accent-color: #{$lighter-accent-color};
@ -20,6 +21,7 @@
--font-color: #{$dark-font-color};
--link-color: #{$dark-link-color};
--read-color: #{$dark-read-color};
--confirm-button-font-color: #{$dark-confirm-button-font-color};
--accent-color: #{$dark-accent-color};
--lighter-accent-color: #{$dark-lighter-accent-color};