Improve disabled button styles

This commit is contained in:
James Lyne 2020-12-20 14:53:16 +00:00
parent 8de6a218f5
commit 254c890cd0
3 changed files with 29 additions and 4 deletions

View File

@ -28,12 +28,12 @@
transition: color 0.2s ease-in, background-color 0.2s ease-in;
&:hover, &.active {
background-color: #cccccc;
background-color: $global-focus-color;
color: #222222;
}
&:focus {
outline-color: #cccccc;
outline-color: $global-focus-color;
outline-width: 0.2rem;
}
@ -42,6 +42,17 @@
color: #121212;
}
&[disabled], &.disabled {
background-color: $global-disabled-background;
color: $global-disabled-text-color;
cursor: not-allowed;
&:hover, &:focus, &:active {
background-color: $global-disabled-background;
color: $global-disabled-text-color;
}
}
.svg-icon {
display: inline-block;
width: 3rem;

View File

@ -17,4 +17,8 @@
$global-text-color: #cccccc;
$global-border-radius: 1rem;
$global-background: #222222;
$global-focus-color: #cccccc;
$global-focus-color: #cccccc;
$global-border-color: #333333;
$global-disabled-background: #555555;
$global-disabled-text-color: #bbbbbb;

View File

@ -35,7 +35,17 @@
a {
border-radius: 0;
border-bottom: 0.1rem solid #333333;
border-bottom: 0.1rem solid $global-border-color;
&.leaflet-disabled {
background-color: $global-disabled-background;
cursor: not-allowed;
&:hover {
color: $global-disabled-text-color;
border-bottom-color: $global-border-color;
}
}
}
}