Variables SASS et CSS
Notes
/* VARIABLES SASS */
/* MEDIA QUERIES */
$mq-small : 576px;
$mq-medium : 768px;
$mq-large : 992px;
$mq-xlarge : 1200px;
$mq-xxlarge : 1441px;
/* Theme switcher : dark -> light theme */
/* Light theme */
.light-theme{
--color-primary: #0060df;
--color-secondary: #fff;
--color-accent: #fd6f53;
--font-color: #000000;
--font-color-light: rgba(0, 0, 0, 0.75); /* lighter */
--links-color: var(--color-3);
--border-color: #eaeaea;
}
/* Dark theme */
.dark-theme {
--color-primary: #17ed90;
/* --color-secondary: #2a2c2d; */
--color-secondary: #000;
--color-accent: #12cdea;
--font-color: #ffffff;
--font-color-light: rgba(255, 255, 255, 0.75); /* lighter */
--links-color: var(--color-3);
--border-color: #707070;
}
:root {
/* COULEURS */
/* Nuances de Gris */
--gray-medium: rgba(0, 0, 0, .75);
--gray-light: rgba(0, 0, 0, .5);
--gray-xlight: rgba(0, 0, 0, .25);
/* Liens */
/* texte des boutons */
--color-txt-btn: #fff;
/* Couleurs -> Japp */
--color-1: rgba(1, 25, 54, 1); /* Bleu Noir -> header, navbar ? */
--color-2: #F9DC5C; /* Jaune */
--color-3: #ED254E; /* Rouge Rose -> bouton survolé */
--color-4: #C21F40; /* Rouge "pourpre" -> bouton par défaut */
--color-5: #F4FFFD; /* Blanc "bleuté" -> fonds d'éléments ? */
/* POLICES */
--main-font: 'PT Serif', serif; /* PT Serif pour le CORPS de texte */
--headings-font: 'Roboto', sans-serif; /* Roboto pour les TITRES */
--custom-font: 'Eurostile', sans-serif; /* Adobe Font */
/* Ombres */
/* GRIS */
--small-shadow : 0 .25rem .375rem rgba(0,0,0,.09);
--shadow-default: 0px 10px 30px -10px rgba(151, 163, 184, 0.5);
--medium-shadow : 0 14px 28px rgba(0, 0, 0, 0.015), 0 10px 10px rgba(0, 0, 0, 0.035);
--light-shadow : 0 .5rem 1rem rgba(0,0,0,.15); /* cf .shadow Bootstrap */
--xlight-shadow : 0 .25rem .5rem rgba(0,0,0,.15);
--green-shadow : 0 .5rem 1rem rgba(0, 204, 153, 0.2); /* sur la base de vertsiders */
--yellow-shadow : 0 .5rem 1rem rgba(255, 144, 0, 0.25); /* sur la base de --color-6 */
--red-shadow : 0 .5rem 1rem rgba(238, 89, 65, 0.25); /* sur la base de --color-7 */
/* RED */
--red-shadow--default : 0px 10px 30px -10px rgba(237, 37, 78, 0.5);
--red-shadow--hover :
0px 10px 0px -10px rgba(237, 37, 78, 0.5),
0px 20px 10px -20px rgba(237, 37, 78, 0.5),
0px 30px 20px -25px rgba(237, 37, 78, 0.5),
0px 40px 30px -30px rgba(237, 37, 78, 0.5),
0px 50px 50px -35px rgba(237, 37, 78, 0.5);
/* YELLOW */
--yellow-shadow--default : 0px 10px 30px -10px rgba(249, 220, 92, 0.5);
--yellow-shadow--hover :
0px 10px 0px -10px rgba(249, 220, 92, 0.5),
0px 20px 10px -20px rgba(249, 220, 92, 0.5),
0px 30px 20px -25px rgba(249, 220, 92, 0.5),
0px 40px 30px -30px rgba(249, 220, 92, 0.5),
0px 50px 50px -35px rgba(249, 220, 92, 0.5);
/* DEGRADES */
--gradient-red-yellow :
linear-gradient(
50deg,
rgba(194,31,64,1) 0%,
rgba(237,37,78,1) 51%,
rgba(249,220,92,1) 100%);
--gradient-to-black: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(0, 0, 0, 1)
); /* background-image */
--gradient-black-to-white: linear-gradient(
to bottom,
rgba(0, 0, 0, 1),
rgba(255, 255, 255, 0)
); /* background-image */
--gradient-to-white: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1)
); /* background-image */
--gradient-to-gray: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 50%,
rgba(238, 238, 238, 1)
); /* background-image */
--gradient-green-white:
linear-gradient(
to bottom,
rgba(0, 204, 153, 1),
rgba(0, 204, 153, .75),
rgba(0, 204, 153, .5),
rgba(255, 255, 255, 0)
); /* background-image */
--simple-gradient-green-white:
linear-gradient(
to bottom,
rgba(0, 204, 153, 1),
rgba(0, 204, 153, .5),
rgba(255, 255, 255, 0)
); /* background-image */
--gradient-green-yellow:
linear-gradient(
45deg,
rgba(0,204,153,1) 0%,
rgba(254,255,0,1) 100%
);
--gradient-yellow-red:
linear-gradient(
to right top,
#ff9000,
#fe811d,
#fa732c,
#f56637,
#ee5941
);
--gradient-green-yellow-red:
linear-gradient(
to right top,
#00cc99,
#56c873,
#82c24d,
#a9b928,
#ceab00,
#df9f00,
#ef9105,
#fe811d,
#fc7629,
#f86c32,
#f4623a,
#ee5941
);
/* Colonnes */
--grid-cols: repeat(2,1fr);
}
Notes
Où ça se trouve ?
Dans le fichier _variables.scss à la racine du dossier scss