100 lines
2.4 KiB
SCSS
100 lines
2.4 KiB
SCSS
@charset "UTF-8";
|
|
|
|
// colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154
|
|
$green: #64d16e;
|
|
$black: #000000;
|
|
$ugly-purple: #b24eb7;
|
|
$lavender-pink: #e9bdeb;
|
|
$white: #ffffff;
|
|
$dark-lavender: #7d6c99;
|
|
$dusty-orange: #f18647;
|
|
$violet: #bd10e0;
|
|
$red: #cd0000;
|
|
$cool-grey: #aeafb1;
|
|
$warm-grey: #807e7e;
|
|
$wisteria: #bf83c2;
|
|
$pale-purple: #d198d4;
|
|
|
|
$purple: #8a4d76;
|
|
$pink: #fa7c91;
|
|
$brown: #757763;
|
|
$beige-light: #d0d1cd;
|
|
$beige-lighter: #eff0eb;
|
|
|
|
// DINUM colors
|
|
|
|
$d-primary-intense: #3e3882; // bleu 800
|
|
$d-blue-700: #4f47af; // bleu 700
|
|
$d-primary: #6359cf; // bleu 600
|
|
$d-grey: #e3e3ea;
|
|
$d-blue30: #f6f5fd; // bleu 300
|
|
$d-rule: #e2e0fa; // bleu 100
|
|
$d-neutral: #b5b5c6;
|
|
$d-border: #4e4c59;
|
|
$d-grey: #767486;
|
|
$d-black: #383838;
|
|
$d-alt: #a9607f;
|
|
|
|
$d-info: #ecf4ff;
|
|
$d-info-text: #316ec7;
|
|
$intense-blue: #0a76f6;
|
|
$d-success: #ecfff5;
|
|
$d-success-text: #128149;
|
|
$d-warning: #dcd3bb;
|
|
$d-warning-text: #86671b;
|
|
$d-error: #ffecee;
|
|
$d-error-text: #d51b38;
|
|
|
|
// interpretations in app
|
|
$outline-color: $intense-blue; // #0a76f6
|
|
$success_color: $d-success-text;
|
|
$primary_color: $d-primary;
|
|
$primary: $d-primary;
|
|
$secondary_color: $d-primary-intense;
|
|
$bg-grey: $d-blue30;
|
|
$bar-progress-grey: #e3e3ea;
|
|
$font_color: $d-black;
|
|
$font_color_light: $d-grey;
|
|
$logo_color: $d-primary;
|
|
$logo_color_2: $d-primary-intense;
|
|
$legend_color: $d-info-text;
|
|
$legend_color_2: $d-info;
|
|
$choice_select_border_color: $d-info;
|
|
$hover-color: $d-neutral;
|
|
$rules: $d-rule;
|
|
$border-color: $d-neutral;
|
|
$input-border-color: $d-border;
|
|
$grey-dark: $d-primary;
|
|
$grey-lighter: $beige-light;
|
|
$clicked-color: $d-primary;
|
|
$mini-button-color: $d-primary-intense;
|
|
$warning: $d-warning;
|
|
$danger: $d-error;
|
|
$success: $d-success;
|
|
|
|
$default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
|
|
$title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
|
|
|
|
// sizes and breakpoints
|
|
$large-column-width: 588px;
|
|
$main-column-width: 25rem;
|
|
$main-column-width-inner: 23.75rem;
|
|
$logo-side: 40px;
|
|
$mobile-size: 25rem;
|
|
$header-nav-height: 4.85rem;
|
|
$header-nav-inner-height: 4.5rem;
|
|
$widescreen-width-main-column: 75rem;
|
|
$stepper-nav-height: 2rem;
|
|
$stepper-progress-bar-height: 5px;
|
|
$home-nav-height: 2rem;
|
|
$home-nav-height-small: 3.5rem;
|
|
// datepicker
|
|
$cell-size-datepicker-small: 30px;
|
|
$cell-size-datepicker-desktop: 42px;
|
|
$cell-size-datepicker: 50px;
|
|
|
|
// css vars
|
|
:root {
|
|
--main-col-width: $main-column-width-inner;
|
|
}
|