ORIENT/modules/system/assets/ui/less/global.variables.less

//
// Reset
// --------------------------------------------------

// Dupe
@body-bg:               #f9f9f9;

@text-color:            @gray-dark;
@link-color:            #0181b9;
@link-hover-color:      darken(@link-color, 30%);

@link-hover-decoration: underline;

//
// Paths
// --------------------------------------------------

@font-path: "font";
@image-path: "images";

//
// Breakpoints
// --------------------------------------------------

// Extra small screen / phone
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);

//
// Typography
// --------------------------------------------------

@font-family-sans-serif:  sans-serif;
@font-family-serif:       serif;
@font-family-monospace:   monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    400;
@headings-line-height:    1.1;
@headings-color:          inherit;

@component-offset-horizontal: 180px;
@text-muted:                  @gray-light;
@abbr-border-color:           @gray-light;
@headings-small-color:        @gray-light;
@blockquote-small-color:      @gray-light;
@blockquote-font-size:        (@font-size-base * 1.25);
@blockquote-border-color:     @gray-lighter;
@page-header-border-color:    @gray-lighter;
@dl-horizontal-offset:        @component-offset-horizontal;
@hr-border:                   @gray-lighter;

//
// Sizes
// --------------------------------------------------
@size-tiny:  50px;
@size-small: 100px;
@size-large: 200px;
@size-huge:  250px;
@size-giant: 350px;

//
// Colors
// --------------------------------------------------
@brand-primary:          #34495e;
@brand-secondary:        #e67e22;
@brand-accent:           #3498db;
@brand-success:          #31ac5f;
@brand-info:             #5bc0de;
@brand-warning:          #f0ad4e;
@brand-danger:           #ab2a1c;

@color-text-title:       #405261;
@color-text-description: #8f8f8f;

@color-focus:            @brand-primary;
@color-border:           #cccccc;
@color-border-light:     #e1e1e1;

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             lighten(#000, 60%);   // #999
@gray-lighter:           lighten(#000, 93.5%); // #eee

@state-success-text:     #3c763d;
@state-success-bg:       #dff0d8;
@state-success-border:   darken(spin(@state-success-bg, -10), 5%);

@state-info-text:        #31708f;
@state-info-bg:          #d9edf7;
@state-info-border:      darken(spin(@state-info-bg, -10), 7%);

@state-warning-text:     #8a6d3b;
@state-warning-bg:       #fcf8e3;
@state-warning-border:   darken(spin(@state-warning-bg, -10), 5%);

@state-danger-text:      #a94442;
@state-danger-bg:        #f2dede;
@state-danger-border:    darken(spin(@state-danger-bg, -10), 5%);

//
// Highlights
// --------------------------------------------------

@highlight-hover-bg: mix(white, @brand-accent, 13%);
@highlight-hover-text: #fff;

@highlight-active-bg: @brand-accent;
@highlight-active-text: #fff;

//
// General
// --------------------------------------------------
@padding-standard:          20px;

@padding-base-vertical:     8px;
@padding-base-horizontal:   13px;

@padding-large-vertical:    10px;
@padding-large-horizontal:  16px;

@padding-small-vertical:    5px;
@padding-small-horizontal:  10px;

@padding-xs-vertical:       1px;
@padding-xs-horizontal:     5px;

@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small:         1.5;

@border-radius-base:        3px;
@border-radius-large:       6px;
@border-radius-small:       3px;

@component-active-color:    #fff;
@component-active-bg:       @brand-primary;

@caret-width-base:          4px;
@caret-width-large:         5px;

@spacer: @padding-standard;
@spacer-y: @spacer;
@spacer-x: @spacer;

@overlay-box-shadow: ~"0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)";
@overlay-background: rgba(0,0,0,0.2);