This repository has been archived on 2024-04-03. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-wordpress-theme/scss/_definitions.scss

125 lines
2.4 KiB
SCSS
Raw Normal View History

2020-12-30 19:11:12 +01:00
/* --- 01. DEFINITIONS --- */
/*
2020-12-30 19:11:12 +01:00
* 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.
*
2020-12-30 19:11:12 +01:00
* Pour customiser les couleurs, voyez _palette.scss
*/
2020-12-30 19:11:12 +01:00
// 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);
2020-12-30 19:11:12 +01:00
$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;
2020-12-30 19:11:12 +01:00
$border-size: 0px;
2020-12-30 19:11:12 +01:00
$fontweight_big: 300;
$fontweight_base: 400;
$fontweight_bold: 600;
$fontweight_hyper: 800;
2020-12-30 19:11:12 +01:00
$basefont: Open Sans, sans-serif;
$titlefont: Amatic SC, sans-serif;
2020-12-30 19:11:12 +01:00
// MIXINS RESPONSIVES
2020-12-30 19:11:12 +01:00
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
2020-12-30 19:11:12 +01:00
// Small tablets (portrait view)
$screen-md-min: 768px;
2020-12-30 19:11:12 +01:00
// Tablets and small desktops
$screen-lg-min: 992px;
2020-12-30 19:11:12 +01:00
// 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;
}
}
2020-12-30 19:11:12 +01:00
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
2020-12-30 19:11:12 +01:00
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
2020-12-30 19:11:12 +01:00
// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}
2020-12-30 19:11:12 +01:00
// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}
2020-12-30 19:11:12 +01:00
// MIXINS AUTRES
2020-12-30 19:11:12 +01:00
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
2020-12-30 19:11:12 +01:00
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
2020-12-30 19:11:12 +01:00
@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;
}
}