230 lines
6.2 KiB
SCSS
230 lines
6.2 KiB
SCSS
// ----------------
|
|
// Config Sass et variables
|
|
// ----------------
|
|
|
|
// ----------------
|
|
// Valeurs de Breakpoints
|
|
// ----------------
|
|
|
|
// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
|
|
$breakpoints: (
|
|
sm: 576px,
|
|
md: 992px,
|
|
lg: 1400px,
|
|
) !default;
|
|
|
|
$small: map-get($breakpoints, sm) !default;
|
|
$medium: map-get($breakpoints, md) !default;
|
|
$large: map-get($breakpoints, lg) !default;
|
|
|
|
// ----------------
|
|
// Spacers
|
|
// ----------------
|
|
|
|
$spacer: 1rem;
|
|
$spacers: (
|
|
"0": 0, // none
|
|
"1": 1px, // mono
|
|
"2": 0.125rem, // nano
|
|
"4": 0.25rem, // micro
|
|
"8": 0.5rem, // mini
|
|
"12": 0.75rem, // small
|
|
"16": 1rem, // medium
|
|
"20": 1.25rem, // large
|
|
"24": 1.5rem, // wide
|
|
"36": 2.25rem, // ultra
|
|
"auto": auto,
|
|
);
|
|
|
|
$spacer-none: map-get($spacers, "0");
|
|
$spacer-mono: map-get($spacers, "1");
|
|
$spacer-nano: map-get($spacers, "2");
|
|
$spacer-micro: map-get($spacers, "4");
|
|
$spacer-mini: map-get($spacers, "8");
|
|
$spacer-small: map-get($spacers, "12");
|
|
$spacer-medium: map-get($spacers, "16");
|
|
$spacer-large: map-get($spacers, "20");
|
|
$spacer-wide: map-get($spacers, "24");
|
|
$spacer-ultra: map-get($spacers, "36");
|
|
|
|
// ----------------
|
|
// Grid layout
|
|
// ----------------
|
|
|
|
$grid-columns: 6 !default;
|
|
|
|
$gaps: (
|
|
"0": 0,
|
|
"5": 0.313rem,
|
|
"10": 0.625rem,
|
|
"16": 1rem,
|
|
"20": 1.25rem,
|
|
"36": 2.25rem,
|
|
) !default;
|
|
|
|
// ----------------
|
|
// Fonts
|
|
// ----------------
|
|
|
|
// Familles de fonts
|
|
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
$font-family-headings: $font-family-base;
|
|
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
$line-height-base: 1.5;
|
|
|
|
// Font sizes
|
|
$font-size: (
|
|
"10": 0.625rem,
|
|
"11": 0.6875rem,
|
|
"12": 0.75rem,
|
|
"14": 0.875rem,
|
|
"16": 1rem,
|
|
"18": 1.125rem,
|
|
"20": 1.25rem,
|
|
"24": 1.5rem,
|
|
"30": 1.875rem,
|
|
"36": 2.25rem,
|
|
"base": 1rem,
|
|
"inherit": inherit,
|
|
);
|
|
|
|
$font-size-html: 100%;
|
|
$font-size-base: 1rem;
|
|
|
|
// Graisses des Fonts
|
|
$weight-light: 200;
|
|
$weight-book: 300;
|
|
$weight-regular: 400;
|
|
$weight-medium: 500;
|
|
$weight-bold: 700;
|
|
|
|
// ----------------
|
|
// Couleurs
|
|
// ----------------
|
|
|
|
// Variables niveaux de gris
|
|
|
|
$gray-100: #f8f9fa;
|
|
$gray-200: #e9ecef;
|
|
$gray-300: #dee2e6;
|
|
$gray-400: #ced4da;
|
|
$gray-500: #adb5bd;
|
|
$gray-600: #6c757d;
|
|
$gray-700: #495057;
|
|
$gray-800: #343a40;
|
|
$gray-900: #212529;
|
|
$white: #FFFFFF;
|
|
$black: #0F0F0F;
|
|
|
|
|
|
// Variables couleurs globales
|
|
|
|
$body-color: $gray-900;
|
|
$body-bg: $white;
|
|
|
|
$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
|
|
$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
|
|
$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary
|
|
|
|
$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
|
|
$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
|
|
$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
|
|
|
|
// Variables couleurs statuts
|
|
|
|
$success-bg: #dff0d9;
|
|
$success-border: #d6e9c6;
|
|
$success: #3c763d;
|
|
$success-hover: #275c28;
|
|
|
|
$info-bg: #d9edf7;
|
|
$info-border: #bce8f1;
|
|
$info: #0d7192;
|
|
$info-hover: #005e7d;
|
|
|
|
$warning-bg: #fcf8e3;
|
|
$warning-border: #faebcc;
|
|
$warning: #8a6d3b;
|
|
$warning-hover: #654f29;
|
|
|
|
$error-bg: #fff2f2;
|
|
$error-border: #ebccd1;
|
|
$error: #e3224a;
|
|
$error-hover: #a00d10;
|
|
|
|
|
|
// Links
|
|
$link-decoration: underline;
|
|
$link-decoration-hover: underline;
|
|
|
|
// Border radius
|
|
$radius-none: 0;
|
|
$radius-small: 0.5rem;
|
|
$radius-medium: 1rem;
|
|
$radius-large: 20rem;
|
|
$radius-circle: 50%;
|
|
|
|
// ----------------
|
|
// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
|
|
// ----------------
|
|
$utils: ((hidden, display, none),
|
|
(block, display, block),
|
|
(inline, display, inline),
|
|
(inline-block, display, inline-block),
|
|
(flex, display, flex),
|
|
(flex-row, flex-direction, row),
|
|
(flex-col, flex-direction, column),
|
|
(flex-wrap, flex-wrap, wrap),
|
|
(flex-no-wrap, flex-wrap, nowrap),
|
|
(flex-shrink, flex-shrink, 1),
|
|
(flex-no-shrink, flex-shrink, 0),
|
|
(flex-grow, flex-grow, 1),
|
|
(flex-no-grow, flex-grow, 0),
|
|
(float-left, float, left),
|
|
(float-right, float, right),
|
|
(float-none, float, none),
|
|
(text-bold, font-weight, bold),
|
|
(text-italic, font-style, italic),
|
|
(text-uppercase, text-transform, uppercase),
|
|
(text-lowercase, text-transform, lowercase),
|
|
(text-smaller, font-size, smaller),
|
|
(text-bigger, font-size, bigger),
|
|
(text-left, text-align, left),
|
|
(text-center, text-align, center),
|
|
(text-right, text-align, right),
|
|
(text-justify, text-align, justify),
|
|
(text-wrap, overflow-wrap, break-word),
|
|
(justify-start, justify-content, flex-start),
|
|
(justify-end, justify-content, flex-end),
|
|
(justify-center, justify-content, center),
|
|
(justify-between, justify-content, space-between),
|
|
(justify-around, justify-content, space-around),
|
|
(justify-evenly, justify-content, space-evenly),
|
|
(justify-items-start, justify-items, start),
|
|
(justify-items-end, justify-items, end),
|
|
(justify-items-center, justify-items, center),
|
|
(align-start, align-content, start),
|
|
(align-end, align-content, end),
|
|
(align-center, align-content, center),
|
|
(align-between, align-content, space-between),
|
|
(align-around, align-content, space-around),
|
|
(align-evenly, align-content, space-evenly),
|
|
(align-items-start, align-items, flex-start),
|
|
(align-items-end, align-items, flex-end),
|
|
(align-items-center, align-items, center),
|
|
(place-center, place-content, center),
|
|
(justify-self-auto, justify-self, auto),
|
|
(justify-self-start, justify-self, start),
|
|
(justify-self-end, justify-self, end),
|
|
(justify-self-center, justify-self, center),
|
|
(justify-self-stretch, justify-self, stretch),
|
|
(align-self-auto, align-self, auto),
|
|
(align-self-start, align-self, flex-start),
|
|
(align-self-end, align-self, flex-end),
|
|
(align-self-center, align-self, center),
|
|
(align-self-stretch, align-self, stretch),
|
|
(align-top, vertical-align, top),
|
|
(align-bottom, vertical-align, bottom),
|
|
(align-middle, vertical-align, middle),
|
|
(item-first, order, -100),
|
|
(item-last, order, 100)) !default; |