switch inséré
This commit is contained in:
Jerome Morjon
parent
374add1ef6
commit
b32d8b5167
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
@section('content')
|
||||
<link href="css/referent.css" rel="stylesheet" type="text/css"/>
|
||||
<br>
|
||||
|
||||
<!-- Navbar left -->
|
||||
<div class="col-md-3 listg">
|
||||
<legend>Créer une liste oeuvre:</legend>
|
||||
|
|
@ -38,8 +37,8 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="col-md-8 well">
|
||||
|
||||
<div class="col-md-8 princ">
|
||||
<!-- switch a rajouté -->
|
||||
<legend>Falbala: </legend>
|
||||
|
||||
<div class="panel panel-default col-md-9"><br>
|
||||
|
|
@ -51,34 +50,34 @@
|
|||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
|
||||
<legend>Mes jeux associés</legend>
|
||||
|
||||
<div class="checkbox">
|
||||
<label class="ios7-switch">
|
||||
<input type="checkbox" checked>
|
||||
<span></span>
|
||||
Puzzle Game
|
||||
</label>
|
||||
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
Puzzle Game
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
Assassin's Creed
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
Homer Simpson
|
||||
</label>
|
||||
<label class="ios7-switch">
|
||||
<input type="checkbox" >
|
||||
<span></span>
|
||||
Jeu du pendu
|
||||
</label>
|
||||
|
||||
<label class="ios7-switch">
|
||||
<input type="checkbox" >
|
||||
<span></span>
|
||||
Assassin's creed
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-8 well">
|
||||
<div class="col-md-8 listRecherche">
|
||||
|
||||
<div class="col-md-9">
|
||||
<span style="float: right">Sélectionner tout -- Annuler sélection</span><br>
|
||||
|
|
@ -92,18 +91,14 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="col-md-8 well">
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-8 filtred">
|
||||
<legend>Ajout de filtres</legend>
|
||||
|
||||
<h4>Par critère:</h4>
|
||||
<select class="form-control">
|
||||
<option selected="selected">Selectionner catégorie</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
</select>
|
||||
|
||||
<select class="form-control">
|
||||
<option selected="selected">Tous les éléments</option>
|
||||
<option>1</option>
|
||||
|
|
@ -111,7 +106,6 @@
|
|||
</select>
|
||||
<button style="margin-top: 5px" class="btn btn-primary">Ajouter</button>
|
||||
<br><br>
|
||||
|
||||
<h4>Par mot clé:</h4>
|
||||
<form class="form-inline">
|
||||
<div class="col-sm-8 form-group">
|
||||
|
|
@ -120,10 +114,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Ajouter</button>
|
||||
|
||||
|
||||
<legend>Mes filtres</legend>
|
||||
|
||||
<legend>Mes filtres</legend>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td>Montagne: noire</td>
|
||||
|
|
@ -138,34 +129,6 @@
|
|||
<td>Supprimer</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<span style="float: right">Sélectionner tout -- Annuler sélection</span><br>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="col-xs-4 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://www.augustins.org/documents/10180/156407/1"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-4 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://www.augustins.org/documents/10180/156407/1"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-4 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://www.augustins.org/documents/10180/156407/2"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
<button style="float: right" class="btn btn-primary" id="enregistrer">Enregistrer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
|
|
|||
Reference in New Issue