mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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;
}
// 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 {
background-color: $ultramarine-ui-light;
@ -217,23 +241,24 @@
}
&: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%);
}
@include dark-theme {
@include dark-mouse-mode {
background-color: mix($color-white, $ultramarine-ui-light, 25%);
}
}
&:focus {
@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 {
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 {
@ -257,22 +282,75 @@
}
&: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%);
}
@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%);
}
}
@include button-focus-outline;
}
@mixin button-secondary-blue-text {
@include button-secondary;
@include button-blue-text;
}
@mixin button-light {
@include light-theme {
color: $ultramarine-ui-light;
color: $color-gray-90;
background-color: $color-gray-02;
}
@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 {
@ -296,12 +374,22 @@
}
&: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%);
}
@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%);
}
}
@include button-focus-outline;
}

10
stylesheets/_modules.scss
View file

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