/* 
    Document   : checkbox_style
    Created on : 6 nov. 2013, 10:29:06
    Author     : romain.p
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

/* Cachons la case à cocher */  
.check_style[type="checkbox"]:not(:checked),  
.check_style[type="checkbox"]:checked {  
  display: none;  
}  
   
/* on prépare le label */  
.check_style[type="checkbox"]:not(:checked) + label,  
.check_style[type="checkbox"]:checked + label {  
  cursor: pointer;    /* affiche un curseur adapté */  
  position: relative; /* permet de positionner les pseudo-éléments */  
  padding-left: 25px; /* fait un peu d'espace pour notre case à venir */
  padding-top:5px;
}  

/* Aspect des checkboxes */  
/* :before sert à créer la case à cocher */  
.check_style[type="checkbox"]:not(:checked) + label:before,  
.check_style[type="checkbox"]:checked + label:before {  
  background: #f8f8f8;  
  border: 1px solid #aaa;  
  border-radius: 3px; /* angles arrondis */  
  content: '';  
  position: absolute;  
  left:6px; top: 6px;  
  width: 11px; height: 11px; /* dim. de la case */  
}  
   
/* Aspect général de la coche */  
.check_style[type="checkbox"]:not(:checked) + label:after,  
.check_style[type="checkbox"]:checked + label:after {  
  background-color: #41C441 ;
  border-radius: 3px; /* angles arrondis */ 
  content: '✔';  
  color: white;  
  height: 14px; 
  left: 6px;
  line-height: 14px;
  position: absolute;  
  padding-left: 2px;
  transition: all .2s; /* on prévoit une animation */ 
  top: 5px; 
  width: 11px;
}  

/* Aspect si "pas cochée" */  
.check_style[type="checkbox"]:not(:checked) + label:after {  
  opacity: 0; /* coche invisible */  
  transform: scale(0); /* mise à l'échelle à 0 */  
}