app/assets/stylesheets/base/switch-radio.scss
.switch-radio {
display: flex;
overflow: hidden;
.switch-title {
margin-bottom: 6px;
}
input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
label {
float: left;
}
label {
display: inline-block;
min-width: 60px;
font-size: 12px;
background-color: $color-secondary-2-4;
color: #ffffff;
border-right: 1px solid rgba(0, 0, 0, 0.2);
font-weight: normal;
text-align: center;
padding: 6px 14px;
transition: all 0.1s ease-in-out;
}
label:hover {
cursor: pointer;
}
input:checked + label {
box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.2) inset;
background-color: $navigation_background;
color: rgba(0, 0, 0, 0.8);
border: 1px solid $navigation_border;
}
input:focus + label {
border: 1px solid $color-complement-3;
box-shadow: 0 0px 5px 1px $color-complement-3 inset;
}
label:first-of-type {
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px 0 0 3px;
}
label:last-of-type {
border-radius: 0 3px 3px 0;
}
}