baz_april/squelettes/scss/utils/_variables.scss
2020-12-07 15:38:35 +01:00

112 lines
3.3 KiB
SCSS

// ------------------------------
// Tailles typos
// valeur fixe (équivalence 1em)
$_base-font-size: 16px;
// valeur variable (taille du texte de base)
$body-font-size: 16px;
$typo-line-height: 1.6;
$spacer: em(16px);
// ------------------------------
// Palette de couleurs du site
// --------------------------------------------------
// Grays
// -------------------------
$black: #000;
$grayDarker: #222;
$grayDark: #333;
$gray: #555;
$grayLight: #999;
$grayLightL5: lighten($grayLight,5%);
$grayLighter: #eee;
$white: #fff;
// Accent colors
// -------------------------
$blue: #049cdb;
$blueDark: #0064cd;
$green: #46a546;
$red: #9d261d;
$yellow: #ffc40d;
$orange: #f89406;
$pink: #c3325f;
$purple: #7a43b6;
$couleurPrincipale: #00365b;
$couleurSecondaire: #f7651a;
$couleurPrincipaleDowner: lighten($couleurPrincipale, 60%);
$couleurBackground: $white;
$couleurBackgroundTexte: #f5faff;
$couleur-primaire: #253288;
$couleurConnex: $couleurPrincipale;
$couleur-texte: #0A4250;
$couleur-titres: $couleur-texte;
$couleur-lien: #0a4756;
$couleur-lien-hover: lighten($couleur-lien, 10%);
$couleur-gris-bg: #EDEDED;
$couleur-erreur: #B01C16;
$couleur-erreur-bg: #FDF5F4;
$couleur-valide: #3E7723;
$couleur-valide-bg: #EFF9EF;
// Links
// -------------------------
/*$couleurLien: #0a4756;
$couleurLienHover: $couleurSecondaire;*/
// ------------------------------
// Palette de couleurs des formulaires
$couleur-boutons: $couleurPrincipale;
$couleur-boutons-hover: darken($couleur-boutons, 10%);
$couleur-placeholder: $couleurPrincipale;
$couleur-border-form: #D6D6D6;
$couleur-border-form-focus: $couleur-primaire;
// ------------------------------
// Variables
$container-width: 1200px;
$typo-margin-vertical: ($typo-line-height)*1em;
// ------------------------------
// Breakpoints
$screen-xxsmall: 380px;
$screen-small: 580px;
$screen-medium: 768px;
$screen-large: 980px;
$screen-largeplus: $container-width;
$bp-xxsmall: breakpoint(max-width, em($screen-xxsmall, $_base-font-size));
$bp-small: breakpoint(max-width, em($screen-small, $_base-font-size));
$bp-medium: breakpoint(max-width, em($screen-medium, $_base-font-size));
$bp-large: breakpoint(max-width, em($screen-large, $_base-font-size));
$bp-largeplus: breakpoint(max-width, em($screen-largeplus, $_base-font-size));
$bp-xxsmall-up: breakpoint(min-width, em($screen-xxsmall+1px, $_base-font-size));
$bp-small-up: breakpoint(min-width, em($screen-small+1px, $_base-font-size));
$bp-medium-up: breakpoint(min-width, em($screen-medium+1px, $_base-font-size));
$bp-large-up: breakpoint(min-width, em($screen-large+1px, $_base-font-size));
$bp-largeplus-up: breakpoint(min-width, em($screen-largeplus+1px, $_base-font-size));