rsuite
Version:
A suite of react components
284 lines (242 loc) • 8.24 kB
text/less
@import 'constants';
//== Base
//** Background color for `<body>`.
@body-bg: @B000;
//** Global text color on `<body>`.
@text-color: @B800;
//** border base color.
@border-base-color: @B300;
//== Alert
// Alternate colors
@alert-success-bg: @state-success-bg;
@alert-success-icon-color: @state-success-text;
@alert-info-bg: @state-info-bg;
@alert-info-icon-color: @state-info-text;
@alert-warning-bg: @state-warning-bg;
@alert-warning-icon-color: @state-warning-text;
@alert-error-bg: @state-error-bg;
@alert-error-icon-color: @state-error-text;
//== Avatar
@avatar-background: @B300;
//== Breadcrumb
@breadcrumb-active-color: @B600;
//== Buttons
@btn-ripple-background-color: rgba(0, 0, 0, 0.2);
@btn-disabled-opacity: 0.3;
//Button Loading
@btn-spin-light-invert-color: @B500;
// Default Button color set;
@btn-default-color: @text-color;
@btn-default-bg: @B050;
@btn-default-hover-color: @text-color;
@btn-default-hover-bg: @B200;
@btn-default-focus-bg: @B200;
@btn-default-active-bg: @B300;
@btn-default-disabled-color: @B400;
@btn-default-disabled-bg: @B050;
// Button has icon color set
@btn-icon-with-text-bg: @B100;
@btn-icon-with-text-hover-bg: @B300;
@btn-icon-with-text-focus-bg: @B300;
@btn-icon-with-text-active-bg: @B400;
// Subtle Button color set;
@btn-subtle-color: @B600;
@btn-subtle-hover-bg: @B050;
@btn-subtle-default-hover-color: @B800;
@btn-subtle-active-default-bg: @B200;
@btn-subtle-active-default-color: @B900;
//== Calendar
@calendar-panel-table-border-color: @B100;
@calendar-table-cell-content-hover-bg: @H050;
@calendar-panel-today-active-background-color: @H500;
// == Cascader
@cascader-search-panel-hover-color: @B800;
@cascader-search-panel-hover-bg: @H050;
@cascader-search-panel-highlight-word-color: @H500;
//== Checkbox
@checkbox-default-border-color: @border-base-color;
//** Checkbox checked mark color
@checkbox-checked-mark-color: @B000;
//** Checkbox uncheck background
@checkbox-disabled-color: @B050;
//== CheckTreePicker
@picker-tree-node-hover-bg: @H050;
@picker-tree-node-active-color: @picker-select-menu-item-selected-color;
//== DatePicker
@calendar-time-dropdown-column-title-bg: @B050;
@calendar-time-dropdown-column-title-font-color: @B600;
@calendar-time-dropdown-column-cell-default-color: @B800;
@calendar-time-dropdown-column-cell-hover-color: @B800;
@calendar-time-dropdown-column-cell-hover-bg: @H050;
@calendar-time-dropdown-column-cell-active-bg: @H500;
@calendar-table-cell-week-number-bg: @B050;
@calendar-table-cell-week-number-color: @B600;
@calendar-table-cell-content-selected-color: @H500;
@calendar-right-btn-ok-bg: @btn-primary-bg;
@calendar-table-cell-header-color: @B600;
@calendar-table-cell-in-range-background: fade(@H100, 50);
//== DateRangePicker
@date-range-picker-inner-border: 1px solid @divider-border-color;
//== Divider
@divider-border-color: @B200;
//== Dropdown
@dropdown-bg: @B000;
@dropdown-link-color: @text-color;
@dropdown-link-hover-color: @text-color;
@dropdown-link-hover-bg: @H050;
//** Active dropdown menu item text color.
@dropdown-link-active-color: @H700;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: fade(@H050, 50);
@dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
@dropdown-divider-bg: @divider-border-color;
//== ErrorMessage
@error-message-background-color: @B000;
@error-message-border-color: @B200;
@error-message-font-color: @error-color;
//== HelpBlock
@help-block-color: @B600;
//== Icon
@icon-inverse: @B000;
//== Input
//** Placeholder text color
@input-color-placeholder: @B600;
//** Text color for `<input>`
@input-color: @B800;
//** `<input>` border color
@input-border: @B200;
//** `<input>` background color
@input-bg: @B000;
//** `<input disabled>` background color
@input-bg-disabled: @B050;
//** Background color for textual input addons
@input-group-addon-bg: @B050;
//== List
@list-border-color: @B200;
@list-hover-color: @H050;
@list-item-drag-bg-color: @B000;
@list-item-placeholder-bg-color: @H050;
@list-item-placeholder-border-color: @H500;
//== Loader
@loader-content-color: @B800;
@loader-content-inverse-color: @B050;
@loader-spin-ring-color: fade(@B050, 80);
@loader-spin-ring-active-color: @B500;
@loader-spin-ring-inverse-color: fade(@B050, 30);
@loader-spin-ring-inverse-active-color: @B000;
@loader-backdrop-color: fade(@B000, 75);
@loader-backdrop-inverse-color: fade(@B900, 83);
//== Message
// Alternate colors
@message-success-bg: @state-success-bg;
@message-success-icon-color: @state-success-text;
@message-info-bg: @state-info-bg;
@message-info-icon-color: @state-info-text;
@message-warning-bg: @state-warning-bg;
@message-warning-icon-color: @state-warning-text;
@message-error-bg: @state-error-bg;
@message-error-icon-color: @state-error-text;
//== Modal
@modal-backdrop-opacity: 0.3; //30%
//== Nav
@nav-item-font-default-color: @B600;
@nav-item-default-hover-bg: @B200;
@nav-item-click-bg: @B200;
@nav-tab-waterline-color: @B300;
@nav-subtle-hover-bg: @nav-item-default-hover-bg;
@nav-subtle-waterline-default-color: @B050;
//== Navbar
@nav-bar-default-bg: @B050;
@nav-bar-default-font-color: @B800;
@nav-bar-default-active-color: @H700;
@nav-bar-subtle-bg: @B000;
@nav-bar-subtle-font-color: @B700;
@nav-bar-subtle-font-active-color: @H700;
@nav-bar-subtle-hover-bg: @B050;
@nav-bar-subtle-hover-font-color: @B800;
@nav-bar-inverse-bg: @H500;
@nav-bar-inverse-active-bg: @H700;
//== Notification
@notify-default-bg: @B000;
@notify-close-btn-color: @B600;
@notify-title-font-color: @B900;
@notify-description-color: @B800;
//== Panel
@panel-border: 1px solid @B200;
@panel-heading-color: @B900;
//== Picker
@picker-select-item-color: @B800;
@picker-menu-item-hover-bg: @H050;
@picker-select-menu-item-selected-color: @H700;
@picker-select-menu-item-selected-bg: @H050;
@picker-select-menu-item-selected-font-weight: bold;
@picker-placeholder-color: @B600;
@picker-default-toggle-font-color: @B800;
@picker-default-toggle-caret-color: @B600;
@picker-group-title-color: @B900;
@picker-none-font-color: @B600;
@picker-value-count-background-color: @H500;
//== Placeholder
@placeholder-holder-bg: @B100;
@placeholder-image-color: @B000;
//== Popover
@popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
//== Progress
@progress-bar-bg: @B200;
@progress-info-text-color: @B700;
//== Radio
@radio-default-border-color: @border-base-color;
//** Checkbox uncheck background
@radio-disabled-color: @B050;
@radio-inner-checked-color: @B000;
@radio-label-font-color: @B600;
@radio-label-font-hover-color: @B800;
//== SideNav
@sidenav-subtle-bg: @B000;
@sidenav-subtle-hover-bg: @B050;
@sidenav-default-click-bg: @nav-item-click-bg;
//== Slider
@slider-bar-default-bg: @B100;
@slider-bar-hover-bg: @B100;
//== Step
@steps-default-color: @B600;
@steps-tail-default-color: @B400;
@steps-bg: @B000;
@steps-icon-process-color: @B000;
@steps-content-color: @steps-default-color;
@steps-content-process-color: @B800;
//== Table
@table-body-background: @B000;
@table-head-font-color: @B600;
@table-body-hover-background: @H050;
@table-border-color: @B100;
@table-scrollbar-handle-background: @B400;
@table-scrollbar-background: @B200;
@table-scrollbar-pressed-handle-background: @B500;
@table-scrollbar-pressed-background: @B300;
@table-scrollbar-vertical-handle-background-color: fade(@table-scrollbar-background, 40);
@table-table-cell-fixed-shadow: 0 5px rgba(9, 9, 9, 0.08);
@table-expand-icon-color: @B600;
@table-pagination-font-color: @B600;
//== Tooltip
@tooltip-bg: @B900;
//== Toggle
@toggle-disabled-default-background-color: @B050;
@toggle-disabled-checked-background-color: @H100;
// Toggle default background color
@toggle-default-bg: @B300;
@toggle-default-hover-bg: @B400;
// Toggle checked background color
@toggle-checked-bg: @H500;
//== Tag
@tag-default-background: @B050;
@tag-default-color: @B800;
//== Uploader
@uploader-default-font-color: @B800;
@uploader-light-font-color: @B600;
@uploader-item-hover-background-color: @B050;
@uploader-picture-border-color: @B200;
@uploader-picture-background-color: @B300;
@uploader-file-item-retry-icon-color: @B800;
@uploader-picture-item-background: rgba(255, 255, 255, 0.8);
@uploader-picture-item-btn-remove-background: @uploader-picture-item-background;