@dabapps/roe/src/less/variables.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

/* @group Colors */

/* Base colors */
@primary: #EF592B;
@secondary: #7B2240;
@tertiary: #2E253F;
@info: #2D87A3;
@success: #2FA34F;
@warning: #D6982F;
@error: #CD3B3B;

/* Light colors */
@primary-light: lighten(@primary, 30%);
@secondary-light: lighten(@secondary, 55%);
@tertiary-light: lighten(@tertiary, 55%);
@info-light: lighten(@info, 30%);
@success-light: lighten(@success, 30%);
@warning-light: lighten(@warning, 25%);
@error-light: lighten(@error, 30%);

/* Lighter colors */
@primary-lighter: lighten(@primary, 35%);
@secondary-lighter: lighten(@secondary, 60%);
@tertiary-lighter: lighten(@tertiary, 60%);
@info-lighter: lighten(@info, 50%);
@success-lighter: lighten(@success, 50%);
@warning-lighter: lighten(@warning, 40%);
@error-lighter: lighten(@error, 40%);

/* Lighest colors */
@primary-lightest: lighten(@primary, 40%);
@secondary-lightest: lighten(@secondary, 65%);
@tertiary-lightest: lighten(@tertiary, 70%);
@info-lightest: lighten(@info, 60%);
@success-lightest: lighten(@success, 60%);
@warning-lightest: lighten(@warning, 50%);
@error-lightest: lighten(@error, 50%);

/* Greys */
@black: #000000;
@grey-dark: #333333;
@grey-medium: #555555;
@grey-light: #AAAAAA;
@grey-lighter: #DDDDDD;
@grey-lightest: #F8F8F8;
@white: #FFFFFF;

/* Misc colors */
@body-background: @white;
@overlay-background: rgba(0, 0, 0, 0.2);
@overlay-background-dark: rgba(0, 0, 0, 0.5);

/* @end Colors */

/* @group Links */

@link-color: @primary;
@link-color-hover: darken(@primary, 15%);
@link-text-decoration: none;
@link-text-decoration-hover: none;

/* @end Links */

/* @group Z indices */

@nav-bar-z-index: 500;
@modal-z-index: 1100;
@side-bar-z-index: 1200;
@highlight-z-index: 1300;

/* @end Z indices */

/* @group Component styles */

@container-background: @white;

@nav-bar-text-color: @font-color-base;
@nav-bar-link-color: @link-color;
@nav-bar-link-color-hover: @link-color-hover;
@nav-bar-link-text-decoration: @link-text-decoration;
@nav-bar-link-text-decoration-hover: @link-text-decoration-hover;
@nav-bar-background: @body-background;
@nav-bar-border: @border-base;
@nav-bar-height: auto;

@nav-item-background-hover: @grey-lightest;
@nav-item-background-active: @grey-lighter;

@side-bar-overlay-background: @overlay-background;
@side-bar-background: @body-background;
@side-bar-border: @border-base;
@side-bar-width: 250px;

@footer-background: @body-background;
@footer-border: @border-base;
@footer-height: auto;

@badge-font-size: @font-size-small;
@badge-line-height: 1.5;
@badge-border-radius: unit(@badge-line-height / 2, em);
@badge-background-default: @grey-lighter;
@badge-text-color-light: @grey-lightest;
@badge-text-color-dark: @grey-dark;

@banner-background: @body-background;
@banner-border: @border-base;
@banner-height: auto;

@button-border-width: 2px;
@button-text-color-dark: @grey-dark;
@button-text-color-light: @grey-lightest;
@button-background-default: @grey-medium;
@button-background-hollow: transparent;
@button-border-radius: @border-radius-base;
@button-border-radius-pill: 100px;
@button-padding-vertical-base: @padding-base / 2;
@button-padding-vertical-large: @padding-large / 2;
@button-padding-vertical-small: @padding-small / 2;
@button-padding-horizontal-base: @padding-base;
@button-padding-horizontal-large: @padding-large;
@button-padding-horizontal-small: @padding-small;

@speech-bubble-arrow-size: 10px;
@speech-bubble-border-radius: 10px;
@speech-bubble-background-default: @grey-lightest;
@speech-bubble-border-color-default: @grey-lighter;
@speech-bubble-text-color-default: @font-color-base;
@speech-bubble-max-width: 75%;

@table-stripe: @grey-lightest;
@table-hover: darken(@grey-lightest, 3%);
@table-border: @border-base;

@content-box-background: @white;
@content-box-header-background: @primary-lightest;
@content-box-header-border: 1px solid @primary-lighter;
@content-box-footer-background: @content-box-header-background;
@content-box-footer-border: @content-box-header-border;

