kspace-wordpress-theme/scss/_definitions.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;
    }
}