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

Radio button style fixes

Browse Source
This commit is contained in:
James Lyne 2021-05-28 00:14:27 +01:00
parent d5ed9392a0
commit dc4bb67a5e
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/scss/_mixins.scss
View File

@ -13,11 +13,11 @@
@mixin button { @mixin button {
appearance: none; appearance: none;
border: none;
box-shadow: none; box-shadow: none;
background-color: var(--background-base); background-color: var(--background-base);
color: var(--text-base); color: var(--text-base);
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: none;
cursor: pointer; cursor: pointer;
display: block; display: block;
text-align: center; text-align: center;
@ -27,6 +27,7 @@
font-family: Raleway, sans-serif; font-family: Raleway, sans-serif;
box-sizing: border-box; box-sizing: border-box;
text-shadow: none; text-shadow: none;
user-select: none;
.svg-icon { .svg-icon {
display: inline-block; display: inline-block;
@ -52,9 +53,10 @@
@mixin button-focused { @mixin button-focused {
outline: var(--outline-focus) auto thick !important; outline: var(--outline-focus) auto thick !important;
background-color: var(--background-base); //background-color: var(--background-base);
color: var(--text-base); //color: var(--text-base);
z-index: 1; z-index: 1;
border-color: var(--background-dark);
} }
@mixin button-active { @mixin button-active {

8
src/scss/style.scss
View File

@ -187,9 +187,10 @@ input {
& + label { & + label {
@include button; @include button;
margin-bottom: 0.1rem;
} }
&:hover + label, &:checked + label { & + label:hover, &:checked + label {
@include button-hovered; @include button-hovered;
position: relative; position: relative;
} }
@ -201,6 +202,10 @@ input {
&:active + label { &:active + label {
@include button-active; @include button-active;
} }
&:disabled + label {
@include button-disabled;
}
} }
& > li > button, & > input[type=radio] + label { & > li > button, & > input[type=radio] + label {
@ -211,7 +216,6 @@ input {
text-align: left; text-align: left;
min-height: 3.2rem; min-height: 3.2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border-bottom: 0.1rem solid transparent;
} }
} }