145 lines
2.9 KiB
SCSS
145 lines
2.9 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 1px 3px rgba(0, 0, 0, 0.5);
|
|
$narrow-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
|
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
|
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
|
|
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
|
|
|
|
$border-radius: 3px;
|
|
$border-size: 1px;
|
|
|
|
$baseline: 1.5;
|
|
$baselinerem: $baseline * 1rem;
|
|
$baseheight: 18px;
|
|
|
|
// 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 border-radius-top($value) {
|
|
border-top-left-radius: $value;
|
|
border-top-right-radius: $value;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
@mixin border-radius-bottom($value) {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: $value;
|
|
border-bottom-right-radius: $value;
|
|
}
|
|
|
|
@mixin border-radius-left($value) {
|
|
border-top-left-radius: $value;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: $value;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
@mixin border-radius-right($value) {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: $value;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: $value;
|
|
}
|
|
|
|
/* 01.1 - Commons elements */
|
|
|
|
@mixin li-no-margin() {
|
|
li {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.no-pills {
|
|
list-style:none;
|
|
}
|
|
|
|
.align {
|
|
&-center {text-align: center;}
|
|
&-left {text-align: left;}
|
|
&-right {text-align: right;}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
|
color:white;
|
|
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
|
|
}
|