Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Edit the SCSS to be more SCSSesque

Browse source
This commit is contained in:
Oliver-Akins 2021-12-22 19:30:17 -07:00
parent 52412ce914
commit ffc3c80378
1 changed files with 61 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

91
web-svelte/src/components/SciFi-Checkbox.svelte
View file

@ -21,7 +21,38 @@ function toggleState() {
</label> </label>
<style lang="scss"> <style lang="scss">
/* Customize the label (the container) */ $unchecked: #ff0000;
$checked: #00aa00;
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: $unchecked;
border-radius: 12px;
&:after {
content: "";
position: absolute;
display: none;
}
&:after {
left: 7px;
top: 2px;
width: 7px;
height: 14px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.container { .container {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -42,55 +73,41 @@ function toggleState() {
height: 0; height: 0;
width: 0; width: 0;
} }
/* Checked checkmark */
input:checked ~ .checkmark {
background-color: $checked;
} }
/* Create a custom checkbox */ /* Darken the checkmark background colour when hovering */
.checkmark { &:hover {
position: absolute; input ~ .checkmark {
top: 0; background-color: darken($unchecked, 20%);
left: 0;
height: 25px;
width: 25px;
background-color: #ff0000;
border-radius: 12px;
} }
/* On mouse-over, add a grey background color */ input:checked ~ .checkmark {
.container:hover input ~ .checkmark { background-color: darken($checked, 20%);
background-color: #a70000; }
} }
.container:hover input:checked ~ .checkmark { /* Indicate to users when they can't actually use the options */
background-color: #007700; &[disabled="true"] {
cursor: not-allowed;
&:hover {
input ~ .checkmark {
background-color: $unchecked;
} }
/* When the checkbox is checked, add a blue background */ input:checked ~ .checkmark {
.container input:checked ~ .checkmark { background-color: $checked;
background-color: #00aa00; }
} }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
} }
/* Show the checkmark when checked */ /* Show the checkmark when checked */
.container input:checked ~ .checkmark:after { input:checked ~ .checkmark:after {
display: block; display: block;
} }
/* Style the checkmark/indicator */
.checkmark:after {
left: 7px;
top: 2px;
width: 7px;
height: 14px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
} }
</style> </style>