mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Buttons: refactor mixins, new light style

Browse source
This commit is contained in:
Scott Nonnenberg 2020-12-03 08:06:39 -08:00 committed by GitHub
parent a4d0c0dfab
commit 7aaa5ab294
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 108 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
stylesheets/_mixins.scss
View file

@ -191,7 +191,31 @@
text-align: inherit; text-align: inherit;
} }
// Buttons // --- Buttons
// Individual traits
@mixin button-focus-outline {
&:focus {
@include keyboard-mode {
box-shadow: 0px 0px 0px 3px $ultramarine-ui-light;
}
@include dark-keyboard-mode {
box-shadow: 0px 0px 0px 3px $ultramarine-ui-dark;
}
}
}
@mixin button-blue-text {
@include light-theme {
color: $ultramarine-ui-light;
}
@include dark-theme {
color: $ultramarine-ui-dark;
}
}
// Complete button styles
@mixin button-primary { @mixin button-primary {
background-color: $ultramarine-ui-light; background-color: $ultramarine-ui-light;
@ -217,23 +241,24 @@
} }
&:active { &:active {
@include light-theme { // We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $ultramarine-ui-light, 25%); background-color: mix($color-black, $ultramarine-ui-light, 25%);
} }
@include dark-mouse-mode {
@include dark-theme {
background-color: mix($color-white, $ultramarine-ui-light, 25%); background-color: mix($color-white, $ultramarine-ui-light, 25%);
} }
}
&:focus {
@include keyboard-mode { @include keyboard-mode {
box-shadow: 0px 0px 0px 3px $ultramarine-ui-light; background-color: mix($color-black, $ultramarine-ui-light, 25%);
} }
@include dark-keyboard-mode { @include dark-keyboard-mode {
box-shadow: 0px 0px 0px 3px $ultramarine-ui-dark; background-color: mix($color-black, $ultramarine-ui-light, 25%);
} }
} }
@include button-focus-outline;
} }
@mixin button-secondary { @mixin button-secondary {
@ -257,22 +282,75 @@
} }
&:active { &:active {
@include light-theme { // We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $color-gray-05, 25%); background-color: mix($color-black, $color-gray-05, 25%);
} }
@include dark-mouse-mode {
background-color: mix($color-white, $color-gray-65, 25%);
}
@include dark-theme { @include keyboard-mode {
background-color: mix($color-black, $color-gray-05, 25%);
}
@include dark-keyboard-mode {
background-color: mix($color-white, $color-gray-65, 25%); background-color: mix($color-white, $color-gray-65, 25%);
} }
} }
@include button-focus-outline;
} }
@mixin button-secondary-blue-text { @mixin button-secondary-blue-text {
@include button-secondary;
@include button-blue-text;
}
@mixin button-light {
@include light-theme { @include light-theme {
color: $ultramarine-ui-light; color: $color-gray-90;
background-color: $color-gray-02;
} }
@include dark-theme { @include dark-theme {
color: $ultramarine-ui-dark; color: $color-gray-05;
background-color: $color-gray-75;
} }
&:hover {
@include mouse-mode {
background-color: mix($color-black, $color-gray-02, 10%);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-gray-75, 10%);
}
}
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $color-gray-02, 20%);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-gray-75, 20%);
}
@include keyboard-mode {
background-color: mix($color-black, $color-gray-02, 20%);
}
@include dark-keyboard-mode {
background-color: mix($color-white, $color-gray-75, 20%);
}
}
@include button-focus-outline;
}
@mixin button-light-blue-text {
@include button-light;
@include button-blue-text;
} }
@mixin button-destructive { @mixin button-destructive {
@ -296,12 +374,22 @@
} }
&:active { &:active {
@include light-theme { // We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $color-accent-red, 25%); background-color: mix($color-black, $color-accent-red, 25%);
} }
@include dark-mouse-mode {
background-color: mix($color-white, $color-accent-red, 25%);
}
@include dark-theme { @include keyboard-mode {
background-color: mix($color-black, $color-accent-red, 25%);
}
@include dark-keyboard-mode {
background-color: mix($color-white, $color-accent-red, 25%); background-color: mix($color-white, $color-accent-red, 25%);
} }
} }
@include button-focus-outline;
} }

10
stylesheets/_modules.scss
View file

@ -9878,9 +9878,7 @@ button.module-image__border-overlay:focus {
padding-left: 40px; padding-left: 40px;
padding-right: 40px; padding-right: 40px;
@include button-primary; @include button-light-blue-text;
@include button-secondary;
@include button-secondary-blue-text;
} }
// Module: GroupV1 Disabled Actions // Module: GroupV1 Disabled Actions
@ -10027,7 +10025,9 @@ button.module-image__border-overlay:focus {
flex-direction: row; flex-direction: row;
align-items: start; align-items: start;
margin-bottom: 16px; &:not(:last-of-type) {
margin-bottom: 16px;
}
} }
.module-group-v2-migration-dialog__item__bullet { .module-group-v2-migration-dialog__item__bullet {
width: 4px; width: 4px;
@ -10055,6 +10055,8 @@ button.module-image__border-overlay:focus {
} }
.module-group-v2-migration-dialog__buttons { .module-group-v2-migration-dialog__buttons {
margin-top: 16px;
text-align: center; text-align: center;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;