variables.scss

/**
 *
 *                          VARIABLES.SCSS
 * 
 * 
 *      Fichier contenant les variables de style de l'application
 * 
 * 
 */

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

:root {
  --application-color-primary: #39468A;
  --application-color-primary-light: #4251a0;
  --application-color-primary-dark: #333f7c;
  --application-color-primary-text: #fff;

  --application-color-secondary: #464646;
  --application-color-secondary-active: #747474;
  --application-color-secondary-text: #bdbdbd;
  --application-color-secondary-text-active: #fff;

  --application-color-background: #f5f5f5;
  --application-color-background-dark5: #e8e8e8;
  --application-color-background-dark15: #d0d0d0;
  --application-color-background-text: #666;

  --application-color-map-btn: #666666;
  --application-color-map-btn-light: #5b5b5b;
  --application-color-map-btn-dark: #343434;
  --application-color-map-btn-text: #fff;
}

// Extend Bootstrap theme-colors
$theme-colors: map-merge(("indigo": $indigo,
    "purple": $purple,
    "pink": $pink,
    "orange": $orange,
    "teal": $teal,
    "cyan": $cyan),
  $theme-colors);

// Couleur principale
$application-color-primary: var(--application-color-primary);
$application-color-primary-light: var(--application-color-primary-light);
$application-color-primary-dark: var(--application-color-primary-dark);
$application-color-primary-text: var(--application-color-primary-text);

// Couleur menus
$application-color-secondary: var(--application-color-secondary);
$application-color-secondary-active: var(--application-color-secondary-active);
$application-color-secondary-text: var(--application-color-secondary-text);
$application-color-secondary-text-active: var(--application-color-secondary-text-active);

// Couleurs espace de travail
$application-color-background: var(--application-color-background);
$application-color-background-dark5: var(--application-color-background-dark5);
$application-color-background-dark15: var(--application-color-background-dark15);
$application-color-background-text: var(--application-color-background-text);

// Couleurs boutons de carte
$application-color-map-btn: var(--application-color-map-btn);
$application-color-map-btn-light: var(--application-color-map-btn-light);
$application-color-map-btn-dark: var(--application-color-map-btn-dark);
$application-color-map-btn-text: var(--application-color-map-btn-text);

// Couleurs des boutons
$btn-color-primary: $application-color-primary-light;
$btn-color-primary-text: $application-color-primary-text;
$btn-color-secondary: $application-color-secondary;
$btn-color-secondary-text: $application-color-secondary-text;
$btn-color-secondary-active: $application-color-secondary-active;
$btn-color-secondary-text-active: $application-color-secondary-text-active;

// Tailles
$headnav-height: 50px;
$sidenav-width: 250px;
$sidenav-sections-width: 170px;
$footer-height: 38px;

// Studio
$studio-left-panel-width: 375px;
$studio-configuration-section-height: 140px;
$studio-color: $application-color-background-dark5;
$studio-title-background: $application-color-primary;
$studio-title-background-text: $application-color-primary-text;

// Grilles
$table-row-selected: $application-color-primary-light;
$table-row-selected-text: $application-color-primary-text;

// Classes primary
.bg-primary,
.bg-app-primary {
  background-color: $application-color-primary !important;
}

.bg-app-primary-light {
  background-color: $application-color-primary-light;
}

.bg-app-primary-dark {
  background-color: $application-color-primary-dark;
}

.text-app-primary {
  color: $application-color-primary-text;
}

// Classes secondary
.bg-app-secondary {
  background-color: $application-color-secondary;
}

.text-app-secondary {
  color: $application-color-secondary-text;
}

.text-app-secondary-active {
  color: $application-color-secondary-text-active;
}

// Classes background
.bg-app-background {
  background-color: $application-color-background;
}

.text-app-background {
  color: $application-color-background-text;
}