deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-03 06:23:17 +02:00
Code Issues Projects Releases Wiki Activity

Fix dark mode alerts, buttons, and popovers

Browse source
This commit is contained in:
Rhyne Vlaservich 2022-12-26 13:08:04 -05:00
parent 98566735bb
commit 05094e2fd9
4 changed files with 8 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/_alerts.scss
View file

@ -1,10 +1,10 @@
@mixin btn-close-color($base-color-name) { @mixin btn-close-color($base-color-name) {
@include color('color', #{$base-color-name}-light-10); @include color('color', #{$base-color-name}-text);
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@include color('color', #{$base-color-name}-dark-10); @include color('color', #{$base-color-name}-dark);
} }
} }

11
src/components/_buttons.scss
View file

@ -98,17 +98,12 @@ a {
button.btn-#{$colorName}-outline, button.btn-#{$colorName}-outline,
.paper-btn.btn-#{$colorName}-outline, .paper-btn.btn-#{$colorName}-outline,
[type='button'].btn-#{$colorName}-outline { [type='button'].btn-#{$colorName}-outline {
background-color: $white; @include color('background-color', main-background);
border-color: darken($color-light, 10%); @include color('color', #{$colorName});
@if $colorName == primary { @include color('border-color', #{$colorName});
color: $color;
} @else {
color: $color-text;
}
&:hover { &:hover {
background-color: $color-light; background-color: $color-light;
border-color: $color;
} }
&:hover { &:hover {

4
src/components/_popovers.scss
View file

@ -19,10 +19,10 @@
@include border-style(); @include border-style();
@include transition(opacity); @include transition(opacity);
@include color('background-color', 'light-dark'); @include color('background-color', 'light-dark');
@include color('border-color', 'primary'); @include color('border-color', 'light-dark');
@include color('color', 'primary-inverse');
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
color: $white;
font-size: 0.7em; font-size: 0.7em;
left: 50%; left: 50%;
min-width: 80px; min-width: 80px;

2
src/core/_config.scss
View file

@ -125,7 +125,7 @@ $dark-secondary-text: $dark-secondary-dark !default;
$dark-success-text: $dark-success-dark !default; $dark-success-text: $dark-success-dark !default;
$dark-warning-text: $dark-warning-dark !default; $dark-warning-text: $dark-warning-dark !default;
$dark-danger-text: $dark-danger-dark !default; $dark-danger-text: $dark-danger-dark !default;
$dark-muted-text: $dark-muted-dark !default; $dark-muted-text: $dark-muted-light !default;
$dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default; $dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
$dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default; $dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;