60 lines
1.3 KiB
SCSS
60 lines
1.3 KiB
SCSS
|
/*
|
||
|
|
* component radio
|
||
|
|
*/
|
||
|
|
/*
|
||
|
|
* HTML template example:
|
||
|
|
* <input type="radio" class="radio" name="radio" id="r1">
|
||
|
|
* <label for="r1">Click here</label>
|
||
|
|
*/
|
||
|
|
|
||
|
|
/*
|
||
|
|
* radio variables (you can change them)
|
||
|
|
*/
|
||
|
|
|
||
|
|
$radio-color: $color-alpha;
|
||
|
|
$radio-background: $white;
|
||
|
|
$radio-size: 2rem;
|
||
|
|
$radio-border-radius: 50%;
|
||
|
|
|
||
|
|
/*
|
||
|
|
* radio styles
|
||
|
|
*/
|
||
|
|
|
||
|
|
.radio {
|
||
|
|
border-radius: $radio-border-radius;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: $radio-size;
|
||
|
|
height: $radio-size;
|
||
|
|
vertical-align: text-bottom;
|
||
|
|
outline: 0;
|
||
|
|
box-shadow: inset 0 0 0 1px $color-alpha;
|
||
|
|
background-color: $radio-background;
|
||
|
|
transition: background-size 0.15s;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio + label {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio:disabled {
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio:disabled + label {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio:checked {
|
||
|
|
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
|
||
|
|
background-size: 70% 70%;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-color: $color-alpha;
|
||
|
|
}
|