2018-04-03 14:16:57 +00:00
|
|
|
label.box-label {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2018-07-06 00:06:34 +00:00
|
|
|
|
2018-04-03 14:16:57 +00:00
|
|
|
.box-label {
|
|
|
|
@extend .box;
|
|
|
|
@extend .is-centered;
|
|
|
|
@extend .is-gapless;
|
2018-07-06 00:06:34 +00:00
|
|
|
border-color: $grey-light;
|
2018-04-03 14:16:57 +00:00
|
|
|
border-radius: 3px;
|
2018-07-10 13:55:28 +00:00
|
|
|
box-shadow: $box-link-shadow;
|
2018-04-03 14:16:57 +00:00
|
|
|
text-decoration: none;
|
2018-07-06 00:06:34 +00:00
|
|
|
transition: box-shadow $speed;
|
2018-04-03 14:16:57 +00:00
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
> div:first-child {
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.is-column {
|
|
|
|
@extend .is-flex-column;
|
|
|
|
}
|
2018-07-06 00:06:34 +00:00
|
|
|
|
2018-04-03 14:16:57 +00:00
|
|
|
&.is-selected {
|
2018-07-06 00:06:34 +00:00
|
|
|
box-shadow: $box-link-hover-shadow, $box-shadow-middle;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
color: $grey;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
color: $grey-light;
|
2018-04-03 14:16:57 +00:00
|
|
|
}
|
|
|
|
|
2018-11-26 18:47:56 +00:00
|
|
|
input[type='radio'] {
|
2018-04-03 14:16:57 +00:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2018-11-26 18:47:56 +00:00
|
|
|
input[type='radio'] + label {
|
2018-07-06 00:06:34 +00:00
|
|
|
border: 1px solid $grey-light;
|
2018-04-03 14:16:57 +00:00
|
|
|
border-radius: 50%;
|
|
|
|
cursor: pointer;
|
|
|
|
display: block;
|
|
|
|
margin: 1rem auto 0;
|
|
|
|
height: 1rem;
|
|
|
|
width: 1rem;
|
|
|
|
}
|
|
|
|
|
2018-11-26 18:47:56 +00:00
|
|
|
input[type='radio']:checked + label {
|
2018-04-03 14:16:57 +00:00
|
|
|
background: $blue;
|
|
|
|
border: 1px solid $blue;
|
|
|
|
box-shadow: inset 0 0 0 0.15rem $white;
|
|
|
|
}
|
|
|
|
}
|
2018-07-06 22:42:09 +00:00
|
|
|
|
|
|
|
.box-label-header {
|
|
|
|
color: $grey;
|
|
|
|
|
|
|
|
.is-selected & {
|
|
|
|
color: $text;
|
|
|
|
}
|
|
|
|
}
|