NxTIC/css/container.scss

159 lines
3.0 KiB
SCSS
Executable File

@import 'constants';
#WRAPPER > #CONTAINER{
/* [1] Section (contenu)
=========================================================*/
& > section{
display: none;
// Gestion de l'activation des sous-parties
&.active{ display: block; }
position: relative;
flex-grow: 1;
padding: 1em;
border-radius: 3px;
background-color: #fff;
color: #000;
font-size: 1em;
border: 1px solid #ddd;
/* [2] Titres
=========================================================*/
& h6{
color: lighten($theme-fg, 20);
font-size: 1.2em;
text-transform: uppercase;
font-weight: 300;
letter-spacing: .2em;
margin: 0;
padding: 0;
&:before{content:'- ';}
&:after{content:' -';}
// quand centré
&.center{
text-align: center;
}
}
/* [3][4] Boutons radio + Checkboxes
=========================================================*/
& input[type="radio"],
& input[type="checkbox"]{
display: none;
}
// Label
& input[type="radio"] + label[for],
& input[type="checkbox"] + label[for]{
padding-left: .8em;
// Pas de selection
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed */
// Receptacle
&:before{
content: '';
display: inline-block;
position: relative;
top: .1em;
left: -.8em;
width: calc( 1em - 2*.15em );
height: calc( 1em - 2*.15em );
border-radius: 50% / 50%;
border: .15em solid $theme-fg-primary;
background: #fff center center no-repeat;
background-image: none;
background-size: 70% auto;
transition: background .2s ease-in-out;
cursor: pointer;
}
}
// Quand actif
& input[type="radio"]:checked + label[for]:before,
& input[type="checkbox"]:checked + label[for]:before{
background-color: $theme-fg-primary;
background-image: url('/f/svg/checked/st/container');
}
// Specifique a checkbox
& input[type="checkbox"] + label[for]:before{
border-radius: 3px;
}
/* [5] Boutons de submit
=========================================================*/
& input[type="submit"],
& input[type="button"]{
margin: .5em 0;
padding: .3em .5em;
border-radius: 3px;
border: 1px solid $theme-fg;
font-weight: bold;
color: $theme-fg;
background-color: #fff;
transition: background .1s ease-in-out, color .1s ease-in-out;
/* (1) Animation de @hover */
&:hover{
background-color: $theme-fg;
color: #fff;
}
/* (2) Bouton primaire */
&.primary{
border-color: $theme-fg-primary;
color: $theme-fg-primary;
background-color: #fff;
/* (3) Animation de @hover pour bouton primaire */
&:hover{
background-color: $theme-fg-primary;
color: #fff;
}
}
}
}
}