michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

issue/19 (#20)

Browse source 
!19

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MyMusicLibrary/pulls/20
Co-authored-by: Damien Broqua <dbroqua@noreply.localhost>
Co-committed-by: Damien Broqua <dbroqua@noreply.localhost>
This commit is contained in:
Damien Broqua 2022-03-01 16:09:46 +01:00
parent 18d4970ebd
commit a0f9ab1f45
35 changed files with 973 additions and 366 deletions
Download patch file Download diff file Expand all files Collapse all files

88
sass/forms.scss
View file

@ -26,17 +26,17 @@
input,
textarea,
select {
border-radius: 0.375rem;
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
border-radius: 4px;
max-width: 100%;
width: 100%;
background-color: #fff;
border: 1px solid #dbdbdb !important;
color: #363636;
background-color: var(--input-color);
border: 1px solid transparent !important;
color: var(--input-font-color);
@include transition() {}
&:focus-visible {
border: 1px solid #b9b9b9 !important;
outline: unset;
border-color: var(--input-active-color) !important;
}
}
@ -48,4 +48,78 @@
background-size: 1.2rem;
padding-right: 2.4rem;
}
}
}
.theme-switch-wrapper {
display: flex;
align-items: center;
em {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
@include transition() {}
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: '\f185';
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
padding: 0;
font-family: "icon";
font-style: normal;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
text-align: center;
font-variant: normal;
text-transform: none;
}
input:checked + .slider {
background-color: $primary-color;
@include transition() {}
}
input:checked + .slider:before {
transform: translateX(26px);
content: '\f186';
background-color: var(--input-active-color);
@include transition() {}
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}