enfrancais-app/src/assets/scss/abstracts/_variables.scss

$gray-900: #1b1b1b;
$black: #000;

// Texte de départ (id: 9) WHITE
$white: #fff;
// Texte critique (id: 22) ORANGE
$orange: #ffba7d;
// Constellation en écho (id: 63) PURPLE
$purple: #db7dff;
// Réflexion théorique (id: 6) YELLOW
$yellow: #ffe87d;
// Lecture rapprochée (id: 7) BLUE
$blue: #9191ff;
// Expérience sensible (id: 8) BROWN
$brown: #cdae87;
// Kit de désapprentissage (id: 23) RED
$red: #ff775f;
// Créations numériques (id: ???) GREEN
$green: #98ff98;


$colors: (
  'black': $black,
  'white': $white,
  'orange': $orange,
  'purple': $purple,
  'yellow': $yellow,
  'blue': $blue,
  'brown': $brown,
  'red': $red,
  'green': $green,
);

$dark: $gray-900;
$light: $white;

$theme-colors: (
  'depart': $white,
  'critique': $orange,
  'echo': $purple,
  'reflexion': $yellow,
  'lecture': $blue,
  'sensible': $brown,
  'kit': $red,
  'creation': $green
);


$yiq-contrasted-threshold: 120;


$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  tb: 769px,
  md: 1024px,
  lg: 1200px,
  xl: 1440px,
  xxl: 1920px,
);

$layout-bp: md;
$layout-bp-down: tb;
$size-bp: tb;
$size-bp-down: sm;

// Body
$body-bg: #fffcfb;
$body-color: $black;

// Links
$link-color: $black;
$link-decoration: underline;


// Borders
$border-width: 2px;
$border-color: $black;
$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;


// Font
$font-family-sans-serif: 'Noto Sans';
$font-family-text: 'Redaction'; // custom

$font-size-base: 1rem;
$font-size-base-em: 1em;
$font-size-sm: $font-size-base * .9;

$line-height-base: 1.5;
$line-height-lg: $line-height-base;
$line-height-sm: $line-height-base;

// Headings
$headings-font-weight: 700;
$headings-line-height: $line-height-base;
$h1-font-size: $font-size-base-em * 2.5;
$h2-font-size: $font-size-base-em * 2;
$h3-font-size: $font-size-base-em * 1.75;
$h4-font-size: $font-size-base-em * 1.5;
$h5-font-size: $font-size-base-em * 1.25;
$h6-font-size: $font-size-base-em;

// Buttons
$input-btn-padding-y: 0;
$input-btn-padding-x: .5rem;
$input-btn-font-family: null;
$input-btn-line-height: 1.25;

$input-btn-focus-width: 0;

$input-btn-padding-y-sm: 0;
$input-btn-padding-x-sm: .5rem;
$input-btn-font-size-sm: $font-size-sm;
$input-btn-line-height-sm: 1;

$input-btn-border-width: 2px;


// Dropdowns
$dropdown-border-color: $border-color;
$dropdown-link-hover-bg: #efebe9;
$dropdown-link-active-color: $white;
$dropdown-link-active-bg: $dark;

// Cards
$card-spacer-y: .75rem;
$card-spacer-x: .75rem;
$card-border-width: 0;
// $card-border-color: $black;

// List group
$list-group-border-width: 0;
$list-group-item-padding-y: 5px;
$list-group-item-padding-x: 18px;

// INPUT RANGE
$custom-range-track-height:         .1875rem;
$custom-range-track-bg:             $black;
$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1);

$custom-range-thumb-width:                   1.25rem;
$custom-range-thumb-bg:                      $white;
$custom-range-thumb-border:                  3px solid $black;
$custom-range-thumb-border-radius:           1rem;
$custom-range-thumb-active-bg:               $black;

// SPINNER
$spinner-width: 50px;

// POPOVERS
$popover-font-size: $font-size-base;
$popover-bg: $white;
$popover-max-width: 450px;
$popover-border-width: 0;
$popover-box-shadow: null;

$popover-body-color: $white;
$popover-body-padding-y: 18px;
$popover-body-padding-x: 18px;

$popover-arrow-width: 2rem;
$popover-arrow-height: 2rem;

$popover-arrow-outer-color: null;

// ╭─╴╷ ╷╭─╴╶┬╴╭─╮╭╮╮
// │  │ │╰─╮ │ │ ││││
// ╰─╴╰─╯╶─╯ ╵ ╰─╯╵╵╵

// HEADER
$header-spacer-sm: 18px;
$header-spacer: 30px;
$header-height: 86px;

// NODEVIEW
$node-view-spacer-sm-x: 18px;
$node-view-spacer-sm-y: 18px;
$node-view-spacer-x: 30px;
$node-view-spacer-y: 25px;

$node-card-spacer-sm-x: 8px;
$node-card-spacer-sm-y: 8px;
$node-card-spacer-x: 15px;
$node-card-spacer-y: 10px;

$node-card-width: 560px;
$node-card-height: 350px;
$node-card-width-sm: $node-card-width / 1.5;
$node-card-height-sm: $node-card-height / 1.5;

// MISC
$btn-size: 26px;
$line: $border-width solid $black;

@import '~bootstrap/scss/variables';
@import '~bootstrap-vue/src/variables';