184 lines
3.3 KiB
SCSS
Executable File
184 lines
3.3 KiB
SCSS
Executable File
// Couleurs
|
|
$mainStyle: #4975BA;
|
|
$mainColor: #3c4858;
|
|
|
|
|
|
|
|
$yellow1: #f8ab1c;
|
|
$yellow2: rgb(221, 144, 35);
|
|
$yellow3: #f8d71c;
|
|
|
|
$blue1: #4286f4;
|
|
$blue2: #a9dff5;
|
|
|
|
$red1: #c84242;
|
|
$orange1: #cf7219;
|
|
$rose1: #dd4587;
|
|
|
|
$green1: #5cb85c;
|
|
$green2: #CEE8DF;
|
|
$green3: #70BEB1;
|
|
$green4: #4c964c;
|
|
|
|
$brown1: #D99E7E;
|
|
|
|
:export {
|
|
mainStyle: $mainStyle;
|
|
red1: $red1;
|
|
blue2: $blue2;
|
|
yellow1: $yellow1;
|
|
yellow2: $yellow2;
|
|
yellow3: $yellow3;
|
|
mainColor: $mainColor;
|
|
green1: $green1;
|
|
green2: $green2;
|
|
green3: $green3;
|
|
}
|
|
|
|
|
|
|
|
$w255: rgb(255, 255, 255);
|
|
$w250: rgb(250, 250, 250);
|
|
$w245: rgb(245, 245, 245);
|
|
$w240: rgb(240, 240, 240);
|
|
$w235: rgb(235, 235, 235);
|
|
$w230: rgb(230, 230, 230);
|
|
$w225: rgb(225, 225, 225);
|
|
$w220: rgb(220, 220, 220);
|
|
$w210: rgb(210, 210, 210);
|
|
$w200: rgb(200, 200, 200);
|
|
$w190: rgb(190, 190, 190);
|
|
$w180: rgb(180, 180, 180);
|
|
$w170: rgb(170, 170, 170);
|
|
$w160: rgb(160, 160, 160);
|
|
$w150: rgb(150, 150, 150);
|
|
$w140: rgb(140, 140, 140);
|
|
$w130: rgb(130, 130, 130);
|
|
$w120: rgb(120, 120, 120);
|
|
$w110: rgb(110, 110, 110);
|
|
$w100: rgb(100, 100, 100);
|
|
|
|
$g90: rgb(90, 90, 90);
|
|
$g80: rgb(80, 80, 80);
|
|
$g70: rgb(70, 70, 70);
|
|
$g60: rgb(60, 60, 60);
|
|
$g50: rgb(50, 50, 50);
|
|
$g40: rgb(40, 40, 40);
|
|
$g30: rgb(30, 30, 30);
|
|
$g20: rgb(20, 20, 20);
|
|
$g10: rgb(10, 10, 10);
|
|
$g0: rgb(0, 0, 0);
|
|
|
|
$ombre: rgba(10,10,10,0.2);
|
|
|
|
|
|
$mainFont: 'Arial, sans-serif';
|
|
|
|
$mini: "(max-width: 1000px)";
|
|
$desktop: "(min-width: 1001px)";
|
|
|
|
|
|
$Loadersize: 20px;
|
|
|
|
//tailles
|
|
|
|
$headerHeight: 60px;
|
|
$headerColor: #373F46;
|
|
|
|
|
|
$boutonfont: 14px;
|
|
$boutonH: 20px;
|
|
|
|
$aside-w: 180px;
|
|
|
|
$contentSize: 170px;
|
|
|
|
// fonts
|
|
|
|
|
|
|
|
@mixin transition($args...) {
|
|
-webkit-transition: $args;
|
|
-moz-transition: $args;
|
|
-o-transition: $args;
|
|
-ms-transition: $args;
|
|
transition: $args;
|
|
}
|
|
|
|
@mixin scale($scale) {
|
|
-webkit-transform: scale($scale);
|
|
-moz-transform: scale($scale);
|
|
-o-transform: scale($scale);
|
|
-ms-transform: scale($scale);
|
|
transform: scale($scale);
|
|
}
|
|
|
|
@mixin rotate($angle) {
|
|
-webkit-transform: rotate($angle);
|
|
-moz-transform: rotate($angle);
|
|
-o-transform: rotate($angle);
|
|
-ms-transform: rotate($angle);
|
|
transform: rotate($angle);
|
|
}
|
|
|
|
@mixin translateX($value) {
|
|
-webkit-transform: translateX($value);
|
|
-moz-transform: translateX($value);
|
|
-o-transform: translateX($value);
|
|
-ms-transform: translateX($value);
|
|
transform: translateX($value);
|
|
}
|
|
|
|
@mixin translateY($value) {
|
|
-webkit-transform: translateY($value);
|
|
-moz-transform: translateY($value);
|
|
-o-transform: translateY($value);
|
|
-ms-transform: translateY($value);
|
|
transform: translateY($value);
|
|
}
|
|
|
|
@mixin translate($x, $y) {
|
|
-webkit-transform: translate($x, $y);
|
|
-moz-transform: translate($x, $y);
|
|
-o-transform: translate($x, $y);
|
|
-ms-transform: translate($x, $y);
|
|
transform: translate($x, $y);
|
|
}
|
|
|
|
@mixin userselect {
|
|
-webkit-user-select: none;
|
|
-o-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@mixin ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: break-word;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@mixin inputbase {
|
|
outline: none;
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
@mixin bg-center {
|
|
background: {
|
|
size: cover;
|
|
position: center center;
|
|
repeat: no-repeat;
|
|
};
|
|
}
|
|
|
|
@mixin filter($property) {
|
|
-webkit-filter: $property;
|
|
-o-filter: $property;
|
|
-moz-filter: $property;
|
|
-ms-filter: $property;
|
|
filter: $property;
|
|
} |