125 lines
2.4 KiB
SCSS
125 lines
2.4 KiB
SCSS
/* --- 01. DEFINITIONS --- */
|
|
|
|
/*
|
|
* Les définitions globales de la stylesheet.
|
|
* Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
|
|
* D'autres définitions importantes sont visibles dans les autres parties de la fiche.
|
|
*
|
|
* Pour customiser les couleurs, voyez _palette.scss
|
|
*/
|
|
|
|
// A modifier pour customiser le style facilement :
|
|
|
|
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
|
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
|
|
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
|
|
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
|
|
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
|
|
|
|
$baseline: 1.5;
|
|
$fontsize: 4.75mm;
|
|
|
|
$lineheight: $baseline * 1rem;
|
|
$lineheight_half: $lineheight/2;
|
|
$lineheight_quarter: $lineheight/4;
|
|
|
|
$border-radius: 0px;
|
|
$border-size: 0px;
|
|
|
|
$fontweight_big: 300;
|
|
$fontweight_base: 400;
|
|
$fontweight_bold: 600;
|
|
$fontweight_hyper: 800;
|
|
|
|
$basefont: Open Sans, sans-serif;
|
|
$titlefont: Amatic SC, sans-serif;
|
|
|
|
|
|
// MIXINS RESPONSIVES
|
|
|
|
// Small tablets and large smartphones (landscape view)
|
|
$screen-sm-min: 576px;
|
|
|
|
// Small tablets (portrait view)
|
|
$screen-md-min: 768px;
|
|
|
|
// Tablets and small desktops
|
|
$screen-lg-min: 992px;
|
|
|
|
// Large tablets and desktops
|
|
$screen-xl-min: 1200px;
|
|
|
|
// Very large desktops
|
|
$screen-xxl-min: 1600px;
|
|
|
|
|
|
// Small devices
|
|
@mixin sm {
|
|
@media (min-width: #{$screen-sm-min}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Medium devices
|
|
@mixin md {
|
|
@media (min-width: #{$screen-md-min}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Large devices
|
|
@mixin lg {
|
|
@media (min-width: #{$screen-lg-min}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Extra large devices
|
|
@mixin xl {
|
|
@media (min-width: #{$screen-xl-min}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Extra large desktops
|
|
@mixin xxl {
|
|
@media (min-width: #{$screen-xxl-min}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// Custom devices
|
|
@mixin rwd($screen) {
|
|
@media (min-width: $screen+'px' ) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// MIXINS AUTRES
|
|
|
|
@mixin borders() {
|
|
border: $border-size solid rgba(0, 0, 0, 0.3)
|
|
}
|
|
|
|
@mixin border-radius() {
|
|
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
|
}
|
|
|
|
@mixin biseau($size) {
|
|
position: relative;
|
|
z-index:1;
|
|
overflow: visible;
|
|
|
|
&:before {
|
|
content: " ";
|
|
position: absolute;
|
|
top:0;
|
|
left:-$size/2;
|
|
right:-$size/2;
|
|
bottom:0;
|
|
z-index:-1;
|
|
transform: skewX(-15deg);
|
|
transition: background-color 0.3s;
|
|
}
|
|
}
|