Properly style call buttons across app, when already in a call
This commit is contained in:
parent
3c25092f50
commit
c251867699
39 changed files with 610 additions and 189 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue