react-core-image-upload/__sites_/src/less/config.less

a component for image to upload and crop

/**config **/

@bgcolor: #f1f1f1;



/***flat ui color**/

@turquoise:                 #1abc9c;
@green-sea:                 #16a085;

@emerald:                   #2ecc71;
@nephritis:                 #27ae60;

@peter-river:               #3498db;
@belize-hole:               #2980b9;

@amethyst:                  #9b59b6;
@wisteria:                  #8e44ad;

@wet-asphalt:               #34495e;
@midnight-blue:             #2c3e50;

@sun-flower:                #f1c40f;
@orange:                    #f39c12;

@carrot:                    #e67e22;
@pumpkin:                   #d35400;

@alizarin:                  #e74c3c;
@pomegranate:               #c0392b;

@clouds:                    #ecf0f1;
@silver:                    #bdc3c7;

@concrete:                  #95a5a6;
@asbestos:                  #7f8c8d;

/****/

@gray:                      @concrete;
@gray-light:                @silver;
@inverse:                   white;

// Brand colors
@brand-primary:             @wet-asphalt;
@brand-secondary:           @turquoise;
@brand-success:             @emerald;
@brand-warning:             @sun-flower;
@brand-danger:              @alizarin;
@brand-info:                @peter-river;

@body-bg:                   #fff;
@text-color:                @brand-primary;

//** Global textual link color.
@link-color:                @green-sea;
@link-hover-color:          @turquoise;
//** Link hover decoration.
@link-hover-decoration:     none;


//== Typography
//
//## Font, line-height for body text, headings, and more.

@font-family-base:              '\5FAE\8F6F\96C5\9ED1','\9ED1\4F53',arial,sans-serif;
@font-family-demo:              "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-monospace:          Monaco, Menlo, Consolas, "Courier New", monospace;
@font-size-base:                 14px;

@local-font-path:               "../fonts/lato/";
@local-font-name:               "lato-regular";
@local-font-svg-id:             "latoregular";
@local-font-name-light:         "lato-light";
@local-font-svg-id-light:       "latolight";
@local-font-name-black:         "lato-black";
@local-font-svg-id-black:       "latoblack";
@local-font-name-bold:          "lato-bold";
@local-font-svg-id-bold:        "latobold";
@local-font-name-italic:        "lato-italic";
@local-font-svg-id-italic:      "latoitalic";
@local-font-name-bold-italic:   "lato-bolditalic";
@local-font-svg-id-bold-italic: "latobold-italic";

@font-size-h1:              floor((@font-size-base * 3.444)); // ~62px
@font-size-h2:              ceil((@font-size-base * 2.889)); // ~52px
@font-size-h3:              ceil((@font-size-base * 2.222)); // ~40px
@font-size-h4:              ceil((@font-size-base * 1.611)); // ~29px
@font-size-h5:              floor((@font-size-base * 1.556)); // ~28px
@font-size-h6:              ceil((@font-size-base * 1.333)); // ~24px

@line-height-base:          1.72222; // 31/18
@line-height-computed:      floor((@font-size-base * @line-height-base)); // ~31px

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


//== Iconography
//
//## Specify custom locations of the include Glyphicons icon font.

@icon-font-path:            "../fonts/glyphicons/";
@icon-font-name:            "flat-ui-icons-regular";
@icon-font-svg-id:          "flat-ui-icons-regular";

//** Icon sizes for use in components
@icon-normal:               16px;
@icon-medium:               18px;
@icon-large:                32px;


//== Components
//
//## Define common padding and border radius sizes and more.

//** Default font-size in components
@component-font-size-base:  ceil((@font-size-base * 0.833)); // ~15px

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

//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base:          6px;
@caret-width-base-vertical: (@caret-width-base + 2);

@caret-width-xs:            4px;
@caret-width-xs-vertical:   (@caret-width-xs + 2);

//== Buttons
//
//## For each of Flat UI's buttons, define text, background, font size and height.

