203 lines
3.6 KiB
SCSS
203 lines
3.6 KiB
SCSS
/*
|
|
* Custom single radio.
|
|
*/
|
|
@mixin custom_radio_with_bg($width, $height, $unchecked_background, $checked_background) {
|
|
|
|
display: none;
|
|
|
|
&:checked {
|
|
|
|
& ~ label {
|
|
background-image: url($unchecked_background);
|
|
}
|
|
& + label {
|
|
background-image: url($checked_background);
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Toothradio
|
|
*/
|
|
@mixin toothradio($width, $height, $unchecked_background, $checked_background) {
|
|
|
|
display: flex;
|
|
|
|
label {
|
|
|
|
& {
|
|
height: $height;
|
|
width: $width;
|
|
background-image: url($checked_background);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
margin-right: 5px;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0px;
|
|
}
|
|
&[for$="-0"] {
|
|
width: auto;
|
|
height: auto;
|
|
background-image: none !important;
|
|
background: black !important;
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
@include custom_radio_with_bg($width, $height, $unchecked_background, $checked_background);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Custom Radio
|
|
*/
|
|
@mixin custom_radio($width, $height) {
|
|
|
|
display: flex;
|
|
$default_color: white;
|
|
$accent_color: black;
|
|
$circle_border_color: black;
|
|
|
|
label {
|
|
|
|
& {
|
|
height: $height;
|
|
width: $width;
|
|
background-color: $accent_color;
|
|
|
|
vertical-align: middle;
|
|
border: 2px solid $circle_border_color;
|
|
border-radius: 24px;
|
|
|
|
&[for$="-0"] {
|
|
height: 5px;
|
|
width: 5px;
|
|
border-radius: 24px;
|
|
background-image: none !important;
|
|
background-color: red !important;
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
display: none;
|
|
|
|
&:checked {
|
|
|
|
& ~ label {
|
|
background-color: $default_color;
|
|
}
|
|
& + label {
|
|
background-color: $accent_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Checkboxes underscored.
|
|
*/
|
|
@mixin check_underscore() {
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
label {
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-right: 10px;
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
|
|
display: none;
|
|
|
|
&:checked ~ .checkmark {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.checkmark {
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
* Create Clock
|
|
*/
|
|
@mixin clock($segments, $size, $default_color, $accent_color) {
|
|
|
|
$angle: 360 / $segments;
|
|
$skew: 90 + $angle;
|
|
$border_width: 3;
|
|
|
|
position: relative;
|
|
border: #{$border_width}px solid black;
|
|
padding: 0;
|
|
width: #{$size}px;
|
|
height: #{$size}px;
|
|
border-radius: 50%;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
|
|
label {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0% 100%;
|
|
background-color: $accent_color;
|
|
}
|
|
|
|
input {
|
|
position: absolute;
|
|
display: none;
|
|
|
|
&:checked {
|
|
& ~ label {
|
|
background-color: $default_color;
|
|
}
|
|
& + label {
|
|
background-color: $accent_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Zero value to clear everything.
|
|
input[value="0"] {
|
|
display: block;
|
|
opacity: 1;
|
|
height: 16px;
|
|
width: 16px;
|
|
z-index: 10;
|
|
left: 0px;
|
|
top: 0px;
|
|
// left: #{($size + 2 * $border_width)/2 - 9}px;
|
|
// top: #{($size + 2 * $border_width)/2 - 9}px;
|
|
margin: 0px;
|
|
}
|
|
|
|
@for $i from 1 through $segments {
|
|
|
|
$rotate_angle: $angle * ($i - 1);
|
|
*:nth-child(#{$i * 2 + 1}) {
|
|
transform: rotate(#{$rotate_angle}deg) skewY(#{$skew}deg);
|
|
}
|
|
}
|
|
|
|
}
|