61 lines
1.4 KiB
Sass
61 lines
1.4 KiB
Sass
// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
|
|
//
|
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
|
|
|
|
// GROUPS OF RADIO BUTTONS
|
|
// Completely replaces native radiobox
|
|
|
|
.radio-group
|
|
display: flex
|
|
|
|
& > .radio
|
|
position: relative
|
|
display: inline-block
|
|
|
|
[type='radio']
|
|
position: fixed
|
|
top: -1px
|
|
left: -1px
|
|
width: 1px
|
|
height: 1px
|
|
overflow: hidden
|
|
|
|
label
|
|
display: block
|
|
height: 34px
|
|
min-width: 42px
|
|
line-height: 34px
|
|
text-align: center
|
|
padding: 0 13px
|
|
background-color: #f3f3f3
|
|
box-shadow: inset 2px 1px 2px 1px rgba(50, 50, 50, 0.05)
|
|
color: var(--color-font)
|
|
cursor: pointer
|
|
|
|
\:checked + label
|
|
background-color: var(--color-primary)
|
|
color: var(--color-lightwhite)
|
|
box-shadow: inset -2px -1px 2px 1px rgba(255, 255, 255, 0.15)
|
|
|
|
\:focus + label
|
|
border-color: #3273dc
|
|
box-shadow: 0 0 0.125em 0 rgba(50, 115, 220, 0.8)
|
|
outline: 0
|
|
|
|
[disabled] + label, [readonly] + label
|
|
pointer-events: none
|
|
border: none
|
|
opacity: 0.6
|
|
filter: grayscale(1)
|
|
|
|
&:first-child
|
|
label
|
|
border-top-left-radius: 4px
|
|
border-bottom-left-radius: 4px
|
|
|
|
&:last-child
|
|
label
|
|
border-top-right-radius: 4px
|
|
border-bottom-right-radius: 4px
|