Better contrast ratio for modal close button and tabs
This commit is contained in:
parent
a6aec37b75
commit
7c651e8773
2 changed files with 25 additions and 34 deletions
|
@ -66,22 +66,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include light-theme {
|
&:hover,
|
||||||
&:hover,
|
&:focus {
|
||||||
&:focus {
|
background: $color-gray-45;
|
||||||
background: $color-gray-02;
|
&::before {
|
||||||
}
|
background-color: $color-ultramarine;
|
||||||
&:active {
|
|
||||||
background: $color-gray-05;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include dark-theme {
|
&:active {
|
||||||
&:hover,
|
background: $color-gray-45;
|
||||||
&:focus {
|
&::before {
|
||||||
background: $color-gray-80;
|
background-color: $color-ultramarine;
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background: $color-gray-75;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -108,23 +103,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include light-theme {
|
&:hover,
|
||||||
&:hover,
|
&:focus {
|
||||||
&:focus {
|
box-shadow: 0 0 0 2px $color-ultramarine;
|
||||||
background: $color-gray-02;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background: $color-gray-05;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include dark-theme {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background: $color-gray-80;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background: $color-gray-75;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -11,16 +11,26 @@
|
||||||
@include font-body-1;
|
@include font-body-1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@include mouse-mode {
|
outline: none;
|
||||||
outline: none;
|
|
||||||
|
@include keyboard-mode {
|
||||||
|
border-bottom-color: $color-ultramarine;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--selected {
|
&--selected {
|
||||||
@include font-body-1-bold;
|
@include font-body-1-bold;
|
||||||
border-bottom: 2px solid $color-black;
|
border-bottom: 2px solid;
|
||||||
|
@include light-theme {
|
||||||
|
border-bottom-color: $color-black;
|
||||||
|
}
|
||||||
|
@include dark-theme {
|
||||||
|
border-bottom-color: $color-white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue