switch inséré

This commit is contained in:
Jerome Morjon
2015-02-20 00:58:51 +01:00
parent 374add1ef6
commit b32d8b5167
2 changed files with 136 additions and 68 deletions

View File

@ -31,7 +31,12 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
.listRecherche
{
margin: 1%;
padding : 1%;
background: white;
border-radius: 7px;
border: 1px solid grey;
box-shadow: 0px 0px 2px dimgrey;
}
.filtred
@ -43,7 +48,7 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
margin : 1%;
padding: 1%;
border-radius: 3px;
border: 1px solid grey;
@ -57,12 +62,8 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
background: white;
border-radius: 7px;
border: 1px solid grey;
<<<<<<< HEAD
box-shadow: 0px 0px 2px dimgrey;
width : 40%;
=======
box-shadow: 1px 1px 2px dimgrey;
>>>>>>> origin/master
width : 70%;
}
.jeux
@ -75,3 +76,107 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
box-shadow: 0px 0px 2px dimgrey;
}
/* switch checkbox */
.ios7-switch {
display: inline-block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
font-size: 18px;
}
.ios7-switch input {
opacity: 0;
position: absolute;
}
.ios7-switch input + span { /* le fond */
position: relative;
display: inline-block;
width: 1.65em;
height: 1em;
background: white;
box-shadow: inset 0 0 0 0.0625em #e9e9e9;
border-radius: 0.5em;
vertical-align: -0.15em;
transition: all 0.40s cubic-bezier(.17,.67,.43,.98);
}
.ios7-switch:active input + span,
.ios7-switch input + span:active {
box-shadow: inset 0 0 0 0.73em #e9e9e9;
}
.ios7-switch input + span:after { /* le cercle */
position: absolute;
display: block;
content: '';
width: 0.875em;
height: 0.875em;
border-radius: 0.4375em;
top: 0.0625em;
left: 0.0625em;
background: white;
box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
0 0 0.05em rgba(0,0,0,0.05),
0 0.1em 0.2em rgba(0,0,0,0.2);
transition: all 0.25s ease-out;
}
.ios7-switch:active input + span:after,
.ios7-switch input + span:active:after {
width: 1.15em;
}
.ios7-switch input:checked + span {
box-shadow: inset 0 0 0 0.73em #4cd964;
}
.ios7-switch input:checked + span:after {
left: 0.7125em;
}
.ios7-switch:active input:checked + span:after,
.ios7-switch input:checked + span:active:after {
left: 0.4375em;
}
/* accessibility styles */
.ios7-switch input:focus + span:after {
box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.15),
0 0 0.05em rgba(0,0,0,0.08),
0 0.1em 0.2em rgba(0,0,0,0.3);
background: #fff;
}
.ios7-switch input:focus + span {
box-shadow: inset 0 0 0 0.0625em #dadada;
}
.ios7-switch input:focus:checked + span {
box-shadow: inset 0 0 0 0.73em #33be4b;
}
/* reset accessibility style on hover */
.ios7-switch:hover input:focus + span:after {
box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
0 0 0.05em rgba(0,0,0,0.05),
0 0.1em 0.2em rgba(0,0,0,0.2);
background: #fff;
}
.ios7-switch:hover input:focus + span {
box-shadow: inset 0 0 0 0.0625em #e9e9e9;
}
.ios7-switch:hover input:focus:checked + span {
box-shadow: inset 0 0 0 0.73em #4cd964;
}