@highlight-overlay-background: @overlay-background-dark;
@highlight-border-radius: @border-radius-base;

@modal-overlay-background: @overlay-background;
@modal-background: @content-box-background;
@modal-header-background: @content-box-header-background;
@modal-header-border: @content-box-header-border;
@modal-footer-background: @modal-header-background;
@modal-footer-border: @modal-header-border;
@modal-margin-vertical: @gutter-width / 2;
@modal-margin-horizontal: @gutter-width / 2;
@modal-width-base-sm: @screen-sm;
@modal-width-base-md: @screen-md;
@modal-width-small-md: @screen-sm;
@modal-width-large-lg: @screen-lg;
@modal-width-large-xl: @screen-xl;

@well-background: @grey-lightest;
@well-border: @border-base;

@tab-background: @grey-lightest;
@tab-active-background: @white;
@tab-border: @border-base;

@code-block-background: @grey-lightest;
@code-block-name-background: contrast(@code-block-background, darken(@code-block-background, 5%), lighten(@code-block-background, 5%)); // lesshint maxCharPerLine: false
@code-block-border: @border-base;

@form-group-margin: @margin-large;
@form-group-label-margin: @margin-base;

@input-group-addon-background: @grey-lightest;

@input-border: @border-dark;
@input-width: 200px;
@input-height: 32px;
@label-width: 100px;
@no-label-offset: @label-width + @margin-base;

@textarea-width: @input-width;
@textarea-height: @input-height * 2;

@checkbox-size: 16px;
@checkbox-background: @white;
@checkbox-border: @border-dark;
@checkbox-active-background: @primary;
@checkbox-icon-background: @checkbox-background;
@checkbox-icon-border: 2px solid @checkbox-icon-background;
@checkbox-shadow: inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.1);
@checkbox-border-radius: @border-radius-base * 2;

@pagination-button-color: @grey-dark;
@pagination-button-background: @grey-lighter;
@pagination-selected-color: @white;
@pagination-selected-background: @primary;
@pagination-indicator-color: @grey-dark;
@pagination-indicator-background: @grey-lighter;

/* @end Component styles */

/* @group Shadows */

@shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
@shadow-inset-subtle: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
@shadow-inset-hard: inset 0 1px 5px 0 rgba(0, 0, 0, 0.2);
@shadow-subtle: 0 0 3px 0 rgba(0, 0, 0, 0.1);
@shadow-hard: 0 0 5px 0 rgba(0, 0, 0, 0.2);

/* @end Shadows */

/* @group Borders */

@border-radius-base: 2px;
@border-base: 1px solid @grey-lighter;
@border-dark: 1px solid @grey-light;
@border-none: 0;

/* @end Borders */

/* @group Fonts */

@letter-spacing-base: 0.2px;

@font-size-base: 14px;
@line-height-base: initial;

@font-size-small: 0.9em;
@line-height-small: 1.3em;

@font-size-large: 1.4em;
@line-height-large: 1.3em;

@font-size-smaller: 0.9em;
@line-height-smaller: 1.3em;

@font-size-larger: 1.4em;
@line-height-larger: 1.3em;

@font-size-h1: 3em;
@line-height-h1: 1.3em;
@font-size-h2: 2.5em;
@line-height-h2: 1.3em;
@font-size-h3: 2.2em;
@line-height-h3: 1.3em;
@font-size-h4: 2em;
@line-height-h4: 1.3em;
@font-size-h5: 1.8em;
@line-height-h5: 1.3em;
@font-size-h6: 1.4em;
@line-height-h6: 1.3em;

@font-size-button: 1em;
@line-height-button: 1.3em;
@font-size-button-large: @font-size-large;
@line-height-button-large: @line-height-button;
@font-size-button-small: @font-size-small;
@line-height-button-small: @line-height-button;

@font-color-base: @grey-dark;
@font-color-light: @grey-light;
@header-color-base: @font-color-base;

@font-family-base: arial, helvetica, sans-serif;

/* @end Fonts */

/* @group Font Weights */

@font-weight-light: lighter;
@font-weight-normal: normal;
@font-weight-bold: bold;

/* @end Font Weights */

/* @group Spacing */

@padding-base: 10px;
@padding-small: floor(@padding-base * 0.5);
@padding-large: floor(@padding-base * 1.5);

@margin-base: 10px;
@margin-small: floor(@margin-base * 0.5);
@margin-large: floor(@margin-base * 1.5);

/* @end Spacing */

/* @group Grid */

@grid-divisions: 12;
@gutter-width: 30px;

/* @end Grid */

/* @group Screen sizes */

@screen-sm: 480px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;

/* @end Screen sizes */