NxTIC/css/container.scss

147 lines
2.8 KiB
SCSS
Raw Normal View History

@import 'constants';
#WRAPPER > #CONTAINER{
/* [1] Section (contenu)
=========================================================*/
& > section{
display: block;
position: relative;
flex-grow: 1;
padding: 1.5em;
border-radius: 5px;
background-color: #fff;
color: #000;
font-size: 1.2em;
/* [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:' -';}
}
/* [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="button"]{
margin: .5em;
padding: .5em;
border-radius: 5px;
border: 3px solid $theme-fg;
font-weight: bold;
color: $theme-fg;
background-color: #fff;
2016-04-08 15:08:06 +00:00
transition: background .1s ease-in-out, color .1s ease-in-out;
2016-04-08 15:08:06 +00:00
/* (1) Animation de @active */
&:active{
background-color: $theme-fg;
color: #fff;
}
/* (2) Bouton primaire */
&.primary{
border-color: $theme-fg-primary;
color: $theme-fg-primary;
background-color: #fff;
2016-04-08 15:08:06 +00:00
/* (3) Animation de @active pour bouton primaire */
&:active{
background-color: $theme-fg-primary;
color: #fff;
}
}
}
}
}