@btn-font-size-base:         @component-font-size-base;
@btn-font-size-xs:           ceil((@component-font-size-base * 0.8));   // ~12px
@btn-font-size-sm:           floor((@component-font-size-base * 0.867)); // ~13px
@btn-font-size-lg:           ceil((@component-font-size-base * 1.133));  // ~17px
@btn-font-size-hg:           floor((@component-font-size-base * 1.467)); // ~22px

@btn-line-height-base:       1.4;   // ~21px
@btn-line-height-hg:         1.227; // ~27px
@btn-line-height-lg:         1.471; // ~25px
@btn-line-height-sm:         1.385; // ~16px
@btn-line-height-xs:         1.083; // ~13px

@btn-social-font-size-base:   floor((@component-font-size-base * 0.867)); // ~13px
@btn-social-line-height-base: 1.077;  // ~14px

@btn-font-weight:            normal;

@btn-default-color:          @inverse;
@btn-default-bg:             @gray-light;
@btn-hover-bg:               mix(@gray-light, white, 80%);
@btn-active-bg:              mix(@gray-light, black, 85%);

@btn-primary-hover-bg:       mix(@brand-secondary, white, 80%);
@btn-primary-active-bg:      mix(@brand-secondary, black, 85%);

@btn-info-hover-bg:          mix(@brand-info, white, 80%);
@btn-info-active-bg:         mix(@brand-info, black, 85%);

@btn-success-hover-bg:       mix(@brand-success, white, 80%);
@btn-success-active-bg:      mix(@brand-success, black, 85%);

@btn-danger-hover-bg:        mix(@brand-danger, white, 80%);
@btn-danger-active-bg:       mix(@brand-danger, black, 85%);

@btn-warning-hover-bg:       overlay(@brand-warning, darken(white, 37.5%));
@btn-warning-active-bg:      mix(@brand-warning, black, 85%);

@btn-inverse-hover-bg:       overlay(@brand-primary, darken(white, 37.5%));
@btn-inverse-active-bg:      mix(@brand-primary, black, 85%);

@btn-link-disabled-color:    @gray-light;


//== Forms
//
//##

@input-font-size-base:     @component-font-size-base;
@input-font-size-sm:       floor((@component-font-size-base * 0.867)); // ~13px
@input-font-size-lg:       ceil((@component-font-size-base * 1.133)); // ~17px
@input-font-size-hg:       floor((@component-font-size-base * 1.467)); // ~22px

@input-line-height-base:   1.467; // ~22px
@input-line-height-sm:     1.462; // ~19px
@input-line-height-lg:     1.235; // ~21px
@input-line-height-hg:     1.318; // ~29px

@input-icon-font-size:     ceil((@component-font-size-base * 1.067));  // ~16px
@input-icon-font-size-lg:  ceil((@component-font-size-base * 1.2));  // ~18px
@input-icon-font-size-hg:  ceil((@component-font-size-base * 1.333));  // ~20px

@input-bg:                 @inverse;
@input-bg-disabled:        mix(@gray, white, 10%);

@input-height-sm:          35px;
@input-height-base:        41px;
@input-height-lg:          45px;
@input-height-hg:          53px;

@input-border-radius:      @border-radius-large;

//** Disabled cursor for form controls and buttons.
@cursor-disabled:          not-allowed;

@legend-color:             inherit;






//== Tags Input
//
//##

@tagsinput-container-bg:                    @inverse;
@tagsinput-container-border-color:          mix(@inverse, @brand-primary, 90%);
@tagsinput-container-border-radius:         @border-radius-large;

@tagsinput-input-color:                     @brand-primary;

@tagsinput-tag-bg:                          mix(@inverse, @brand-primary, 90%);
@tagsinput-tag-color:                       mix(@brand-primary, @inverse, 65%);
@tagsinput-tag-hover-bg:                    mix(@brand-secondary, black, 85%);
@tagsinput-tag-hover-color:                 @inverse;
@tagsinput-tag-icon-color:                  @inverse;
@tagsinput-tag-border-radius:               @border-radius-base;

