159 lines
3.0 KiB
SCSS
Executable File
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;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
} |