alpha_full/admin/adminInclude/makeCss/sass/menuSite.scss

/* ---------------------------------- */
/* Variables
/* ---------------------------------- */
/* @import "_commonVars.scss"; */

/* --------------------------------------------------- */
/*		styles du menu site
/* --------------------------------------------------- */

				
/* --------------------------------------------------- */
/*		Commun a chaque button
/* --------------------------------------------------- */					
/* le check caché ? */
.check{
    position: relative;
	display:inline-table;
    width: 57px;
	left:-3px;
	top:0px;
}

.lib, .layer{
    position: absolute;
    top: 1px;
    right: 0;
	height:18px;
    bottom: 0;
    left: 0;
	clear:both;
}

/* le texte affiché / masqué */
.lib{
    z-index: 2;
}

/* le background */
.layer{
    width: 100%;
	top: 1px;
	background-color:#F7BE81;//rose
    transition: 0.3s ease all;
    z-index: 1;
}

.check.r, .check.r .layer{
    border-radius: 100px;
}

.checkbox{
    position: relative;
    width: 100%;
    height: 80%;
    padding-top: 0px;
    margin: 1px;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

/* --------------------------------------------------- */
/*		LOGO Afficher Oui / Non
/* --------------------------------------------------- */

#checkLogo-1 .lib::before{
    content: 'Masqué';
    position: absolute;
    width: 12px;
    height: 3px;
    color: #0b4c5f;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    line-height: 0.2;
    padding: 8.5px 4px;
	background-color: #f44336;
	left:0px;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
	margin:0px;
}

#checkLogo-1 .checkbox:checked + .lib::before{
    align-content:start;
    content: 'Affiché';
	background-color: #01DFA5;
	/* --------------------------------------------------- */
	/*	C'est la bonne ligne pour déplacer le bouton radio a droite quend coché, mails le texte vient avec...a chercher
	/* --------------------------------------------------- */
	/*left:40px;*/
}

#checkLogo-1 .checkbox:checked ~ .layer{
	  background-color: #A9F5BC;
}


#checkLogo-1 .lib, #checkLogo-1 .lib::before, #checkLogo-1 .layer{
    transition: 0.3s ease all;
}

/* --------------------------------------------------- */
/*		 Titre O/N
/* --------------------------------------------------- */

#buttonTitre .lib:before{
    content: 'Masqué';
    position: absolute;
    width: 12px;
    height: 3px;
    color: #0b4c5f;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 0.2;
    padding: 8.5px 4px;
	background-color: #f44336;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
	margin:0px;
	left:0px;
}

#buttonTitre .checkbox:checked + .lib:before{
    content: 'Affiché';
	background-color: #01DFA5;
	text-align: left;
	margin:0px;
} 

#buttonTitre .checkbox:checked ~ .layer{
	  background-color: #A9F5BC;
}

#buttonTitre .lib, #buttonTitre .lib:before, #buttonTitre .layer{
    transition: 0.3s ease all;
}

/* --------------------------------------------------- */
/*		Bandeau Afficher O/N
/* --------------------------------------------------- */

#buttonBandeau .lib:before{
    content: 'Masqué';
    position: absolute;
    width: 12px;
    height: 3px;
    color: #0b4c5f;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 0.2;
    padding: 8.5px 4px;
	background-color: #f44336;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
	margin:0px;
	left:0px;
}

#buttonBandeau .checkbox:checked + .lib:before{
    content: 'Affiché';
	background-color: #01DFA5;
	text-align: left;
	margin:0px;
}

#buttonBandeau .checkbox:checked ~ .layer{
	  background-color: #A9F5BC;
}

#buttonBandeau .lib, #buttonBandeau .lib:before, #buttonBandeau .layer{
    transition: 0.3s ease all;
}

/* --------------------------------------------------- */
/*		 Image de fonds
/* --------------------------------------------------- */

#buttonFonds .lib:before{
    content: 'Masqué';
    position: absolute;
    width: 12px;
    height: 3px;
    color: #0b4c5f;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 0.2;
    padding: 8.5px 4px;
	background-color: #f44336;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
	margin:0px;
	left:0px;
}

#buttonFonds .checkbox:checked + .lib:before{
    content: 'Affiché';
	background-color: #01DFA5;
	text-align: left;
	margin:0px;
}

#buttonFonds .checkbox:checked ~ .layer{
	  background-color: #A9F5BC;
}

#buttonFonds .lib, #buttonFonds .lib:before, #buttonFonds .layer{
    transition: 0.3s ease all;
}

/* --------------------------------------------------- */
/* Bouton construction 
/* --------------------------------------------------- */

#buttonMaintenance .lib:before{
    content: 'Oui';
    position: absolute;
    width: 12px;
    height: 3px;
    color: #0b4c5f;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 0.2;
    padding: 8.5px 4px;
	background-color: #f44336;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
	margin:0px;
	left:0px;
}

#buttonMaintenance .checkbox:checked + .lib:before{
    content: 'Non';
	background-color: #01DFA5;
	text-align: left;
	margin:0px;
}

#buttonMaintenance .checkbox:checked ~ .layer{
	  background-color: #A9F5BC;
}

#buttonMaintenance .lib, #buttonMaintenance .lib:before, #buttonMaintenance .layer{
    transition: 0.3s ease all;
}

/* --------------------------------------------------- */
/* Bouton musique  
/* --------------------------------------------------- */
#buttonMusique .lib:before{
    content: 'Masquée';
    position: absolute;
    width: 12px;
    height: 3px;
    color: #0b4c5f;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 0.2;
    padding: 8.5px 4px;
	background-color: #f44336;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
	margin:0px;
	left:0px;
}

#buttonMusique .checkbox:checked + .lib:before{
    content: 'Activée';
	background-color: #01DFA5;
	text-align: left;
	margin:0px;
}

#buttonMusique .checkbox:checked ~ .layer{
	  background-color: #A9F5BC;
}

#buttonMusique .lib, #buttonMusique .lib:before, #buttonMusique .layer{
    transition: 0.3s ease all;
}