@checksub_team/react-widgets/lib/less/variables.less

React-widgets

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

@font-size:              1em;
@font-family:            inherit;
@text-color:             @gray-dark;

@version:                   "4.1.0";
@font-path:                 "../fonts"; // for referencing Bootstrap CDN font files directly
@img-path:                  "../img";
@img-busy:                  url('@{img-path}/loading.gif');
@img-busy-lg:               url("@{img-path}/loader-big.gif");

@border-radius:             4px;
@border-radius-sm:          3px;

@widget-bg:                 #fff;
@widget-border:             #ccc;



@icon-color: inherit;

//
// Widget States
//
@state-bg-select:           #337ab7;
@state-border-select:       @state-bg-select;
@state-color-select:        white;

@state-bg-hover:            darken(#fff, 10%);
@state-border-hover:        @state-bg-hover;
@state-color-hover:         @text-color;

@state-bg-focus:            transparent;
@state-border-focus:        #66afe9;
@state-color-focus:         @text-color;

//
// Buttons
//
@btn-bg:                    #fff;
@btn-color:                 @text-color;
@btn-border:                #ccc;

@btn-bg-hover:              @state-bg-hover;
@btn-border-hover:          @state-border-hover;
@btn-active-box-shadow:     inset 0 3px 5px rgba(0,0,0,.125);

@select-btn-bg:                    @btn-bg;
@select-btn-color:                 @btn-color;
@select-btn-border:                @btn-border;

@select-btn-bg-hover:              @btn-bg-hover;
@select-btn-border-hover:          @btn-border-hover;
@select-btn-active-box-shadow:     @btn-active-box-shadow;

//
// Picker inputs
//
@input-color:               @gray;
@input-height:              2.429em; // 2.5em is good for 16px roots
@input-padding-horizontal:  0.857em;
@input-box-shadow:          inset 0 1px 1px rgba(0,0,0,.075);

@input-bg:                  @widget-bg;
@input-color-placeholder:   #999;

@input-border:              @widget-border;
@input-border-width:        1px;
@input-border-radius:       @border-radius;

@input-bg-disabled:         @gray-lighter;
@input-border-disabled:     @input-border;

@input-bg-hover:            @gray-lighter;
@input-border-hover:        @input-border;

@input-bg-focus:            @input-bg;
@input-border-focus:        @state-border-focus;

@input-focus-color:         rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
@input-focus-box-shadow:    0 0 8px @input-focus-color;

@input-bg-color-autofill:  rgb(250, 255, 189);
@input-color-autofill:     rgb(0, 0, 0);
//
// List
//
@list-font-size:            @font-size;

@list-bg-hover:             @state-bg-hover;
@list-border-hover:         @state-border-hover;
@list-color-hover:          @state-color-hover;

@list-bg-focus:             @state-bg-focus;
@list-border-focus:         @state-border-focus;
@list-color-focus:          @state-color-focus;

@list-bg-select:            @state-bg-select;
@list-border-select:        @state-border-select;
@list-color-select:         @state-color-select;

@list-text-color:           @text-color;
@list-padding-vertical:     0.143em;
@list-padding-horizontal:   0.750em;


//
// Popup
//
@popup-bg:                  @widget-bg;
@popup-border:              @widget-border;
@popup-border-radius:       @border-radius-sm;
@popup-box-shadow-offset:   6px;
@popup-box-shadow:          0 (@popup-box-shadow-offset - 1px) @popup-box-shadow-offset rgba(0,0,0,0.2);
@popup-box-shadow-up:       0 -2px @popup-box-shadow-offset rgba(0,0,0,0.2);

@popup-zindex:              1005;
@popup-zindex-focused:      @popup-zindex + 1;



//
// Calendar
//
@calendar-bg:                 @widget-bg;
@calendar-cell-align:         center;
@calendar-cell-padding:       .25em;
@calendar-cell-color:         @btn-color;
@calendar-cell-border-radius: @input-border-radius;

@calendar-cell-bg-hover:             @state-bg-hover;
@calendar-cell-border-hover:         @state-border-hover;
@calendar-cell-color-hover:          @state-color-hover;

@calendar-cell-bg-focus:             @state-bg-focus;
@calendar-cell-border-focus:         @state-border-focus;
@calendar-cell-color-focus:          @state-color-focus;

@calendar-cell-bg-select:            @state-bg-select;
@calendar-cell-border-select:        @state-border-select;
@calendar-cell-color-select:         @state-color-select;


//
// Multiselect
//
@multiselect-gutter-pt:           0.115;
@multiselect-tag-padding-left:    0.35em;
@multiselect-tag-padding-right:   0.35em;
@multiselect-tag-color:           inherit;
@multiselect-tag-border:          @btn-border;
@multiselect-tag-bg:              @gray-lighter;
@multiselect-tag-height-pt:       1 - (@multiselect-gutter-pt * 2);
@multiselect-tag-gutter-fallback: @input-height * @multiselect-gutter-pt;
@multiselect-tag-gutter:          ~"calc(@{multiselect-tag-gutter-fallback} - @{input-border-width})";
@multiselect-tag-height:          @input-height * @multiselect-tag-height-pt;
@multiselect-tag-border-radius:   @border-radius-sm;

@multiselect-tag-bg-hover:             @state-bg-hover;
@multiselect-tag-border-hover:         @state-border-hover;
@multiselect-tag-color-hover:          @state-color-hover;