mirror of
https://github.com/GuerillaStudio/now-playing
synced 2024-11-17 23:11:52 +00:00
72 lines
1.3 KiB
SCSS
72 lines
1.3 KiB
SCSS
|
/**
|
||
|
|
* Radiobox Module
|
||
|
|
* Namespace : .radiobox
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* ----------------------------------------------------------- */
|
||
|
|
/* == module */
|
||
|
|
/* ----------------------------------------------------------- */
|
||
|
|
|
||
|
|
.radiobox {
|
||
|
|
display: inline-flex;
|
||
|
|
padding: .2rem;
|
||
|
|
max-width: 32rem;
|
||
|
|
width: 100%;
|
||
|
|
border: $input-border;
|
||
|
|
border-radius: $input-border-radius;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiobox--full {
|
||
|
|
max-width: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiobox input {
|
||
|
|
position: absolute;
|
||
|
|
left: -9999px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiobox input + label {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex-grow: 1;
|
||
|
|
margin: 0;
|
||
|
|
padding: 1rem 1.8rem;
|
||
|
|
min-height: 4rem;
|
||
|
|
width: 50%;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: normal;
|
||
|
|
transition: all .05s ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiobox input:first-child + label {
|
||
|
|
border-radius: ($input-border-radius - .2rem) 0 0 ($input-border-radius - .2rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiobox label:last-child {
|
||
|
|
border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Checked state */
|
||
|
|
|
||
|
|
.radiobox input:checked + label {
|
||
|
|
background-color: $color-primary;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Focus state */
|
||
|
|
|
||
|
|
.radiobox input:focus + label {
|
||
|
|
box-shadow: $focus-ring;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiobox:active,
|
||
|
|
.radiobox:focus-within {
|
||
|
|
box-shadow: $focus-ring;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiobox:focus-within input:focus + label {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|