aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-02-17 20:14:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve switch design

Browse Source
This commit is contained in:
Daniele Tonon
2023-05-23 14:38:16 +02:00
parent bab0ecf038
commit 5ba8499d88
3 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
static/styles.css
View File

@@ -243,24 +243,36 @@ a {
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type {
cursor: pointer;
text-indent: -9999px;
width: 3rem;
height: 1.4rem;
background: grey;
width: 2.6rem;
height: 1.2rem;
background: #5A5A5A;
display: inline-block;
border-radius: 100px;
position: relative;
margin-right: 0.5rem;
}
@media (max-width: 580px) {
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type {
width: 3rem;
height: 1.4rem;
}
}
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 1.2rem;
height: 1.2rem;
width: 1rem;
height: 1rem;
background: #fff;
border-radius: 1rem;
transition: 0.5s;
transition: 0.2s;
}
@media (max-width: 580px) {
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:after {
width: 1.2rem;
height: 1.2rem;
}
}
.container.profile .columnB .field.advanced-switch-wrapper input:checked + label {
background: #E32A6D;
@@ -270,7 +282,7 @@ a {
transform: translateX(-100%);
}
.container.profile .columnB .field.advanced-switch-wrapper label:first-of-type:active:after {
width: 130px;
width: 2rem;
}
.container.profile .columnC {
flex-basis: 25%;

2
static/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC,YArPK;;AAwPN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA/TM;EAgUN,kBA1TiB;EA2TjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA/UI;;;AAkVN;EACC,kBA5UgB;;AAgVjB;EADD;IAEE;;;AAED;EACC,kBAnVgB;EAoVhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAxVe;;AA4VlB;EACC;EACA;EACA,OAvWM;;AAwWN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAeA;EACC,aAXe;EAYf;EACA;;;AAED;EACC,OArBS;EAsBT;EACA;;;AAED;EACC,OA1BS;;;AA4BV;EACC;EACA;EACA;EACA;EACA;EACA,kBA5BoB;EA6BpB;EACA;;AACA;EACC;EACA;EACA,kBAjCmB;EAkCnB;EACA;EACA;EACA;EACA;;AACA;EATD;IAUE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;;AAGF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;IACA,OA7GK;;;AAiHR;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;EACA;EACA,OAtIO;;AAuIP;EALD;IAME;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;IACA;IACA;;;AAED;EACC;;AACA;EACC,OA3JM;;AA6JP;EALD;IAME;;;AAGF;EACC;EACA;EACA;EACA,kBA9JkB;;AA+JlB;EACC;;AAED;EARD;IASE;;;AAGF;EACC;;AACA;EACC;EACA,OAhLM;;AAkLP;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA,OA5LK;EA6LL,kBA5LK;;AA+LP;EACC;EACA;EACA,kBA3LiB;EA4LjB;EACA;;AAEA;EACC;EACA;EACA,OAxMK;;AA2MN;EAAU,OA7MJ;;AA8MN;EAAU;;AACV;EAAW,OA/ML;;AAgNN;EAAQ,OAhNF;;AAmNP;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA1NgB;EA2NhB;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC,YA7PK;;AAgQN;EACC;EACA;;AAGD;EACC;;AAOJ;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;;AACA;EACC;;AAED;EAND;IAOE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OAvUM;EAwUN,kBAlUiB;EAmUjB;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAvVI;;;AA0VN;EACC,kBApVgB;;AAwVjB;EADD;IAEE;;;AAED;EACC,kBA3VgB;EA4VhB;;AACA;EAHD;IAIE;;;AAED;EACC,kBAhWe;;AAoWlB;EACC;EACA;EACA,OA/WM;;AAgXN;EAJD;IAKE;;;;AAOL;EACC;EACA","file":"styles.css"}

22
static/styles.scss
View File

@@ -223,13 +223,17 @@ a {
label:first-of-type {
cursor: pointer;
text-indent: -9999px;
width: 3rem;
height: 1.4rem;
background: grey;
width: 2.6rem;
height: 1.2rem;
background: $background-color_4;
display: inline-block;
border-radius: 100px;
position: relative;
margin-right: 0.5rem;
@media (max-width: 580px) {
width: 3rem;
height: 1.4rem;
}
}
label:first-of-type:after {
@@ -237,11 +241,15 @@ a {
position: absolute;
top: 2px;
left: 2px;
width: 1.2rem;
height: 1.2rem;
width: 1rem;
height: 1rem;
background: #fff;
border-radius: 1rem;
transition: 0.5s;
transition: 0.2s;
@media (max-width: 580px) {
width: 1.2rem;
height: 1.2rem;
}
}
input:checked + label {
@@ -254,7 +262,7 @@ a {
}
label:first-of-type:active:after {
width: 130px;
width: 2rem;
}
}