franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Added hide to style selector and more modularizated the code

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-19 00:41:18 -03:00
parent e8e826d7ff
commit 7d558fd54c
14 changed files with 321 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
public/sass_styles/_styleSelector.scss
View File

@@ -1,87 +1,104 @@
.style-selector{
width: calc(20vw - 1px);
padding-left: 3vw;
padding-bottom: 12vh;
position: absolute;
top: 29vh;
left: 77vw;
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-container{
display: flex;
height: 10vh;
align-items: center;
.style-selection-container {
label {
.style-container{
display: flex;
flex-direction: column;
justify-content: center;
height: 10vh;
.title {
@include bodyFont;
font-size: 13pt;
}
align-items: center;
.times {
@include bodyFont;
color: $second-color;
font-size: 13pt;
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;
input {
width: 65px;
opacity: 0;
}
}
.checkbox_control {
display: inline-grid;
width: 45px;
height: 45px;
border: 3px solid $main-color;
border-radius: 0.25em;
border-radius: 100%;
.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 {
transition: ease-in-out 0.2s ;
}
background-color: $light-color;
.checkbox__input input:checked + .checkbox_control {
background-color: $light-color;
}
// CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
}
// CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
}
transition: 0.2s ease-in-out;
}
.style-selector-show {
opacity: 100%;
}
.style-selector-hidden {
opacity: 0%;
}