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

A Collection of React Components for Project Development

/* @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;

/* @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 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: @input-height + @padding-base * 2;

@button-text-color-dark: @grey-dark;
@button-text-color-light: @grey-lightest;
@button-background-default: @grey-lighter;

@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;

@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;

@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;

@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);

/* @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-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 */