Properly style call buttons across app, when already in a call

This commit is contained in:
Scott Nonnenberg 2024-08-27 06:48:41 +10:00 committed by GitHub
parent 3c25092f50
commit c251867699
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
39 changed files with 610 additions and 189 deletions

View file

@ -71,6 +71,15 @@
background: fade-out($background-color, 0.6);
}
&--discouraged {
@include light-theme {
opacity: 0.4;
}
@include dark-theme {
opacity: 0.5;
}
}
@include light-theme {
@include hover-and-active-states($background-color, $color-black);
}
@ -96,10 +105,16 @@
&--affirmative {
color: $color-ultramarine;
}
&--affirmative--discouraged {
color: fade-out($color-ultramarine, 0.5);
}
&--destructive {
color: $color-accent-red;
}
&--destructive--discouraged {
color: fade-out($color-ultramarine, 0.5);
}
@include hover-and-active-states($background-color, $color-black);
}
@ -119,10 +134,16 @@
&--affirmative {
color: $color-ultramarine-light;
}
&--affirmative--discouraged {
color: fade-out($color-ultramarine-light, 0.5);
}
&--destructive {
color: $color-accent-red;
}
&--destructive--discouraged {
color: fade-out($color-accent-red, 0.5);
}
@include hover-and-active-states($background-color, $color-white);
}
@ -162,6 +183,15 @@
background: fade-out($background-color, 0.6);
}
&--discouraged {
@include light-theme {
opacity: 0.4;
}
@include dark-theme {
opacity: 0.5;
}
}
@include light-theme {
@include hover-and-active-states($background-color, $color-black);
}
@ -191,6 +221,10 @@
color: fade-out($color, 0.4);
background: fade-out($background-color, 0.6);
}
&--discouraged {
color: fade-out($color, 0.5);
}
@include hover-and-active-states($background-color, $color-black);
}
@ -205,6 +239,10 @@
color: fade-out($color, 0.4);
background: fade-out($background-color, 0.6);
}
&--discouraged {
color: fade-out($color, 0.5);
}
@include hover-and-active-states($background-color, $color-white);
}
}
@ -221,6 +259,15 @@
min-width: 68px;
padding: 8px;
&--discouraged {
@include light-theme {
opacity: 0.4;
}
@include dark-theme {
opacity: 0.5;
}
}
@include light-theme {
background-color: $color-gray-05;
color: $color-black;