// 这里放 css 自定义变量 :root { --black: #{$black}; --white: #{$white}; // 因为运行不支持颜色计算，所以用 css 变量的方式需要多定义几个变量 --primary: #{$primary}; --primary-onHover: #{darken($primary, 7.5%)}; --primary-onActive: #{darken($primary, 10%)}; --secondary: #{$secondary}; --secondary-onHover: #{darken($secondary, 7.5%)}; --secondary-onActive: #{darken($secondary, 10%)}; --success: #{$success}; --success-onHover: #{darken($success, 7.5%)}; --success-onActive: #{darken($success, 10%)}; --info: #{$info}; --info-onHover: #{darken($info, 7.5%)}; --info-onActive: #{darken($info, 10%)}; --warning: #{$warning}; --warning-onHover: #{darken($warning, 7.5%)}; --warning-onActive: #{darken($warning, 10%)}; --danger: #{$danger}; --danger-onHover: #{darken($danger, 7.5%)}; --danger-onActive: #{darken($danger, 10%)}; --light: #{$light}; --dark: #{$dark}; --fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --fontFamilyBase: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Segoe UI', Roboto, 'Hiragino Sans GB', 'Arial', 'microsoft yahei ui', 'Microsoft YaHei', SimSun, sans-serif; --fontSizeBase: #{px2rem(14px)}; --fontSizeMd: #{px2rem(16px)}; --fontSizeLg: #{px2rem(20px)}; --fontSizeXl: #{px2rem(24px)}; --fontSizeSm: #{px2rem(12px)}; --fontSizeXs: #{px2rem(11px)}; --text-color: #{$text-color}; --button-color: #{$white}; --animation-duration: 0.2s; --text--muted-color: #{lighten($text-color, 25%)}; --text--loud-color: #{darken($text-color, 10%)}; --pre-color: var(--text-color); --borderColor: #{$borderColor}; --borderColorLight: #{lighten($borderColor, 5%)}; --borderRadius: 0.142rem; --borderRadiusMd: 0.285rem; --borderRadiusLg: 0.428rem; --boxShadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --boxShadowSm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --lineHeightBase: 1.5; --body-lineHeight: var(--lineHeightBase); --borderWidth: #{px2rem(1px)}; --fontWeightNormal: 400; --fontWeightBase: var(--fontWeightNormal); --fontWeightBold: 700; --background: var(--white); --code-color: var(--danger); --code-background: var(--background); --pre-background: var(--background); --link-color: var(--info); --link-decoration: none; --link-onHover-color: var(--info-onHover); --link-onHover-decoration: underline; --body-bg: var(--light); --body-size: var(--fontSizeBase); --body-color: var(--text-color); --body-weight: var(--fontWeightBase); --gap-xs: #{px2rem(5px)}; --gap-sm: #{px2rem(10px)}; --gap-base: #{px2rem(15px)}; --gap-md: #{px2rem(20px)}; --gap-lg: #{px2rem(30px)}; --icon-color: #{$gray600}; --icon-onHover-color: #{$gray900}; --icon-onDisabled-color: #{$gray500}; --label--default-bg: #{$gray700}; --label--primary-bg: var(--primary); --label--success-bg: var(--success); --label--info-bg: var(--info); --label--warning-bg: var(--warning); --label--danger-bg: var(--danger); --label-color: #fff; --label-link--hover-color: #fff; --scrollbar-width: #{px2rem(17px)}; // 以下是分组件的 --Alert--danger-bg: #f2dede; --Alert--danger-borderColor: #{darken(adjust-hue(#f2dede, -10), 5%)}; --Alert--danger-color: #a94442; --Alert--info-bg: #d9edf7; --Alert--info-borderColor: #{darken(adjust-hue($info, -10), 5%)}; --Alert--info-color: #31708f; --Alert--success-bg: #dff0d8; --Alert--success-borderColor: #{darken(adjust-hue(#dff0d8, -10), 5%)}; --Alert--success-color: #3c763d; --Alert--warning-bg: #fcf8e3; --Alert--warning-borderColor: #{darken(adjust-hue(#fcf8e3, -10), 5%)}; --Alert--warning-color: #8a6d3b; --Alert-borderColor: transparent; --Alert-borderRadius: var(--borderRadiusMd); --Alert-borderWidth: var(--borderWidth); --Alert-boxShadow: none; --Alert-fontSize: var(--fontSizeBase); --Alert-marginBottom: var(--gap-md); --Alert-paddingX: var(--gap-base); --Alert-paddingY: var(--gap-base); --Audio-border: #{px2rem(1px)} solid #dee2e6; --Audio-height: #{px2rem(50px)}; --Audio-input-width: #{px2rem(80px)}; --Audio-item-margin: #{px2rem(10px)}; --Audio-lineHeight: #{px2rem(50px)}; --Audio-play-top: #{px2rem(5px)}; --Audio-play-width: #{px2rem(20px)}; --Audio-process-minWidth: #{px2rem(80px)}; --Audio-rate-bg: #dee2e6; --Audio-rate-height: #{px2rem(50px)}; --Audio-rate-lineHeight: #{px2rem(50px)}; --Audio-rate-width: #{px2rem(40px)}; --Audio-rateControlItem-bg: #dee2e6; --Audio-rateControlItem-borderRight: #{px2rem(1px)} solid #d3dae0; --Audio-svg-height: #{px2rem(20px)}; --Audio-svg-top: #{px2rem(6px)}; --Audio-svg-width: #{px2rem(20px)}; --Audio-thumb-bg: #606670; --Audio-thumb-height: #{px2rem(14px)}; --Audio-thumb-marginTop: #{px2rem(-5px)}; --Audio-thumb-width: #{px2rem(14px)}; --Audio-times-margin: 0 #{px2rem(5px)}; --Audio-times-width: #{px2rem(75px)}; --Audio-track-bg: #d7dbdd; --Audio-track-border: #{px2rem(1px)} solid transparent; --Audio-track-borderRadius: #{px2rem(3px)}; --Audio-track-height: #{px2rem(6px)}; --Audio-volume-height: #{px2rem(50px)}; --Audio-volume-lineHeight: #{px2rem(50px)}; --Audio-volume-width: #{px2rem(20px)}; --Audio-volumeControl-width: #{px2rem(110px)}; --Button--danger-bg: var(--danger); --Button--danger-border: var(--Button--danger-bg); --Button--danger-color: var(--button-color); --Button--danger-onActive-bg: var(--danger-onActive); --Button--danger-onActive-border: #{darken($danger, 12.5%)}; --Button--danger-onActive-color: var(--Button--danger-color); --Button--danger-onHover-bg: var(--danger-onHover); --Button--danger-onHover-border: var(--danger-onActive); --Button--danger-onHover-color: var(--Button--danger-color); --Button--dark-bg: var(--dark); --Button--dark-border: var(--Button--dark-bg); --Button--dark-color: var(--button-color); --Button--dark-onActive-bg: #{darken($dark, 10%)}; --Button--dark-onActive-border: #{darken($dark, 12.5%)}; --Button--dark-onActive-color: var(--Button--dark-color); --Button--dark-onHover-bg: #{darken($dark, 7.5%)}; --Button--dark-onHover-border: #{darken($dark, 10%)}; --Button--dark-onHover-color: var(--Button--dark-color); --Button--default-bg: var(--white); --Button--default-border: var(--borderColor); --Button--default-color: var(--text-color); --Button--default-onActive-bg: #{darken($white, 10%)}; --Button--default-onActive-border: #{darken($borderColor, 12.5%)}; --Button--default-onActive-color: var(--Button--default-color); --Button--default-onHover-bg: #{darken($white, 7.5%)}; --Button--default-onHover-border: #{darken($borderColor, 10%)}; --Button--default-onHover-color: var(--Button--default-color); --Button--iconOnly-minWidthRate: 4 / 3; --Button--info-bg: var(--info); --Button--info-border: var(--Button--info-bg); --Button--info-color: var(--button-color); --Button--info-onActive-bg: var(--info-onActive); --Button--info-onActive-border: #{darken($info, 12.5%)}; --Button--info-onActive-color: var(--Button--info-color); --Button--info-onHover-bg: var(--info-onHover); --Button--info-onHover-border: var(--info-onActive); --Button--info-onHover-color: var(--Button--info-color); --Button--lg-borderRadius: var(--borderRadius); --Button--lg-fontSize: var(--fontSizeLg); --Button--lg-height: #{px2rem(46px)}; --Button--lg-lineHeight: 24 / 20; --Button--lg-paddingX: #{px2rem(16px)}; --Button--lg-paddingY: calc( ( var(--Button--lg-height) - var(--Button-borderWidth) * 2 - var(--Button--lg-lineHeight) * var(--Button--lg-fontSize) ) / 2 ); --Button--light-bg: var(--light); --Button--light-border: var(--borderColor); --Button--light-color: var(--text-color); --Button--light-onActive-bg: #{darken($light, 10%)}; --Button--light-onActive-border: #{darken($light, 12.5%)}; --Button--light-onActive-color: var(--Button--light-color); --Button--light-onHover-bg: #{darken($light, 7.5%)}; --Button--light-onHover-border: #{darken($light, 10%)}; --Button--light-onHover-color: var(--Button--light-color); --Button--link-color: var(--text-color); --Button--link-onDisabled-color: #{$gray600}; --Button--link-onHover-color: var(--text--loud-color); --Button--md-fontSize: var(--Button-fontSize); --Button--md-height: var(--Button-height); --Button--md-lineHeight: var(--Button-lineHeight); --Button--md-paddingX: var(--Button-paddingX); --Button--md-paddingY: calc( ( var(--Button--md-height) - var(--Button-borderWidth) * 2 - var(--Button--md-lineHeight) * var(--Button--md-fontSize) ) / 2 ); --Button--primary-bg: var(--primary); --Button--primary-border: var(--Button--primary-bg); --Button--primary-color: var(--button-color); --Button--primary-onActive-bg: var(--primary-onActive); --Button--primary-onActive-border: #{darken($primary, 12.5%)}; --Button--primary-onActive-color: var(--Button--primary-color); --Button--primary-onHover-bg: var(--primary-onHover); --Button--primary-onHover-border: var(--primary-onActive); --Button--primary-onHover-color: var(--Button--primary-color); --Button--secondary-bg: var(--secondary); --Button--secondary-border: var(--Button--secondary-bg); --Button--secondary-color: var(--button-color); --Button--secondary-onActive-bg: var(--secondary-onActive); --Button--secondary-onActive-border: #{darken($secondary, 12.5%)}; --Button--secondary-onActive-color: var(--Button--secondary-color); --Button--secondary-onHover-bg: var(--secondary-onHover); --Button--secondary-onHover-border: var(--secondary-onActive); --Button--secondary-onHover-color: var(--Button--secondary-color); --Button--sm-borderRadius: var(--borderRadius); --Button--sm-fontSize: var(--fontSizeSm); --Button--sm-height: #{px2rem(30px)}; --Button--sm-lineHeight: 18 / 12; --Button--sm-paddingX: #{px2rem(8px)}; --Button--sm-paddingY: calc( ( var(--Button--sm-height) - var(--Button-borderWidth) * 2 - var(--Button--sm-lineHeight) * var(--Button--sm-fontSize) ) / 2 ); --Button--success-bg: var(--success); --Button--success-border: var(--Button--success-bg); --Button--success-color: var(--button-color); --Button--success-onActive-bg: var(--success-onActive); --Button--success-onActive-border: #{darken($success, 12.5%)}; --Button--success-onActive-color: var(--Button--success-color); --Button--success-onHover-bg: var(--success-onHover); --Button--success-onHover-border: var(--success-onActive); --Button--success-onHover-color: var(--Button--success-color); --Button--warning-bg: var(--warning); --Button--warning-border: var(--Button--warning-bg); --Button--warning-color: var(--button-color); --Button--warning-onActive-bg: var(--warning-onActive); --Button--warning-onActive-border: #{darken($warning, 12.5%)}; --Button--warning-onActive-color: var(--Button--warning-color); --Button--warning-onHover-bg: var(--warning-onHover); --Button--warning-onHover-border: var(--warning-onActive); --Button--warning-onHover-color: var(--Button--warning-color); --Button--xs-fontSize: var(--fontSizeXs); --Button--xs-height: #{px2rem(22px)}; --Button--xs-lineHeight: 18 / 11; --Button--xs-paddingX: #{px2rem(5px)}; --Button--xs-paddingY: calc( ( var(--Button--xs-height) - var(--Button-borderWidth) * 2 - var(--Button--xs-lineHeight) * var(--Button--xs-fontSize) ) / 2 ); --Button-borderRadius: var(--borderRadius); --Button-borderWidth: var(--Form-input-borderWidth); --Button-boxShadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); --Button-textShadow: none; --Button-fontSize: var(--Form-input-fontSize); --Button-fontWeight: var(--fontWeightNormal); --Button-height: var(--Form-input-height); --Button-lineHeight: var(--Form-input-lineHeight); --Button-mimWidth: auto; --Button-onActive-boxShadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --Button-onDisabled-borderColor: #dee2e6; --Button-onDisabled-opacity: 0.65; --Button-onFocus-boxShadow: none; --Button-paddingX: #{px2rem(12px)}; --Button-paddingY: calc( ( var(--Button-height) - var(--Button-borderWidth) * 2 - var(--Button-lineHeight) * var(--Button-fontSize) ) / 2 ); --Button-transition: color var(--animation-duration) ease-in-out, background-color var(--animation-duration) ease-in-out, border-color var(--animation-duration) ease-in-out, box-shadow var(--animation-duration) ease-in-out; --ButtonGroup--primary-isActive-color: var(--white); --ButtonGroup--primary-isActive-bg: var(--primary); --Calendar-btn-bg: var(--info); --Calendar-btn-border: var(--Calendar-btn-bg); --Calendar-btn-borderRadius: var(--Button-borderRadius); --Calendar-btn-color: var(--white); --Calendar-btn-fontSize: var(--fontSizeSm); --Calendar-btn-height: #{px2rem(30px)}; --Calendar-btn-lineHeight: var(--lineHeightBase); --Calendar-btn-onActive-bg: #{darken($info, 10%)}; --Calendar-btn-onActive-border: #{darken($info, 12.5%)}; --Calendar-btn-onActive-color: var(--Calendar-btn-color); --Calendar-btn-onHover-bg: #{darken($info, 7.5%)}; --Calendar-btn-onHover-border: #{darken($info, 10%)}; --Calendar-btn-onHover-color: var(--Calendar-btn-color); --Calendar-btn-paddingX: #{px2rem(10px)}; --Calendar-btn-paddingY: calc( ( var(--Calendar-btn-height) - var(--Calendar-btn-lineHeight) * var(--Calendar-btn-fontSize) ) / 2 ); --Calendar-btnCancel-bg: var(--light); --Calendar-btnCancel-border: var(--Button--default-border); --Calendar-btnCancel-borderRadius: var(--Button-borderRadius); --Calendar-btnCancel-color: var(--text-color); --Calendar-btnCancel-onActive-bg: var(--Button--default-onActive-bg); --Calendar-btnCancel-onActive-border: var(--Button--default-onActive-border); --Calendar-btnCancel-onActive-color: var(--Button--default-onActive-color); --Calendar-btnCancel-onHover-bg: var(--Button--default-onHover-bg); --Calendar-btnCancel-onHover-border: var(--Button--default-onHover-border); --Calendar-btnCancel-onHover-color: var(--Button--default-onHover-color); --Calendar-cell-bg: var(--white); --Calendar-cell-onActive-bg: var(--info); --Calendar-cell-onBetween-bg: #{rgba($info, 0.1)}; --Calendar-cell-onDisabled-bg: var(--light); --Calendar-cell-onHover-bg: #{darken($white, 7%)}; --Calendar-color: var(--text-color); --Calendar-fontSize: var(--fontSizeBase); --Calendar-input-borderColor: var(--borderColor); --Calendar-input-borderRadius: var(--borderRadius); --Calendar-input-color: var(--info); --Calendar-input-fontSize: var(--fontSizeBase); --Calendar-input-height: #{px2rem(30px)}; --Calendar-input-lineHeight: var(--lineHeightBase); --Calendar-input-onFocused-borderColor: var(--info); --Calendar-input-paddingX: #{px2rem(10px)}; --Calendar-input-paddingY: calc( ( var(--Calendar-input-height) - var(--Calendar-input-lineHeight) * var(--Calendar-input-fontSize) ) / 2 ); --Calendar-shortcut-color: var(--info); --Calendar-shortcut-decoration: none; --Calendar-shortcut-onHover-color: #{darken($info, 15%)}; --Calendar-shortcut-onHover-decoration: none; --Calendar-shortcuts-bg: transparent; --Calendar-shortcuts-height: #{px2rem(30px)}; --Calendar-wLabel-color: #999; --Card-actions-borderColor: #{lighten($borderColor, 5%)}; --Card-actions-fontSize: var(--fontSizeBase); --Card-actions-onChecked-onHover-bg: #{darken(#d9f3fb, 5%)}; --Card-actions-onChecked-onHover-color: #{darken(darken(#d9f3fb, 40%), 10%)}; --Card-actions-onHover-bg: #{darken($white, 5%)}; --Card-actions-onHover-color: #{darken($gray900, 5%)}; --Card-bg: var(--white); --Card-borderColor: var(--borderColor); --Card-borderRadius: var(--borderRadius); --Card-borderWidth: var(--borderWidth); --Card-onChecked-bg: #d9f3fb; --Card-onChecked-borderColor: #{darken(#d9f3fb, 10%)}; --Card-onChecked-color: #{darken(#d9f3fb, 40%)}; --Card-onChecked-fieldLabel-color: #{lighten(darken(#d9f3fb, 40%), 20%)}; --Card-onDragging-opacity: 0.1; --Card-onModified-bg: #e8f0fe; --Card-onModified-borderColor: #{darken(#e8f0fe, 10%)}; --Card-onModified-color: #4285f4; --Card-onModified-fieldLabel-color: #{lighten(#4285f4, 20%)}; --Card-onModified-onHover-bg: #{darken(#e8f0fe, 5%)}; --Card-onModified-onHover-color: #{darken(#4285f4, 10%)}; --Cards--unsaved-heading-bg: #e8f0fe; --Cards--unsaved-heading-color: #4285f4; --Cards-fixedTop-boxShadow: var(--boxShadow); --Cards-placeholder-height: #{px2rem(100px)}; --Cards-toolbar-paddingX: 0; --Cards-toolbar-paddingY: 0; --Carousel--dark-control: black; --Carousel--light-control: white; --Carousel-arrowControl-height: #{px2rem(20px)}; --Carousel-arrowControl-width: #{px2rem(20px)}; --Carousel-bg: #f6f8f8; --Carousel-dot-borderRadius: #{px2rem(4px)}; --Carousel-dot-height: #{px2rem(8px)}; --Carousel-dot-margin: #{px2rem(7px)} #{px2rem(5px)}; --Carousel-dot-width: #{px2rem(8px)}; --Carousel-height: #{px2rem(200px)}; --Carousel-imageDescription-bottom: #{px2rem(25px)}; --Carousel-imageTitle-bottom: #{px2rem(45px)}; --Carousel-minWidth: #{px2rem(100px)}; --Carousel-svg-height: #{px2rem(20px)}; --Carousel-svg-width: #{px2rem(20px)}; --Carousel-transitionDuration: var(--animation-duration); --Checkbox--full-inner-size: #{px2rem(12px)}; --Checkbox--sm--full-inner-size: #{px2rem(10px)}; --Checkbox--sm-inner-size: calc(var(--Checkbox--sm-size) / 2); --Checkbox--sm-size: #{px2rem(16px)}; --Checkbox-borderRadius: var(--borderRadius); --Checkbox-color: var(--Form-input-borderColor); --Checkbox-gap: var(--gap-sm); --Checkbox-gb: #fff; --Checkbox-inner-size: calc(var(--Checkbox-size) / 2); --Checkbox-onHover-color: var(--info); --Checkbox-onDisabled-bg: #e5e7eb; --Checkbox-onDisabled-color: var(--text--muted-color); --Checkbox-size: #{px2rem(20px)}; --ColorPicker-bg: var(--white); --ColorPicker-borderColor: var(--Form-input-borderColor); --ColorPicker-borderRadius: var(--Form-input-borderRadius); --ColorPicker-borderWidth: var(--Form-input-borderWidth); --ColorPicker-color: var(--Form-input-color); --ColorPicker-fontSize: var(--Form-input-fontSize); --ColorPicker-height: var(--Form-input-height); --ColorPicker-lineHeight: var(--Form-input-lineHeight); --ColorPicker-onDisabled-bg: #{$gray200}; --ColorPicker-onDisabled-color: var(--text--muted-color); --ColorPicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor); --ColorPicker-onHover-bg: #{darken($white, 5%)}; --ColorPicker-onHover-borderColor: var(--borderColor); --ColorPicker-paddingX: #{px2rem(12px)}; --ColorPicker-paddingY: calc( ( var(--ColorPicker-height) - var(--ColorPicker-lineHeight) * var(--ColorPicker-fontSize) ) / 2 - var(--ColorPicker-borderWidth) ); --ColorPicker-placeholderColor: var(--Form-input-placeholderColor); --Combo--horizontal-dragger-top: var(--Form-label-paddingTop); --Combo--horizontal-item-gap: #{px2rem(5px)}; --Combo--vertical-item-borderColor: var(--borderColor); --Combo--vertical-item-borderRadius: var(--borderRadius); --Combo--vertical-item-borderWidth: var(--borderWidth); --Combo--vertical-item-gap: #{px2rem(5px)}; --Combo--vertical-item-onHover-borderColor: var(--info); --Combo--vertical-item-paddingX: #{px2rem(10px)}; --Combo--vertical-item-paddingY: #{px2rem(10px)}; --Combo-addBtn-bg: var(--Button--info-bg); --Combo-addBtn-border: var(--Button--info-border); --Combo-addBtn-borderRadius: var(--Button-borderRadius); --Combo-addBtn-color: var(--Button--info-color); --Combo-addBtn-fontSize: var(--Button--sm-fontSize); --Combo-addBtn-height: #{px2rem(26px)}; --Combo-addBtn-lineHeight: var(--Button--sm-lineHeight); --Combo-addBtn-onActive-bg: #{darken($info, 10%)}; --Combo-addBtn-onActive-border: #{darken($borderColor, 12.5%)}; --Combo-addBtn-onActive-color: var(--Combo-addBtn-color); --Combo-addBtn-onHover-bg: #{darken($info, 7.5%)}; --Combo-addBtn-onHover-border: #{darken($borderColor, 10%)}; --Combo-addBtn-onHover-color: var(--Combo-addBtn-color); --Combo-addBtn-paddingX: var(--Button--sm-paddingX); --Combo-addBtn-paddingY: calc( ( var(--Combo-addBtn-height) - var(--Button-borderWidth) * 2 - var(--Combo-addBtn-lineHeight) * var(--Combo-addBtn-fontSize) ) / 2 ); --Combo-items-marginBottom: var(--gap-sm); --Combo-toolbarBtn-color: var(--icon-color); --Combo-toolbarBtn-height: #{px2rem(20px)}; --Combo-toolbarBtn-lineHeight: 1; --Combo-toolbarBtn-onHover-color: #{darken($gray600, 10%)}; --Combo-toolbarBtn-paddingX: #{px2rem(5px)}; --Combo-toolbarBtn-paddingY: #{px2rem(2px)}; --Copyable-iconColor: var(--icon-color); --Copyable-onHover-iconColor: var(--icon-onHover-color); --Crud-toolbar-gap: var(--gap-xs); --Crud-toolbar-height: #{px2rem(30px)}; --Crud-toolbar-lineHeight: var(--lineHeightBase); --DatePicker-bg: var(--white); --DatePicker-borderColor: var(--Form-input-borderColor); --DatePicker-borderRadius: var(--Form-input-borderRadius); --DatePicker-borderWidth: var(--Form-input-borderWidth); --DatePicker-color: var(--Form-input-color); --DatePicker-fontSize: var(--Form-input-fontSize); --DatePicker-header-select-borderColor: #fff; --DatePicker-height: var(--Form-input-height); --DatePicker-iconColor: var(--icon-color); --DatePicker-lineHeight: var(--Form-input-lineHeight); --DatePicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor); --DatePicker-onHover-bg: var(--DatePicker-bg); --DatePicker-onHover-borderColor: var(--Form-input-onFocused-borderColor); --DatePicker-onHover-iconColor: var(--icon-onHover-color); --DatePicker-paddingX: #{px2rem(12px)}; --DatePicker-paddingY: calc( ( var(--DatePicker-height) - var(--DatePicker-lineHeight) * var(--DatePicker-fontSize) ) / 2 - var(--DatePicker-borderWidth) ); --DatePicker-placeholderColor: var(--Form-input-placeholderColor); --Divider-borderStyle: dashed; --Drawer-bg: var(--background); --Drawer-body-padding: var(--gap-base); --Drawer-close-color: rgba(255, 255, 255, 0.8); --Drawer-close-onHover-color: rgba(255, 255, 255, 1); --Drawer-content-borderColor: var(--borderColor); --Drawer-content-borderRadius: 0; --Drawer-content-borderWidth: var(--borderWidth); --Drawer-footer-borderColor: #{lighten($borderColor, 5%)}; --Drawer-footer-padding: var(--gap-base); --Drawer-header-bg: #{darken($white, 2.5%)}; --Drawer-header-borderColor: #{lighten($borderColor, 5%)}; --Drawer-header-padding: var(--gap-base); --Drawer-overlay-bg: rgba(0, 0, 0, 0.6); --Drawer-title-fontColor: var(--text--loud-color); --Drawer-title-fontSize: var(--fontSizeMd); --Drawer-widthBase: 80%; --Drawer-widthLg: #{px2rem(800px)}; --Drawer-widthMd: #{px2rem(500px)}; --Drawer-widthSm: #{px2rem(300px)}; --Drawer-widthXl: 90%; --Drawer-widthXs: #{px2rem(200px)}; --DropDown-caret-marginLeft: var(--gap-sm); --DropDown-menu-bg: var(--white); --DropDown-menu-borderColor: var(--borderColor); --DropDown-menu-borderRadius: var(--borderRadius); --DropDown-menu-borderWidth: var(--borderWidth); --DropDown-menu-boxShadow: var(--boxShadow); --DropDown-menu-height: #{px2rem(34px)}; --DropDown-menu-minWidth: #{px2rem(160px)}; --DropDown-menu-paddingX: 0; --DropDown-menu-paddingY: var(--gap-xs); --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg); --DropDown-menuItem-onHover-color: inherit; --DropDown-menuItem-onActive-color: var(--info); --DropDown-menuItem-paddingX: var(--gap-sm); --DropDown-menuItem-paddingY: calc( (var(--DropDown-menu-height) - var(--fontSizeBase) * var(--lineHeightBase)) / 2 ); --Fieldset-legend-bgColor: var(--white); --Form--horizontal-gutterWidth: #{px2rem(20px)}; --Form--horizontal-label-align: right; --Form--horizontal-label-whiteSpace: 'normal'; --Form--horizontal-label-widthBase: #{px2rem(120px)}; --Form--horizontal-label-widthLg: #{px2rem(200px)}; --Form--horizontal-label-widthMd: #{px2rem(160px)}; --Form--horizontal-label-widthSm: #{px2rem(90px)}; --Form--horizontal-label-widthXs: #{px2rem(60px)}; --Form-control-widthBase: #{px2rem(200px)}; --Form-control-widthLg: #{px2rem(320px)}; --Form-control-widthMd: #{px2rem(240px)}; --Form-control-widthSm: #{px2rem(160px)}; --Form-control-widthXs: #{px2rem(80px)}; --Form-description-color: #{lighten($text-color, 10%)}; --Form-description-fontSize: var(--fontSizeSm); --Form-fontSize: var(--fontSizeBase); --Form-group--lg-gutterWidth: #{px2rem(40px)}; --Form-group--md-gutterWidth: #{px2rem(30px)}; --Form-group--sm-gutterWidth: #{px2rem(20px)}; --Form-group--xs-gutterWidth: #{px2rem(10px)}; --Form-group-gutterWidth: var(--Form--horizontal-gutterWidth); --Form-input-addOnBg: #edf1f2; --Form-input-addOnColor: var(--text-color); --Form-input-addOnDividerBorderWidth: var(--borderWidth); --Form-input-bg: var(--white); --Form-input-borderColor: var(--borderColor); --Form-input-borderRadius: var(--borderRadius); --Form-input-borderWidth: #{px2rem(1px)}; --Form-input-boxShadow: none; --Form-input-color: var(--text-color); --Form-input-fontSize: var(--Form-fontSize); --Form-input-height: #{px2rem(34px)}; --Form-input-iconColor: var(--icon-color); --Form-input-lineHeight: 1.4285714286; --Form-input-marginBottom: #{px2rem(6px)}; --Form-input-onActive-color: var(--info); --Form-input-onDisabled-bg: #{$gray200}; --Form-input-onDisabled-borderColor: var(--Form-input-borderColor); --Form-input-onError-bg: var(--Form-input-bg); --Form-input-onError-borderColor: var(--danger); --Form-input-onFocus-addOnColor: var(--primary); $Form-input-onFocused-bg: $white !default; --Form-input-onFocused-bg: var(--Form-input-bg); --Form-input-onFocused-borderColor: var(--info); --Form-input-onHover-iconColor: #{darken($gray600, 20%)}; --Form-input-onHover-bg: #{rgba($white, 0.6)}; --Form-input-onHover-borderColor: var(--Form-input-onFocused-borderColor); --Form-input-paddingX: #{px2rem(12px)}; --Form-input-paddingY: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)} ) / 2 ); --Form-input-placeholderColor: var(--text--muted-color); --Form-item-gap: #{px2rem(15px)}; --Form-label-paddingTop: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ); --Form-row-gutterWidth: #{px2rem(10px)}; --Form-select-bg: var(--white); --Form-select-borderColor: var(--Form-input-borderColor); --Form-select-borderRadius: var(--Form-input-borderRadius); --Form-select-borderWidth: var(--Form-input-borderWidth); --Form-select-caret-iconColor: var(--icon-color); --Form-select-caret-onHover-iconColor: var(--icon-onHover-color); --Form-select-checkall-bottomBorder: #eceff8; --Form-select-color: var(--text-color); --Form-select-input-fontSize: var(--fontSizeSm); --Form-select-menu-bg: var(--white); --Form-select-menu-color: var(--Form-select-color); --Form-select-menu-height: var(--Form-input-height); --Form-select-menu-onActive-bg: transparent; --Form-select-menu-onActive-color: var(--info); --Form-select-menu-onDisabled-bg: transparent; --Form-select-menu-onDisabled-color: var(--text--muted-color); --Form-select-menu-onHover-bg: rgba(0, 126, 255, 0.08); --Form-select-menu-onHover-color: var(--info); --Form-select-onError-borderColor: var(--Form-input-onError-borderColor); --Form-select-onFocused-borderColor: var(--Form-input-onFocused-borderColor); --Form-select-onFocused-color: var(--Form-select-color); --Form-select-onHover-bg: #{darken($white, 5%)}; --Form-select-onHover-borderColor: var(--Form-input-borderColor); --Form-select-outer-borderWidth: #{px2rem(1px)}; --Form-select-outer-boxShadow: none; --Form-select-paddingX: var(--Form-input-paddingX); --Form-select-placeholderColor: var(--Form-input-placeholderColor); --Form-select-popoverGap: 0; --Form-select-search-height: var(--Form-select-menu-height); --Form-selectOption-height: var(--Form-input-height); --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)}; --Form-selectValue-borderColor: #{saturate(lighten($info, 30%), 2.5%)}; --Form-selectValue-color: var(--info); --Form-selectValue-fontSize: var(--fontSizeSm); --Form-selectValue-onDisable-bg: #{lighten( saturate(lighten($info, 40%), 2.5%), 5% )}; --Form-selectValue-onHover-bg: #{darken( saturate(lighten($info, 40%), 2.5%), 5% )}; --Form-select-onFocus-boxShadow: none; --IconPicker-content-maxHeight: #{px2rem(350px)}; --IconPicker-padding: #{px2rem(5px)}; --IconPicker-selectedIcon-marginRight: #{px2rem(5px)}; --IconPicker-sugItem-height: #{px2rem(28px)}; --IconPicker-sugItem-lineHeight: #{px2rem(28px)}; --IconPicker-sugItem-width: #{px2rem(28px)}; --IconPicker-tab-height: #{px2rem(30px)}; --IconPicker-tab-lineHeight: #{px2rem(30px)}; --IconPicker-tab-onActive-bg: var(--white); --IconPicker-tab-padding: 0 #{px2rem(10px)}; --IconPicker-tabs-bg: #f0f3f4; --ImageControl-addBtn-bg: var(--Button--default-bg); --ImageControl-addBtn-border: var(--Button--default-border); --ImageControl-addBtn-color: var(--Button--default-color); --ImageControl-addBtn-onActive-bg: #{darken($white, 10%)}; --ImageControl-addBtn-onActive-border: #{darken($borderColor, 12.5%)}; --ImageControl-addBtn-onActive-color: var(--ImageControl-addBtn-color); --ImageControl-addBtn-onDisabled-bg: var(--Form-input-onDisabled-bg); --ImageControl-addBtn-onDisabled-border: var( --Form-input-onDisabled-borderColor ); --ImageControl-addBtn-onDisabled-color: var(--text--muted-color); --ImageControl-addBtn-onHover-bg: #{darken($white, 7.5%)}; --ImageControl-addBtn-onHover-border: #{darken($borderColor, 10%)}; --ImageControl-addBtn-onHover-color: var(--Button--default-color); --InputGroup-addOn-bg: var(--Form-input-addOnBg); --InputGroup-addOn-borderColor: var(--Form-input-borderColor); --InputGroup-addOn-borderRadius: var(--Form-input-borderRadius); --InputGroup-addOn-borderWidth: var(--Form-input-borderWidth); --InputGroup-addOn-onFocused-borderColor: var( --Form-input-onFocused-borderColor ); --InputGroup-button-borderColor: var(--Form-input-borderColor); --InputGroup-button-borderRadius: var(--borderRadius); --InputGroup-button-borderWidth: var(--borderWidth); --InputGroup-height: var(--Form-input-height); --InputGroup-paddingX: #{px2rem(10px)}; --InputGroup-paddingY: calc( ( var(--InputGroup-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)} ) / 2 ); --InputGroup-select-arrowColor: var(--icon-color); --InputGroup-select-bg: var(--white); --InputGroup-select-borderColor: var(--Form-select-borderColor); --InputGroup-select-borderRadius: var(--Form-select-borderRadius); --InputGroup-select-borderWidth: var(--Form-select-borderWidth); --InputGroup-select-color: var(--Form-select-color); --InputGroup-select-onFocused-arrowColor: var(--icon-onHover-color); --InputGroup-select-onFocused-bg: var(--white); --InputGroup-select-onFocused-color: var(--Form-select-onFocused-color); --InputRange-label--value-display: block; --InputRange-label--value-positionTop: #{px2rem(-36px)}; --InputRange-label--value-positionLeft: #{px2rem(-3px)}; --InputRange-label-color: var(--InputRange-neutralColor); --InputRange-label-fontSize: 0.8rem; --InputRange-label-positionBottom: -1.4rem; --InputRange-neutralColor: #aaaaaa; --InputRange-neutralLightColor: #eeeeee; --InputRange-onDisabled-color: #cccccc; --InputRange-primaryColor: var(--info); --InputRange-slider-bg: var(--InputRange-primaryColor); --InputRange-slider-border: #{px2rem(1px)} solid var(--InputRange-primaryColor); --InputRange-slider-height: #{px2rem(24px)}; --InputRange-slider-onActive-transform: scale(1.3); --InputRange-slider-onDisabled-bg: var(--InputRange-onDisabled-color); --InputRange-slider-onDisabled-border: #{px2rem(1px)} solid var(--InputRange-onDisabled-color); --InputRange-slider-onFocus-borderRadius: var(--borderRadiusMd); --InputRange-slider-onFocus-boxShadow: 0 0 0 var(--InputRange-slider-onFocus-borderRadius) #{transparentize($info, 0.8)}; --InputRange-slider-transition: transform var(--animation-duration) ease-out, box-shadow var(--animation-duration) ease-out; --InputRange-slider-width: #{px2rem(18px)}; --InputRange-sliderContainer-transition: left var(--animation-duration) ease-out; --InputRange-track-bg: var(--InputRange-neutralLightColor); --InputRange-track-height: #{px2rem(12px)}; --InputRange-track-onActive-bg: var(--InputRange-primaryColor); --InputRange-track-onDisabled-bg: var(--InputRange-neutralLightColor); --InputRange-track-transition: left var(--animation-duration) ease-out, width var(--animation-duration) ease-out; --Layout--offscreen-width: 75%; --Layout-aside--folded-width: #{px2rem(60px)}; --Layout-aside--lg-width: #{px2rem(300px)}; --Layout-aside--md-width: #{px2rem(250px)}; --Layout-aside--sm-width: #{px2rem(150px)}; --Layout-aside-bg: #{$dark}; --Layout-aside-color: #{desaturate(lighten($dark, 40%), 10%)}; --Layout-aside-onAcitve-bg: #{saturate(darken($dark, 5%), 2.5%)}; --Layout-aside-onHover-bg: #{saturate(darken($dark, 3%), 2.5%)}; --Layout-aside-subList-bg: #{saturate(darken($dark, 10%), 2.5%)}; --Layout-aside-onAcitve-onHover-bg: var(--Layout-aside-onAcitve-bg); --Layout-aside-width: #{px2rem(200px)}; --Layout-asideDivider-bg: #2e3344; --Layout-asideDivider-margin: var(--gap-sm) 0; --Layout-asideLabel-color: #{darken(desaturate(lighten($dark, 40%), 10%), 10%)}; --Layout-asideLink-arrowColor: var(--Layout-asideLink-color); --Layout-asideLink-color: #b4b6bd; --Layout-asideLink-fontSize: var(--fontSizeBase); --Layout-asideLink-fontSize: var(--fontSizeBase); --Layout-asideLink-iconColor: inherit; --Layout-asideLink-onActive-arrowColor: var( --Layout-asideLink-onActive-color ); --Layout-asideLink-onActive-color: #fff; --Layout-asideLink-onHover-color: #fff; --Layout-asideLink-onHover-iconColor: inherit; --Layout-asideLink-onHover-iconSize: inherit; --Layout-brand-bg: var(--dark); --Layout-brand-color: #{lighten(desaturate(lighten($dark, 40%), 10%), 25%)}; --Layout-brandBar-color: #{desaturate(lighten($dark, 40%), 10%)}; --Layout-header-bg: var(--white); --Layout-header-boxShadow: 0 #{px2rem(2px)} #{px2rem(2px)} rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05); --Layout-header-height: #{px2rem(50px)}; --Layout-headerBar-borderBottom: none; --Layout-footer-height: #{px2rem(50px)}; --Layout-nav--folded-height: #{px2rem(50px)}; --Layout-nav--folded-height: #{px2rem(50px)}; --Layout-nav-height: #{px2rem(40px)}; --Layout-nav-height: #{px2rem(40px)}; --Layout-nav-lgHeight: #{px2rem(50px)}; --Layout-nav-lgHeight: #{px2rem(50px)}; --Layout-body-bg: var(--body-bg); --List--unsaved-heading-bg: #e8f0fe; --List--unsaved-heading-color: #4285f4; --List-bg: var(--white); --List-borderColor: var(--borderColor); --List-borderRadius: var(--borderRadius); --List-borderWidth: var(--borderWidth); --List-fixedTop-boxShadow: var(--boxShadow); --List-placeholder-height: #{px2rem(30px)}; --List-toolbar-paddingX: var(--gap-sm); --List-toolbar-paddingY: var(--gap-sm); --ListControl-fontSize: var(--Form-fontSize); --ListControl-gutterWidth: #{px2rem(10px)}; --ListControl-item-bg: var(--white); --ListControl-item-borderColor: var(--borderColor); --ListControl-item-borderWidth: var(--borderWidth); --ListControl-item-color: var(--text-color); --ListControl-item-onActive-after-borderColor: var(--primary); --ListControl-item-onActive-before-bg: var(--white); --ListControl-item-onActive-bg: var(--primary); --ListControl-item-onActive-borderColor: #{darken($primary, 10%)}; --ListControl-item-onActive-color: var(--white); --ListControl-item-onActive-onHover-bg: var(--primary); --ListControl-item-onDisabled-bg: var(--ListControl-item-bg); --ListControl-item-onDisabled-borderColor: #{lighten($borderColor, 5%)}; --ListControl-item-onDisabled-color: var(--ListControl-item-color); --ListControl-item-onDisabled-opacity: 0.6; --ListControl-item-onHover-bg: #{darken($white, 7.5%)}; --ListControl-item-onHover-borderColor: #{darken($borderColor, 10%)}; --ListControl-item-onHover-color: var(--ListControl-item-color); --ListControl-item-paddingX: #{px2rem(12px)}; --ListControl-item-paddingY: #{px2rem(6px)}; --ListControl-item-transition: none; --ListItem--strip-bg: #f6f8f8; --ListItem-borderColor: #{lighten($borderColor, 5%)}; --ListItem-borderWidth: var(--List-borderWidth); --ListItem-onChecked-bg: #d9f3fb; --ListItem-onChecked-borderColor: #{darken(#d9f3fb, 10%)}; --ListItem-onChecked-color: #{darken(#d9f3fb, 40%)}; --ListItem-onChecked-fieldLabel-color: #{lighten(darken(#d9f3fb, 40%), 20%)}; --ListItem-onDragging-opacity: 0.1; --ListItem-onModified-bg: #e8f0fe; --ListItem-onModified-borderColor: #{darken(#e8f0fe, 10%)}; --ListItem-onModified-color: #4285f4; --ListItem-onModified-fieldLabel-color: #{lighten(#4285f4, 20%)}; --ListItem-paddingX: var(--gap-base); --ListItem-paddingY: var(--gap-sm); --listMenu--onActive-borderColor: var(--info); --ListMenu-borderRadius: #{px2rem(2px)}; --ListMenu-borderWidth: #{px2rem(1px)}; --ListMenu-bordrColor: var(--borderColor); --ListMenu-divider-color: var(--borderColorLight); --ListMenu-item--onActive-bg: transparent; --ListMenu-item--onActive-color: var(--info); --ListMenu-item--onDisabled-bg: transparent; --ListMenu-item--onDisabled-color: var(--text--muted-color); --ListMenu-item--onHover-bg: rgba(0, 126, 255, 0.08); --ListMenu-item--onHover-color: var(--info); --ListMenu-item-bg: var(--white); --ListMenu-item-color: var(--text-color); --ListMenu-item-height: #{px2rem(34px)}; --Log-bg: #222; --Log-padding: var(--gap-xs) 0; --Log-line-padding: 0 var(--gap-xs); --Log-color: #f1f1f1; --Log-line--onHover-bg: #444; --Modal-bg: var(--background); --Modal-body--noHeader-paddingTop: var(--gap-base); --Modal-body-borderBottom: var(--Modal-content-borderWidth) solid #{lighten( $borderColor, 5% )}; --Modal-body-borderTop: var(--Modal-content-borderWidth) solid #{lighten( $borderColor, 5% )}; --Modal-body-paddingX: var(--gap-md); --Modal-body-paddingY: var(--gap-md); --Modal-close-color: var(--text--muted-color); --Modal-close-width: #{px2rem(12px)}; --Modal-content-borderColor: var(--borderColor); --Modal-content-borderRadius: var(--borderRadius); --Modal-content-borderWidth: var(--borderWidth); --Modal-content-minHeight: unset; --Modal-content-startMarginTop: #{px2rem(60px)}; --Modal-content-stepMarginTop: #{px2rem(30px)}; --Modal-footer-marginX: 0; --Modal-footer-marginY: 0; --Modal-footer-padding: var(--gap-sm); --Modal-header-bg: #{darken($white, 2.5%)}; --Modal-header-height: #{px2rem(40px)}; --Modal-header-paddingX: var(--gap-md); --Modal-header-paddingY: calc( ( var(--Modal-header-height) - var(--Modal-title-lineHeight) * var(--Modal-title-fontSize) ) / 2 ); --Modal-overlay-bg: rgba(0, 0, 0, 0.6); --Modal-title-color: var(--text--loud-color); --Modal-title-fontSize: var(--fontSizeBase); --Modal-title-fontWeight: normal; --Modal-title-lineHeight: var(--lineHeightBase); --Modal-widthBase: #{px2rem(500px)}; --Modal-widthLg: #{px2rem(1100px)}; --Modal-widthMd: #{px2rem(800px)}; --Modal-widthSm: #{px2rem(350px)}; --Modal-widthXl: 90%; --Model-close-onHover-color: var(--text-color); --Nav-item-bg: transparent; --Nav-item-borderRadius: var(--borderRadiusMd); --Nav-item-color: var(--text-color); --Nav-item-fontSize: var(--fontSizeBase); --Nav-item-onActive-bg: var(--info); --Nav-item-onActive-borderLeft: 4px solid transparent; --Nav-item-onActive-color: var(--white); --Nav-item-onDisabled-color: var(--text--muted-color); --Nav-item-onHover-bg: rgba(0, 0, 0, 0.05); --Nav-item-onHover-color: var(--text--loud-color); --Nav-subItem-fontSize: var(--fontSizeBase); --Nav-subItem-onActiveBeforeBg: #e5eaeb; --Number-bg: var(--Form-input-bg); --Number-borderColor: var(--Form-input-borderColor); --Number-borderRadius: var(--Form-input-borderRadius); --Number-borderWidth: var(--Form-input-borderWidth); --Number-handler--down-content: '-'; --Number-handler--up-content: '+'; --Number-handler--up-transform: none; --Number-handler-bg: var(--white); --Number-handler-borderBottom: #{px2rem(1px)} solid var(--Form-input-borderColor); --Number-handler-color: var(--Form-input-color); --Number-handler-fontFamily: inherit; --Number-handler-fontSize: var(--fontSizeBase); --Number-handler-onActive-bg: var(--Number-handler-onHover-bg); --Number-handler-onDisabled-bg: var(--Form-input-onDisabled-bg); --Number-handler-onDisabled-color: var(--text--muted-color); --Number-handler-onHover-bg: #{darken($white, 5%)}; --Number-handler-onHover-color: var(--text-color); --Number-handler-width: #{px2rem(20px)}; --Number-onDisabled-bg: var(--Form-input-bg); --Page-aside-bg: #{desaturate(darken($light, 3%), 2.5%)}; --Page-aside-maxWidth: #{px2rem(300px)}; --Page-aside-width: #{px2rem(200px)}; --Page-body-padding: var(--gap-base); --Page-content-paddingX: 0; --Page-content-paddingY: 0; --Page-header-paddingX: var(--gap-base); --Page-header-paddingY: var(--gap-base); --Page-main-bg: transparent; --Page-title-color: var(--text--loud-color); --Page-title-fontSize: var(--fontSizeMd); --Page-title-fontWeight: var(--fontWeightNormal); --Page-title-lineHeight: 1.1; --Pagination-fontSize: var(--fontSizeBase); --Pagination-height: #{px2rem(30px)}; --Pagination-minWidth: #{px2rem(30px)}; --Pagination-onActive-backgroundColor: var(--primary); --Pagination-onActive-border: 0; --Pagination-onActive-color: var(--white); --Pagination-padding: 0 #{px2rem(8px)}; --Panel--default-badgeBg: #333; --Panel--default-badgeColor: #f5f5f5; --Panel--default-bg: #f6f8f8; --Panel--default-color: var(--text-color); --Panel--default-headingBorderColor: var(--borderColor); --Panel-bg: var(--white); --Panel-bodyPadding: #{px2rem(15px)}; --Panel-border: var(--borderWidth) solid transparent; --Panel-borderRadius: var(--borderRadius); --Panel-borderWidth: #{px2rem(1px)}; --Panel-boxShadow: 0 #{px2rem(1px)} #{px2rem(1px)} rgba(0, 0, 0, 0.05); --Panel-btnToolbarTextAlign: right; --Panel-fixedBottom-borderTop: none; --Panel-fixedBottom-boxShadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15); --Panel-footerBg: transparent; --Panel-footerBorderColor: var(--borderColorLight); --Panel-footerBorderRadius: 0 0 #{px2rem(2px)} #{px2rem(2px)}; --Panel-footerButtonMarginLeft: var(--gap-sm); --Panel-footerPadding: #{px2rem(10px)} #{px2rem(15px)}; --Panel-headingBorderBottom: var(--borderWidth) solid transparent; --Panel-headingBorderRadius: var(--borderRadius) var(--borderRadius) 0 0; --Panel-headingPadding: #{px2rem(10px)} #{px2rem(15px)}; --Panel-marginBottom: #{px2rem(20px)}; --Panel-titleColor: inherit; --Panel-titleFontSize: var(--fontSizeMd); --Panel-titleMarginBottom: 0; --Panel-titleMarginTop: 0; --Picker-iconColor: var(--icon-color); --Picker-onHover-iconColor: var(--icon-onHover-color); --PopOver-bg: white; --PopOverAble-iconColor: inherit; --PopOverAble-onHover-iconColor: inherit; --QuickEdit-iconColor: inherit; --QuickEdit-onFocus-borderColor: var(--info); --QuickEdit-onFocus-borderWidth: var(--borderWidth); --QuickEdit-onHover-iconColor: inherit; --Radio--sm-size: var(--Checkbox--sm-size); --Radio-color: var(--Checkbox-color); --Radio-inner-size: calc(var(--Radio-size) / 2); --Radio-onHover-color: var(--Checkbox-onHover-color); --Radio-size: var(--Checkbox-size); --Radio-onDisabled-bg: #e5e7eb; --Radio-onDisabled-color: var(--text--muted-color); --Radio-onFocus-boxShadow: none; --Remark-bg: #fff; --Remark-borderColor: var(--borderColor); --Remark-borderWidth: #{px2rem(1px)}; --Remark-icon-fontSize: var(--fontSizeBase); --Remark-iconColor: var(--icon-color); --Remark-marginLeft: var(--gap-sm); --Remark-onHover-bg: var(--primary); --Remark-onHover-borderColor: var(--primary); --Remark-onHover-iconColor: #fff; --Remark-width: 1rem; --ResultBox-icon--onDisabled-color: #ebebeb; --ResultBox-icon--onHover-color: #666666; --ResultBox-icon-color: #999; --ResultBox-value--onDisabled-color: #cccccc; --ResultBox-value--onHover-bg: #ebebeb; --ResultBox-value-bg: #f5f5f5; --ResultBox-value-color: #000; --Rating-onActive-color: var(--info); --Satus-icon-height: var(--Satus-icon-width); --Satus-icon-width: #{px2rem(20px)}; --Sparkline-line-color: var(--info); --Sparkline-area-color: #{rgba($info, 0.1)}; --Spinner--lg-height: #{px2rem(50px)}; --Spinner--lg-width: #{px2rem(50px)}; --Spinner--sm-height: #{px2rem(16px)}; --Spinner--sm-width: #{px2rem(16px)}; --Spinner-bg: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMjAwcHgiICBoZWlnaHQ9IjIwMHB4IiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIGNsYXNzPSJsZHMtcm9sbGluZyIgc3R5bGU9ImJhY2tncm91bmQ6IG5vbmU7Ij48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSJub25lIiBuZy1hdHRyLXN0cm9rZT0ie3tjb25maWcuY29sb3J9fSIgbmctYXR0ci1zdHJva2Utd2lkdGg9Int7Y29uZmlnLndpZHRofX0iIG5nLWF0dHItcj0ie3tjb25maWcucmFkaXVzfX0iIG5nLWF0dHItc3Ryb2tlLWRhc2hhcnJheT0ie3tjb25maWcuZGFzaGFycmF5fX0iIHN0cm9rZT0iIzE3YTJiOCIgc3Ryb2tlLXdpZHRoPSIxMCIgcj0iMzUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2NC45MzM2MTQzMTM0NjQxNSA1Ni45Nzc4NzE0Mzc4MjEzOCIgdHJhbnNmb3JtPSJyb3RhdGUoMTI5Ljg5NCA1MCA1MCkiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBjYWxjTW9kZT0ibGluZWFyIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjEuMnMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L3N2Zz4K'); --Spinner-height: #{px2rem(26px)}; --Spinner-overlay-bg: rgba(255, 255, 255, 0.4); --Spinner-width: #{px2rem(26px)}; --SubForm--addBtn-bg: var(--Button--info-bg); --SubForm--addBtn-border: var(--Button--info-border); --SubForm--addBtn-borderRadius: var(--Button-borderRadius); --SubForm--addBtn-color: var(--Button--info-color); --SubForm--addBtn-fontSize: var(--Button--sm-fontSize); --SubForm--addBtn-height: var(--Button--sm-height); --SubForm--addBtn-lineHeight: var(--Button--sm-lineHeight); --SubForm--addBtn-onActive-bg: #{darken($info, 10%)}; --SubForm--addBtn-onActive-border: #{darken($info, 12.5%)}; --SubForm--addBtn-onActive-color: var(--SubForm--addBtn-color); --SubForm--addBtn-onHover-bg: #{darken($info, 7.5%)}; --SubForm--addBtn-onHover-border: #{darken($info, 10%)}; --SubForm--addBtn-onHover-color: var(--SubForm--addBtn-color); --SubForm--addBtn-paddingX: var(--Button--sm-paddingX); --SubForm--addBtn-paddingY: calc( ( var(--SubForm--addBtn-height) - var(--Button-borderWidth) * 2 - var(--SubForm--addBtn-lineHeight) * var(--SubForm--addBtn-fontSize) ) / 2 ); --Switch-bgColor: #{$gray600}; --Switch-borderColor: #{darken($gray600, 10%)}; --Switch-gap: var(--gap-sm); --Switch-height: #{px2rem(22px)}; --Switch-onActive-bgColor: var(--info); --Switch-onDisabled-bgColor: #ccc; --Switch-onDisabled-circle-BackgroundColor: var(--white); --Switch-onDisabled-color: #fff; --Switch-valueColor: var(--white); --Switch-width: #{px2rem(50px)}; --Switch-label: '关'; --Switch-checked-label: '开'; --Table--unsaved-heading-bg: #e8f0fe; --Table--unsaved-heading-color: #4285f4; --Table-bg: var(--background); --Table-borderColor: var(--borderColor); --Table-borderRadius: var(--borderRadius); --Table-borderWidth: var(--borderWidth); --Table-color: var(--text-color); --Table-expandBtn-color: var(--info); --Table-fixed-zIndex: 5; --Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); --Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); --Table-fixedTop-boxShadow: var(--boxShadow); --Table-fontSize: var(--fontSizeBase); --Table-heading-bg: var(--white); --Table-heading-height: #{px2rem(40px)}; --Table-lineHeight: var(--lineHeightBase); --Table-onChecked-bg: #d9f3fb; --Table-onChecked-borderColor: #{darken(#d9f3fb, 10%)}; --Table-onChecked-color: #{darken(#d9f3fb, 40%)}; --Table-onDragging-opacity: 0.1; // 背景用到了 rgba，所以必须再提供这种写法，搜一下这个变量就知道为什么了 --Table-onHover-bg-rgb: 243, 246, 246; --Table-onHover-bg: #{darken(lighten(#f6f8f8, 1%), 2%)}; --Table-onHover-borderColor: #{darken(darken(lighten(#f6f8f8, 1%), 2%), 10%)}; --Table-onHover-boxShadow: var(--boxShadow); --Table-onHover-color: var(--text-color); --Table-onModified-bg: #e8f0fe; --Table-onModified-borderColor: #{darken(#e8f0fe, 5%)}; --Table-onModified-color: #4285f4; --Table-placeholder-height: #{px2rem(100px)}; --Table-strip-bg: #{$Table-strip-bg}; --Table-tbody-borderTopColor: #{lighten($borderColor, 2.5%)}; --Table-thead-bg: #f6f8f8; --Table-thead-borderColor: var(--Table-borderColor); --Table-thead-borderWidth: var(--Table-borderWidth); --Table-thead-color: var(--text--loud-color); --Table-thead-fontSize: var(--fontSizeBase); --Table-thead-iconColor: var(--icon-color); --Table-toolbar-paddingX: var(--gap-sm); --Table-toolbar-paddingY: var(--gap-sm); --Table-tree-borderColor: var(--Table-borderColor); --TableCell--edge-paddingX: var(--gap-md); --TableCell-filterBtn--onActive-color: var(--primary); --TableCell-filterBtn-width: #{px2rem(16px)}; --TableCell-filterPopOver-dropDownItem-height: #{px2rem(34px)}; --TableCell-filterPopOver-dropDownItem-padding: 0 #{px2rem(12px)}; --TableCell-height: #{px2rem(40px)}; --TableCell-paddingX: var(--gap-sm); --TableCell-paddingY: calc( (var(--TableCell-height) - var(--Table-fontSize) * var(--Table-lineHeight)) / 2 ); --TableCell-searchBtn--onActive-color: var(--primary); --TableCell-searchBtn-width: #{px2rem(16px)}; --TableCell-sortBtn--default-onActive-opacity: 1; --TableCell-sortBtn--default-opacity: 0; --TableCell-sortBtn--onActive-color: var(--primary); --TableCell-sortBtn-width: #{px2rem(8px)}; --Tabs--card-bg: #f6f8f8; --Tabs--card-borderTopColor: var(--borderColor); --Tabs--card-linkMargin: 0 10px 0 0; --Tabs--card-linkPadding: #{px2rem(10px)} #{px2rem(10px)}; --Tabs--card-onActive-bg: var(--background); --Tabs--card-onActive-borderColor: var(--borderColor); --Tabs--card-padding: #{px2rem(6px)} 0 0 #{px2rem(10px)}; --Tabs--line-borderColor: var(--borderColor); --Tabs--line-borderWidth: #{px2rem(2px)}; --Tabs--line-content-bg: transparent; --Tabs--line-content-padding: 20px 0; --Tabs--line-linkMargin: 0 40px 0 0; --Tabs--line-linkPadding: 10px 0; --Tabs--line-onHover-borderColor: var(--primary); --Tabs--line-onHover-color: var(--primary); --Tabs--radio-bg: #eaf6fe; --Tabs--vertical-onActive-borderColor: var(--primary); --Tabs-borderColor: var(--borderColor); --Tabs-borderRadius: var(--borderRadius); --Tabs-borderWidth: var(--borderWidth); --Tabs-color: var(--text-color); --Tabs-content-bg: var(--background); --Tabs-linkFontSize: var(--fontSizeBase); --Tabs-linkMargin: 0 #{px2rem(3px)} 0 0; --Tabs-linkPadding: var(--gap-sm) var(--gap-base); --Tabs-onActive-bg: var(--background); --Tabs-onActive-borderColor: var(--borderColor); --Tabs-onActive-color: #{$gray700}; --Tabs-onDisabled-color: #{$gray600}; --Tabs-onHover-borderColor: #{$gray200}; --Tabs--vertical-bg: var(--Table-thead-bg); --Tabs--vertical-width: #{px2rem(140px)}; --Tabs--vertical-onActive-color: var(--primary); --Tabs--vertical-onActive-border: var(--primary); --Tabs--vertical-onActive-bg: var(--Tabs--vertical-bg); --Tabs--vertical-onActive-borderWidth: 0 0 0 #{px2rem(4px)}; --Tabs--vertical-onActive-container-borderRight: none; --Tabs--vertical-onActive-container-bg: var(--Tabs--vertical-bg); --Tabs--chrome-onHover-bg: #f6f7f8; --Tabs--chrome-bg: #e7eaed; --TagControl-sugBtn-bg: var(--Button--default-bg); --TagControl-sugBtn-border: var(--Button--default-border); --TagControl-sugBtn-borderRadius: var(--Button-borderRadius); --TagControl-sugBtn-borderWidth: var(--Button-borderWidth); --TagControl-sugBtn-color: var(--Button--default-color); --TagControl-sugBtn-fontSize: var(--Button--sm-fontSize); --TagControl-sugBtn-height: var(--Button--sm-height); --TagControl-sugBtn-lineHeight: var(--Button--sm-lineHeight); --TagControl-sugBtn-onActive-bg: #{darken($white, 10%)}; --TagControl-sugBtn-onActive-border: #{darken($borderColor, 12.5%)}; --TagControl-sugBtn-onActive-color: var(--TagControl-sugBtn-color); --TagControl-sugBtn-onHover-bg: #{darken($white, 7.5%)}; --TagControl-sugBtn-onHover-border: #{darken($borderColor, 10%)}; --TagControl-sugBtn-onHover-color: var(--Button--default-color); --TagControl-sugBtn-paddingX: var(--Button--sm-paddingX); --TagControl-sugBtn-paddingY: calc( ( var(--TagControl-sugBtn-height) - var(--Button-borderWidth) * 2 - var(--TagControl-sugBtn-lineHeight) * var(--TagControl-sugBtn-fontSize) ) / 2 ); --TagControl-sugTip-color: var(--info); --Toast--danger-bgColor: var(--danger); --Toast--danger-borderColor: var(--danger); --Toast--danger-color: var(--Toast-color); --Toast--info-bgColor: var(--info); --Toast--info-borderColor: var(--info); --Toast--info-color: var(--Toast-color); --Toast--success-bgColor: var(--success); --Toast--success-borderColor: var(--success); --Toast--success-color: var(--Toast-color); --Toast--warning-bgColor: var(--warning); --Toast--warning-borderColor: var(--warning); --Toast--warning-color: var(--Toast-color); --Toast-border-width: 0; --Toast-borderRadius: var(--borderRadiusLg); --Toast-box-shadow: var(--boxShadow); --Toast-close--onHover-color: var(--Toast-close-color); --Toast-close-color: var(--white); --Toast-color: var(--white); --Toast-icon-height: var(--Toast-icon-width); --Toast-icon-width: #{px2rem(30px)}; --Toast-opacity: 0.8; --Toast-paddingL: #{px2rem(40px)}; --Toast-paddingX: var(--gap-base); --Toast-paddingY: var(--gap-base); --Toast-title-display: block; --Toast-width: #{px2rem(300px)}; --Tooltip--attr-bg: rgba(0, 0, 0, 0.7); --Tooltip--attr-borderColor: var(--borderColor); --Tooltip--attr-borderRadius: var(--borderRadius); --Tooltip--attr-borderWidth: 0; --Tooltip--attr-boxShadow: var(--boxShadow); --Tooltip--attr-color: var(--background); --Tooltip--attr-fontSize: var(--fontSizeSm); --Tooltip--attr-gap: var(--gap-sm); --Tooltip--attr-lineHeigt: var(--lineHeightBase); --Tooltip--attr-paddingX: #{px2rem(10px)}; --Tooltip--attr-paddingY: #{px2rem(2px)}; --Tooltip--attr-transition: all var(--animation-duration) ease-in-out; --Tooltip-arrow-color: var(--Tooltip-bg); --Tooltip-arrow-color: var(--Tooltip-bg); --Tooltip-arrow-height: #{px2rem(8px)}; --Tooltip-arrow-height: 0.5rem; --Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)}; --Tooltip-arrow-width: #{px2rem(16px)}; --Tooltip-arrow-width: 1rem; --Tooltip-bg: var(--background); --Tooltip-body-color: var(--text-color); --Tooltip-body-paddingX: var(--gap-sm); --Tooltip-body-paddingY: var(--gap-sm); --Tooltip-borderColor: var(--borderColor); --Tooltip-borderRadius: var(--borderRadiusLg); --Tooltip-borderWidth: var(--borderWidth); --Tooltip-boxShadow: var(--boxShadow); --Tooltip-fontSize: var(--fontSizeSm); --Tooltip-maxWidth: #{px2rem(240px)}; --Tooltip-minWidth: auto; --Tooltip-title-bg: #{darken($white, 3%)}; --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)}; --Tooltip-title-color: var(--text--loud-color); --Tooltip-title-paddingX: var(--gap-sm); --Tooltip-title-paddingY: var(--gap-xs); --Transfer-title-bg: #f6f8f8; --Tree-indent: #{px2rem(20px)}; --Tree-inputHeight: calc(var(--Form-input-height) * 0.85); --Tree-item-onHover-bg: rgba(0, 126, 255, 0.08); --Tree-itemArrowWidth: #{px2rem(10px)}; --Tree-itemHeight: #{px2rem(30px)}; --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color); --TreeSelect-popover-bg: #fff; --Wizard-badge-bg: #{$gray400}; --Wizard-badge-border: 0; --Wizard-badge-borderRadius: #{px2rem(10px)}; --Wizard-badge-color: var(--white); --Wizard-badge-fontSize: var(--fontSizeSm); --Wizard-badge-marginRight: #{px2rem(4px)}; --Wizard-badge-onActive-backgroundColor: var(--info); --Wizard-badge-size: #{px2rem(20px)}; --Wizard-steps-bg--isComplete: #f1f5f9; --Wizard-steps-bg: #{$gray100}; --Wizard-steps-borderWidth: #{px2rem(1px)}; --Wizard-steps-height: #{px2rem(40px)}; --Wizard-steps-li-onActive-arrow-bg: #fff; --Wizard-steps-li-onActive-bg: #fff; --Wizard-steps-li-onActive-color: var(--info); --Wizard-steps-liAfterContent: ''; --Wizard-steps-liVender: ''; --Wizard-steps-padding: 0; --Wizard-steps-textAlign: left; --Wizard-steps-ulDisplay: block; --Wizard-stepsContent-padding: #{px2rem(15px)}; }