441 lines
7.9 KiB
SCSS
441 lines
7.9 KiB
SCSS
/*
|
|
* Elements that can be changed will hint this by dimming and fading a little on hover
|
|
*/
|
|
@mixin changeable($transition-period, $hover-brightness, $hover-opacity, $hover-color: null) {
|
|
transition: filter $transition-period;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
filter: brightness($hover-brightness);
|
|
opacity: $hover-opacity;
|
|
@if $hover-color {
|
|
color: $hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Toothradio. Some (eg trauma) are not changeable, hence the option.
|
|
*/
|
|
@mixin toothradio($width, $height, $unchecked_background, $checked_background, $changeable: true) {
|
|
|
|
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;
|
|
color: $almost_white;
|
|
|
|
i {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
@if $changeable {
|
|
@include changeable(0.1s, 0.8, 0.9);
|
|
}
|
|
@else {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
|
|
display: none;
|
|
|
|
&:checked {
|
|
|
|
& ~ label {
|
|
background-image: url($unchecked_background);
|
|
}
|
|
& + label {
|
|
background-image: url($checked_background);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Custom Radio
|
|
*/
|
|
@mixin custom_radio($width, $height) {
|
|
|
|
display: flex;
|
|
$default_color: $almost_white;
|
|
$accent_color: $almost_black;
|
|
$circle_border_color: $almost_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;
|
|
}
|
|
|
|
@include changeable(0.1s, 0.7, 0.7);
|
|
}
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
display: none;
|
|
|
|
&:checked {
|
|
|
|
& ~ label {
|
|
background-color: $default_color;
|
|
}
|
|
& + label {
|
|
// Less opacity here cos otherwise it's barely visible on the dark
|
|
@include changeable(0.1s, 0.7, 0.7);
|
|
background-color: $accent_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Custom Radio Squared
|
|
*/
|
|
@mixin custom_radio_square($side) {
|
|
|
|
display: flex;
|
|
$default_color: $almost_white;
|
|
$accent_color: $gold;
|
|
$circle_border_color: $almost_black;
|
|
|
|
label {
|
|
|
|
& {
|
|
height: $side;
|
|
width: $side;
|
|
background-color: $accent_color;
|
|
|
|
vertical-align: middle;
|
|
border: 1px solid $circle_border_color;
|
|
|
|
&[for$="-0"] {
|
|
margin-right: 0px;
|
|
}
|
|
@include changeable(0.1s, 0.8, 0.9);
|
|
}
|
|
}
|
|
|
|
/* 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: 19px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-right: 10px;
|
|
@include changeable(0.1s, 0.8, 0.9);
|
|
|
|
/* 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:null, $accent_color:null) {
|
|
|
|
$angle: 360 / $segments;
|
|
$skew: 90 + $angle;
|
|
$border_width: 3;
|
|
|
|
position: relative;
|
|
|
|
.blades-clock {
|
|
|
|
position: relative;
|
|
@if $default_color {
|
|
border: #{$border_width}px solid $almost_black;
|
|
}
|
|
padding: 0;
|
|
width: #{$size}px;
|
|
height: #{$size}px;
|
|
border-radius: 50%;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
|
|
label {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0% 100%;
|
|
background-color: $accent_color;
|
|
|
|
@include changeable(0.1s, 0.8, 0.9);
|
|
}
|
|
|
|
input {
|
|
position: absolute;
|
|
display: none;
|
|
|
|
&:checked {
|
|
& ~ label {
|
|
@if $default_color {
|
|
background-color: $default_color;
|
|
}
|
|
}
|
|
& + label {
|
|
@if $accent_color {
|
|
background-color: $accent_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Zero value to clear everything.
|
|
input[value="0"] {
|
|
display: none;
|
|
}
|
|
|
|
@for $i from 1 through $segments {
|
|
|
|
$rotate_angle: $angle * ($i - 1);
|
|
*:nth-child(#{$i * 2 + 1}) {
|
|
transform: rotate(#{$rotate_angle}deg) skewY(#{$skew}deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
* Turf Block
|
|
*/
|
|
@mixin turf_block($turf_width, $turf_height) {
|
|
@include changeable(0.1s, 0.8, 0.9);
|
|
|
|
|
|
$turf_margin: 20px;
|
|
$connector_height: $turf_height/10;
|
|
$connector_width: $turf_margin * 2;
|
|
|
|
width: $turf_width;
|
|
height: $turf_height;
|
|
background-color: $lightgray;
|
|
position: relative;
|
|
margin: $turf_margin;
|
|
flex-grow: initial;
|
|
|
|
&.turf-selected {
|
|
.connector {
|
|
background-color: $gray;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.connector {
|
|
|
|
position: absolute;
|
|
display: block;
|
|
background-color: $lightgray;
|
|
|
|
&.right,
|
|
&.left {
|
|
width: $turf_margin * 2;
|
|
height: $turf_height/5;
|
|
top: $turf_height/2 - $turf_height/10;
|
|
}
|
|
&.left {
|
|
left: -$turf_margin * 2;
|
|
}
|
|
&.right {
|
|
left: $turf_width;
|
|
}
|
|
|
|
&.top,
|
|
&.bottom {
|
|
height: $turf_margin * 2;
|
|
width: $turf_height/5;
|
|
left: $turf_width/2 - $turf_height/10;
|
|
}
|
|
&.top {
|
|
top: -$turf_margin * 2;
|
|
}
|
|
&.bottom {
|
|
top: $turf_height;
|
|
}
|
|
}
|
|
|
|
|
|
&.turf-selected {
|
|
background-color: $gray;
|
|
}
|
|
|
|
.turf-description {
|
|
border: none;
|
|
background: none;
|
|
resize: none;
|
|
width: $turf_width;
|
|
text-align: center;
|
|
min-height: auto;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.turf-name {
|
|
border: none;
|
|
border-radius: 0px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.turf-control {
|
|
&.turf-select {
|
|
position: absolute;
|
|
top: -7px;
|
|
left: -7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* Toothradio single elements
|
|
*/
|
|
@mixin toothradio_single($width, $height, $unchecked_background, $checked_background) {
|
|
|
|
display: flex;
|
|
|
|
label {
|
|
@include changeable(0.1s, 0.8, 0.9);
|
|
& {
|
|
height: $height;
|
|
width: $width;
|
|
background-image: url($unchecked_background);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
margin-right: 5px;
|
|
|
|
&:last-of-type {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
|
|
display: none;
|
|
|
|
&:checked {
|
|
& + label {
|
|
background-image: url($checked_background);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Custom Radio Round
|
|
*/
|
|
@mixin custom_radio_round($diameter, $circle_border_color, $default_color, $accent_color) {
|
|
|
|
display: flex;
|
|
|
|
label {
|
|
@include changeable(0.1s, 0.8, 0.9);
|
|
&:not([for$="-0"]) {
|
|
height: $diameter;
|
|
width: $diameter;
|
|
background-color: $accent_color;
|
|
|
|
vertical-align: middle;
|
|
border: 2px solid $accent_color;
|
|
border-radius: $diameter / 2;
|
|
}
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input {
|
|
display: none;
|
|
|
|
&:checked {
|
|
& ~ label:not([for$="-0"]) {
|
|
border-color: $circle_border_color;
|
|
background-color: $default_color;
|
|
}
|
|
& + label:not([for$="-0"]) {
|
|
background-color: $accent_color;
|
|
border-color: $accent_color;
|
|
}
|
|
}
|
|
}
|
|
} |