choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,242 lines (1,159 loc) • 69.6 kB
text/less
@iconfont: ~'~choerodon-ui-font';
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import '@{iconfont}/style/theme';
@import '../color/colors';
// The prefix to use on all css classes from c7n.
@c7n-prefix: c7n;
@c7n-pro-prefix: c7n-pro;
// -------- Colors -----------
@primary-color: @blue-6;
@info-color: @blue-6;
@success-color: @green-6;
@processing-color: @primary-color;
@error-color: @red-6;
@error-bg-color: #fcebeb;
@highlight-color: @red-6;
@warning-color: @gold-6;
@normal-color: #d9d9d9;
@B500: #a6a6a6;
// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(~`colorPalette('@{primary-color}', 5) `); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
// Variables derived from functional colors
@info-1: color(~`colorPalette('@{info-color}', 1) `);
@info-3: color(~`colorPalette('@{info-color}', 3) `);
@success-1: color(~`colorPalette('@{success-color}', 1) `);
@success-3: color(~`colorPalette('@{success-color}', 3) `);
@error-1: color(~`colorPalette('@{error-color}', 1) `);
@error-3: color(~`colorPalette('@{error-color}', 3) `);
@warning-1: color(~`colorPalette('@{warning-color}', 1) `);
@warning-3: color(~`colorPalette('@{warning-color}', 3) `);
// Base Scaffolding Variables
// ---
// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
@font-family-no-number: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
@font-family: 'Monospaced Number', @font-family-no-number;
@font-family-required-symbol: SimSun, sans-serif;
@code-family: Consolas, Menlo, Courier, monospace;
@font-family-code: @code-family; // @code-family 变量命名标准化，其作用和直接修改 @code-family 一致
@heading-color: fade(#000, 85%);
@text-color: fade(#000, 100%);
@text-color-secondary: fade(#000, 45%);
@heading-color-dark: fade(#fff, 100%);
@text-color-dark: fade(#fff, 100%);
@text-color-secondary-dark: fade(#fff, 65%);
@font-size-base: 0.13rem;
@font-size-lg: 0.16rem;
@font-size-sm: 0.12rem;
@font-weight-base: 400;
@line-height-base: 1.5;
@border-radius-lg: 0.1rem;
@border-radius-base: 0.02rem;
@border-radius-sm: 0.02rem;
// paddings
@padding-lg: 0.24rem; // containers
@padding-md: 0.16rem; // small containers and buttons
@padding-sm: 0.12rem; // Form controls and items
@padding-xs: 0.08rem; // small items
@padding-vertical-base: 0.01rem;
@padding-vertical-sm: 0.01rem;
@padding-vertical-lg: 0.06rem;
// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;
// vertical margins
@margin-lg: 24px; // containers
@margin-md: 16px; // small containers and buttons
@margin-sm: 12px; // Form controls and items
@margin-xs: 8px; // small items
@margin-xss: 4px; // more small
// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg: rgba(140, 158, 255, 0.12);
@item-hover-bg: @background-color-light;
@item-focus-bg: @background-color-light;
@item-active-color: @text-color;
@item-focus-color: @text-color;
@item-drag-over-bg: @primary-color;
@item-selected-font-weight: 400;
// use choerodon-ui-font
// ICONFONT
//@iconfont-css-prefix: icon;
//@icon-url: "~choerodon-ui-font/fonts/icomoon";
//Icon
//@icon-font-size-base: .18rem;
//@icon-font-size-sm: .16rem;
//@icon-font-size-lg: .2rem;
// LINK
@link-color: @primary-color;
@link-hover-color: color(~`colorPalette('@{link-color}', 5) `);
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
@link-decoration: none;
@link-hover-decoration: none;
// Animation
@animation-duration-slower: 0.45s;
@animation-duration-slow: 0.3s;
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s;
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0, 0, 0.2, 1); // cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
// Border color
@border-color-base: #e0e0e0; // base border outline a component
@border-color-split: hsv(0, 0, 91%); // split border inside a component
@border-width-base: 0.01rem; // width of the border for a component
@border-style-base: solid; // style of a components border
// Outline
@outline-blur-size: 0rem;
@outline-width: 0.02rem;
@outline-color: @primary-color;
@background-color-light: fade(#000, 4%); // background of header and selected item
@background-color-base: hsv(0, 0, 96%); // Default grey background color
// Disabled states
@disabled-color: fade(#000, 25%);
@disabled-bg: @background-color-base;
@disabled-color-dark: fade(#fff, 35%);
// Shadow
@shadow-color: rgba(0, 0, 0, 0.12);
@box-shadow-base: @shadow-1-down;
@shadow-1-up: 0 -0.02rem 0.08rem @shadow-color;
@shadow-1-down: 0 0.02rem 0.08rem @shadow-color;
@shadow-1-left: -0.02rem 0 0.08rem @shadow-color;
@shadow-1-right: 0.02rem 0 0.08rem @shadow-color;
@shadow-2: 0 0.04rem 0.12rem @shadow-color;
@shadow-3: 0 0 0 0.01rem @component-background;
@shadow-4: 0 0.05rem 0.05rem -0.03rem rgba(0, 0, 0, 0.2),
0 0.08rem 0.1rem 0.01rem rgba(0, 0, 0, 0.14), 0 0.03rem 0.14rem 0.02rem rgba(0, 0, 0, 0.12);
// Buttons
@btn-font-weight: @font-weight-base;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-base;
@btn-hover-default-color: rgba(0, 0, 0, 0.08);
@btn-hover-other-color: rgba(255, 255, 255, 0.08);
@btn-danger-color: @error-color;
@btn-danger-bg: rgba(0, 0, 0, 0);
@btn-danger-border: @border-color-base;
@btn-disable-color: @disabled-color;
@btn-disable-bg: transparent;
@btn-disable-border: @border-color-base;
@btn-line-height: 1.5;
@btn-padding-vertical-base: 0rem;
@btn-padding-horizontal-base: 0.12rem;
@btn-padding-base: @btn-padding-vertical-base @btn-padding-horizontal-base;
@btn-padding-vertical-lg: @btn-padding-vertical-base;
@btn-padding-horizontal-lg: @btn-padding-horizontal-base;
@btn-padding-lg: @btn-padding-vertical-lg @btn-padding-horizontal-lg;
@btn-padding-vertical-sm: @padding-vertical-sm;
@btn-padding-horizontal-sm: 0.06rem;
@btn-padding-sm: @padding-vertical-sm @btn-padding-horizontal-sm;
@btn-font-size-base: unset;
@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-sm;
@btn-height-base: 0.3rem;
@btn-height-lg: 0.4rem;
@btn-height-sm: 0.24rem;
@btn-circle-size: @btn-height-base;
@btn-circle-size-lg: @btn-height-lg;
@btn-circle-size-sm: @btn-height-sm;
@btn-circle-border-radius: 50%;
@btn-group-border: @primary-5;
@btn-group-spacing: 0.1rem;
@btn-box-shadow: 0 0.03rem 0.01rem -0.02rem rgba(0, 0, 0, 0.2),
0 0.02rem 0.02rem 0 rgba(0, 0, 0, 0.14), 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.12);
@btn-focus-box-shadow: 0 0.04rem 0.03rem -0.02rem rgba(0, 0, 0, 0.2),
0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.14), 0 0.03rem 0.08rem 0 rgba(0, 0, 0, 0.12);
@btn-active-box-shadow: @shadow-4;
@btn-icon-size: 0.14rem;
@btn-icon-size-lg: @font-size-lg;
@btn-icon-size-sm: @font-size-sm;
@btn-icon-only-size: 0.2rem;
@btn-icon-only-size-sm: 0.14rem;
@btn-icon-only-size-lg: 0.24rem;
@btn-icon-font-weight: inherit;
@btn-icon-margin: 0 0.05rem 0 0;
// raised button
@btn-raised-border-width-base: 0rem;
@btn-raised-border-style-base: solid;
// link button
@btn-link-font-weight: @btn-font-weight;
// button primary
@btn-primary-color: @text-color-dark;
@btn-primary-bg: @primary-color;
@btn-primary-border: @btn-primary-bg;
@btn-primary-focus-color: @btn-primary-color;
@btn-primary-focus-bg: color(~`colorPalette('@{btn-primary-bg}', 7) `);
@btn-primary-hover-color: @btn-primary-focus-color;
@btn-primary-hover-bg: @btn-primary-focus-bg;
@btn-primary-disabled-color: @btn-primary-color;
@btn-primary-flat-color: @btn-primary-bg;
// button secondary
@btn-secondary-color: @text-color-dark;
@btn-secondary-bg: @primary-4;
@btn-secondary-border: @primary-color;
@btn-secondary-focus-color: @btn-secondary-color;
@btn-secondary-focus-bg: @primary-7;
@btn-secondary-hover-color: @btn-secondary-color;
@btn-secondary-hover-bg: @btn-secondary-focus-bg;
@btn-secondary-disabled-color: @btn-secondary-color;
@btn-secondary-flat-color: @btn-secondary-bg;
// button gray
@btn-gray-color: @text-color;
@btn-gray-bg: #f5f5f5;
@btn-gray-border: @btn-gray-bg;
@btn-gray-focus-color: @btn-gray-color;
@btn-gray-focus-bg: #e6e6e6;
@btn-gray-hover-color: @btn-gray-focus-color;
@btn-gray-hover-bg: @btn-gray-focus-bg;
@btn-gray-disabled-color: @btn-gray-color;
@btn-gray-flat-color: #d0d0d0;
// button blue
@btn-blue-color: @text-color-dark;
@btn-blue-bg: @blue-6;
@btn-blue-border: @btn-blue-bg;
@btn-blue-focus-color: @btn-blue-color;
@btn-blue-focus-bg: @blue-7;
@btn-blue-hover-color: @btn-blue-focus-color;
@btn-blue-hover-bg: @btn-blue-focus-bg;
@btn-blue-disabled-color: @btn-blue-color;
@btn-blue-flat-color: @btn-blue-bg;
// button green
@btn-green-color: @text-color-dark;
@btn-green-bg: @green-6;
@btn-green-border: @btn-green-bg;
@btn-green-focus-color: @btn-green-color;
@btn-green-focus-bg: @green-7;
@btn-green-hover-color: @btn-green-focus-color;
@btn-green-hover-bg: @btn-green-focus-bg;
@btn-green-disabled-color: @btn-green-color;
@btn-green-flat-color: @btn-green-bg;
// button red
@btn-red-color: @text-color-dark;
@btn-red-bg: @red-6;
@btn-red-border: @btn-red-bg;
@btn-red-focus-color: @btn-red-color;
@btn-red-focus-bg: @red-7;
@btn-red-hover-color: @btn-red-focus-color;
@btn-red-hover-bg: @btn-red-focus-bg;
@btn-red-disabled-color: @btn-red-color;
@btn-red-flat-color: @btn-red-bg;
// button yellow
@btn-yellow-color: @text-color-dark;
@btn-yellow-bg: @yellow-6;
@btn-yellow-border: @btn-yellow-bg;
@btn-yellow-focus-color: @btn-yellow-color;
@btn-yellow-focus-bg: @yellow-7;
@btn-yellow-hover-color: @btn-yellow-focus-color;
@btn-yellow-hover-bg: @btn-yellow-focus-bg;
@btn-yellow-disabled-color: @btn-yellow-color;
@btn-yellow-flat-color: @btn-yellow-bg;
// button purple
@btn-purple-color: @text-color-dark;
@btn-purple-bg: @purple-6;
@btn-purple-border: @btn-purple-bg;
@btn-purple-focus-color: @btn-purple-color;
@btn-purple-focus-bg: @purple-7;
@btn-purple-hover-color: @btn-purple-focus-color;
@btn-purple-hover-bg: @btn-purple-focus-bg;
@btn-purple-disabled-color: @btn-purple-color;
@btn-purple-flat-color: @btn-purple-bg;
// button dark
@btn-dark-color: @text-color-dark;
@btn-dark-bg: @dark-4;
@btn-dark-border: @btn-dark-bg;
@btn-dark-focus-color: @btn-dark-color;
@btn-dark-focus-bg: @dark-5;
@btn-dark-hover-color: @btn-dark-focus-color;
@btn-dark-hover-bg: @btn-dark-focus-bg;
@btn-dark-disabled-color: @btn-dark-color;
@btn-dark-flat-color: @dark-6;
// button default
@btn-default-color: @text-color;
@btn-default-bg: transparent;
@btn-default-border: @border-color-base;
@btn-default-focus-color: @btn-primary-bg;
@btn-default-focus-bg: @btn-default-bg;
@btn-default-hover-color: @btn-default-color;
@btn-default-hover-bg: @btn-default-focus-bg;
@btn-default-disabled-color: @btn-default-color;
@btn-default-flat-color: @btn-default-color;
// Checkbox
@checkbox-size: 0.16rem;
@checkbox-color: @primary-color;
@checkbox-border-color: fade(#000, 65%);
@checkbox-border-width: 0.02rem;
@checkbox-disabled-bg: @input-disabled-bg;
@checkbox-disabled-color: @disabled-color;
@checkbox-disabled-border-color: @disabled-color;
@checkbox-disabled-check-bg: @checkbox-disabled-bg;
@checkbox-disabled-check-border-color: @checkbox-disabled-border-color;
@checkbox-disabled-check-color: @checkbox-disabled-color;
@checkbox-uncheck-hover-border-color: @checkbox-color;
@checkbox-shadow-color: fade(@checkbox-color, 20%);
@checkbox-indeterminate-bg: @checkbox-color;
@checkbox-indeterminate-color: #fff;
@checkbox-indeterminate-width: calc((@checkbox-size / 16) * 8);
@checkbox-indeterminate-height: calc((@checkbox-size / 16) * 1);
@checkbox-indeterminate-top: calc((@checkbox-size - @checkbox-indeterminate-height - @checkbox-border-width * 2) / 2);
@checkbox-indeterminate-left: calc((@checkbox-size - @checkbox-indeterminate-width - @checkbox-border-width * 2) / 2);
// basic
@checkbox-basic-disabled-color: @input-disabled-color;
@checkbox-basic-disabled-border-color: @border-color-base;
@checkbox-basic-disabled-check-border-color: @checkbox-basic-disabled-border-color;
@checkbox-basic-indeterminate-width: calc((@checkbox-size / 14) * 8);
@checkbox-basic-indeterminate-height: calc(@checkbox-size / 14);
@checkbox-basic-indeterminate-top: calc((@checkbox-size - 0.04rem - @checkbox-basic-indeterminate-height) / 2);
@checkbox-basic-indeterminate-left: calc((@checkbox-size - 0.03rem - @checkbox-basic-indeterminate-width) / 2);
@checkbox-button-line-height: @radio-button-line-height;
@checkbox-button-min-width: unset;
@checkbox-button-padding: 0 0.15rem;
@checkbox-button-check-bg: @checkbox-color;
@checkbox-button-disabled-check-bg: fade(@primary-color, 60%);
@checkbox-button-disabled-check-border-color: @checkbox-button-disabled-check-bg;
@checkbox-button-disabled-check-color: @text-color-dark;
@checkbox-button-check-color: @text-color-dark;
@checkbox-button-check-border-color: @checkbox-color;
@checkbox-button-radius: @border-radius-base;
// DatePicker
@date-primary-color: @primary-color;
@date-primary-hover-color: fade(@date-primary-color, 70%);
@date-link-hover-color: @link-hover-color;
@date-link-active-color: @link-active-color;
// 从组件内部迁移的变量
@date-picker-width: 2.8rem;
@date-time-picker-width: 4.3rem;
@date-picker-horizontal-padding: 0.12rem;
@date-time-list-item-height: 0.29rem;
// 新增
@date-picker-header-height: 0.4rem;
@date-picker-header-padding: 0 0.07rem;
@date-picker-body-table-font-size: 0.16rem;
@date-picker-cell-inner-border-radius: @border-radius-sm;
@date-picker-cell-disabled-inner-border-radius: 0rem;
@date-picker-cell-inner-height: 0.24rem;
@date-picker-footer-height: 0.39rem;
@date-picker-active-color: #fff;
@date-picker-view-select-font-weight: bold;
@date-picker-today-font-weight: bold;
@date-picker-th-color: unset;
@date-picker-month-year-cell-inner-display: inline-table;
@date-picker-time-focus-active-display: block;
@date-picker-datetime-time-border-left: unset;
@date-picker-datetime-time-padding: 0.08rem @date-picker-horizontal-padding;
@date-picker-time-selected-bg: unset;
@date-picker-time-cell-hover-bg: unset;
@date-picker-time-cell-inner-hover-bg: @item-hover-bg;
@date-picker-time-selected-cell-inner-color: #fff;
@date-picker-time-selected-cell-inner-bg: @date-primary-color;
@date-picker-time-panel-height: 2.1rem;
@date-picker-time-cell-inner-active-color: @date-picker-active-color;
@date-picker-time-cell-inner-active-bg: @primary-5;
@date-picker-time-cell-active-bg: unset;
@date-picker-time-cell-disabled-bg: unset;
@date-picker-time-disabled-cell-inner-bg: @disabled-bg;
@date-picker-week-edge-cell-inner-border-radius: @border-radius-base;
// Radio
@radio-color: @primary-color;
@radio-border-color: rgba(0, 0, 0, 0.24);
@radio-border-width: @border-width-base;
@radio-disabled-color: @disabled-color;
@radio-disabled-bg: @input-disabled-bg;
@radio-disabled-border-color: @disabled-color;
@radio-disabled-check-bg: @radio-disabled-bg;
@radio-disabled-check-border-color: @radio-disabled-border-color;
@radio-disabled-check-color: @radio-disabled-color;
@radio-uncheck-hover-border-color: @radio-color;
@radio-size: 0.14rem;
@radio-dot-color: @radio-color;
// @radio-dot-distance: calc(@radio-size / 4 - @radio-border-width / 2);
@radio-dot-size: calc(@radio-size / 2 - @radio-border-width);
@radio-check-dot-color: @radio-dot-color;
@radio-height: calc(@input-height-base - 2 * @border-width-base);
@radio-line-height: 1.5;
@radio-label-white-space: @label-white-space;
@radio-shadow-color: fade(@radio-color, 20%);
@radio-check-border-color: @radio-dot-color;
@radio-check-border-width: @radio-border-width;
@radio-highlight-check-dot-color: @input-highlight-border-color;
// basic
@radio-basic-disabled-color: @input-disabled-color;
@radio-basic-disabled-bg: @radio-button-bg;
@radio-basic-disabled-check-bg: @radio-disabled-check-color;
@radio-basic-disabled-border-color: @radio-border-color;
// Radio buttons
@radio-button-line-height: @btn-height-base;
@radio-button-bg: @btn-default-bg;
@radio-button-color: @btn-default-color;
@radio-button-hover-color: fade(@radio-color, 50%);
@radio-button-active-color: fade(@radio-color, 70%);
@radio-button-check-border-width: @radio-border-width;
@radio-button-padding: 0 0.15rem;
@radio-button-min-width: unset;
@radio-basic-button-uncheck-hover-color: @radio-button-color;
@radio-basic-button-padding: 0 calc(@padding-md - 0.01rem);
@radio-button-check-color: @radio-dot-color;
@radio-button-check-bg: transparent;
@radio-basic-button-group-spacing: 0rem;
@radio-button-radius: @border-radius-base;
@radio-button-disabled-check-bg: @radio-disabled-check-bg;
@radio-button-disabled-check-border-color: @radio-disabled-check-border-color;
@radio-button-disabled-check-color: unset;
// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;
// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;
// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;
// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;
// Extra extra large screen / large descktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;
// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);
// Grid system
@grid-columns: 24;
@grid-gutter-width: 0rem;
// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #001529;
@layout-footer-background: @layout-body-background;
@layout-header-height: 0.64rem;
@layout-header-padding: 0 0.5rem;
@layout-footer-padding: 0.24rem 0.5rem;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 0.48rem;
@layout-trigger-background: #002140;
@layout-trigger-color: #fff;
@layout-zero-trigger-width: 0.36rem;
@layout-zero-trigger-height: 0.42rem;
@layout-sider-background-tint-1: tint(@layout-sider-background, 10%);
// z-index list
@zindex-modal-container: 1000;
@zindex-popup-container: 1050;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-modal-mask: 1000;
@zindex-modal: 1000;
@zindex-notification: 1030;
@zindex-message: 1030;
@zindex-popover: 1030;
@zindex-picker: 1050;
@zindex-dropdown: 1050;
@zindex-tooltip: 1060;
// Form
// ---
@label-required-color: @highlight-color;
@label-color: inherit;
@label-color-horizontal: @label-color;
@label-color-vertical: @label-color;
@label-font-weight: @font-weight-base;
@label-colon-color: inherit;
@label-line-height: @input-height-base;
@label-white-space: nowrap;
@label-wrapper-padding-vertical: 0.1rem;
@label-wrapper-padding-horizontal: 0.04rem;
@label-wrapper-padding: @label-wrapper-padding-vertical @label-wrapper-padding-horizontal;
@label-vertical-wrapper-padding-vertical: 0rem;
@label-output-wrapper-padding-vertical: 0.01rem;
@label-basic-line-height: 34 / 13;
@field-help-color: @text-color-secondary;
@field-icon-help-color: @text-color-secondary;
@field-icon-help-font-size: @icon-font-size-sm;
@form-item-wrapper-padding-vertical: 0.1rem;
@form-item-wrapper-padding-horizontal: 0.05rem;
@form-item-wrapper-padding: @form-item-wrapper-padding-vertical @form-item-wrapper-padding-horizontal;
@form-item-wrapper-output-padding-vertical: 0.01rem;
@form-item-margin-top: 0.07rem;
@form-item-margin-bottom: 0.2rem;
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 0.08rem;
@form-vertical-label-margin: 0rem;
@float-label-wrapper-border-top-color: @component-background;
@float-label-transform-origin-high: 0.1rem -330%; // SelectBox, Range, CheckBox, Switch
@float-label-height-base: 0.36rem;
@float-label-height-lg: 0.4rem;
@float-label-height-sm: 0.3rem;
@float-label-autofill-margin: 0.02rem;
@float-label-line-height: 0.34rem;
@float-label-line-height-lg: 0.38rem;
@float-label-line-height-sm: 0.28rem;
@float-label-color: @label-color;
@float-label-font-size: .15rem;
@float-label-font-weight: 500;
@float-label-active-height: @float-label-line-height;
@float-label-active-bg: unset;
@float-label-active-padding: 0rem;
@float-form-item-margin-top: @form-item-margin-top;
@float-form-item-margin-bottom: @form-item-margin-bottom;
@float-form-item-wrapper-padding-vertical: 0rem;
// Input
// ---
@input-primary-color: @primary-color;
@input-height-base: 0.3rem;
@input-height-lg: 0.4rem;
@input-height-sm: 0.24rem;
@input-font-size-base: @font-size-base;
@input-font-weight-base: unset;
@input-line-height-base: @line-height-base;
@input-padding-horizontal: @control-padding-horizontal - 0.02rem;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 0.02rem;
@input-padding-horizontal-lg: @input-padding-horizontal;
@input-padding-vertical-base: @padding-vertical-base;
@input-padding-vertical-sm: @padding-vertical-sm;
@input-padding-vertical-lg: @padding-vertical-lg;
@input-placeholder-color: hsv(0, 0, 75%);
@input-info-color: fade(@text-color, 54%);
@input-active-color: @text-color;
//@input-active-box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
@input-active-box-shadow: none;
@input-color: rgb(0, 0, 0);
// @input-border-color: @border-color-base;
@input-baseline-color: rgba(0, 0, 0, 0.54);
@input-border-color: #d9d9d9;
@input-border-radius: @border-radius-base;
@input-error-border-color: @error-color;
@input-error-active-box-shadow: @input-active-box-shadow;
@input-required-border-color: @input-border-color;
@input-highlight-border-color: #47B881;
@input-wrapper-bg: @component-background;
@input-bg: transparent;
@input-required-bg: @yellow-1;
@input-error-bg: @error-bg-color;
@input-addon-bg: @background-color-light;
@input-focus-border-color: color(~`colorPalette('@{input-primary-color}', 3) `);
@input-hover-border-color: color(~`colorPalette('@{input-primary-color}', 5) `);
@input-required-focus-border-color: @input-focus-border-color;
@input-required-hover-border-color: @input-hover-border-color;
@input-required-active-box-shadow: @input-active-box-shadow;
@input-float-border-color: @input-border-color;
@input-float-border-radius: 0.05rem;
@input-float-border-active-width: 0.02rem;
@input-float-required-border-color: @input-required-border-color;
@input-float-highlight-border-color: @input-highlight-border-color;
@input-float-required-bg: @component-background;
@input-float-error-bg: @component-background;
@input-float-disabled-bg: @component-background;
@input-float-focus-border-color: @input-focus-border-color;
@input-float-required-focus-border-color: @input-float-focus-border-color;
@input-float-hover-border-color: @input-color;
@input-float-required-hover-border-color: @input-float-hover-border-color;
@input-float-disabled-border-style: dashed;
@input-float-disabled-border-color: @input-float-border-color;
@input-disabled-bg: @disabled-bg;
@input-disabled-color: rgba(0, 0, 0, 0.54);
@input-disabled-icon-color: @input-disabled-color;
@input-icon-width-base: 0.24rem;
@input-icon-width-lg: 0.3rem;
@input-icon-width-sm: 0.2rem;
@input-icon-color: inherit;
@input-prefix-width-base: @input-icon-width-base;
@input-prefix-color: inherit;
@input-suffix-width-base: @input-icon-width-base;
@input-suffix-height: 0.2rem;
@input-suffix-color: inherit;
@input-suffix-hover-color: @input-suffix-color;
@input-suffix-error-color: @input-suffix-color;
@input-button-width: @input-suffix-width-base;
@input-addon-bg: #eee;
@input-addon-color: unset;
@input-addon-font-size: unset;
@input-tag-default-color: @tag-default-color;
@input-tag-default-bg: @tag-default-bg;
@input-tag-error-color: @tag-default-color;
@input-tag-error-bg: @error-color;
@input-tag-disabled-color: @tag-default-color;
@input-tag-disabled-bg: @disabled-color;
@input-tag-close-color: inherit;
@input-tag-close-hover-color: inherit;
@input-tag-height-base: 0.24rem;
@input-tag-line-height-base: 0.22rem;
@input-tag-margin-vertical: 0.01rem;
@input-tag-border-radius: @input-border-radius;
@input-tag-extra-space: 0.24rem;
@input-float-tag-height-base: 0.2rem;
@input-float-tag-line-height-base: 0.2rem;
@input-float-tag-margin-vertical: @input-tag-margin-vertical;
@input-float-tag-padding: 0 0.02rem 0 0.08rem;
@input-float-tag-border-radius: 0.12rem;
@input-float-tag-error-bg: @error-color;
@input-float-tag-close-color: @tag-multiple-color;
@input-float-tag-close-line-height: 0.2rem;
@input-float-tag-close-font-size: 0.16rem;
@input-float-tag-close-vertical-align: top;
@input-multiple-height-base: auto;
@input-multiple-height-lg: @input-multiple-height-base;
@input-multiple-height-sm: @input-multiple-height-base;
@input-multiple-margin: 0rem;
@input-multiple-padding: 0.01rem 0;
@input-multiple-input-margin: 0 0 0 @input-padding-horizontal;
@input-float-multiple-margin: 0 0 0 0.03rem;
@input-float-multiple-padding: 0.07rem 0;
@textarea-padding: 0.04rem @input-padding-horizontal;
// Input basic
@input-number-handler-inner-distance: -0.05rem;
@input-basic-height: 0.36rem;
@input-basic-autofill-height: 0.32rem;
@input-basic-hover-border-color: @input-color;
@input-basic-focus-border-width: 0.02rem;
@input-basic-focus-border-color: @primary-color;
@input-basic-disabled-border-style: dashed;
@input-basic-disabled-bg: unset;
// Mentions
@mentions-measure-padding: 0.07rem 0.13rem 0.07rem 0.1rem;
// Output
// ---
@output-line-height: 0.28rem; // <-- fieldHeight / fontSize
@output-font-weight: @font-weight-base;
@output-word-break: normal;
@output-white-space: normal;
@output-color: unset;
@output-tag-margin: @tag-margin;
@output-float-label-font-size: 0.12rem;
@output-float-label-line-height: 0.18rem;
// Steps
@process-icon-color: @icon-text-color;
@process-icon-hover-color: @process-icon-color;
@process-icon-bg: @processing-color;
@process-icon-dot-bg: @processing-color;
@process-icon-border-color: @processing-color;
@process-icon-hover-border-color: @process-icon-border-color;
@process-title-color: @heading-color;
@process-title-hover-color: @process-title-color;
@process-title-font-weight: 500;
@process-description-color: @text-color;
@process-description-hover-color: @process-description-color;
@process-tail-color: @step-border-color;
@icon-text-color: #fff;
@wait-icon-color: @icon-text-color;
@wait-icon-hover-color: @wait-icon-color;
@wait-icon-dot-bg: @step-wait-color;
@wait-icon-bg: @step-wait-color;
@wait-icon-border-color: @step-wait-color;
@wait-icon-hover-border-color: @wait-icon-border-color;
@wait-title-color: @text-color-secondary;
@wait-title-hover-color: @wait-title-color;
@wait-description-color: @wait-title-color;
@wait-description-hover-color: @wait-description-color;
@wait-tail-color: @process-tail-color;
@finish-icon-color: @icon-text-color;
@finish-icon-hover-color: @finish-icon-color;
@finish-icon-dot-bg: @process-icon-bg;
@finish-icon-bg: @process-icon-bg;
@finish-icon-border-color: @process-icon-bg;
@finish-icon-hover-border-color: @finish-icon-border-color;
@finish-title-color: @text-color;
@finish-title-hover-color: @finish-title-color;
@finish-description-color: @text-color-secondary;
@finish-description-hover-color: @finish-description-color;
@finish-tail-color: @process-tail-color;
@error-icon-color: @icon-text-color;
@error-icon-hover-color: @error-icon-color;
@error-icon-dot-bg: @error-color;
@error-icon-bg: @error-color;
@error-icon-border-color: @error-color;
@error-icon-hover-border-color: @error-icon-border-color;
@error-title-color: @error-color;
@error-title-hover-color: @error-title-color;
@error-description-color: @error-color;
@error-description-hover-color: @error-description-color;
@error-tail-color: @process-tail-color;
@steps-background: @component-background;
@steps-icon-size: 0.28rem;
@steps-icon-font-size: @font-size-lg;
@steps-item-dropdown-icon-font-size: @steps-icon-font-size;
@steps-icon-border-width: 0rem;
@steps-icon-border-style: @border-style-base;
@steps-icon-border-color: @border-color-base;
@steps-small-item-title-font-size: @font-size-base;
@steps-small-icon-size: 0.24rem;
@steps-dot-size: 0.08rem;
@steps-current-dot-size: 0.1rem;
@steps-desciption-max-width: 1.4rem;
@steps-title-min-width: 1.76rem;
@steps-item-cursor: unset;
@step-border-color: rgba(0, 0, 0, 0.26);
@step-wait-color: rgba(0, 0, 0, 0.36);
@steps-item-dropdown-icon-size: 0.3rem;
@steps-item-title-icon-margin: 0 0 0 0.16rem;
@steps-vertical-item-icon-margin-right: 0.16rem;
@steps-vertical-item-tail-left: 0.16rem;
@steps-tail-size: 0.01rem;
// Tooltip
// ---
// Tooltip max width
@tooltip-font-size: unset;
@tooltip-max-width: 4rem;
@tooltip-min-width: 0.3rem;
@tooltip-min-height: 0.32rem;
// Tooltip text color
@tooltip-color: @text-color-dark;
// Tooltip background color
@tooltip-bg: rgba(0, 0, 0, 0.75);
// Tooltip arrow width
@tooltip-arrow-width: 0.05rem;
// Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width + 0.03rem;
// Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
// Tooltip light theme colors
@tooltip-color-light: @text-color;
@tooltip-bg-light: @component-background;
@tooltip-arrow-color-light: @tooltip-bg-light;
@tooltip-line-height: inherit;
@tooltip-link-color-dark: @link-color;
@tooltip-box-shadow-light: @box-shadow-base;
@tooltip-box-shadow: @box-shadow-base;
@tooltip-padding: 0.06rem 0.08rem;
@tooltip-border-radius: calc(@border-radius-base * 2);
// Popover
// ---
// Popover body background color
@popover-bg: @component-background;
// Popover text color
@popover-color: @text-color;
// Popover maximum width
@popover-min-width: 1.77rem;
@popover-min-height: 0.32rem;
// Popover arrow affset
@popover-arrow-offset: 0.02rem;
// Popover arrow width
@popover-arrow-width: 0.05rem;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width
// Popover outer arrow color
@popover-arrow-outer-color: @popover-bg;
// Popover distance with trigger
@popover-distance: @popover-arrow-width + 0.04rem;
@popover-message-padding: 0.04rem 0 0.12rem;
@popover-message-title-padding: 0 0 0 @font-size-base + 0.08rem;
@popover-title-padding: 0.05rem @padding-md 0.04rem;
@popover-content-under-title-padding: @popover-title-padding;
@popover-title-border-bottom: @border-width-base @border-style-base @border-color-split;
@popover-title-font-weight: 500;
@popover-title-font-size: unset;
@popover-inner-content-padding: 0.12rem @padding-md;
@popover-line-height: unset;
@popover-warning-icon-top: unset;
// Modal
// --
@modal-font-size-lg: 0.18rem; // deprecated
@modal-font-size-base: @modal-font-size-lg; // deprecated
@modal-title-color: @heading-color;
@modal-title-font-size-base: @modal-font-size-base;
@modal-title-font-weight: 500;
@modal-title-line-height: 0.24rem;
@modal-confirm-title-color: @modal-title-color;
@modal-confirm-title-font-size-base: 0.2rem;
@modal-confirm-title-font-weight: @modal-title-font-weight;
@modal-confirm-title-line-height: 0.32rem;
@modal-mask-bg: rgba(0, 0, 0, 0.288);
@modal-content-shadow: @shadow-2;
@modal-header-padding: 0.15rem 0.24rem;
@modal-body-padding: 0.24rem;
@modal-footer-padding: 0.12rem 0.24rem;
@modal-drawer-header-padding: @modal-header-padding;
@modal-drawer-body-padding: @modal-body-padding;
@modal-drawer-footer-padding: @modal-footer-padding;
@modal-header-footer-border: @border-width-base @border-style-base @border-color-base;
@modal-drawer-footer-text-align: left;
@modal-confirm-icon-padding: 0 0.16rem 0 0;
@modal-confirm-icon-font-size: 0.24rem;
@modal-confirm-icon-line-height: 1.5;
@modal-no-border-header-padding: @modal-header-padding;
// Modal Basic
@modal-basic-footer-padding: 0.12rem 0;
// Sidebar
@sidebar-font-size-lg: 0.18rem;
@sidebar-header-height: 0.65rem;
// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-loading-size-sm: 0.2rem;
@progress-loading-size-base: 0.3rem;
@progress-loading-size-lg: 0.5rem;
// Menu
// ---
@menu-first-level-title-font-size: @font-size-base;
@menu-inline-toplevel-item-height: 0.4rem;
@menu-item-height: 0.4rem;
@menu-collapsed-width: 0.8rem;
@menu-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-group-title-color: @text-color-secondary;
@menu-item-group-title-padding: 0.08rem 0.16rem;
@menu-item-group-title-line-height: @line-height-base;
@menu-item-padding: 0 0.16rem 0 0.28rem;
@menu-horizontal-line-height: 0.46rem;
@menu-horizontal-hover-bg: transparent;
@menu-horizontal-border-bottom: @border-width-base @border-style-base @border-color-split;
@menu-horizontal-selected-font-weight: unset;
@menu-horizontal-root-selected-bg: unset;
@menu-not-horizontal-padding: unset;
@menu-vertical-submenu-arrow-right: 0.16rem;
@menu-active-line-width: 0.02rem;
@menu-submenu-margin: unset;
@menu-popup-item-group-border-bottom: unset;
@menu-popup-sub-padding: unset;
// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-selected-bg: @primary-color;
// Spin
// ---
@spin-dot-size-sm: 0.2rem;
@spin-dot-size: 0.3rem;
@spin-dot-size-lg: 0.5rem;
// Table
// --
@table-border: @border-width-base @border-style-base @table-border-color;
@table-outermost-border-top: @table-border;
@table-outermost-border-bottom: @table-border;
@table-cell-border-right: @border-width-base @border-style-base transparent;
@table-cell-border-bottom: @table-border;
@table-outermost-bordered-border-right: @table-border;
@table-outermost-bordered-border-left: @table-border;
@table-tfoot-cell-border-top: @table-border;
@table-last-row-cell-border-bottom: @border-width-base @border-style-base transparent;
@table-notbordered-thead-hover-border-right-color: @table-border-color;
@table-notbordered-body-border-bottom-color: @table-border-color;
@table-header-bg: @background-color-light;
@table-header-color: @heading-color;
@table-header-font-weight: 700;
@table-header-sort-bg: @background-color-base;
@table-row-hover-bg: @item-hover-bg;
@table-row-hover-editable-bg: unset;
@table-current-row-bg: @item-active-bg;
@table-even-row-bg: fade(#000, 2%);
@table-cell-focus-bg: fade(#000, 8%);
@table-selected-row-bg: fade(#a1c2fa, 16%);
@table-expanded-row-bg: #fbfbfb;
@table-mouse-batch-choose-bg: @table-selected-row-bg;
@table-padding-vertical: 0.05rem;
@table-padding-horizontal: @input-padding-horizontal;
@table-cell-font-weight: 400;
@table-cell-padding-vertical-base: 0.01rem;
@table-cell-padding-horizontal-base: 0.01rem;
@table-cell-padding-vertical-sm: @table-cell-padding-vertical-base;
@table-cell-padding-horizontal-sm: @table-cell-padding-horizontal-base;
@table-header-cell-padding-vertical-base: @table-cell-padding-vertical-base;
@table-header-cell-padding-horizontal-base: @table-cell-padding-horizontal-base;
@table-header-cell-padding-vertical-sm: @table-cell-padding-vertical-sm;
@table-header-cell-padding-horizontal-sm: @table-cell-padding-horizontal-sm;
@table-footer-cell-padding-vertical-base: @table-cell-padding-vertical-base;
@table-footer-cell-padding-horizontal-base: @table-cell-padding-horizontal-base;
@table-footer-cell-padding-vertical-sm: @table-cell-padding-vertical-sm;
@table-footer-cell-padding-horizontal-sm: @table-cell-padding-horizontal-sm;
@table-split-color: @primary-color;
@table-editable-cell-border-radius-base: 0rem;
@table-editable-cell-border-color: @input-border-color;
@table-editable-cell-required-bg: @input-required-bg;
@table-editable-cell-required-border-color: @input-required-border-color;
@table-editable-cell-highlight-border-color: @input-highlight-border-color;
@table-editable-cell-error-bg: @error-bg-color;
@table-editable-cell-error-border-color: @input-error-border-color;
@table-editable-cell-disabled-bg: @input-disabled-bg;
@table-editable-cell-disabled-border-color: @input-disabled-color;
@table-customization-select-view-option-bg: fade(#000, 8%);
@table-customization-form-padding-vertical: 0.05rem;
@table-customization-button-color: unset;
@table-customization-tree-treenode-padding: 0.03rem 0;
@table-customization-tree-treenode-title-margin: unset;
@table-customization-tree-treenode-content-height: 0.32rem;
@table-customization-tree-treenode-switcher-height: @table-customization-tree-treenode-content-height;
@table-customization-tree-treenode-switcher-padding: 0.05rem 0;
@table-customization-tree-treenode-dragging-bg-color: @component-background;
@table-customization-tree-treenode-switcher-icon-size: 0.18rem;
@table-customization-tree-treenode-switcher-icon-line-height: 0.22rem;
@table-border-color: @border-color-base;
@table-row-group-title-bg: #f5f5f5;
@table-row-group-title-color: inherit;
@table-cell-group-font-weight: @table-header-font-weight;
@table-icon-help-color: @primary-color;
@table-icon-help-content: '\e8fd';
@table-icon-help-size: @icon-font-size-base;
@table-icon-help-font-weight: inherit;
@table-icon-sort-hover-color: @primary-color;
@table-icon-sort-active-color: @table-icon-sort-hover-color;
@table-dynamic-filter-label-color: #6A6A6A;
@table-dynamic-filter-placeholder-color: @table-dynamic-filter-label-color;
@table-dynamic-filter-input-padding: 0.01rem 0.02rem;
@table-dynamic-filter-status-line-height: @line-height-base;
@table-dynamic-filter-expand-query-icon-color: unset;
@table-dynamic-filter-refresh-icon-hover-color: unset;
@table-dynamic-filter-single-action-buttons-margin: 0.02rem 0 0;
@table-dynamic-filter-required-border-color: @input-border-color;
@table-dynamic-filter-required-active-border-color: @primary-color;
@table-dynamic-filter-required-active-box-shadow: @input-required-active-box-shadow;
@table-dynamic-filter-number-step-height: 0.24rem;
@table-professional-query-button-padding: 0.1rem 0 0.1rem 0.7rem;
@table-professional-query-button-vertical-padding: 0.3rem 0 0.1rem 0.7rem;
@table-combo-filter-wrapper-margin: 0.04rem 0 0;
@table-combo-filter-content-margin: 0.04rem 0 0 0.08rem;
@table-combo-filter-single-line-divide-margin: 0.08rem 0.08rem 0.06rem 0.08rem;
@table-combo-filter-menu-reset-button-bg: @btn-secondary-bg;
@table-filter-item-icon-line-height: @line-height-base;
@table-summary-group-wrapper-justify-content: flex-end;
@table-summary-group-wrapper-margin: 0.08rem 0;
@table-buttons-more-dropdown-item-padding: 0 0.08rem;
@table-filter-search-close-icon-line-height: 0.2rem;
@table-cell-expand-btn-bg: @btn-default-bg;
@table-choosed-cell-bg: rgb(241 243 255);
// PerformanceTable
@performance-table-header-bg: #f5f5f5;
@performance-table-active-row-bg: rgb(240 243 255);
@performance-table-scrollbar-bg: rgba(45, 45, 45, 0.05);
@performance-table-scrollbar-handle-bg: rgba(45, 45, 45, 0.5);
@performance-table-scrollbar-handle-active-bg: @performance-table-scrollbar-handle-bg;
@performance-table-scrollbar-handle-border-radius: 0.04rem;
@performance-table-scrollbar-border: none;
@performance-table-scrollbar-handle-horizontal-height: 0.08rem;
@performance-table-scrollbar-handle-vertical-width: 0.08rem;
// Loader
@loader-spin-ring-wide: 3px;
@loader-spin-ring-color: fade(@primary-color, 80);
@loader-spin-ring-active-color: @B500;
@loader-duration-normal: 0.6s;
//@head-background: #f5f5f5;
//@body-background: #fff;
//@pagination-background: #f5f5f5;
//@resize-mouse-color: @H500;
// Tree
// ---
@tree-primary-color: @primary-color;
@tree-bg: @component-background;
@tree-title-height: 0.24rem;
@tree-child-padding: 0.18rem;
@tree-directory-selected-color: #fff;
@tree-directory-selected-bg: @tree-primary-color;
@tree-node-hover-bg: @item-hover-bg;
@tree-node-selected-bg: color(~`colorPalette('@{tree-primary-color}', 2) `);
@tree-focus-bg: color(~`colorPalette('@{tree-primary-color}', 1) `);
@tree-node-padding: @padding-xs / 2;
@tree-checkbox-height: @tree-title-height;
@tree-active-color: @text-color;
@tree-line-before-bottom: -1 * @tree-node-padding;
@tree-line-margin-left: -0.01rem;
@tree-switcher-icon-size: 0.18rem;
@tree-drag-over-color: white;
@tree-drag-over-bg: @tree-primary-color;
@tree-node-color: inherit;
@tree-node-hover-color: @tree-active-color;
@tree-node-selected-color: @tree-active-color;
// TreeSelect
// ---
@tree-select-treenode-selected-bg: @item-focus-bg;
@tree-select-treenode-active-bg: @item-active-bg;
@tree-select-content-wrapper-hover-bg: transparent;
@tree-select-content-wrapper-tree-node-selected-bg: transparent;
// Tag
// --
@tag-default-bg: @primary-color;
@tag-default-color: @text-color-dark;
@tag-multiple-color: rgba(255, 255, 255, 0.72);
@tag-font-size: @font-size-sm;
@tag-font-weight: inherit;
@tag-margin: 0 0.02rem;
@tag-padding: 0 0.08rem;
@tag-height: 0.22rem;
@tag-line-height: 0.2rem;
@tag-default-border-color: @tag-default-bg;
@tag-border: @border-width-base @border-style-base @tag-default-border-color;
@tag-has-color-color: #fff;
@tag-checkable-bg: transparent;
@tag-checkable-border-color: transparent;
@tag-checkable-not-checked-hover-color: @primary-color;
@tag-checkable-color: #000;
@tag-checkable-checked-color: #fff;
@tag-checkable-checked-bg: @primary-6;
@tag-checkable-active-bg: @primary-7;
@tag-checkable-not-checked-active-bg: transparent;
@tag-close-icon-font-weight: bold;
// TimePicker
// ---
@time-picker-panel-column-width: 0.56rem;
@time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @background-color-base;
// Carousel
// ---
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;
@carousel-dot-active-bg: #fff;
@carousel-dot-padding: 0rem;
@carousel-dot-text-align: center;
@carousel-dot-border-radius: 0.01rem;
@carousel-btn-bg: rgba(191, 191, 191, 1);
@carousel-arrows-bg: fade(@carousel-btn-bg, 15%);
@carousel-arrows-hover-bg: fade(@carousel-btn-bg, 30%);
@carousel-dark-color: rgba(38, 38, 38, 1);
@carousel-icon-font-size: 0.2rem;
// Badge
// ---
@badge-height: 0.2rem;
@badge-height-sm: 0.14rem;
@badge-dot-size: 0.06rem;
@badge-font-size: @font-size-sm;
@badge-font-size-sm: @font-size-sm;
@badge-font-weight: normal;
@badge-status-size: 0.06rem;
@badge-text-color: @text-color;
@badge-corner-background: @highlight-color;
@badge-corner-box-shadow: @shadow-3;
@badge-processing-color: @processing-color;
// Rate
// ---
@rate-star-color: @yellow-6;
@rate-star-bg: #d8d8d8;
@rate-line-height: 1;
// Card
// ---
@card-margin: 0rem;
@card-padding: 0rem;
@card-head-margin: 0 0 -0.01rem 0;
@card-head-border-bottom: @border-width-base @border-style-base @border-color-split;
@card-title-padding: @card-head-padding 0;
@card-extra-padding: calc(@card-head-padding + 0.015rem) 0;
@card-body-padding: @card-padding-base;
@card-body-color: unset;
@card-discription-color: @text-color-secondary;
@card-cover-margin: unset;
@card-actions-item-border-right: @border-width-base @border-style-base @border-color-split;
@card-actions-item-margin: 0.12rem 0;
@card-actions-item-padding: unset;
@card-grid-body-padding: 0rem;
@card-grid-body-margin: -0.01rem 0 0 -0.01rem;
@card-loading-body-padding: 0rem;
@card-head-color: @heading-color;
@card-head-background: @component-background;
@card-head-padding: 0.16rem;
@card-inner-head-padding: 0.12rem;
@card-inner-head-title-padding: @card-inner-head-padding 0;
@card-inner-head-title-font-size: @font-size-base;
@card-inner-extra-padding: calc(@card-inner-head-padding + 0.015rem) 0;
@card-inner-body-padding: 0.16rem @card-padding-base;
@card-padding-base: 0.24rem;
@card-padding-wider: 0.32rem;
@card-actions-background: @background-color-light;
@card-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.09);
@card-head-height: 0.48rem;
@card-hover-border: rgba(0, 0, 0, 0.09);
@card-gird-padding: @card-padding-base;
@card-wider-padding-body: @card-padding-base @card-padding-wider;
@card-wider-padding-head: 0 @card-padding-wider;
// Tabs
// ---
@tab-primary-color: @primary-color;
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 0.4rem;
@tabs-card-active-color: @tab-primary-color;
@tabs-title-font-size: @font-size-base;
@tabs-title-font-size-lg: @font-size-lg;
@tabs-title-font-size-sm: @font-size-base;
@tabs-ink-bar-bg-color: @tab-primary-color;
@tabs-ink-bar-display: block;
@tab-bar-margin: 0 0 0.16rem 0;
@tab-bar-padding: 0rem;
@tab-horizontal-margin: 0 0.32rem 0 0;
@tab-vertical-margin: 0 0 0.16rem 0;
@tab-horizontal-padding-vertical: 0.08rem;
@tab-horizontal-padding-horizontal: 0rem;
@tab-horizontal-padding: @tab-horizontal-padding-vertical @tab-horizontal-padding-horizontal;
@tab-vertical-padding-vertical: @tab-horizontal-padding-vertical;
@tab-vertical-padding-horizontal: 0.24rem;
@tab-vertical-padding: @tab-vertical-padding-vertical @tab-vertical-padding-horizontal;
@tab-scrolling-size: 0.32rem;
@tab-highlight-color: @tab-primary-color;
@tab-highlight-font-weight: 500;
@tab-normal-color: rgba(0, 0, 0, 0.87);
@tab-hover-color: color(~`colorPalette('@{tab-primary-color}', 5) `);
@tab-active-color: color(~`colorPalette('@{tab-primary-color}', 7) `);
@tabs-groups-ink-bar-display: @tabs-ink-bar-display;
@tab-groups-padding: 0.02rem;
@tab-groups-bar-padding: @tab-bar-padding;
@tab-groups-horizontal-padding: @tab-horizontal-padding;
@tab-groups-vertical-padding: @tab-vertical-padding;
@tabs-tab-horizontal-padding-sm: 0.08rem 0;
@tabs-tab-horizontal-padding-lg: 0.16rem;
@tabs-second-tab-color: rgba(0, 0, 0, 0.45);
@tabs-bar-top-border-bottom: @border-width-base @border-style-base @border-color-split;
@tabs-bar-bottom-border-top: @border-width-base @border-style-base @border-color-split;
@tabs-bar-vertical-right-border-left: @border-width-base @border-style-base @border-color-split;
@tabs-bar-vertical-left-border-right: @border-width-base @border-style-base @border-color-split;
@tabs-ink-bar-bottom: 0.01rem;
@tabs-ink-bar-height: 0.02rem;
@tabs-ink-bar-zindex: 1;
@tabs-card-tab-padding: 0 0.16rem;
@tabs-card-tab-border: @border-width-base @border-style-base @border-color-split;
@tabs-groups-group-bg-color: rgba(0, 0, 0, 0.05);
@tabs-groups-group-border-radius: 0rem;
@tabs-groups-group-item-line-height: unset;
@tabs-groups-group-item-font-size: .14rem;
@tabs-groups-group-item-color: rgba(0, 0, 0, 0.45);
@tabs-groups-group-item-padding: 0.03rem .08rem;
@tabs-groups-group-item-border-radius: 0rem;
@tabs-groups-group-item-active-color: @text-color;
@tabs-groups-group-item-selected-color: rgba(0, 0, 0, 0.8);
@tabs-groups-group-item-selected-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
@tabs-bar-divider-margin: auto .15rem;
@tabs-vertical-left-content-padding: 0 0 0 0.24rem;
@tabs-card-bar-border: @border-width-base @border-style-base @border-color-split;
@tabs-card-min-width: @tabs-card-height;
@tabs-card-active-background: @component-background;
@tabs-card-border-radius: @border-radius-base @border-radius-base 0 0;
@tabs-card-tab-margin-right: 0.02rem;
@tabs-card-font-size: @tabs-title-font-size;
@tabs-arrow-show-border: unset;
@tabs-groups-tab-font-size: unset;
@tabs-badge-content-size: 0.12rem;
@tabs-customization-text-icon-margin: unset;
@tabs-customization-drag-icon-margin: unset;
@tabs-customization-drag-icon-color: @text-color-secondary;
@tabs-card-arrow-show-border: @tabs-arrow-show-border;
@tabs-arrow-show-hover-color: @text-color;
@tabs-card-arrow-show-border-radius: unset;
@tabs-card-arrow-show-background-color: unset;
@tabs-card-arrow-show-hover-background-color: unset;
@tabs-card-hover-background: @tab