salix/front/core/styles/variables.scss

@import "./util";

$menu-width: 16em;
$topbar-height: 4em;
$mobile-width: 800px;
$font-size: 16px;

// Width

$width-xs: 25em;
$width-sm: 34em;
$width-md: 50em;
$width-lg: 80em;
$width-xl: 100em;

// Spacing

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 32px;
$spacing-xl: 70px;

// Light theme

$color-primary: #f7931e;
$color-secondary: $color-primary;

$color-font: #222;
$color-font-light: #555;
$color-font-secondary: #9b9b9b;
$color-font-dark: white;
$color-font-link: #005a9a;
$color-font-bg: rgba(0, 0, 0, .7);
$color-font-bg-marginal: rgba(0, 0, 0, .4);
$color-font-bg-dark: rgba(255, 255, 255, .7);
$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);

$color-header: darken($color-primary, 5%);
$color-menu-header: #3d3d3d;
$color-bg: #e5e5e5;
$color-bg-dark: #3d3d3d;
$color-active: $color-primary;
$color-active-font: $color-font-dark;
$color-bg-panel: white;
$color-main: $color-primary;
$color-marginal: #ccc;
$color-success: #a3d131;
$color-notice: #32b1ce;
$color-alert: #f42121;
$color-button: $color-secondary;

$color-spacer: rgba(0, 0, 0, .3);
$color-spacer-light: rgba(0, 0, 0, .12);
$color-input-underline: rgba(0, 0, 0, .12);
$color-input-underline-hover: rgba(0, 0, 0, .6);
$color-shadow: rgba(0, 0, 0, .2);
$color-hightlight: rgba(0, 0, 0, .05);
$color-hover-cd: rgba(0, 0, 0, .1);
$color-hover-dc: .7;
$color-disabled: .6;

$color-font-link-medium: lighten($color-font-link, 20%);
$color-font-link-light: lighten($color-font-link, 35%);
$color-main-medium: lighten($color-main, 20%);
$color-main-light: lighten($color-main, 35%);
$color-success-medium: lighten($color-success, 20%);
$color-success-light: lighten($color-success, 35%);
$color-notice-medium: lighten($color-notice, 20%);
$color-notice-light: lighten($color-notice, 35%);
$color-alert-medium: lighten($color-alert, 20%);
$color-alert-light: lighten($color-alert, 35%);
/**/

// Dark theme
/*
$color-header: #3d3d3d;
$color-bg: #222;
$color-bg-dark: #222;
$color-font: #eee;
$color-font-light: #aaa;
$color-font-secondary: #777;
$color-font-dark: white;
$color-font-bg: rgba(0, 0, 0, .8);
$color-font-link: #005a9a;
$color-active: #666;
$color-active-font: white;
$color-bg-panel: #3c3b3b;
$color-main: #f7931e;
$color-marginal: #ccc;
$color-success: #a3d131;
$color-notice: #32b1ce;
$color-alert: #f42121;

$color-spacer: rgba(255, 255, 255, .3);
$color-spacer-light: rgba(255, 255, 255, .12);
$color-input-underline: rgba(255, 255, 255, .12);
$color-input-underline-hover: rgba(255, 255, 255, .6);
$color-shadow: rgba(0, 0, 0, .2);
$color-hightlight: rgba(255, 255, 255, .15);
$color-hover-cd: rgba(255, 255, 255, .1);
$color-hover-dc: .7;
$color-disabled: .6;

$color-font-link: lighten($color-main, 10%);
$color-main-medium: darken($color-main, 20%);
$color-main-light: darken($color-main, 35%);
$color-success-medium: darken($color-success, 20%);
$color-success-light: darken($color-success, 35%);
$color-notice-medium: darken($color-notice, 20%);
$color-notice-light: darken($color-notice, 35%);
$color-alert-medium: darken($color-alert, 20%);
$color-alert-light: darken($color-alert, 35%);
/**/

// Border

$border-thin: .05em solid $color-spacer;
$border-thin-light: .05em solid $color-spacer-light;
$shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);