Improve disabled button styles
This commit is contained in:
parent
8de6a218f5
commit
254c890cd0
@ -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;
|
||||
|
@ -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;
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user