Sha256: 9f29afa09516526b14c9a5d50bb659f6d51140b773750d0692ce22e0ee3edd04
Contents?: true
Size: 1.81 KB
Versions: 416
Compression:
Stored size: 1.81 KB
Contents
@import "../tokens/colors";
@import "../tokens/spacing";
@import "../tokens/positioning";
@import "../pb_body/body";
@import "../tokens/transition";
[class^=pb_radio_kit] {
display: inline-flex;
cursor: pointer;
.pb_radio_button {
width: 22px;
min-width: 22px;
height: 22px;
box-sizing: border-box;
border-radius: 1000px;
border: 2px solid $border_light;
margin-right: $space_xs;
transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
}
@media (hover:hover) {
&:hover .pb_radio_button {
background-color: $bg_light;
border-color: $border_light;
}
}
input {
position: relative;
width: 0;
left: $offscreen;
&:focus-visible {
& ~ .pb_radio_button {
box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
}
}
&:checked {
& ~ .pb_radio_button {
border: 6px solid $primary;
}
}
}
&[class*=vertical] {
flex-direction: column;
align-items: center;
.pb_radio_button {
margin-right: 0px;
margin-bottom: $space_xs;
}
}
&.dark {
.pb_radio_button {
border-color: $border_dark;
}
input {
&:focus-visible {
& ~ .pb_radio_button {
box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
}
}
&:checked {
& ~ .pb_radio_button {
border: 6px solid $primary;
}
}
}
@media (hover:hover) {
&:hover {
.pb_radio_button {
background-color: rgba($white,.10);
border-color: $border_dark;
}
}
}
&.error {
> .pb_radio_button {
border-color: $error_dark;
}
}
}
&.error {
> .pb_radio_button {
border-color: $error;
}
}
}
Version data entries
416 entries across 416 versions & 1 rubygems