rsuite
Version:
A suite of react components
881 lines (674 loc) • 31.8 kB
text/less
// Variables
// All variables declared in this file is supposed to be customizable by the user
// This file is ignored by prettier for better alignment
// See .prettierignore
@import 'colors/light.less';
@import 'colors/dark.less';
@import 'colors/high-contrast.less';
// Controls
// Polyfill for IE 11
@ie-polyfill: true; // @deprecated use @enable-ie-polyfill instead
@enable-ie-polyfill: @ie-polyfill;
// CSS Resets
@reset-import: true; // @deprecated use @enable-css-reset instead
@enable-css-reset: @reset-import;
// Global button ripple switch
@button-ripple: true; // @deprecated use @enable-ripple-effect instead
@enable-ripple-effect: @button-ripple;
// Whether include styles for dark mode
@enable-dark-mode: true;
// Whether include styles for high-contrast mode
@enable-high-contrast: true;
// Media queries breakpoints
// Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Small screen / phone
// @screen-sm
@screen-sm: 576px;
// Medium screen / desktop
// @screen-md
@screen-md: 768px;
// Large screen / wide desktop
// @screen-lg
@screen-lg: 992px;
// Extra large devices / extra wide desktop
// @screen-xl
@screen-xl: 1200px;
// Extra extra large devices / ultra wide desktop
// @screen-xxl
@screen-xxl: 1400px;
// Grid system
// Define your custom responsive grid.
// Number of columns in the grid.
@grid-columns: 24;
// Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 10px;
// Container sizes
// Define the maximum width of `.container` for different screen sizes.
// Small screen / phone / tablet
@container-phone: (540px + @grid-gutter-width);
@container-sm: @container-phone;
// Medium screen / desktop
@container-desktop: (720px + @grid-gutter-width);
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (960px + @grid-gutter-width);
@container-lg: @container-large-desktop;
// Extra large devices / ultra wide desktop
@container-extra-large-desktop: (1140px + @grid-gutter-width);
@container-xl: @container-large-desktop;
// Extra large devices / ultra wide desktop
@container-extra-extra-large-desktop: (1320px + @grid-gutter-width);
@container-xxl: @container-large-desktop;
// Color system
// Primary palette
@base-color: #3498ff; // @deprecated use @primary-color instead
@primary-color: #3498ff;
// Secondary palette
@red: #f44336;
@orange: #fa8900;
@yellow: #ffb300;
@green: #4caf50;
@cyan: #00bcd4;
@blue: #2196f3;
@violet: #673ab7;
// Dark mode
@primary-color-dark: #34c3ff;
@red-dark: #f04f43;
@orange-dark: #ff9800;
@yellow-dark: #ffc757;
@green-dark: #58b15b;
@cyan-dark: #00bcd4;
@blue-dark: #1499ef;
@violet-dark: #673ab7;
// High-contrast mode
@primary-color-high-contrast: #ffff00;
@red-high-contrast: #bd1732;
@orange-high-contrast: @orange-dark;
@yellow-high-contrast: #ffc757;
@green-high-contrast: #0d822c;
@cyan-high-contrast: @cyan-dark;
@blue-high-contrast: #1499ef;
@violet-high-contrast: @violet-dark;
// List for looping
@spectrum: red, orange, yellow, green, cyan, blue, violet;
// Typography
// Font, line-height, and color for body text, headings, and more.
@font-family-base: -apple-system, BlinkMacSystemFont, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
@font-size-extra-large: 18px;
@font-size-large: 16px;
@font-size-base: 14px;
@font-size-small: 12px;
@font-size-extra-small: 12px;
@font-size-h1: 46px;
@font-size-h2: 36px;
@font-size-h3: 28px;
@font-size-h4: 22px;
@font-size-h5: 18px;
@font-size-h6: 16px;
@line-height-h1: 62px;
@line-height-h2: 50px;
@line-height-h3: 42px;
@line-height-h4: 34px;
@line-height-h5: 24px;
@line-height-h6: 22px;
// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: 20px;
@line-height-large-computed: 22px;
// Unit-less `line-height` for use in components like buttons.
@line-height-extra-large: unit((@line-height-large-computed / @font-size-extra-large)); // ~1.222
@line-height-large: unit((@line-height-large-computed / @font-size-large)); // ~1.375
@line-height-base: unit((@line-height-computed / @font-size-base)); // ~1.4285714285714286
@line-height-small: unit((@line-height-computed / @font-size-small)); // ~1.6666666666666667
@line-height-extra-small: unit((@line-height-computed / @font-size-extra-small)); // ~1.6666666666666667
// By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: bolder;
@headings-color: inherit;
// Box shadows
@default-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06); // @deprecated use @box-shadow instead
@box-shadow: @default-box-shadow;
// Spacing
// Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 8px; // @deprecated use @padding-y instead
@padding-base-horizontal: 12px; // @deprecated use @padding-x instead
@padding-large-vertical: 10px; // @deprecated use @padding-y-lg instead
@padding-large-horizontal: 16px; // @deprecated use @padding-x-lg instead
@padding-small-vertical: 5px; // @deprecated use @padding-y-sm instead
@padding-small-horizontal: 10px; // @deprecated use @padding-x-sm instead
@padding-extra-small-vertical: 2px; // @deprecated use @padding-y-xs instead
@padding-extra-small-horizontal: 8px; // @deprecated use @padding-x-xs instead
@padding-y: @padding-base-vertical;
@padding-x: @padding-base-horizontal;
@padding-y-lg: @padding-large-vertical;
@padding-x-lg: @padding-large-horizontal;
@padding-y-sm: @padding-small-vertical;
@padding-x-sm: @padding-small-horizontal;
@padding-y-xs: @padding-extra-small-vertical;
@padding-x-xs: @padding-extra-small-horizontal;
// Border radius
@border-radius-base: 6px; // @deprecate use @border-radius instead
@border-radius: @border-radius-base;
// Scaffolding
// Settings for some of the most global styles.
@link-hover-decoration: underline;
@link-active-decoration: underline;
// Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
// Components
// Table
@table-header-content-padding-vertical: 10px; // @deprecated use @table-header-padding-y instead
@table-header-padding-y: @table-header-content-padding-vertical;
@table-header-padding-x: 10px;
@table-header-font-size: @font-size-small;
@table-header-line-small: @line-height-small; // @deprecated use @table-header-line-height instead
@table-header-line-height: @table-header-line-small;
@table-header-sort-wrapper-margin-left: 5px;
@table-column-resize-spanner-width: 3px;
@table-column-resize-spanner-triangle-side-length: 3px;
@table-body-content-padding-vertical: 13px; // @deprecated use @table-cell-padding-y instead
@table-content-padding-horizontal: 10px; // @deprecated use @table-cell-padding-x instead
@table-cell-padding-y: @table-body-content-padding-vertical;
@table-cell-padding-x: @table-content-padding-horizontal;
@table-cell-hover-color: var(--rs-primary-500);
@table-scrollbar-timing-duration: 0.1s;
@table-scrollbar-width: 10px;
@table-scrollbar-handle-width: 8px;
@table-scrollbar-handle-gap: (@table-scrollbar-width - @table-scrollbar-handle-width)/2;
@table-loader-backdrop-color: var(--rs-loader-backdrop);
@table-loader-transition: 0.2s ease-in;
// Buttons
@btn-font-weight: normal;
@btn-border-radius-base: @border-radius; // @deprecated use @btn-border-radius instead
@btn-border-radius: @btn-border-radius-base;
@btn-transition: color 0.15s ease-out, background-color 0.15s ease-out;
@btn-disabled-opacity: 0.3;
// Ghost Button
@btn-ghost-border-width: 1px;
// Button with icons (not IconButton)
@btn-icon-gap: 5px;
// Button Loading
@btn-loading-spin-default-diameter: 18px;
@btn-loading-spin-xs-diameter: 16px;
@btn-loading-spin-ring-wide: 3px;
// Ripple
@btn-ripple-background-color: rgba(0, 0, 0, 0.2); // @deprecated use @ripple-bg instead
@ripple-bg: @btn-ripple-background-color;
// Badge
@badge-dot-side-length: 8px; // @deprecated use @badge-dot-size instead
@badge-dot-size: @badge-dot-side-length;
// Avatar
@avatar-size-xxl: 120px;
@avatar-font-size-xxl: 48px;
@avatar-size-xl: 90px;
@avatar-font-size-xl: 36px;
@avatar-size-lg: 60px;
@avatar-font-size-lg: 26px;
@avatar-size: 40px;
@avatar-font-size: 18px;
@avatar-size-sm: 30px;
@avatar-font-size-sm: 14px;
@avatar-size-xs: 20px;
@avatar-font-size-xs: 12px;
// Forms
// Form Layout
@form-group-margin-bottom: 24px;
@form-control-width: 300px;
@form-control-label-width: 170px;
@form-control-label-margin-right: 12px;
@form-control-label-margin-bottom: 4px;
@form-help-text-inline-gap: 10px;
// Error Message
@form-error-message-padding-vertical: 4px;
@form-error-message-padding-horizontal: 8px;
@form-error-message-height: (@form-error-message-padding-vertical*2 + @line-height-computed);
@form-error-message-font-size: @font-size-small;
@form-error-message-triangle-width: 6px;
@form-error-message-triangle-gap: 10px;
@form-error-message-triangle-vertical: 4px;
@form-error-message-translate-distance: 2px;
// Input
@padding-base-input-vertical: @padding-y; // @deprecated use @input-padding-y instead
@padding-base-input-horizontal: @padding-x; // @deprecated use @input-padding-x instead
@input-padding-y: @padding-base-input-vertical;
@input-padding-x: @padding-base-input-horizontal;
@input-border-width: 1px;
@input-transition: border-color ease-in-out 0.15s;
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius: @border-radius;
@input-height-base: (@line-height-computed + (@padding-y * 2));
@input-height-large: (@line-height-large-computed + (@padding-y-lg * 2));
@input-height-small: (@line-height-computed + (@padding-y-sm * 2));
@input-height-extra-small: (@line-height-computed + (@padding-y-xs * 2));
// InputGroup padding for add-on
@input-group-padding-for-add-on-large: 46px;
@input-group-padding-for-add-on-base: 36px;
@input-group-padding-for-add-on-small: 30px;
@input-group-padding-for-add-on-extra-small: 26px;
// Number input
@number-input-touchspin-font-size: 12px;
// Dropdowns
// Dropdown menu container and contents.
@dropdown-caret-width: 10px;
@dropdown-caret-padding: 10px;
// Divider color for between dropdown items.
@dropdown-divider-bg: @divider-border-color;
@dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
@dropdown-menu-radius: @border-radius;
@dropdown-menu-padding-y: @dropdown-menu-radius;
@dropdown-item-padding-vertical: 8px; // @deprecated use @dropdown-item-padding-y instead
@dropdown-item-padding-horizontal: 12px; // @deprecated use @dropdown-item-padding-x instead
@dropdown-item-padding-y: @dropdown-item-padding-vertical;
@dropdown-item-padding-x: @dropdown-item-padding-horizontal;
// Dropdown item content submenu icon
@dropdown-item-submenu-icon-angle-spacing: 10px;
@dropdown-item-submenu-icon-angle-width: 5px;
@dropdown-item-content-submenu-icon-angle-line-height: @line-height-base;
@dropdown-item-content-submenu-icon-angle-size: @font-size-base;
@dropdown-toggle-padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
@dropdown-caret-icon-padding-horizontal: 9px;
// DropDownMenu offset value
@dropdown-max-height: 280px;
@dropdown-menu-lg-top: 40px;
@dropdown-menu-sm-top: 27px;
@dropdown-menu-xs-top: 21px;
// Toggle
@toggle-active-scale: 1.2;
@toggle-transition: 0.15s ease-out;
@toggle-md-height: 24px;
@toggle-md-handle-gap: 3px;
@toggle-md-min-width: 44px;
@toggle-md-inner-font-size: @font-size-small;
@toggle-md-handle-diameter: (@toggle-md-height - @toggle-md-handle-gap*2);
@toggle-md-inner-line-height-computed: @toggle-md-height;
@toggle-md-inner-line-height: unit((@toggle-md-inner-line-height-computed / @toggle-md-inner-font-size));
@toggle-md-inner-margin: @padding-y;
@toggle-sm-height: 14px;
@toggle-sm-min-width: 26px;
@toggle-sm-handle-gap: 2px;
@toggle-sm-inner-margin: 6px;
@toggle-sm-inner-font-size: (@font-size-small - 2);
@toggle-lg-height: 30px;
@toggle-lg-min-width: 55px;
@toggle-lg-handle-gap: 4px;
@toggle-lg-inner-margin: @padding-x-sm;
@toggle-lg-inner-font-size: @font-size-base;
// Navs
@nav-item-transition: color 0.15s ease-out, background-color 0.15s ease-out;
// Tab
@nav-tab-bar-width: 1px;
// Subtle
@nav-subtle-bar-width: 2px;
// Divider
@nav-divider-margin-vertical: 6px;
// Navbar
@nav-bar-padding-vertical: 18px; // @deprecated use @navbar-item-padding-y instead
@nav-bar-padding-horizontal: 16px; // @deprecated use @navbar-item-padding-x instead
@nav-bar-height: (@nav-bar-padding-vertical * 2 + @line-height-computed); // @deprecated use @navbar-height instead
@navbar-item-padding-y: 18px;
@navbar-item-padding-x: 16px;
@navbar-height: (@navbar-item-padding-y * 2 + @line-height-computed);
// Sidenav
@sidenav-item-caret-size: 16px;
@sidenav-padding-vertical: 15px;
@sidenav-children-padding-vertical: 11px;
@sidenav-padding-horizontal: 20px;
@sidenav-collapse-in-width: 100%;
@sidenav-default-width: 56px;
@sidenav-compact-width: @sidenav-default-width; // TODO Replace sidenav-default-width
@sidenav-item-height: (@sidenav-padding-vertical * 2 + @line-height-computed);
@sidenav-menu-max-height: (@sidenav-item-height * 40);
@sidenav-menu-animation-time: 1.5s;
@sidenav-footer-height: @sidenav-item-height; // Footer is same height as a sidenav item
@sidenav-level1-item-font-size: @font-size-large;
@sidenav-level1-item-line-height: unit((@line-height-computed / @font-size-large));
@sidenav-icon-spacing: 20px;
@sidenav-icon-width: @sidenav-level1-item-font-size;
@sidenav-dropdown-toggle-caret-width: 20px;
@sidenav-collapse-transition-config: 0.15s ease-in;
@sidenav-level-retract: 9px;
@sidenav-level2-retract: (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
@sidenav-level3-retract: (@sidenav-level2-retract + @sidenav-level-retract); //60 px
@sidenav-level4-retract: (@sidenav-level2-retract + @sidenav-level-retract * 2);
@sidenav-level5-retract: (@sidenav-level2-retract + @sidenav-level-retract * 3);
@sidenav-level6-retract: (@sidenav-level2-retract + @sidenav-level-retract * 4);
// Steps
@steps-icon-diameter: 30px;
@steps-icon-size-default-font-size: 12px;
@steps-icon-spacing: 10px;
@steps-item-spacing: 10px;
// This space place the steps-icon
@steps-icon-space-width: (@steps-icon-diameter + @steps-icon-spacing);
@steps-icon-size: @font-size-large;
@steps-icon-line-height: unit(((@steps-icon-diameter - 2px) / @font-size-large));
@steps-title-font-size: @font-size-large;
@steps-title-line-height: unit((@steps-icon-diameter / @font-size-large));
@steps-description-margin-top: 12px;
// Small
@small-steps-icon-diameter: 24px;
@small-steps-icon-space-width: (@small-steps-icon-diameter + @steps-icon-spacing);
@small-steps-icon-line-height: unit(((@small-steps-icon-diameter - 2px) / @font-size-base));
@small-steps-title-line-height: unit((@small-steps-icon-diameter / @font-size-base));
@small-steps-icon-size: @font-size-base;
@small-steps-description-font-size: @font-size-small;
@small-steps-description-line-height: @line-height-small;
@small-steps-description-margin-top: 12px;
// Checkbox
@checkbox-width-height: 16px;
@checkbox-sense-width: 10px;
@checkbox-border-radius: 3px;
@checkbox-bg: transparent;
// Radio
@radio-width-height: 16px;
@radio-inner-width-height: 6px;
@radio-sense-width: 10px;
@radio-border-radius: 50%;
@radio-bg: transparent;
@radio-label-padding-horizontal: 10px;
// Tooltips
@tooltip-max-width: 250px;
@tooltip-opacity: 1;
@tooltip-border-radius: 4px;
@tooltip-arrow-width: 6px;
@tooltip-translate-distance: 2px;
// Distance between Arrow and frame.
@tooltip-arrow-gap-lg: 10px;
@tooltip-arrow-gap-sm: 4px;
// Popovers
@popover-max-width: 250px;
@popover-border-radius: 4px;
@popover-translate-distance: 2px;
@popover-arrow-width: 6px;
@popover-arrow-outer-width: @popover-arrow-width;
// Distance between Arrow and frame.
@popover-arrow-gap: 4px;
// Modals
// Padding applied to the modal content
@modal-content-padding: 20px;
// Margin of modal header and body
@modal-body-margin: 20px;
@modal-border-radius: @border-radius;
@modal-title-font-size: @font-size-extra-large;
@modal-title-color: var(--rs-text-primary);
@modal-title-line-height: @line-height-extra-large;
@modal-close-btn-size: @font-size-small;
@modal-close-btn-line-height: @line-height-small;
@modal-close-btn-color: var(--rs-text-secondary);
@modal-close-btn-hover-color: var(--rs-text-primary);
// Modal sizes
@modal-lg: 968px;
@modal-md: 800px;
@modal-sm: 600px;
@modal-xs: 400px;
@modal-full-size-margin: 60px;
// Drawer
// Padding applied to the drawer content
@drawer-content-spacing: 20px;
// Margin of modal header and body
@drawer-body-margin: 30px;
@drawer-close-btn-size: @font-size-small;
@drawer-close-btn-line-height: @line-height-small;
@drawer-close-btn-color: var(--rs-text-primary);
// Drawer sizes
@drawer-horizontal-lg: @modal-lg;
@drawer-horizontal-md: @modal-md;
@drawer-horizontal-sm: @modal-sm;
@drawer-horizontal-xs: @modal-xs;
@drawer-vertical-lg: 568px;
@drawer-vertical-md: 480px;
@drawer-vertical-sm: 400px;
@drawer-vertical-xs: 290px;
// Modal full size margin
@drawer-full-size-margin: 60px;
// Message
// Define alert colors, border radius, and padding.
@message-padding: 20px;
@message-border-radius: @border-radius;
@message-title-size: @font-size-base;
@message-link-font-weight: bold;
@message-icon-size: 16px;
@message-icon-large-size: 24px;
@message-icon-margin-right: 10px;
@message-close-btn-size: 12px;
@message-close-btn-padding: 8px 8px 0;
// toaster
@toast-ns: ~'rs-toast';
@toast-box-shadow: @box-shadow;
@toast-spacing: 24px;
// Notification
@notify-padding: 20px;
@notify-border-radius: @border-radius;
@notify-box-shadow: @box-shadow;
@notify-max-width: 400px;
@notify-close-btn-font-size: 12px;
@notify-close-btn-margin: 8px;
@notify-title-font-size: @font-size-large;
@notify-title-icon-size: 24px;
@notify-title-icon-margin: 10px;
@notify-title-description-gap: 8px;
// Loaders
@loader-default-diameter: @loader-sm-diameter;
@loader-default-content-font-size: @font-size-small;
@loader-lg-diameter: 64px;
@loader-lg-content-font-size: @font-size-large;
@loader-md-diameter: 36px;
@loader-md-content-font-size: @font-size-base;
@loader-sm-diameter: 18px;
@loader-sm-content-font-size: @font-size-base;
@loader-xs-diameter: 16px;
@loader-xs-content-font-size: @font-size-small;
// spinner
@loader-spin-ring-width: 3px;
// spin animation time
@loader-duration-fast: 0.4s;
@loader-duration-normal: 0.6s;
@loader-duration-slow: 0.8s;
@loader-duration-paused: paused;
// spacing
@loader-content-spin-spacing-horizontal: 12px;
@loader-content-spin-spacing-vertical: 10px;
@loader-content-spin-spacing-horizontal-xs: 10px;
// Progress
@progress-line-padding-vertical: 8px;
@progress-line-padding-horizontal: 12px;
@progress-font-size: @font-size-large;
@progress-bar-height: 10px;
@progress-element-gap: 12px;
@progress-bg-transition: 0.2s ease-in-out;
// Uploader
@uploader-file-list-margin-top: 10px;
@uploader-file-item-icon-font-size: 22px;
@uploader-file-item-icon-margin: 12px;
@uploader-file-item-icon-margin-plus: 22px;
@uploader-base-padding: 8px;
@uploader-picture-side-length: 66px;
@uploader-picture-item-gap: 10px;
@uploader-picture-remove-button-radius: 24px;
@uploader-picture-text-preview-side-length: 50px;
// Panel
@panel-padding: 20px;
@panel-header-font-size: 16px;
@panel-split-line-color: @dropdown-divider-bg;
@panel-accodion-transition: 0.15s linear;
@panel-box-shadow: @box-shadow;
// Timeline
@time-line-item-content-margin-left: 12px;
@time-line-dot-side-length: 10px;
@time-line-item-padding-left: (@time-line-item-content-margin-left + @time-line-dot-side-length);
@time-line-tail-width: 2px;
@time-line-item-content-padding-bottom: 18px;
@time-line-dot-center-gap: ((@line-height-computed - @time-line-dot-side-length) / 2);
@time-line-content-side-offset: (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
@time-line-alternate-time-offset: (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
@time-line-tail-min-height: (@line-height-computed + @time-line-item-content-padding-bottom); // 20 + 18 = 38
// Tag
@tag-gap: 10px;
// List
@list-border-width: 1px;
// Divider
@divider-horizontal-margin: 24px;
@divider-with-text-horizontal-margin: 30px;
@divider-text-space: 12px;
@divider-vertical-margin: 12px;
@divider-border-color: var(--rs-border-primary); // TODO: Deprecate, use --rs-divider-border
// Pickers
// prefixs
@picker-prefix: ~'rs-picker';
@select-picker-prefix: ~'picker-select';
@check-picker-prefix: ~'picker-check';
@calendar-picker-prefix: ~'calendar';
@cascader-picker-prefix: ~'picker-cascader';
@cascader-multi-picker-prefix: ~'picker-multi-cascader';
@tree-picker-prefix: ~'tree';
@check-tree-picker-prefix: ~'check-tree';
@date-range-picker-prefix: ~'picker-daterange';
@date-picker-prefix: ~'picker-date';
@input-picker-prefix: ~'picker-input';
@multi-input-picker-prefix: ~'picker-tag';
// Calendar Picker Name Space
@clpns: ~'rs-@{calendar-picker-prefix}';
// Check picker name space
@ckpns: ~'rs-@{check-picker-prefix}';
@picker-none-padding: 6px 12px 12px;
@picker-transition: @input-transition;
@picker-shadow: var(--rs-dropdown-shadow);
@picker-value-count-border-radius: 10px;
@picker-value-count-padding: 8px;
@picker-value-count-margin: 4px;
// Picker content width
@picker-content-min-width: 200px;
@picker-default-toggle-border-width: 1px;
@picker-toggle-clean-width: 12px;
@picker-toggle-clean-right: 30px;
@picker-menu-padding: 12px;
@picker-item-content-padding-vertical: 8px;
@picker-item-content-padding-horizontal: @picker-menu-padding;
// group title
@picker-group-children-padding-left: 26px;
@picker-group-select-menu-gap: 6px;
@picker-group-select-menu-lin-color: @dropdown-divider-bg;
// Picker
@picker-select-menu-item-selected-font-weight: bold;
// Check Picker
@picker-check-checkbox-gap: 10px;
@picker-children-check-item-padding-left: 14px;
@picker-check-item-content-padding-left: @picker-item-content-padding-horizontal+@checkbox-width-height+ @picker-check-checkbox-gap;
// Tree Picker
@picker-tree-padding: 12px;
@picker-tree-node-padding-vertical: @padding-y;
@picker-tree-node-padding-horizontal: @padding-x;
@picker-tree-node-font-size: 14px;
@picker-tree-node-line-height: 22px;
@picker-tree-node-height: (@line-height-computed + @picker-tree-node-padding-vertical * 2);
@picker-tree-arrow-down-width: 8px;
@picker-tree-arrow-down-gap: 8px;
// Calendar
@calendar-header-width: 280px;
@calendar-picker-padding: 10px;
@calendar-picker-view-padding-top: 4px;
@calendar-header-title-margin: 4px;
@calendar-meridiem-border-width: 1px;
@calendar-table-cell-padding: 1px;
@calendar-table-cell-content-font-size: @font-size-base;
@calendar-table-cell-content-line-height: @line-height-base;
@calendar-table-cell-content-padding: 5px;
@calendar-table-cell-content-today-border-width: 1px;
@calendar-month-dropdown-row-border-color: @divider-border-color;
@calendar-dropdown-top: 44px; // @calendar-picker-padding + content-height + gap
@calendar-month-dropdown-border: @divider-border-color;
@calendar-in-menu-content-side-length: 30px;
@calendar-panel-cell-height: 100px;
@calendar-panel-compact-cell-height: 38px;
@calendar-panel-border-radius: 6px;
@calendar-panel-today-active-side-length: @line-height-computed;
@calendar-toolbar-border-color: @divider-border-color;
// DatePicker
@datepicker-calendar-padding-y: 12px;
@datepicker-calendar-padding-x: 12px;
@datepicker-calendar-cell-gap-y: 2px;
@datepicker-calendar-cell-gap-x: 2px;
// DateRange Picker
@date-range-picker-header-padding-horizontal: 12px;
@date-range-picker-header-padding-vertical: 8px;
@date-range-picker-header-font-size: @font-size-base;
@date-range-picker-header-line-height: @line-height-base;
// Input Picker
@input-picker-toggle-height: (@line-height-computed + @padding-y * 2); // 20px + 8px*2 = 36px the same with md button
@input-picker-toggle-content-height: (@input-picker-toggle-height - (@picker-default-toggle-border-width * 2));
// TagPicker
@tag-picker-toggle-content-height: @input-height-extra-small;
@tag-picker-content-padding-vertical-all: (@input-picker-toggle-content-height - @tag-picker-toggle-content-height);
@tag-picker-content-padding-vertical: (@tag-picker-content-padding-vertical-all / 2); // (34 -24)/2
@tag-picker-content-padding-horizontal: 6px;
// Cascader
@cascader-search-panel-max-height: 300px;
@cascader-row-content-padding-horizontal: @picker-item-content-padding-horizontal;
// Slider
@slider-bar-side-length: 6px;
@slider-handle-diameter: 12px;
@slider-handle-border-width: 2px;
@slider-handle-dragging-box-shadow: none;
@slider-calibration-diameter: 8px;
@slider-calibration-border-width: 2px;
@slider-mark-margin-top: 9px;
@slider-handle-transition: 0.15s ease-in-out;
// Breadcrumbs
@breadcrumb-font-size: @font-size-small;
@breadcrumb-separator-margin: 4px;
// Carousel
@carousel-animation-duration: 0.3s;
@carousel-toolbar-wrapper-margin: 17px; // @carousel-handler-margin + @carousel-handler-wrapper-margin = 20px
@carousel-handler-transition: background @carousel-animation-duration linear;
@carousel-handler-margin: 3px;
@carousel-handler-sense-width: @carousel-handler-margin;
@carousel-dot-wrapper-side-length: 1.2vw; // 1.2% of the screen width.
@carousel-dot-side-length: 10px;
@carousel-bar-width: 18px;
@carousel-bar-height: 4px;
@carousel-bar-active-width: 28px;
// Rate
@rate-xs-font-size: 18px;
@rate-sm-font-size: 24px;
@rate-md-font-size: 30px;
@rate-lg-font-size: 36px;
//-- Z-index master list
// Keep this section at the bottom of this file for easier lookup
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
//
@zindex-date-range-picker-calendar-dropdown: 1;
@zindex-date-range-picker-table-cell-content: 1;
@zindex-badge-content: 1;
@zindex-message-full: 3;
@zindex-dropdown: 5;
@zindex-picker-toggle: 5; // The same with zindex-dropdown
@zindex-picker-input: (@zindex-picker-toggle + 1); // Greater than picker toggle
@zindex-picker-popup: (@zindex-picker-toggle + 2); // Greater than picker toggle and input
@zindex-dropdown-a: 10;
@zindex-list-helper: 99;
@zindex-navbar: 1000;
@zindex-navbar-fixed: 1030;
@zindex-modal: 1050;
@zindex-drawer: 1050;
@zindex-drawer-background: @zindex-drawer;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-notification: 1080;
//#==== Uploader
@zindex-uploader-picture-preview: 1;
@zindex-uploader-picture-loading-wrapper: 2;
@zindex-uploader-picture-error-wrapper: 3;
@zindex-uploader-picture-remove-button: 4;
//#==== Form
@zindex-form-error-message: 5;
//#==== Table
@zindex-table-body-row-wrapper: 0;
@zindex-table-header-row-wrapper: 2;
@zindex-table-column-resize-spanner: 3;
@zindex-table-cell-group-fixed: 4;
@zindex-table-row-cell-group-shadow: 5;
@zindex-table-mouse-area: 6;
//#=== Rate
@zindex-rate-character-before: 1;