andras/decla-red
andras/decla-red
Watch
1
0
Fork
You've already forked decla-red
 0
Code Issues Pull requests 8 Projects Releases Packages 1 Wiki Activity Actions

Upgrade webpack config and inline svg-s

Browse source
This commit is contained in:
schmelczerandras 2020-10-22 16:38:52 +02:00
commit f1a2131540
1 changed files with 34433 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

89
frontend/src/styles/settings.scss
View file

@ -6,7 +6,6 @@
position: absolute;
display: flex;
justify-content: center;
top: 0;
right: 0;
}
@ -16,17 +15,17 @@
cursor: pointer;
#toggle-settings {
@include square($large-icon);
@media (max-width: $breakpoint) {
@include square($small-icon);
}
animation: spin 32s linear infinite;
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@include square($large-icon);
@media (max-width: $breakpoint) {
@include square($small-icon);
}
}
}
@ -59,10 +58,12 @@
opacity: 1;
}
img {
img,
svg {
cursor: pointer;
transition: opacity $animation-time;
margin-bottom: $small-padding;
margin-left: 0;
@include square($large-icon);
@media (max-width: $breakpoint) {
@include square($small-icon);
@ -73,49 +74,49 @@
label {
position: relative;
}
input[type='checkbox'] {
width: 0;
height: 0;
appearance: none;
cursor: pointer;
&:not(:checked) + img {
opacity: 0.4;
}
&:focus {
outline: none;
}
&:after {
content: ' ';
background: white;
position: absolute;
$height: 4px;
width: $height;
top: $height / 2;
right: 0;
transform-origin: top right;
border-radius: 100px;
input[type='checkbox'] {
width: 0;
height: 0;
transform: rotate(45deg) translateY(17%);
transition: height $animation-time;
appearance: none;
cursor: pointer;
@media (max-width: $breakpoint) {
$height: 2px;
&:not(:checked) + * {
opacity: 0.4;
}
&:focus {
outline: none;
}
&:after {
content: '';
background: white;
position: absolute;
$height: 4px;
width: $height;
top: $height / 2;
}
}
&:not(:checked):after {
height: $large-icon;
@media (max-width: $breakpoint) {
height: $small-icon;
right: 0;
transform-origin: top right;
border-radius: 100px;
height: 0;
transform: rotate(45deg) translateY(17%);
transition: height $animation-time;
@media (max-width: $breakpoint) {
$height: 2px;
width: $height;
top: $height / 2;
}
}
&:not(:checked):after {
height: $large-icon;
@media (max-width: $breakpoint) {
height: $small-icon;
}
}
}
}