@tagsinput-primary-container-border-color:  @brand-secondary;
@tagsinput-primary-tag-bg:                  @brand-secondary;
@tagsinput-primary-tag-color:               @inverse;
@tagsinput-primary-tag-hover-bg:            mix(@brand-secondary, black, 85%);
@tagsinput-primary-tag-hover-color:         @inverse;


//== Selects
//
//## For each of Flat UI's selects, define text, background, font size and height.

@select-font-size-base:                     @btn-font-size-base;
@select-font-size-sm:                       @btn-font-size-sm;
@select-font-size-lg:                       @btn-font-size-lg;
@select-font-size-hg:                       @btn-font-size-hg;

@select-line-height-base:                   @btn-line-height-base;
@select-line-height-hg:                     @btn-line-height-hg;
@select-line-height-lg:                     @btn-line-height-lg;
@select-line-height-sm:                     @btn-line-height-sm;

@select-font-weight:                        @btn-font-weight;

@select-disabled-opacity:                   0.7;

@select-default-color:                      @btn-default-color;
@select-default-bg:                         @btn-default-bg;
@select-default-hover-bg:                   @btn-hover-bg;
@select-default-active-bg:                  @btn-active-bg;

@select-primary-hover-bg:                   @btn-primary-hover-bg;
@select-primary-active-bg:                  @btn-primary-active-bg;

@select-info-hover-bg:                      @btn-info-hover-bg;
@select-info-active-bg:                     @btn-info-active-bg;

@select-success-hover-bg:                   @btn-success-hover-bg;
@select-success-active-bg:                  @btn-success-active-bg;

@select-danger-hover-bg:                    @btn-danger-hover-bg;
@select-danger-active-bg:                   @btn-danger-active-bg;

@select-warning-hover-bg:                   @btn-warning-hover-bg;
@select-warning-active-bg:                  @btn-warning-active-bg;

@select-inverse-hover-bg:                   @btn-inverse-hover-bg;
@select-inverse-active-bg:                  @btn-inverse-active-bg;

@select-link-disabled-color:                @btn-link-disabled-color;
@select-arrow-color:                        @brand-primary;

// Select dropdowns
@select-dropdown-border-radius:             @border-radius-base;

@select-dropdown-item-color:                fade(@brand-primary, 85%);
@select-dropdown-item-hover-color:          inherit;
@select-dropdown-item-hover-bg:             mix(@inverse, @brand-primary, 85%);

@select-dropdown-disabled-item-color:       fade(@brand-primary, 95%);
@select-dropdown-disabled-item-opacity:     0.4;

@select-dropdown-highlighted-item-bg:       @brand-secondary;
@select-dropdown-highlighted-item-color:    @inverse;

@select-dropdown-optgroup-color:            fade(@brand-primary, 60%);

// Multiselect
@multiselect-container-bg:                  @tagsinput-container-bg;
@multiselect-container-border-color:        @tagsinput-container-border-color;
@multiselect-container-border-radius:       @tagsinput-container-border-radius;

@multiselect-tag-border-radius:             @tagsinput-tag-border-radius;
@multiselect-tag-color:                     @inverse;
@multiselect-tag-hover-color:               @tagsinput-tag-hover-color;
@multiselect-tag-icon-color:                @tagsinput-tag-icon-color;

@multiselect-dropdown-border-radius:        @border-radius-large;
@multiselect-dropdown-item-border-radius:   @border-radius-base;

@multiselect-input-color:                   @tagsinput-input-color;


//== Pagination
//
//##

@pagination-bg:              mix(@brand-primary, white, 20%);
@pagination-hover-bg:        @brand-secondary;
@pagination-color:           @inverse;
@pagination-border-radius:   @border-radius-large;


//== Pager
//
//##

