baz_april/squelettes/scss/utils/_variables.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;
$couleurPrincipaleOn:		#004050;
$couleurSecondaire:			#f7651a;
$couleurPrincipaleDowner: 	lighten($couleurPrincipale, 60%);

$couleurBackground:        	$white;

$couleurBackgroundTexte:	#f5faff;

$couleur-primaire:          #253288;
$couleurConnex:				#005F6B;

$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));