mirror of
https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git
synced 2025-10-12 23:52:30 +00:00
106 lines
2.1 KiB
SCSS
106 lines
2.1 KiB
SCSS
.style-selector{
|
|
|
|
width: calc(20vw - 1px);
|
|
|
|
padding-left: 3vw;
|
|
padding-bottom: 12vh;
|
|
|
|
position: absolute;
|
|
|
|
top: 29vh;
|
|
left: 75vw;
|
|
|
|
box-shadow: 1px 6px 15px #00000020;
|
|
|
|
z-index: 50;
|
|
|
|
h2 {
|
|
@include bodyFont;
|
|
color: $second-color;
|
|
font-size: 30pt;
|
|
text-align: center;
|
|
|
|
margin-left: -3vw;
|
|
|
|
|
|
|
|
margin-top: 1vh;
|
|
margin-bottom: 3vh;
|
|
}
|
|
|
|
.style-selection-container {
|
|
|
|
|
|
.style-container{
|
|
display: flex;
|
|
height: 10vh;
|
|
|
|
align-items: center;
|
|
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.title {
|
|
@include bodyFont;
|
|
font-size: 13pt;
|
|
}
|
|
|
|
.times {
|
|
@include bodyFont;
|
|
color: $second-color;
|
|
font-size: 13pt;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
width: 65px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.checkbox__input {
|
|
display: grid;
|
|
grid-template-areas: "checkbox";
|
|
|
|
> * {
|
|
grid-area: checkbox;
|
|
}
|
|
}
|
|
|
|
|
|
.checkbox_control {
|
|
display: inline-grid;
|
|
|
|
width: 45px;
|
|
height: 45px;
|
|
|
|
border: 3px solid $main-color;
|
|
border-radius: 0.25em;
|
|
border-radius: 100%;
|
|
|
|
transition: ease-in-out 0.2s ;
|
|
}
|
|
|
|
.checkbox__input input:checked + .checkbox_control {
|
|
|
|
background-color: $light-color;
|
|
}
|
|
|
|
// CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
|
|
}
|
|
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
|
|
.style-selector-show {
|
|
opacity: 100%;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.style-selector-hidden {
|
|
opacity: 0%;
|
|
pointer-events: none;
|
|
} |