@pager-padding:              9px 15px 10px;
@pager-bg:                   @brand-primary;
@pager-hover-bg:             mix(@brand-primary, black, 85%);
@pager-active-bg:            @pager-hover-bg;
@pager-border-radius:        @border-radius-large;
@pager-color:                @inverse;




//== Navbar
//
//##

// Basics of a navbar
@zindex-navbar:              1000;
@zindex-navbar-fixed:        1030;
@navbar-height-base:         53px;
@navbar-height-large:        76px;
@navbar-input-line-height:   1.4; // ~21px
@navbar-margin-bottom:       @line-height-computed;
@navbar-border-radius:       @border-radius-large;

@navbar-default-bg:          saturate(spin(tint(@brand-primary, 91%), -18), 2%);

// Navbar links
@navbar-default-link-color:           @brand-primary;
@navbar-default-link-hover-color:     @brand-secondary;
@navbar-default-link-hover-bg:        transparent;
@navbar-default-link-active-color:    @brand-secondary;
@navbar-default-link-active-bg:       transparent;
@navbar-default-link-disabled-color:  #ccc;
@navbar-default-link-disabled-bg:     transparent;

// Navbar nav carets
@navbar-default-caret-color:          @navbar-default-link-color;
@navbar-default-caret-hover-color:    @navbar-default-link-hover-color;
@navbar-default-caret-active-color:   @navbar-default-link-active-color;

// Navbar brand label
@navbar-default-brand-color:          @navbar-default-link-color;
@navbar-default-brand-hover-color:    @navbar-default-link-hover-color;
@navbar-default-brand-hover-bg:       transparent;

// Navbar toggle
@navbar-default-toggle-color:         @navbar-default-link-color;
@navbar-default-toggle-hover-color:   @navbar-default-link-hover-color;

// Navbar form
@navbar-default-form-placeholder:     spin(tint(@brand-primary, 60%), 2);
@navbar-default-form-icon:            desaturate(tint(@brand-primary, 45%), 2%);
@navbar-default-form-border:          shade(@navbar-default-bg, 3%);


// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-divider:              darken(@brand-primary, 3%);

// Reset inverted navbar basics
@navbar-inverse-color:                @inverse;
@navbar-inverse-bg:                   @brand-primary;
@navbar-inverse-border:               darken(@navbar-inverse-bg, 10%);

// Inverted navbar links
@navbar-inverse-link-color:           @inverse;
@navbar-inverse-link-hover-color:     @brand-secondary;
@navbar-inverse-link-hover-bg:        transparent;
@navbar-inverse-link-active-color:    @navbar-inverse-link-color;
@navbar-inverse-link-active-bg:       @brand-secondary;
@navbar-inverse-link-disabled-color:  #444;
@navbar-inverse-link-disabled-bg:     transparent;

// Navbar nav carets
@navbar-inverse-caret-color:          lighten(desaturate(@brand-primary, 7%), 9%);
@navbar-inverse-caret-hover-color:    @navbar-inverse-link-hover-color;
@navbar-inverse-caret-active-color:   @navbar-inverse-link-active-color;

// Inverted navbar brand label
@navbar-inverse-brand-color:          @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color:    @navbar-inverse-link-hover-color;
@navbar-inverse-brand-hover-bg:       transparent;

// Inverted navbar toggle
@navbar-inverse-toggle-color:         @navbar-inverse-link-color;
@navbar-inverse-toggle-hover-color:   @navbar-inverse-link-hover-color;

// Navbar form
@navbar-inverse-form-bg:              darken(@brand-primary, 6%);
@navbar-inverse-form-placeholder:     desaturate(lighten(@brand-primary, 13%), 7%);
@navbar-inverse-form-icon:            desaturate(lighten(@brand-primary, 13%), 6%);
@navbar-inverse-form-border:          @navbar-inverse-divider;

