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