Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve disabled button styles

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/scss/_placeholders.scss
View File

@ -28,12 +28,12 @@
transition: color 0.2s ease-in, background-color 0.2s ease-in; transition: color 0.2s ease-in, background-color 0.2s ease-in;
&:hover, &.active { &:hover, &.active {
background-color: #cccccc; background-color: $global-focus-color;
color: #222222; color: #222222;
} }
&:focus { &:focus {
outline-color: #cccccc; outline-color: $global-focus-color;
outline-width: 0.2rem; outline-width: 0.2rem;
} }
@ -42,6 +42,17 @@
color: #121212; 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 { .svg-icon {
display: inline-block; display: inline-block;
width: 3rem; width: 3rem;

6
src/scss/_variables.scss
View File

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

12
src/scss/leaflet/_controls.scss
View File

@ -35,7 +35,17 @@
a { a {
border-radius: 0; 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;
}
}
} }
} }