// Navbar dropdowns
@navbar-inverse-dropdown-bg:                @navbar-inverse-bg;
@navbar-inverse-dropdown-link-color:        mix(@navbar-inverse-bg, @navbar-inverse-color, 15%);
@navbar-inverse-dropdown-link-hover-color:  @inverse;
@navbar-inverse-dropdown-link-hover-bg:     @brand-secondary;

//== Dropdowns
//
//## Dropdown menu container and contents.


@zindex-dropdown:                1000;
@dropdown-border-radius:         @border-radius-base;

//** Background for the dropdown menu.
@dropdown-bg:                    desaturate(lighten(@brand-primary, 67%), 20%);

//** Dropdown link text color.
@dropdown-link-color:            mix(darken(@brand-primary, 5%), @inverse, 75%);
//** Hover color for dropdown links.
@dropdown-link-hover-color:      darken(@dropdown-link-color, 5%);
//** Hover background for dropdown links.
@dropdown-link-hover-bg:         fade(desaturate(lighten(@brand-primary, 52%), 21%), 50%);

//** Active dropdown menu item text color.
@dropdown-link-active-color:     @inverse;
//** Active dropdown menu item background color.
@dropdown-link-active-bg:        @brand-secondary;

//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color:   @gray-light;

//** Divider color for between dropdown items.
@dropdown-divider-bg:            fade(@dropdown-link-hover-bg, 50%);

//** Text color for headers within dropdown menus.
@dropdown-header-color:          fade(@brand-primary, 60%);


// Inverted dropdown
//

@dropdown-inverse-bg:                    @brand-primary;


//** Dropdown link text color.
@dropdown-inverse-link-color:            fade(@inverse, 85%);
//** Hover color for dropdown links.
@dropdown-inverse-link-hover-color:      fade(@inverse, 85%);
//** Hover background for dropdown links.
@dropdown-inverse-link-hover-bg:         fade(darken(@brand-primary, 5%), 50%);

//** Active dropdown menu item text color.
@dropdown-inverse-link-active-color:     fade(@inverse, 85%);
//** Active dropdown menu item background color.
@dropdown-inverse-link-active-bg:        @brand-secondary;

//** Disabled dropdown menu item background color.
@dropdown-inverse-link-disabled-color:   fade(@dropdown-inverse-link-color, 50%);

//** Divider color for between dropdown items.
@dropdown-inverse-divider-bg:            @dropdown-inverse-link-hover-bg;

//** Text color for headers within dropdown menus.
@dropdown-inverse-header-color:          fade(@inverse, 40%);


//== Progress bars
//
//##

@progress-height:            12px;


//== Slider
//
//##

@slider-height:              12px;
@slider-value-font-size:     floor((@component-font-size-base * 0.867)); // ~13px;

@slider-handle-bg:           mix(@brand-secondary, black, 85%);
@slider-handle-hover-bg:     mix(@brand-secondary, white, 80%);
@slider-handle-active-bg:    mix(@brand-secondary, black, 85%);

@slider-range-bg:            @brand-secondary;

@slider-segment-bg:          mix(desaturate(@brand-primary, 15%), white, 20%);


//== Switch
//
//##

@switch-name:                bootstrap-switch;
@switch-border-radius:       30px;
@switch-width:               80px;
@switch-height:              29px;



//== Video player
//
//##

@vplayer-border-radius:               @border-radius-large;
@vplayer-fullscreen-bg:               #000;
@vplayer-fullscreen-zindex:           10000;

@vplayer-control-bar-color:           @inverse;
@vplayer-control-bar-bg:              @midnight-blue;

@vplayer-preloader-primary-bg:        #e74c3c;
@vplayer-preloader-secondary-bg:      #ebedee;

@vplayer-text-track-bg:               rgba(0,0,0,.5);

@vplaver-play-control-color:          @brand-secondary;
@vplaver-play-control-hover-color:    mix(@brand-secondary, black, 85%);

