DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #5411 from betagouv/toggle-switch-creation

Browse source 
Création d'un toggle-switch
This commit is contained in:
Keirua 2020-07-29 10:34:19 +02:00 committed by GitHub
commit 42c6900139
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 96 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
app/assets/stylesheets/new_design/toggle-switch.scss Normal file
View file

@ -0,0 +1,89 @@
@import "colors";
@import "constants";
// Toggle-switch
// The switch - the box around
.form label.toggle-switch {
position: relative;
display: inline-block;
height: 24px;
margin: 0;
margin-right: 15px;
}
// Hide default HTML checkbox
.form label.toggle-switch input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
margin: 0;
}
// The control
.toggle-switch-control {
position: absolute;
width: 47px;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $border-grey;
transition: 0.4s;
border: 1px solid transparent;
}
.toggle-switch-control::before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 1px;
bottom: 1px;
background-color: $white;
transition: 0.4s;
}
input:checked + .toggle-switch-control {
background-color: $green;
}
input:focus + .toggle-switch-control {
border-color: $blue;
box-shadow: 0px 0px 2px 1px $blue;
}
input:checked + .toggle-switch-control::before {
transform: translateX(23px);
}
.toggle-switch-label {
margin-left: 47px;
font-size: 16px;
font-weight: normal;
}
.toggle-switch-label.on {
color: $green;
}
.toggle-switch-label.off {
color: $grey;
}
.toggle-switch-checkbox:checked ~ .toggle-switch-label.off {
display: none;
}
.toggle-switch-checkbox:not(:checked) ~ .toggle-switch-label.on {
display: none;
}
// Rounded control
.toggle-switch-control.round {
border-radius: 24px;
}
.toggle-switch-control.round::before {
border-radius: 50%;
}

7
app/views/root/patron.html.haml
View file

@ -64,6 +64,13 @@
Option B
%p.notice Une autre option, pas mal non plus.
%h3.header-subsection Interrupteur
%label.toggle-switch
= f.check_box :archived, class: 'toggle-switch-checkbox'
%span.toggle-switch-control.round
%span.toggle-switch-label.on Activé
%span.toggle-switch-label.off Désactivé
.send-wrapper
= f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
= f.submit 'Envoyer', class: 'button send primary'