shineout 1.12.2 → 1.12.3

package/esm/styles/themes/shineout.less

@@ -0,0 +1,806 @@
+@import './bootstrap.less';
+@import './cssvar.less';
+
+@font-family-sans-serif:  -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino KaKu Gothic Pro, Microsoft YaHei, Arial, sans-serif;
+
+@colors-primary-value: #197AFA;
+@colors-primary: var(--primary-color, @colors-primary-value);
+@colors-blue: @colors-primary;
+
+@colors-secondary-value: #666c7c;
+@colors-secondary: var(--secondary-color, @colors-secondary-value);
+
+@colors-green: #52c41a;
+@colors-success-value: @colors-green;
+@colors-success: var(--success-color, @colors-success-value);
+
+@colors-cyan: #197AFA;
+@colors-info-value: @colors-cyan;
+@colors-info: var(--info-color, @colors-info-value);
+
+@colors-yellow: #ff8c00;
+@colors-warning-value: @colors-yellow;
+@colors-warning: var(--warning-color, @colors-warning-value);
+
+@colors-red: #ff4d50;
+@colors-danger-value: @colors-red;
+@colors-danger: var(--danger-color, @colors-danger-value);
+
+@gray-100-value: #f4f5f8;
+@gray-200-value: #e8ebf0;
+@gray-300-value: #cccfd7;
+@gray-400-value: #b3b7c1;
+@gray-500-value: #999da8;
+@gray-600-value: #666c7c;
+@gray-700-value: #333e59;
+@gray-800-value: #141737;
+@gray-900-value: #020b18;
+
+@common-spin-default-name: var(--common-spin-default-name, ring);
+@common-caret-style: var(--common-caret-style, line);
+
+
+@state-success-text: @gray-700;
+@state-success-bg: #f1faeb;
+@state-success-border: rgba(116, 209, 61, 0.1);
+
+@state-info-text: @gray-700;
+@state-info-bg: #e8f1fe;
+@state-info-border: rgba(25, 122, 250, 0.1);
+
+@state-warning-text: @gray-700;
+@state-warning-bg: #fff6eb;
+@state-warning-border: rgba(255, 169, 64, 0.1);
+
+@state-danger-text: @gray-700;
+@state-danger-bg: #ffeded;
+@state-danger-border: rgba(255, 77, 80, 0.1);
+
+
+
+// button
+// Button
+@btn-circle-width: 32px;
+@btn-circle-small-width: 24px;
+@btn-circle-large-width: 40px;
+@btn-default-border-color-value: #d9d9d9;
+@btn-default-border: var(--button-default-border, @btn-default-border-color-value);
+@btn-primary-border: @colors-primary;
+@btn-warning-border: @colors-warning;
+@btn-success-border: @colors-success;
+@btn-info-border: @colors-info;
+@btn-danger-border: @colors-danger;
+@btn-hover-darken: -5%;
+
+// button radius
+@button-border-radius-value: 4px;
+@btn-border-radius-base: var(--button-border-radius, @button-border-radius-value);
+@button-small-border-radius-value: 4px;
+@btn-border-radius-small: var(--button-small-border-radius, @button-small-border-radius-value);
+@button-large-border-radius-value: 4px;
+@btn-border-radius-large: var(--button-large-border-radius, @button-large-border-radius-value);
+
+// button font size
+@font-size-large: @font-size-large-medium;
+@button-font-size-large-value: @font-size-large;
+@button-font-size-large: var(--button-font-size-large, @button-font-size-large-value);
+
+// button margin left
+@button-margin-left-value: 8px;
+@button-margin-left: var(--button-margin-left, @button-margin-left-value);
+
+// button loading margin
+@button-spin-margin-value: 4px;
+@button-spin-margin: var(--button-spin-margin, @button-spin-margin-value);
+
+
+// button padding base
+@padding-base-horizontal: 8px;
+@padding-base-vertical: 5px;
+@button-padding-base-horizontal-value: @padding-base-horizontal;
+@btn-padding-x: var(--button-padding-base-horizontal, @button-padding-base-horizontal-value);
+@button-padding-base-vertical-value: @padding-base-vertical;
+@btn-padding-y: var(--button-padding-base-vertical, @button-padding-base-vertical-value);
+
+// button padding large
+@padding-large-horizontal: 12px;
+@padding-large-vertical: 8px;
+@button-padding-large-horizontal-value: @padding-large-horizontal;
+@btn-padding-large-x: var(--button-padding-large-horizontal, @button-padding-large-horizontal-value);
+@button-padding-large-vertical-value: @padding-large-vertical;
+@btn-padding-large-y: var(--button-padding-large-vertical, @button-padding-large-vertical-value);
+
+
+// button padding small
+@padding-small-horizontal: 8px;
+@padding-small-vertical: 2px;
+// @padding-large-vertical: 8px;
+@button-padding-small-horizontal-value: @padding-small-horizontal;
+@btn-padding-small-x: var(--button-padding-small-horizontal, @button-padding-small-horizontal-value);
+@button-padding-small-vertical-value: @padding-small-vertical;
+@btn-padding-small-y: var(--button-padding-small-vertical, @button-padding-small-vertical-value);
+
+
+// button disabled background
+@button-disabled-bg-value: @gray-300;
+@button-disabled-bg: var(--button-disabled-bg, @button-disabled-bg-value);
+
+// button disabled color
+@button-disabled-color-value: white;
+@button-disabled-color: var(--button-disabled-color, @button-disabled-color-value);
+
+@button-disabled-border-color: var(--button-disabled-border-color, @button-disabled-bg);
+
+@button-disabled-opacity: 0.65;
+// button default text color
+@btn-default-color: #333e59;
+
+
+// dropdown
+// dropdown border width
+@dropdown-border-width-value: 1px;
+@dropdown-default-border-width-color: transparent;
+@dropdown-default-border-width-hover-color: transparent;
+
+// columns padding
+@dropdown-columns-padding: var(--dropdown-columns-padding, 8px);
+
+// options hover background
+@dropdown-link-hover-bg: rgba(25, 122, 250, 0.1);
+
+// options hover color
+@dropdown-link-hover-color: @colors-primary;
+
+@dropdown-link-active-bg-value: #f2f2f2;
+@dropdown-link-active-bg: var(--select-item-active-bg, @dropdown-link-active-bg-value);
+
+@dropdown-link-active-color-value: rgba(0, 0, 0, 0.65);
+@dropdown-link-active-color: var(--select-item-active-color, @dropdown-link-active-color-value);
+
+@dropdown-padding-x: 12px;
+@dropdown-padding-y: 0;
+@dropdown-item-padding-y: 6px;
+@dropdown-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+@dropdown-border: transparent;
+@dropdown-link-color: rgba(0, 0, 0, 0.65);
+@dropdown-arrow-vertical: auto;
+
+
+
+// cascader
+// active
+@cascader-active-background-color: var(--cascader-active-background-color, #E6F5FF);
+@cascader-active-color: var(--cascader-active-color, @colors-primary);
+
+
+
+// checkbox
+// border width
+@checkbox-border-width-value: 2px;
+
+// color
+@checkinput-color: var(--checkinput-color, @gray-700-value);
+
+// border color
+@checkbox-border-color-value: @gray-300;
+@checkbox-border-color: var(--checkbox-border-color, @checkbox-border-color-value);
+
+
+// datepicker
+// @datepicker-day-hover-bg: #e6f7ff;
+@datepicker-day-hover-bgc-value: #e6f7ff;
+
+
+// form
+// form item margin bottom
+@form-group-margin-bottom-value: 12px;
+// @form-group-margin-bottom: var(--form-item-margin-bottom, @form-group-margin-bottom-value);
+
+// form item margin right
+@form-inline-margin-right-value: 16px;
+
+// form tip color
+@form-tip-color-value: @gray-500;
+
+// form tip font size
+@form-tip-font-size: var(--form-tip-font-size, 14px);
+
+// form label x align
+@form-item-label-align-value: end;
+
+
+// input
+// disabled background color
+@input-bg-disabled-value: #f5f6fb;
+@input-bg-disabled: var(--input-bg-disabled, @input-bg-disabled-value);
+
+// border color
+@input-border-value: @gray-300-value;
+@input-border: var(--input-border-color, @input-border-value);
+
+// hover / focus / active
+@input-border-focus-value: #197AFA;
+@input-border-focus: var(--input-border-focus-color, @input-border-focus-value);
+
+// placeholder color
+@input-color-placeholder-value: @gray-400-value;
+@input-color-placeholder: var(--input-placeholder-color, @input-color-placeholder-value);
+
+@input-focus-width-value: 0px;
+@input-focus-width: var(--input-focus-width, @input-focus-width-value);
+
+
+// radio
+// size
+@radio-width-value: 16px;
+
+// border width
+@radio-border-width-value: 6px;
+
+// inner width
+@radio-inner-width-value: 0px;
+
+// unlock border width
+@radio-border-uncheck-width-value: 2px;
+
+// color
+@radio-text-color: var(--radio-text-color, @gray-900-value);
+
+
+// select
+// item color
+@select-option-color-value: @gray-700-value;
+@select-option-color: var(--select-option-color, @select-option-color-value);
+
+// item backgroud
+@select-option-bg-color: var(--select-option-bg-color, white);
+
+// disabled background
+@select-disabled-bg-color: var(--select-disabled-bg-color, white);
+
+// disabled color
+@select-disabled-color: var(--select-disabled-color, @gray-400-value);
+
+// item active background
+@select-option-active-bgc: var(--select-item-active-bg, white);
+
+// item active color
+@select-option-active-color: var(--select-item-active-color, @colors-primary);
+
+// option hover
+@select-option-hover-bg: var(--select-option-hover-bg, rgba(25, 122, 250, 0.1));
+@select-option-hover-color: var(--select-option-hover-color, @colors-primary);
+
+// compressed more hover bgc
+@select-compressed-hover-bg: var(--select-compressed-hover-bg, @colors-primary);
+
+// clear icon bgc
+@select-clear-bg-color: var(--select-clear-bg-color, @gray-400-value);
+
+
+// slider
+// indicator bgc
+@slider-indicator-bg: var(--slider-indicator-bg, #fff);
+
+// indicator size
+@slider-indicator-size-value: 16px;
+@slider-indicator-size: var(--slider-indicator-size, @slider-indicator-size-value);
+
+// bar bgc
+@slider-bar-bgc: var(--slider-bar-color, @gray-200-value);
+
+// disabled bar bgc
+@slider-disabled-bar-bg: var(--slider-disabled-bar-bg, @gray-300-value);
+
+// disabled indicator border color
+@slider-disbaled-indicator-border-color: var(--slider-disbaled-indicator-border-color, @gray-300-value);
+
+// disabled indicator bgc
+@slider-disbaled-indicator-bg-value: rgb(204, 207, 215) none repeat scroll 0% 0% / auto padding-box border-box;
+@slider-disbaled-indicator-bg: var(--slider-disbaled-indicator-bg, @slider-disbaled-indicator-bg-value);
+
+// value bottom
+@slider-value-bottom: var(--slider-value-bottom, 16px);
+
+// border radius
+@slider-border-radius: var(--slider-border-radius, 8px);
+
+
+// switch
+@switch-type: inner;
+@switch-checked-bg: var(--switch-checked-bg, @colors-primary);
+@switch-indicator-uncheck-bg: #fff;
+@switch-indicator-checked-bg: var(--switch-indicator-checked-bg, #fff);
+@switch-checked-box-shadow: var(--switch-checked-box-shadow, 0 1px 4px @gray-500-value);
+// @switch-uncheck-box-shadow: 0 1px 4px @gray-500;
+@switch-indicator-padding-horizontal: var(--switch-indicator-padding-horizontal, 2px);
+@switch-indicator-padding-horizontal-negative: var(--switch-indicator-padding-horizontal-negative, -2px);
+@switch-indicator-size: var(--switch-indicator-size, 18px);
+@switch-bg-width: 44px;
+@switch-bg-border-radius: (@switch-bg-width / 2);
+@switch-bg-height: var(--switch-bg-height, 22px);
+@switch-font-size: 12px;
+@switch-indicator-top: var(--switch-indicator-top, 2px);
+
+@switch-small-indicator-size: var(--switch-small-indicator-size, 12px);
+@switch-small-bg-width: 28px;
+@switch-small-bg-border-radius: @switch-small-bg-width / 2;
+@switch-small-bg-height: var(--switch-small-bg-height, 16px);
+@switch-small-indicator-top: var(--switch-small-indicator-top, 2px);
+
+@switch-large-indicator-size: var(--switch-large-indicator-size, 24px);
+@switch-large-bg-width: 60px;
+@switch-large-bg-border-radius: (@switch-large-bg-width / 2);
+@switch-large-bg-height: var(--switch-large-bg-height, 28px);
+@switch-large-indicator-top: var(--switch-large-indicator-top, 2px);
+
+@switch-small-indicator-padding: 0px;
+
+// uncheck bgc
+@switch-uncheck-bg: var(--switch-unchecked-bg, @gray-300-value);
+
+
+// pagination
+@pagination-hover-border-value: @colors-primary;
+@pagination-hover-border: var(--pagination-hover-border, @pagination-hover-border-value);
+
+@pagination-hover-bg-value: rgba(25, 122, 250, 0.1);
+@pagination-hover-bg: var(--pagination-hover-bg, @pagination-hover-bg-value);
+
+@pagination-hover-color-value: @colors-primary;
+@pagination-hover-color: var(--pagination-hover-color, @pagination-hover-color-value);
+
+@pagination-border-width-value: 0px;
+@pagination-border-width: var(--pagination-border-width, @pagination-border-width-value);
+
+
+// table
+// head bgc
+@table-head-bg-value: @gray-200-value;
+
+// head color
+@table-head-color-value: @gray-700-value;
+@table-head-color: var(--table-head-color, @table-head-color-value);
+
+// head font weight
+@table-head-font-weight-value: 500;
+
+// border color
+@table-border-color-value: @gray-300;
+@table-border-color: var(--table-border-color, @table-border-color-value);
+
+// hover bgc
+@table-bg-hover-value: #e8f1fe;
+@table-bg-hover: var(--table-hover-bg, @table-bg-hover-value);
+
+// selected bgc
+@table-selected-row-bg: var(--table-selected-row-bg, #f3f8ff);
+
+// color
+@table-color-value: @gray-700-value;
+@table-color: var(--table-color, @table-color-value);
+
+// header cell padding
+@table-header-cell-padding: var(--table-header-cell-padding, 8px);
+
+// small cell padding
+@table-small-cell-padding: var(--table-small-cell-padding, 4px 8px);
+
+// cell padding x
+@table-cell-padding-horizontal-value: 8px;
+@table-cell-padding-horizontal: var(--table-cell-padding-horizontal, @table-cell-padding-horizontal-value);
+
+// cell padding y
+@table-cell-padding-vertical-value: 8px;
+@table-cell-padding-vertical: var(--table-cell-padding-vertical, @table-cell-padding-vertical-value);
+
+// fixed start / end
+@table-fixed-start-color: var(--table-fixed-start-color, rgba(25, 122, 250, 0.15));
+@table-fixed-end-color: var(--table-fixed-end-color, transparent);
+
+// table even / odd
+@table-even-td-bgc: var(--table-even-td-bgc, @gray-100-value);
+@table-odd-td-bgc: var(--table-odd-td-bgc, #fff);
+
+// margin bottom
+@table-margin-bottom: var(--table-margin-bottom, 24px);
+
+@table-cell-padding: 16px;
+@table-head-border: 1px;
+@table-condensed-cell-padding: 10px 16px;
+
+
+
+// tree
+// indicator color
+@tree-indicator-color: var(--tree-indicator-color, @gray-400-value);
+
+// Alert
+@alert-padding-y-value: 8px;
+
+// close color
+@alert-close-color-value: @gray-400-value;
+@alert-close-color: var(--alert-close-color, @alert-close-color-value);
+
+// close hover color
+@alert-close-hover-color-value: @gray-700-value;
+@alert-close-hover-color: var(--alert-close-hover-color, @alert-close-hover-color-value);
+
+// success box shadow
+@alert-success-box-shadow-value: 0px 2px 4px 0px rgba(116, 209, 61, 0.1);
+@alert-success-box-shadow: var(--alert-success-box-shadow, @alert-success-box-shadow-value);
+// success text color
+@alert-success-text-value: @gray-700-value;
+@alert-success-text: var(--alert-success-text-color, @alert-success-text-value);
+@alert-success-text-darken-10-value: darken(@alert-success-text-value, 10%);
+@alert-success-text-darken-10: var(--alert-success-text-darken-10-color, @alert-success-text-darken-10-value);
+// success bgc
+@alert-success-bg-value: #edf9e8;
+@alert-success-bg: var(--alert-success-bg, @alert-success-bg-value);
+// success border color
+@alert-success-border-value: rgba(82, 196, 26, 0.1);
+@alert-success-border: var(--alert-success-border-color, @alert-success-border-value);
+@alert-success-border-darken-5-value: darken(@alert-success-border-value, 5%);
+@alert-success-border-darken-5: var(--alert-success-border-darken-5-color, @alert-success-border-darken-5-value);
+
+// info
+@alert-info-box-shadow-value:  0px 2px 4px 0px rgba(25, 122, 250, 0.1);
+@alert-info-box-shadow: var(--alert-info-box-shadow, @alert-info-box-shadow-value);
+// info text
+@alert-info-text-value: @gray-700-value;
+@alert-info-text: var(--alert-info-text-color, @alert-info-text-value);
+@alert-info-text-darken-10-vlaue: darken(@alert-info-text-value, 10%);
+@alert-info-text-darken-10: var(--alert-info-text-darken-10-color, @alert-info-text-darken-10-vlaue);
+// info bgc
+@alert-info-bg-value: #e8f1fe;
+@alert-info-bg: var(--alert-info-bg, @alert-info-bg-value);
+// border color
+@alert-info-border-value: rgba(25, 122, 250, 0.1);
+@alert-info-border: var(--alert-info-border-color, @alert-info-border-value);
+@alert-info-border-darken-5-value: darken(@alert-info-border-value, 5%);
+@alert-info-border-darken-5: var(--alert-info-border-darken-5-color, @alert-info-border-darken-5-value);
+
+// warning
+@alert-warning-box-shadow-value: 0px 2px 4px 0px rgba(255, 169, 64, 0.1);
+@alert-warning-box-shadow: var(--alert-warning-box-shadow, @alert-warning-box-shadow-value);
+// warn text
+@alert-warning-text-value: @gray-700-value;
+@alert-warning-text: var(--alert-warning-text-color, @alert-warning-text-value);
+@alert-warning-text-darken-10-vlaue: darken(@alert-warning-text-value, 10%);
+@alert-warning-text-darken-10: var(--alert-warning-text-darken-10-color, @alert-warning-text-darken-10-vlaue);
+// warn bgc
+@alert-warning-bg-value: #fff3e5;
+@alert-warning-bg: var(--alert-warning-bg, @alert-warning-bg-value);
+// warn border
+@alert-warning-border-value: rgba(255, 140, 0, 0.1);
+@alert-warning-border: var(--alert-warning-border-color, @alert-warning-border-value);
+@alert-warning-border-darken-5-value: darken(@alert-warning-border-value, 5%);
+@alert-warning-border-darken-5: var(--alert-warning-border-darken-5-color, @alert-warning-border-darken-5-value);
+
+// danger
+@alert-danger-box-shadow-value:  0px 2px 4px 0px rgba(255, 77, 80, 0.1);
+@alert-danger-box-shadow: var(--alert-danger-box-shadow, @alert-danger-box-shadow-value);
+// danger text
+@alert-danger-text-value: @gray-700-value;
+@alert-danger-text: var(--alert-danger-text-color, @alert-danger-text-value);
+@alert-danger-text-darken-10-vlaue: darken(@alert-danger-text-value, 10%);
+@alert-danger-text-darken-10: var(--alert-danger-text-darken-10-color, @alert-danger-text-darken-10-vlaue);
+// danger bgc
+@alert-danger-bg-value: #ffeded;
+@alert-danger-bg: var(--alert-danger-bg, @alert-danger-bg-value);
+// danger border
+@alert-danger-border-value: rgba(255, 77, 80, 0.1);
+@alert-danger-border: var(--alert-danger-border-color, @alert-danger-border-value);
+@alert-danger-border-darken-5-value: darken(@alert-danger-border-value, 5%);
+@alert-danger-border-darken-5: var(--alert-danger-border-darken-5-color, @alert-danger-border-darken-5-value);
+
+
+// message
+// box-shadow
+@message-box-shadow-value:  0px 4px 8px 0px rgba(20, 23, 55, 0.15);
+@message-box-shadow: var(--message-box-shadow, @message-box-shadow-value);
+
+// close color
+@message-close-color: var(--message-close-color, @gray-400);
+
+// color
+@message-text-color-value: @gray-700-value;
+@message-text-color: var(--message-text-color, @message-text-color-value);
+
+// border color
+@message-border-color: var(--message-border-color, @gray-200-value);
+
+
+
+// modal
+// font family
+@modal-title-font: var(--modal-title-font, inherit);
+
+// font size
+@modal-font-size: var(--modal-font-size, 14px);
+
+// icon size
+@modal-icon-size-value: 20px;
+@modal-icon-size: var(--modal-icon-size, @modal-icon-size-value);
+
+// icon top / left
+@modal-icon-top: var(--modal-icon-top, 2px);
+@modal-icon-left: var(--modal-icon-left, 0px);
+
+// close icon color
+@modal-close-icon-color-value: @gray-400-value;
+@modal-close-icon-color: var(--modal-close-icon-color, @modal-close-icon-color-value);
+
+// close icon hover
+@modal-close-icon-hover-color-value: @colors-primary;
+@modal-close-icon-hover-color: var(--modal-close-icon-hover-color, @modal-close-icon-hover-color-value);
+
+// close icon top margin
+@modal-close-top-margin: var(--modal-close-top-margin, 0px);
+
+// close icon right margin
+@modal-close-right-margin: var(--modal-close-right-margin, 0px);
+
+// title font size
+@modal-title-font-size-value: 16px;
+@modal-title-font-size: var(--modal-title-font-size, @modal-title-font-size-value);
+
+// padding
+@modal-panel-padding-value: 24px;
+@modal-panel-padding: var(--modal-panel-padding, @modal-panel-padding-value);
+
+// header padding
+@modal-header-padding: var(--modal-header-padding, 0px 24px 24px 0px);
+@modal-header-padding-top: var(--modal-header-padding-top, 0px);
+@modal-header-padding-right: var(--modal-header-padding-right, 24px);
+@modal-header-padding-bottom: var(--modal-header-padding-bottom, 24px);
+@modal-header-padding-left: var(--modal-header-padding-left, 0px);
+// body padding
+@modal-body-padding-top: var(--modal-body-padding-top, 0px);
+@modal-body-padding-right: var(--modal-body-padding-right, 0px);
+@modal-body-padding-bottom: var(--modal-body-padding-bottom, 0px);
+@modal-body-padding-left: var(--modal-body-padding-left, 0px);
+// footer padding
+@modal-footer-padding: var(--modal-footer-padding, 24px 0px 0px);
+// icon body padding
+@modal-icon-body-padding: var(--modal-icon-body-padding, 0px 0px 0px 28px);
+@modal-icon-body-padding-top: var(--modal-icon-body-padding-top, 0px);
+@modal-icon-body-padding-right: var(--modal-icon-body-padding-right, 0px);
+@modal-icon-body-padding-bottom: var(--modal-icon-body-padding-bottom, 0px);
+@modal-icon-body-padding-left: var(--modal-icon-body-padding-left, 28px);
+
+// border radius
+@modal-border-radius: var(--modal-border-radius, 8px);
+
+// border width
+@modal-border-width: var(--modal-border-width, 0px);
+
+// divider height / width
+@modal-divider-height: var(--modal-divider-height, 0px);
+@modal-divider-width: var(--modal-divider-width, 100%);
+
+// border color
+@modal-border-color: var(--modal-border-color, @gray-200-value);
+
+// divider color
+@modal-divider-color: var(--modal-divider-color, @gray-200-value);
+
+// color
+@modal-color: var(--modal-color, @gray-900-value);
+
+// title color
+@modal-title-color-value: @gray-800-value;
+@modal-title-color: var(--modal-title-color, @modal-title-color-value);
+
+// foot color / bgc
+@modal-footer-bg: var(--modal-footer-bg, white);
+@modal-footer-color: var(--modal-footer-color, @gray-900-value);
+
+// box shadow
+@modal-box-shadow: var(--modal-box-shadow, 0px 4px 8px 0px rgba(20, 23, 55, 0.1));
+
+// modal title distance to the right
+@modal-title-distance-to-right: 24px;
+
+// popover
+// border color
+@popover-arrow-outer-color-value: @gray-200-value;
+@popover-arrow-outer-color: var(--popover-border-color, @popover-arrow-outer-color-value);
+
+// box shadow
+@popover-box-shadow-value:  0px 4px 8px 0px rgba(20, 23, 55, 0.1);
+@popover-box-shadow: var(--popover-box-shadow, @popover-box-shadow-value);
+
+// text font size
+@popover-text-font-size: var(--popover-text-font-size, 12px);
+
+
+
+
+// tag
+// bgc
+@tag-bg-color: var(--tag-bg, @gray-200-value);
+
+// success bgc
+@tag-success-bg: var(--tag-success-bg, rgba(82, 196, 26, 0.15));
+// info bgc
+@tag-info-bg: var(--tag-info-bg, rgba(25, 122, 250, 0.1));
+// warn
+@tag-warning-bg: var(--tag-warning-bg, rgba(255, 140, 0, 0.1));
+// danger
+@tag-danger-bg: var(--tag-danger-bg, rgba(255, 77, 80, 0.1));
+
+
+// color
+@tag-color: var(--tag-color, @gray-700-value);
+// success
+@tag-success-color: var(--tag-success-color, @colors-success);
+// info
+@tag-info-color: var(--tag-info-color, @colors-primary);
+// warn
+@tag-warning-color: var(--tag-warning-color, @colors-warning);
+// danger
+@tag-danger-color: var(--tag-danger-color, @colors-danger);
+
+// border color
+@tag-border-color-value: rgba(232, 235, 240, 0);
+@tag-border-color: var(--tag-border-color, @tag-border-color-value);
+
+// close color
+@tag-close-color-value: @gray-500-value;
+@tag-close-color: var(--tag-close-color, @tag-close-color-value);
+
+// close hover color
+@tag-close-hover-color-value: @gray-700-value;
+@tag-close-hover-color: var(--tag-close-hover-color, @tag-close-hover-color-value);
+
+// border radius
+@tag-border-radius-value: 4px;
+@tag-border-radius: var(--tag-border-radius, @tag-border-radius-value);
+
+// padding x
+@tag-padding-x-value: 8px;
+@tag-padding-x: var(--tag-padding-horizontal, @tag-padding-x-value);
+
+// padding y
+@tag-padding-y-value: 3px;
+@tag-padding-y: var(--tag-padding-vertical, @tag-padding-y-value);
+
+// font weight
+@tag-font-weight-value: 400;
+@tag-font-weight: var(--tag-font-weight, @tag-font-weight-value);
+
+@tag-font-size: 80%;
+@tag-input-padding-y: 2px;
+
+
+
+// tooltip
+// bgc
+@tooltip-bg-value: rgba(20, 23, 55, 0.9);
+@tooltip-bg: var(--tooltip-bg, @tooltip-bg-value);
+
+
+
+// card
+// font size
+@card-font-size-value: 14px;
+@card-font-size: var(--card-font-size, @card-font-size-value);
+
+// padding
+// header
+@panel-header-padding-horizontal-value: 16px;
+@panel-header-padding-horizontal: var(--panel-header-padding-horizontal, @panel-header-padding-horizontal-value);
+
+@panel-header-padding-vertical-value: 16px;
+@panel-header-padding-vertical: var(--panel-header-padding-vertical, @panel-header-padding-vertical-value);
+// body
+@panel-body-padding-horizontal-value: 16px;
+@panel-body-padding-horizontal: var(--panel-body-padding-horizontal, @panel-body-padding-horizontal-value);
+
+@panel-body-padding-vertical-value: 16px;
+@panel-body-padding-vertical: var(--panel-body-padding-vertical, @panel-body-padding-vertical-value);
+// footer
+@panel-footer-padding-horizontal-value: 16px;
+@panel-footer-padding-horizontal: var(--panel-footer-padding-horizontal, @panel-footer-padding-horizontal-value);
+
+@panel-footer-padding-vertical-value: 16px;
+@panel-footer-padding-vertical: var(--panel-footer-padding-vertical, @panel-footer-padding-vertical-value);
+
+// border radius
+@panel-border-radius-value: 8px;
+@panel-border-radius: var(--panel-border-radius, @panel-border-radius-value);
+
+// divider
+// height
+@card-divider-height-value: 0px;
+@card-divider-height: var(--card-divider-height, @card-divider-height-value);
+// width
+@card-divider-width-value: 0;
+@card-divider-width: var(--card-divider-width, @card-divider-width-value);
+
+// border color
+@card-border-color-value: @gray-200-value;
+@card-border-color: var(--card-border-color, @card-border-color-value);
+
+// divider color
+@card-divider-color: var(--card-divider-color, @gray-200-value);
+
+// text color
+@card-color-value: @gray-700-value;
+@card-color: var(--card-color, @card-color-value);
+
+// box shadow
+@panel-box-shadow-value:  0px 4px 8px 0px rgba(20, 23, 55, 0.1);
+@panel-box-shadow: var(--card-box-shadow, @panel-box-shadow-value);
+
+// header color
+@card-header-color-value: @gray-800-value;
+@card-header-color: var(--card-header-color, @card-header-color-value);
+
+// footer color
+@card-footer-color-value: @gray-700-value;
+@card-footer-color: var(--card-footer-color, @card-footer-color-value);
+
+
+
+
+// menu
+// dark bgc
+@menu-dark-bg-value: #070922;
+@menu-dark-bg: var(--menu-dark-bg, @menu-dark-bg-value);
+
+@menu-root-node-bgc: var(--menu-root-node-bgc, #141737);
+
+@menu-children-segmentation: var(--menu-children-segmentation, #293053);
+
+// dark color
+@menu-dark-item-value: rgba(255, 255, 255, 0.7);
+@menu-dark-item: var(--menu-dark-color, @menu-dark-item-value);
+
+// dark ative bgc
+@menu-dark-active-bg-value: @colors-primary;
+@menu-dark-active-bg: var(--menu-dark-acitve-bg, @menu-dark-active-bg-value);
+
+// active bgc
+@menu-item-active-bg-value: rgba(25, 122, 250, 0.1);
+@menu-item-active-bg: var(--menu-item-active-bg, @menu-item-active-bg-value);
+
+// active color
+@menu-item-active-color-value: @colors-primary;
+@menu-item-active-color: var(--menu-item-active-color, @menu-item-active-color-value);
+
+// color
+@menu-item-color-value: @gray-900-value;
+@menu-item-color: var(--menu-item-color, @menu-item-color-value);
+
+// item dark hover color
+@menu-item-dark-hover-bgc: var(--menu-item-dark-hover-bgc, fade(@colors-primary-value, 50%));
+
+@menu-title-transform: translateY(-75%) rotate(45deg);
+@menu-title-transform-origin: 75% 75%;
+@menu-title-open-transform: translateY(-75%) rotate(225deg);
+@menu-title-vertical-transform: translateY(-75%) rotate(-45deg);
+@menu-title-vertical-transform: translateY(-75%) rotate(-45deg);
+@menu-title-vertical-transform-rtl: translateY(-75%) rotate(135deg);
+
+@menu-caret-solid-width: 4px;
+@menu-caret-solid-height: 4px;
+
+
+
+
+
+
+
+//breadcrumb
+@breadcrumb-bg: transparent;
+@breadcrumb-a-color: rgba(0, 0, 0, 0.45);
+@breadcrumb-active-color: rgba(0, 0, 0, 0.85);
+
+
+
+
+@caret-width: 6px;
+
+@ease-in-out: 0.3s;