@vplaver-second-controls-color:       desaturate(lighten(@midnight-blue, 12%), 6%);
@vplaver-second-controls-hover-color: desaturate(lighten(@midnight-blue, 20%), 6%);

@vplaver-progress-bg:                 mix(@brand-primary, @inverse, 93%);
@vplaver-play-progress-bg:            @brand-secondary;
@vplaver-load-progress-bg:            mix(@brand-primary, @inverse, 20%);

@vplayer-seek-handle-bg:              mix(@brand-secondary, black, 85%);
@vplayer-seek-handle-hover-bg:        mix(@brand-secondary, black, 75%);
@vplayer-seek-handle-active-bg:       mix(@brand-secondary, black, 65%);

@vplayer-time-divider-color:          mix(@brand-primary, @inverse, 80%);
@vplayer-duration-color:              mix(@brand-primary, @inverse, 80%);




//== Todo list
//
//##

@todo-bg:               @brand-primary;
@todo-bg-active:        mix(@brand-primary, black, 85%);
@todo-search-bg:        @brand-secondary;
@todo-search-color:     @brand-primary;
@todo-color:            mix(@brand-primary, @inverse, 66%);
@todo-name-color:       @inverse;
@todo-color-active:     @brand-secondary;
@todo-border-radius:    @border-radius-large;


//== Thumbnails
//
//##

//** Padding around the thumbnail image
@thumbnail-padding:           4px;
//** Thumbnail background color
@thumbnail-bg:                @body-bg;
//** Thumbnail border color
@thumbnail-border:            @gray-light;
//** Thumbnail border radius
@thumbnail-border-radius:     @border-radius-large;

//** Custom text color for thumbnail captions
@thumbnail-caption-color:     @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding:   9px;


//== Tiles
//
//##

@tiles-bg:                   mix(@brand-primary, @inverse, 8%);
@tiles-border-radius:        @border-radius-large;



//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

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

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

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

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

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


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:                12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:           30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:       @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max:   (@grid-float-breakpoint - 1);


//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

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

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

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

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


//== Tooltips
//
//##

//** Tooltip max width
@tooltip-max-width:           183px;
//** Tooltip text color
@tooltip-color:               @inverse;
//** Tooltip background color
@tooltip-bg:                  @brand-primary;
@tooltip-opacity:             1;
//** Tooltip zIndex
@zindex-tooltip:              1070;

//** Tooltip inverse text color
@tooltip-inverse-color:       @brand-primary;
//** Tooltip inverse background color
@tooltip-inverse-bg:          mix(@brand-primary, white, 9%);

//** Tooltip arrow width
@tooltip-arrow-width:         9px;
//** Tooltip arrow color
@tooltip-arrow-color:         @tooltip-bg;
//** Tooltip inverse arrow color
@tooltip-inverse-arrow-color: @tooltip-inverse-bg;




//== Code
//
//##

@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;

@kbd-color:                   @inverse;
@kbd-bg:                      @brand-primary;

@pre-bg:                      @inverse;
@pre-color:                   inherit;
@pre-border-color:            mix(@brand-primary, @inverse, 12%);
@pre-scrollable-max-height:   340px;
@pre-border-radius:           @border-radius-large;


//== Form states and alerts
//
//##

//** Text muted color
@text-muted:                  @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color:           @gray-light;
//** Headings small color
@headings-small-color:        mix(@brand-primary, @inverse, 12%);
//** Blockquote small color
@blockquote-small-color:      inherit;
//** Blockquote border color
@blockquote-border-color:     mix(@brand-primary, @inverse, 12%);
//** Page header border color
@page-header-border-color:    mix(@brand-primary, @inverse, 12%);
//** Width of horizontal description list titles
@dl-horizontal-offset:        @component-offset-horizontal;


//== Miscellaneous
//
//##

//** Hr border color
@hr-border:                   mix(@brand-primary, @inverse, 63%);

//** Horizontal forms & lists
@component-offset-horizontal: 180px;