forked from p96170835/amis
Drawer 优化
This commit is contained in:
liaoxuezhi
parent
6753472ce7
commit
d4d55d5a15
|
|
@ -35,31 +35,17 @@ $dark: $gray800 !default;
|
|||
$remFactor: 16px !default;
|
||||
|
||||
// 字体相关
|
||||
$fontFamilySansSerif: -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 !default;
|
||||
$fontFamilyMonospace: SFMono-Regular,
|
||||
Menlo,
|
||||
Monaco,
|
||||
Consolas,
|
||||
'Liberation Mono',
|
||||
'Courier New',
|
||||
monospace !default;
|
||||
$fontFamilySansSerif: -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 !default;
|
||||
$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
'Courier New', monospace !default;
|
||||
$fontFamilyBase: $fontFamilySansSerif !default;
|
||||
|
||||
$fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px`
|
||||
$fontSizeBase: px2rem(
|
||||
14px
|
||||
) !default; // Assumes the browser default, typically `16px`
|
||||
$fontSizeMd: px2rem(16px) !default;
|
||||
$fontSizeLg: px2rem(20px) !default;
|
||||
$fontSizeXl: px2rem(24px) !default;
|
||||
|
|
@ -99,11 +85,13 @@ $boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
|
|||
$boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default;
|
||||
|
||||
// 窗口适配
|
||||
$breakpoints: (xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px) !default;
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
// 段落间距
|
||||
$paragraph-marginBottom: 1rem !default;
|
||||
|
|
@ -158,8 +146,14 @@ $Layout-aside--md-width: px2rem(250px) !default;
|
|||
$Layout-aside--lg-width: px2rem(300px) !default;
|
||||
$Layout-aside--folded-width: px2rem(60px) !default;
|
||||
$Layout-aside-bg: $dark !default;
|
||||
$Layout-aside-onAcitve-bg: saturate(darken($Layout-aside-bg, 5%), 2.5%) !default;
|
||||
$Layout-aside-subList-bg: saturate(darken($Layout-aside-bg, 10%), 2.5%) !default;
|
||||
$Layout-aside-onAcitve-bg: saturate(
|
||||
darken($Layout-aside-bg, 5%),
|
||||
2.5%
|
||||
) !default;
|
||||
$Layout-aside-subList-bg: saturate(
|
||||
darken($Layout-aside-bg, 10%),
|
||||
2.5%
|
||||
) !default;
|
||||
$Layout-aside-onHover-bg: saturate(darken($Layout-aside-bg, 3%), 2.5%) !default;
|
||||
$Layout-aside-color: desaturate(lighten($Layout-aside-bg, 40%), 10%) !default;
|
||||
|
||||
|
|
@ -180,13 +174,16 @@ $Layout-asideLink-arrowColor: $Layout-asideLink-color !default;
|
|||
$Layout-asideLink-onActive-arrowColor: $Layout-asideLink-onActive-color !default;
|
||||
$Layout-asideLabel-color: darken($Layout-aside-color, 10%) !default;
|
||||
$Layout-brand-bg: $dark !default;
|
||||
$Layout-brandBar-color: desaturate(lighten($Layout-brand-bg, 40%), 10%) !default;
|
||||
$Layout-brandBar-color: desaturate(
|
||||
lighten($Layout-brand-bg, 40%),
|
||||
10%
|
||||
) !default;
|
||||
$Layout-brand-color: lighten($Layout-brandBar-color, 25%) !default;
|
||||
$Layout-header-height: px2rem(50px) !default;
|
||||
$Layout-headerBar-borderBottom: none !default;
|
||||
$Layout-header-bg: $white !default;
|
||||
$Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05),
|
||||
0 1px 0 rgba(0, 0, 0, 0.05) !default;
|
||||
0 1px 0 rgba(0, 0, 0, 0.05) !default;
|
||||
$Layout-nav-height: px2rem(40px) !default;
|
||||
$Layout-nav-lgHeight: px2rem(50px) !default;
|
||||
$Layout-nav--folded-height: px2rem(50px) !default;
|
||||
|
|
@ -219,7 +216,9 @@ $Modal-header-bg: darken($Modal-bg, 2.5%) !default;
|
|||
$Modal-title-lineHeight: $lineHeightBase !default;
|
||||
$Modal-title-fontSize: $fontSizeBase !default;
|
||||
$Modal-title-color: $text--loud-color !default;
|
||||
$Modal-header-paddingY: ($Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize) / 2 !default;
|
||||
$Modal-header-paddingY: (
|
||||
$Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize
|
||||
) / 2 !default;
|
||||
$Modal-header-paddingX: $gap-md !default;
|
||||
$Modal-close-width: px2rem(12px) !default;
|
||||
$Modal-close-color: $text--muted-color !default;
|
||||
|
|
@ -227,8 +226,10 @@ $Model-close-onHover-color: $text-color !default;
|
|||
$Modal-body-paddingX: $gap-md !default;
|
||||
$Modal-body-paddingY: $gap-md !default;
|
||||
$Modal-body--noHeader-paddingTop: $gap-base;
|
||||
$Modal-body-borderTop: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-body-borderBottom: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-body-borderTop: $Modal-content-borderWidth solid
|
||||
lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-body-borderBottom: $Modal-content-borderWidth solid
|
||||
lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-footer-padding: $gap-sm !default;
|
||||
$Modal-footer-marginY: 0 !default;
|
||||
$Modal-footer-marginX: 0 !default;
|
||||
|
|
@ -254,12 +255,12 @@ $Drawer-close-onHover-color: rgba(255, 255, 255, 1) !default;
|
|||
$Drawer-body-padding: $gap-base !default;
|
||||
$Drawer-footer-padding: $gap-base !default;
|
||||
|
||||
$Drawer-widthBase: 80%;
|
||||
$Drawer-widthXs: px2rem(200px);
|
||||
$Drawer-widthSm: px2rem(300px);
|
||||
$Drawer-widthMd: px2rem(500px);
|
||||
$Drawer-widthLg: px2rem(800px);
|
||||
$Drawer-widthXl: 90%;
|
||||
$Drawer-widthBase: 80% !default;
|
||||
$Drawer-widthXs: px2rem(200px) !default;
|
||||
$Drawer-widthSm: px2rem(300px) !default;
|
||||
$Drawer-widthMd: px2rem(500px) !default;
|
||||
$Drawer-widthLg: px2rem(800px) !default;
|
||||
$Drawer-widthXl: 90% !default;
|
||||
|
||||
// Tooltip
|
||||
$Tooltip-fontSize: $fontSizeSm !default;
|
||||
|
|
@ -351,7 +352,10 @@ $Alert-marginBottom: $gap-md !default;
|
|||
|
||||
$Alert--danger-color: #a94442 !default;
|
||||
$Alert--danger-bg: #f2dede !default;
|
||||
$Alert--danger-borderColor: darken(adjust-hue($Alert--danger-bg, -10), 5%) !default;
|
||||
$Alert--danger-borderColor: darken(
|
||||
adjust-hue($Alert--danger-bg, -10),
|
||||
5%
|
||||
) !default;
|
||||
|
||||
$Alert--info-color: #31708f !default;
|
||||
$Alert--info-bg: #d9edf7 !default;
|
||||
|
|
@ -359,11 +363,17 @@ $Alert--info-borderColor: darken(adjust-hue($Alert--info-bg, -10), 5%) !default;
|
|||
|
||||
$Alert--success-color: #3c763d !default;
|
||||
$Alert--success-bg: #dff0d8 !default;
|
||||
$Alert--success-borderColor: darken(adjust-hue($Alert--success-bg, -10), 5%) !default;
|
||||
$Alert--success-borderColor: darken(
|
||||
adjust-hue($Alert--success-bg, -10),
|
||||
5%
|
||||
) !default;
|
||||
|
||||
$Alert--warning-color: #8a6d3b !default;
|
||||
$Alert--warning-bg: #fcf8e3 !default;
|
||||
$Alert--warning-borderColor: darken(adjust-hue($Alert--warning-bg, -10), 5%) !default;
|
||||
$Alert--warning-borderColor: darken(
|
||||
adjust-hue($Alert--warning-bg, -10),
|
||||
5%
|
||||
) !default;
|
||||
|
||||
// spinner
|
||||
$Spinner-overlay-bg: rgba(255, 255, 255, 0.4) !default;
|
||||
|
|
@ -397,8 +407,6 @@ $Tabs--line-linkPadding: 10px 0 !default;
|
|||
$Tabs--line-linkMargin: 0 40px 0 0 !default;
|
||||
$Tabs--line-content-bg: transparent !default;
|
||||
$Tabs--line-content-padding: 20px 0 !default;
|
||||
;
|
||||
|
||||
$Tabs--card-padding: px2rem(6px) 0 0 px2rem(10px);
|
||||
$Tabs--card-bg: darken($body-bg, 5%) !default;
|
||||
$Tabs--card-borderTopColor: $borderColor !default;
|
||||
|
|
@ -407,7 +415,6 @@ $Tabs--card-onActive-bg: $background !default;
|
|||
$Tabs--card-linkPadding: px2rem(10px) px2rem(10px) !default;
|
||||
$Tabs--card-linkMargin: 0 10px 0 0 !default;
|
||||
|
||||
|
||||
$Tabs--radio-bg: #eaf6fe !default;
|
||||
|
||||
$Tabs--vertical-onActive-borderColor: $primary !default;
|
||||
|
|
@ -454,7 +461,8 @@ $Table-tree-borderColor: $Table-borderColor !default;
|
|||
$TableCell-height: px2rem(40px) !default;
|
||||
$TableCell-paddingX: $gap-sm !default;
|
||||
$TableCell--edge-paddingX: $gap-md !default;
|
||||
$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / 2;
|
||||
$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) /
|
||||
2;
|
||||
$Table-placeholder-height: px2rem(100px) !default;
|
||||
|
||||
// $Table-checkCell-width: px2rem(50px) !default;
|
||||
|
|
@ -469,14 +477,20 @@ $Table-onChecked-bg: #d9f3fb !default;
|
|||
$Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;
|
||||
$Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default;
|
||||
$Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default;
|
||||
$Table-onChecked-onHover-borderColor: darken($Table-onChecked-borderColor, 5%) !default;
|
||||
$Table-onChecked-onHover-borderColor: darken(
|
||||
$Table-onChecked-borderColor,
|
||||
5%
|
||||
) !default;
|
||||
$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default;
|
||||
|
||||
$Table-onModified-bg: #e8f0fe !default;
|
||||
$Table-onModified-color: #4285f4 !default;
|
||||
$Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default;
|
||||
$Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default;
|
||||
$Table-onModified-onHover-borderColor: darken($Table-onModified-onHover-bg, 5%) !default;
|
||||
$Table-onModified-onHover-borderColor: darken(
|
||||
$Table-onModified-onHover-bg,
|
||||
5%
|
||||
) !default;
|
||||
$Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default;
|
||||
|
||||
$Table-onDragging-opacity: 0.1 !default;
|
||||
|
|
@ -604,7 +618,7 @@ $Form-group--xs-gutterWidth: px2rem(10px) !default;
|
|||
|
||||
$Form-row-gutterWidth: px2rem(10px) !default;
|
||||
|
||||
$Form--horizontal-label-whiteSpace: "normal" !default;
|
||||
$Form--horizontal-label-whiteSpace: 'normal' !default;
|
||||
$Form--horizontal-label-align: right !default;
|
||||
$Form--horizontal-label-widthXs: px2rem(60px) !default;
|
||||
$Form--horizontal-label-widthSm: px2rem(90px) !default;
|
||||
|
|
@ -635,10 +649,15 @@ $Form-input-placeholderColor: $text--muted-color !default;
|
|||
$Form-input-lineHeight: 20/14 !default;
|
||||
$Form-input-fontSize: $Form-fontSize !default;
|
||||
$Form-input-boxShadow: none !default;
|
||||
$Form-input-paddingY: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
|
||||
$Form-input-paddingY: (
|
||||
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px)
|
||||
)/2 !default;
|
||||
$Form-input-paddingX: px2rem(12px) !default;
|
||||
$Form-input-marginBottom: px2rem(6px) !default;
|
||||
$Form-label-paddingTop: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 !default;
|
||||
$Form-label-paddingTop: (
|
||||
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Form-input-addOnBg: #edf1f2 !default;
|
||||
$Form-input-addOnColor: $text-color !default;
|
||||
|
|
@ -680,8 +699,14 @@ $Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
|||
$Form-select-onError-borderColor: $Form-input-onError-borderColor !default;
|
||||
$Form-selectOption-height: $Form-input-height !default;
|
||||
$Form-selectValue-color: $info !default;
|
||||
$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), 2.5%) !default;
|
||||
$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), 2.5%) !default;
|
||||
$Form-selectValue-bg: saturate(
|
||||
lighten($Form-selectValue-color, 40%),
|
||||
2.5%
|
||||
) !default;
|
||||
$Form-selectValue-borderColor: saturate(
|
||||
lighten($Form-selectValue-color, 30%),
|
||||
2.5%
|
||||
) !default;
|
||||
$Form-selectValue-fontSize: $fontSizeSm !default;
|
||||
$Form-select-caret-vender: 'FontAwesome' !default;
|
||||
$Form-select-caret-icon: '\f0d7' !default;
|
||||
|
|
@ -710,7 +735,10 @@ $InputGroup-addOn-bg: $Form-input-addOnBg !default;
|
|||
$InputGroup-addOn-borderWidth: $Form-input-borderWidth !default;
|
||||
$InputGroup-addOn-borderColor: $Form-input-borderColor !default;
|
||||
$InputGroup-addOn-borderRadius: $Form-input-borderRadius !default;
|
||||
$InputGroup-paddingY: ($InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
|
||||
$InputGroup-paddingY: (
|
||||
$InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px)
|
||||
)/2 !default;
|
||||
$InputGroup-paddingX: px2rem(10px) !default;
|
||||
$InputGroup-addOn-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$InputGroup-select-borderWidth: $Form-select-borderWidth !default;
|
||||
|
|
@ -736,7 +764,10 @@ $Button-height: $Form-input-height !default;
|
|||
$Button-mimWidth: auto !default;
|
||||
$Button-lineHeight: $Form-input-lineHeight !default;
|
||||
$Button-paddingX: px2rem(12px) !default;
|
||||
$Button-paddingY: ($Button-height - $Button-borderWidth * 2 - $Button-lineHeight * $Button-fontSize)/2 !default;
|
||||
$Button-paddingY: (
|
||||
$Button-height - $Button-borderWidth * 2 - $Button-lineHeight *
|
||||
$Button-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Button--iconOnly-minWidthRate: 4 / 3 !default;
|
||||
|
||||
|
|
@ -744,28 +775,40 @@ $Button--xs-fontSize: $fontSizeXs !default;
|
|||
$Button--xs-height: px2rem(22px) !default;
|
||||
$Button--xs-lineHeight: 18 / 11 !default;
|
||||
$Button--xs-paddingX: px2rem(5px) !default;
|
||||
$Button--xs-paddingY: ($Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * $Button--xs-fontSize)/2 !default;
|
||||
$Button--xs-paddingY: (
|
||||
$Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight *
|
||||
$Button--xs-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Button--sm-fontSize: $fontSizeSm !default;
|
||||
$Button--sm-height: px2rem(30px) !default;
|
||||
$Button--sm-lineHeight: 18 / 12 !default;
|
||||
$Button--sm-paddingX: px2rem(8px) !default;
|
||||
$Button--sm-paddingY: ($Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * $Button--sm-fontSize)/2 !default;
|
||||
$Button--sm-paddingY: (
|
||||
$Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight *
|
||||
$Button--sm-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Button--md-fontSize: $Button-fontSize !default;
|
||||
$Button--md-height: $Button-height !default;
|
||||
$Button--md-lineHeight: $Button-lineHeight !default;
|
||||
$Button--md-paddingX: $Button-paddingX !default;
|
||||
$Button--md-paddingY: ($Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * $Button--md-fontSize)/2 !default;
|
||||
$Button--md-paddingY: (
|
||||
$Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight *
|
||||
$Button--md-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Button--lg-fontSize: $fontSizeLg !default;
|
||||
$Button--lg-height: px2rem(46px) !default;
|
||||
$Button--lg-lineHeight: 24 / 20 !default;
|
||||
$Button--lg-paddingX: px2rem(16px) !default;
|
||||
$Button--lg-paddingY: ($Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * $Button--lg-fontSize)/2 !default;
|
||||
$Button--lg-paddingY: (
|
||||
$Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight *
|
||||
$Button--lg-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Button-boxShadow: inset 0 1px 0 rgba($white, 0.15),
|
||||
0 1px 1px rgba($black, 0.075) !default;
|
||||
0 1px 1px rgba($black, 0.075) !default;
|
||||
$Button-onFocus-boxShadow: none !default;
|
||||
$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default;
|
||||
$Button-onDisabled-opacity: 0.65 !default;
|
||||
|
|
@ -777,10 +820,8 @@ $Button-borderRadius: $borderRadius !default;
|
|||
$Button--lg-borderRadius: $borderRadius !default;
|
||||
$Button--sm-borderRadius: $borderRadius !default;
|
||||
|
||||
$Button-transition: color 0.15s ease-in-out,
|
||||
background-color 0.15s ease-in-out,
|
||||
border-color 0.15s ease-in-out,
|
||||
box-shadow 0.15s ease-in-out !default;
|
||||
$Button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
||||
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
|
||||
|
||||
$Button--primary-bg: $primary !default;
|
||||
$Button--primary-border: $Button--primary-bg !default;
|
||||
|
|
@ -789,17 +830,26 @@ $Button--primary-onHover-bg: darken($Button--primary-bg, 7.5%) !default;
|
|||
$Button--primary-onHover-border: darken($Button--primary-border, 10%) !default;
|
||||
$Button--primary-onHover-color: $Button--primary-color !default;
|
||||
$Button--primary-onActive-bg: darken($Button--primary-bg, 10%) !default;
|
||||
$Button--primary-onActive-border: darken($Button--primary-border, 12.5%) !default;
|
||||
$Button--primary-onActive-border: darken(
|
||||
$Button--primary-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--primary-onActive-color: $Button--primary-color !default;
|
||||
|
||||
$Button--secondary-bg: $secondary !default;
|
||||
$Button--secondary-border: $Button--secondary-bg !default;
|
||||
$Button--secondary-color: $white !default;
|
||||
$Button--secondary-onHover-bg: darken($Button--secondary-bg, 7.5%) !default;
|
||||
$Button--secondary-onHover-border: darken($Button--secondary-border, 10%) !default;
|
||||
$Button--secondary-onHover-border: darken(
|
||||
$Button--secondary-border,
|
||||
10%
|
||||
) !default;
|
||||
$Button--secondary-onHover-color: $Button--secondary-color !default;
|
||||
$Button--secondary-onActive-bg: darken($Button--secondary-bg, 10%) !default;
|
||||
$Button--secondary-onActive-border: darken($Button--secondary-border, 12.5%) !default;
|
||||
$Button--secondary-onActive-border: darken(
|
||||
$Button--secondary-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--secondary-onActive-color: $Button--secondary-color !default;
|
||||
|
||||
$Button--success-bg: $success !default;
|
||||
|
|
@ -809,7 +859,10 @@ $Button--success-onHover-bg: darken($Button--success-bg, 7.5%) !default;
|
|||
$Button--success-onHover-border: darken($Button--success-border, 10%) !default;
|
||||
$Button--success-onHover-color: $Button--success-color !default;
|
||||
$Button--success-onActive-bg: darken($Button--success-bg, 10%) !default;
|
||||
$Button--success-onActive-border: darken($Button--success-border, 12.5%) !default;
|
||||
$Button--success-onActive-border: darken(
|
||||
$Button--success-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--success-onActive-color: $Button--success-color !default;
|
||||
|
||||
$Button--info-bg: $info !default;
|
||||
|
|
@ -829,7 +882,10 @@ $Button--warning-onHover-bg: darken($Button--warning-bg, 7.5%) !default;
|
|||
$Button--warning-onHover-border: darken($Button--warning-border, 10%) !default;
|
||||
$Button--warning-onHover-color: $Button--warning-color !default;
|
||||
$Button--warning-onActive-bg: darken($Button--warning-bg, 10%) !default;
|
||||
$Button--warning-onActive-border: darken($Button--warning-border, 12.5%) !default;
|
||||
$Button--warning-onActive-border: darken(
|
||||
$Button--warning-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--warning-onActive-color: $Button--warning-color !default;
|
||||
|
||||
$Button--danger-bg: $danger !default;
|
||||
|
|
@ -869,7 +925,10 @@ $Button--default-onHover-bg: darken($Button--default-bg, 7.5%) !default;
|
|||
$Button--default-onHover-border: darken($Button--default-border, 10%) !default;
|
||||
$Button--default-onHover-color: $Button--default-color !default;
|
||||
$Button--default-onActive-bg: darken($Button--default-bg, 10%) !default;
|
||||
$Button--default-onActive-border: darken($Button--default-border, 12.5%) !default;
|
||||
$Button--default-onActive-border: darken(
|
||||
$Button--default-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--default-onActive-color: $Button--default-color !default;
|
||||
|
||||
$Button--link-color: $text-color !default;
|
||||
|
|
@ -885,7 +944,9 @@ $DropDown-menu-height: px2rem(34px) !default;
|
|||
$DropDown-menu-minWidth: px2rem(160px) !default;
|
||||
$DropDown-menu-paddingY: $gap-xs !default;
|
||||
$DropDown-menu-paddingX: 0 !default;
|
||||
$DropDown-menuItem-paddingY: ($DropDown-menu-height - $fontSizeBase * $lineHeightBase) / 2 !default;
|
||||
$DropDown-menuItem-paddingY: (
|
||||
$DropDown-menu-height - $fontSizeBase * $lineHeightBase
|
||||
) / 2 !default;
|
||||
$DropDown-menuItem-paddingX: $gap-sm !default;
|
||||
$DropDown-menuItem-onHover-color: inherit !default;
|
||||
$DropDown-menuItem-onHover-bg: $Button--default-onHover-bg !default;
|
||||
|
|
@ -940,7 +1001,9 @@ $ColorPicker-height: $Form-input-height !default;
|
|||
$ColorPicker-lineHeight: $Form-input-lineHeight !default;
|
||||
$ColorPicker-fontSize: $Form-input-fontSize !default;
|
||||
$ColorPicker-paddingX: px2rem(12px) !default;
|
||||
$ColorPicker-paddingY: ($ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize)/2 - $ColorPicker-borderWidth !default;
|
||||
$ColorPicker-paddingY: (
|
||||
$ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize
|
||||
)/2 - $ColorPicker-borderWidth !default;
|
||||
$ColorPicker-placeholderColor: $Form-input-placeholderColor !default;
|
||||
$ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$DatePicker-onHover-borderColor: $Form-input-borderColor !default;
|
||||
|
|
@ -956,7 +1019,9 @@ $DatePicker-height: $Form-input-height !default;
|
|||
$DatePicker-lineHeight: $Form-input-lineHeight !default;
|
||||
$DatePicker-fontSize: $Form-input-fontSize !default;
|
||||
$DatePicker-paddingX: px2rem(12px) !default;
|
||||
$DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;
|
||||
$DatePicker-paddingY: (
|
||||
$DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize
|
||||
)/2 - $DatePicker-borderWidth !default;
|
||||
$DatePicker-placeholderColor: $Form-input-placeholderColor !default;
|
||||
$DatePicker-iconColor: $icon-color !default;
|
||||
$DatePicker-onHover-iconColor: $icon-onHover-color !default;
|
||||
|
|
@ -982,13 +1047,18 @@ $Calendar-input-borderRadius: $borderRadius !default;
|
|||
$Calendar-input-height: px2rem(30px) !default;
|
||||
$Calendar-input-lineHeight: $lineHeightBase;
|
||||
$Calendar-input-paddingX: px2rem(10px) !default;
|
||||
$Calendar-input-paddingY: ($Calendar-input-height - $Calendar-input-lineHeight * $Calendar-input-fontSize) / 2;
|
||||
$Calendar-input-paddingY: (
|
||||
$Calendar-input-height - $Calendar-input-lineHeight *
|
||||
$Calendar-input-fontSize
|
||||
) / 2;
|
||||
|
||||
$Calendar-btn-fontSize: $fontSizeSm !default;
|
||||
$Calendar-btn-lineHeight: $lineHeightBase !default;
|
||||
$Calendar-btn-height: px2rem(30px) !default;
|
||||
$Calendar-btn-paddingX: px2rem(10px) !default;
|
||||
$Calendar-btn-paddingY: ($Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize)/2 !default;
|
||||
$Calendar-btn-paddingY: (
|
||||
$Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Calendar-btn-bg: $info !default;
|
||||
$Calendar-btn-border: $Calendar-btn-bg !default;
|
||||
|
|
@ -1006,10 +1076,16 @@ $Calendar-btnCancel-border: $Calendar-btnCancel-bg !default;
|
|||
$Calendar-btnCancel-borderRadius: $Button-borderRadius !default;
|
||||
$Calendar-btnCancel-color: $text-color !default;
|
||||
$Calendar-btnCancel-onHover-bg: darken($Calendar-btnCancel-bg, 7.5%) !default;
|
||||
$Calendar-btnCancel-onHover-border: darken($Calendar-btnCancel-border, 10%) !default;
|
||||
$Calendar-btnCancel-onHover-border: darken(
|
||||
$Calendar-btnCancel-border,
|
||||
10%
|
||||
) !default;
|
||||
$Calendar-btnCancel-onHover-color: $Calendar-btnCancel-color !default;
|
||||
$Calendar-btnCancel-onActive-bg: darken($Calendar-btnCancel-bg, 10%) !default;
|
||||
$Calendar-btnCancel-onActive-border: darken($Calendar-btnCancel-border, 12.5%) !default;
|
||||
$Calendar-btnCancel-onActive-border: darken(
|
||||
$Calendar-btnCancel-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Calendar-btnCancel-onActive-color: $Calendar-btnCancel-color !default;
|
||||
|
||||
$Calendar-color: $text-color !default;
|
||||
|
|
@ -1032,12 +1108,18 @@ $ListControl-item-paddingX: px2rem(12px) !default;
|
|||
$ListControl-item-paddingY: px2rem(6px) !default;
|
||||
$ListControl-item-color: $text-color !default;
|
||||
|
||||
$ListControl-item-onHover-borderColor: darken($ListControl-item-borderColor, 10%) !default;
|
||||
$ListControl-item-onHover-borderColor: darken(
|
||||
$ListControl-item-borderColor,
|
||||
10%
|
||||
) !default;
|
||||
$ListControl-item-onHover-bg: darken($ListControl-item-bg, 7.5%) !default;
|
||||
$ListControl-item-onHover-color: $ListControl-item-color !default;
|
||||
|
||||
$ListControl-item-onActive-bg: $primary !default;
|
||||
$ListControl-item-onActive-borderColor: darken($ListControl-item-onActive-bg, 10%) !default;
|
||||
$ListControl-item-onActive-borderColor: darken(
|
||||
$ListControl-item-onActive-bg,
|
||||
10%
|
||||
) !default;
|
||||
$ListControl-item-onActive-color: $white !default;
|
||||
$ListControl-item-onActive-before-bg: $white !default;
|
||||
$ListControl-item-onActive-after-borderColor: $primary !default;
|
||||
|
|
@ -1070,7 +1152,10 @@ $Combo-addBtn-borderRadius: $Button-borderRadius;
|
|||
$Combo-addBtn-height: px2rem(26px) !default;
|
||||
$Combo-addBtn-lineHeight: $Button--sm-lineHeight !default;
|
||||
$Combo-addBtn-paddingX: $Button--sm-paddingX !default;
|
||||
$Combo-addBtn-paddingY: ($Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight * $Combo-addBtn-fontSize)/2 !default;
|
||||
$Combo-addBtn-paddingY: (
|
||||
$Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight *
|
||||
$Combo-addBtn-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Combo--vertical-item-gap: px2rem(5px);
|
||||
$Combo--vertical-item-borderColor: $borderColor !default;
|
||||
|
|
@ -1085,7 +1170,10 @@ $Combo--vertical-itemToolbar-bg: $info !default;
|
|||
$Combo--vertical-itemToolbar-color: darken($white, 5%) !default;
|
||||
$Combo--vertical-itemToolbar-onHover-color: $white !default;
|
||||
$Combo--vertical-itemToolbar-borderWidth: $borderWidth !default;
|
||||
$Combo--vertical-itemToolbar-borderColor: darken($Combo--vertical-itemToolbar-bg, 5%) !default;
|
||||
$Combo--vertical-itemToolbar-borderColor: darken(
|
||||
$Combo--vertical-itemToolbar-bg,
|
||||
5%
|
||||
) !default;
|
||||
$Combo--vertical-itemToolbar-borderRadius: px2rem(3px) !default;
|
||||
$Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out !default;
|
||||
$Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !default;
|
||||
|
|
@ -1101,7 +1189,10 @@ $SubForm--addBtn-onHover-bg: darken($SubForm--addBtn-bg, 7.5%) !default;
|
|||
$SubForm--addBtn-onHover-border: darken($SubForm--addBtn-border, 10%) !default;
|
||||
$SubForm--addBtn-onHover-color: $SubForm--addBtn-color !default;
|
||||
$SubForm--addBtn-onActive-bg: darken($SubForm--addBtn-bg, 10%) !default;
|
||||
$SubForm--addBtn-onActive-border: darken($SubForm--addBtn-border, 12.5%) !default;
|
||||
$SubForm--addBtn-onActive-border: darken(
|
||||
$SubForm--addBtn-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$SubForm--addBtn-onActive-color: $SubForm--addBtn-color !default;
|
||||
|
||||
$SubForm--addBtn-fontSize: $Button--sm-fontSize !default;
|
||||
|
|
@ -1109,7 +1200,10 @@ $SubForm--addBtn-borderRadius: $Button-borderRadius;
|
|||
$SubForm--addBtn-height: $Button--sm-height !default;
|
||||
$SubForm--addBtn-lineHeight: $Button--sm-lineHeight !default;
|
||||
$SubForm--addBtn-paddingX: $Button--sm-paddingX !default;
|
||||
$SubForm--addBtn-paddingY: ($SubForm--addBtn-height - $Button-borderWidth * 2 - $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize)/2 !default;
|
||||
$SubForm--addBtn-paddingY: (
|
||||
$SubForm--addBtn-height - $Button-borderWidth * 2 -
|
||||
$SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize
|
||||
)/2 !default;
|
||||
|
||||
// InputRange
|
||||
$InputRange-fontFamily: $fontFamilyBase !default;
|
||||
|
|
@ -1122,15 +1216,17 @@ $InputRange-onDisabled-color: #cccccc !default;
|
|||
$InputRange-slider-bg: $InputRange-primaryColor !default;
|
||||
$InputRange-slider-border: px2rem(1px) solid $InputRange-primaryColor !default;
|
||||
$InputRange-slider-onFocus-borderRadius: $borderRadiusMd !default;
|
||||
$InputRange-slider-onFocus-boxShadow: 0 0 0 $InputRange-slider-onFocus-borderRadius transparentize($InputRange-slider-bg, 0.8) !default;
|
||||
$InputRange-slider-onFocus-boxShadow: 0 0 0
|
||||
$InputRange-slider-onFocus-borderRadius
|
||||
transparentize($InputRange-slider-bg, 0.8) !default;
|
||||
$InputRange-slider-height: px2rem(24px) !default;
|
||||
$InputRange-slider-width: px2rem(18px) !default;
|
||||
$InputRange-slider-transition: transform 0.3s ease-out,
|
||||
box-shadow 0.3s ease-out !default;
|
||||
$InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
|
||||
$InputRange-sliderContainer-transition: left 0.3s ease-out !default;
|
||||
$InputRange-slider-onActive-transform: scale(1.3) !default;
|
||||
$InputRange-slider-onDisabled-bg: $InputRange-onDisabled-color !default;
|
||||
$InputRange-slider-onDisabled-border: px2rem(1px) solid $InputRange-onDisabled-color !default;
|
||||
$InputRange-slider-onDisabled-border: px2rem(1px) solid
|
||||
$InputRange-onDisabled-color !default;
|
||||
|
||||
// input-range-label
|
||||
$InputRange-label-color: $InputRange-neutralColor !default;
|
||||
|
|
@ -1142,8 +1238,7 @@ $InputRange-label--value-positionTop: px2rem(-40px) !default;
|
|||
// input-range-track
|
||||
$InputRange-track-bg: $InputRange-neutralLightColor !default;
|
||||
$InputRange-track-height: px2rem(12px) !default;
|
||||
$InputRange-track-transition: left 0.3s ease-out,
|
||||
width 0.3s ease-out !default;
|
||||
$InputRange-track-transition: left 0.3s ease-out, width 0.3s ease-out !default;
|
||||
$InputRange-track-onActive-bg: $InputRange-primaryColor !default;
|
||||
$InputRange-track-onDisabled-bg: $InputRange-neutralLightColor !default;
|
||||
|
||||
|
|
@ -1152,16 +1247,21 @@ $ImageControl-addBtn-bg: $Button--default-bg !default;
|
|||
$ImageControl-addBtn-border: $Button--default-border !default;
|
||||
$ImageControl-addBtn-color: $Button--default-color !default;
|
||||
$ImageControl-addBtn-onHover-bg: darken($ImageControl-addBtn-bg, 7.5%) !default;
|
||||
$ImageControl-addBtn-onHover-border: darken($ImageControl-addBtn-border, 10%) !default;
|
||||
$ImageControl-addBtn-onHover-border: darken(
|
||||
$ImageControl-addBtn-border,
|
||||
10%
|
||||
) !default;
|
||||
$ImageControl-addBtn-onHover-color: $Button--default-color !default;
|
||||
$ImageControl-addBtn-onActive-bg: darken($ImageControl-addBtn-bg, 10%) !default;
|
||||
$ImageControl-addBtn-onActive-border: darken($ImageControl-addBtn-border, 12.5%) !default;
|
||||
$ImageControl-addBtn-onActive-border: darken(
|
||||
$ImageControl-addBtn-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$ImageControl-addBtn-onActive-color: $ImageControl-addBtn-color !default;
|
||||
$ImageControl-addBtn-onDisabled-bg: $Form-input-onDisabled-bg !default;
|
||||
$ImageControl-addBtn-onDisabled-border: $Form-input-onDisabled-borderColor !default;
|
||||
$ImageControl-addBtn-onDisabled-color: $text--muted-color !default;
|
||||
|
||||
|
||||
// Tag
|
||||
$TagControl-sugTip-color: $info !default;
|
||||
|
||||
|
|
@ -1169,10 +1269,16 @@ $TagControl-sugBtn-bg: $Button--default-bg !default;
|
|||
$TagControl-sugBtn-border: $Button--default-border !default;
|
||||
$TagControl-sugBtn-color: $Button--default-color !default;
|
||||
$TagControl-sugBtn-onHover-bg: darken($TagControl-sugBtn-bg, 7.5%) !default;
|
||||
$TagControl-sugBtn-onHover-border: darken($TagControl-sugBtn-border, 10%) !default;
|
||||
$TagControl-sugBtn-onHover-border: darken(
|
||||
$TagControl-sugBtn-border,
|
||||
10%
|
||||
) !default;
|
||||
$TagControl-sugBtn-onHover-color: $Button--default-color !default;
|
||||
$TagControl-sugBtn-onActive-bg: darken($TagControl-sugBtn-bg, 10%) !default;
|
||||
$TagControl-sugBtn-onActive-border: darken($TagControl-sugBtn-border, 12.5%) !default;
|
||||
$TagControl-sugBtn-onActive-border: darken(
|
||||
$TagControl-sugBtn-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$TagControl-sugBtn-onActive-color: $TagControl-sugBtn-color !default;
|
||||
|
||||
$TagControl-sugBtn-borderWidth: $Button-borderWidth !default;
|
||||
|
|
@ -1181,7 +1287,10 @@ $TagControl-sugBtn-borderRadius: $Button-borderRadius !default;
|
|||
$TagControl-sugBtn-height: $Button--sm-height !default;
|
||||
$TagControl-sugBtn-lineHeight: $Button--sm-lineHeight !default;
|
||||
$TagControl-sugBtn-paddingX: $Button--sm-paddingX !default;
|
||||
$TagControl-sugBtn-paddingY: ($TagControl-sugBtn-height - $Button-borderWidth * 2 - $TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize)/2 !default;
|
||||
$TagControl-sugBtn-paddingY: (
|
||||
$TagControl-sugBtn-height - $Button-borderWidth * 2 -
|
||||
$TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize
|
||||
)/2 !default;
|
||||
|
||||
// Wizard
|
||||
$Wizard-steps-bg: $gray100 !default;
|
||||
|
|
@ -1355,4 +1464,4 @@ $Picker-iconColor: $icon-color !default;
|
|||
$Picker-onHover-iconColor: $icon-onHover-color !default;
|
||||
$Picker-btn-vendor: 'FontAwesome' !default;
|
||||
$Picker-btn-fontSize: $Form-fontSize !default;
|
||||
$Picker-btn-icon: '\f2d2' !default;
|
||||
$Picker-btn-icon: '\f2d2' !default;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// 百度云舍主题：http://console.yunshe.design/docs/index
|
||||
// 更新时间: 2019-08-14 14:31:00
|
||||
@import "../functions";
|
||||
@import '../functions';
|
||||
$remFactor: 16px;
|
||||
|
||||
$ns: "cxd-";
|
||||
$ns: 'cxd-';
|
||||
|
||||
$info: #108cee;
|
||||
$primary: #108cee;
|
||||
|
|
@ -30,10 +30,10 @@ $icon-color: #999;
|
|||
$icon-onHover-color: $primary;
|
||||
|
||||
$Layout-header-boxShadow: none;
|
||||
$Layout-header-bg: #F5F5F5;
|
||||
$Layout-header-bg: #f5f5f5;
|
||||
$Layout-aside-width: px2rem(180px);
|
||||
$Layout-aside-bg: #1E1E28;
|
||||
$Layout-brand-bg: #0F1012;
|
||||
$Layout-aside-bg: #1e1e28;
|
||||
$Layout-brand-bg: #0f1012;
|
||||
$Layout-brand-color: #fff;
|
||||
$Layout-asideLink-iconColor: rgba(255, 255, 255, 0.6);
|
||||
$Layout-asideLink-color: #fff;
|
||||
|
|
@ -41,8 +41,8 @@ $Layout-asideLink-onHover-iconSize: px2rem(16px);
|
|||
$Layout-asideLink-onHover-iconColor: #108cee;
|
||||
$Layout-asideLink-fontSize: px2rem(12px);
|
||||
$Layout-asideLink-arrowFontSize: px2rem(12px);
|
||||
$Layout-asideLink-arrowVendor: "iconfont";
|
||||
$Layout-asideLink-arrowIcon: "\e63b";
|
||||
$Layout-asideLink-arrowVendor: 'iconfont';
|
||||
$Layout-asideLink-arrowIcon: '\e63b';
|
||||
$Layout-asideLink-arrowColor: #8d99b0;
|
||||
$Layout-asideLink-onHover-arrowColor: #fff;
|
||||
$Layout-headerBar-borderBottom: 0 none;
|
||||
|
|
@ -95,14 +95,15 @@ $Form-select-onHover-bg: $white;
|
|||
$Form-select-onHover-borderColor: $primary;
|
||||
$Form-select-placeholderColor: #999;
|
||||
$Form-select-color: #000;
|
||||
$Form-select-caret-vender: "iconfont";
|
||||
$Form-select-caret-icon: "\e605";
|
||||
$Form-select-caret-vender: 'iconfont';
|
||||
$Form-select-caret-icon: '\e605';
|
||||
$Form-select-caret-iconColor: #999;
|
||||
$Form-select-caret-onHover-iconColor: $primary;
|
||||
$Form-select-caret-fontSize: px2rem(12px);
|
||||
$Form-select-outer-borderWidth: 0;
|
||||
$Form-select-outer-top: px2rem(32px);
|
||||
$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
|
||||
$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px)
|
||||
rgba(0, 0, 0, 0.2);
|
||||
$Form-select-menu-color: #333;
|
||||
$Form-select-menu-onHover-color: #000;
|
||||
$Form-select-menu-onHover-bg: #eaf6fe;
|
||||
|
|
@ -123,7 +124,7 @@ $InputGroup-button-borderRadius: 0;
|
|||
|
||||
// $Number-bg: #eaf6fe;
|
||||
$Number-borderWidth: px2rem(1px);
|
||||
$Number-handler-mode: "horizontal";
|
||||
$Number-handler-mode: 'horizontal';
|
||||
$Number-handler-borderBottom: 0;
|
||||
$Number-handler-width: px2rem(20px);
|
||||
$Number-handler-color: #666;
|
||||
|
|
@ -133,11 +134,11 @@ $Number-handler-onHover-bg: $white;
|
|||
$Number-handler-onHover-color: $primary;
|
||||
$Number-handler-onActive-bg: #f3f9fe;
|
||||
$Number-handler-onDisabled-bg: #f5f5f5;
|
||||
$Number-handler-fontFamily: "iconfont";
|
||||
$Number-handler-fontFamily: 'iconfont';
|
||||
$Number-handler-fontSize: px2rem(12px);
|
||||
$Number-handler--up-content: "\e6dd";
|
||||
$Number-handler--up-content: '\e6dd';
|
||||
$Number-handler--up-transform: rotate(180deg);
|
||||
$Number-handler--down-content: "\e6dd";
|
||||
$Number-handler--down-content: '\e6dd';
|
||||
|
||||
$Checkbox-size: px2rem(14px);
|
||||
$Checkbox-inner-size: px2rem(8px);
|
||||
|
|
@ -173,15 +174,15 @@ $DatePicker-onDisabled-color: #999;
|
|||
$DatePicker-iconColor: #666;
|
||||
$DatePicker-onHover-iconColor: $primary;
|
||||
$DatePicker-onHover-borderColor: $primary;
|
||||
$DatePicker-toggler-vendor: "iconfont";
|
||||
$DatePicker-toggler-vendor: 'iconfont';
|
||||
$DatePicker-toggler-fontSize: px2rem(12px);
|
||||
$DatePicker-toggler-icon: "\e7b1";
|
||||
$DatePicker-prevBtn-vendor: "iconfont";
|
||||
$DatePicker-toggler-icon: '\e7b1';
|
||||
$DatePicker-prevBtn-vendor: 'iconfont';
|
||||
$DatePicker-prevBtn-fontSize: px2rem(14px);
|
||||
$DatePicker-prevBtn-icon: "\e854";
|
||||
$DatePicker-nextBtn-vendor: "iconfont";
|
||||
$DatePicker-prevBtn-icon: '\e854';
|
||||
$DatePicker-nextBtn-vendor: 'iconfont';
|
||||
$DatePicker-nextBtn-fontSize: px2rem(14px);
|
||||
$DatePicker-nextBtn-icon: "\e63b";
|
||||
$DatePicker-nextBtn-icon: '\e63b';
|
||||
|
||||
$Calendar-input-borderRadius: 0;
|
||||
|
||||
|
|
@ -234,7 +235,7 @@ $ButtonGroup--primary-isActive-bg: $white;
|
|||
$Button--link-color: $primary;
|
||||
$Button--link-onHover-color: #209bfd;
|
||||
|
||||
$Spinner-bg: url("./spinner-cxd.svg");
|
||||
$Spinner-bg: url('./spinner-cxd.svg');
|
||||
|
||||
$Crud-toolbar-gap: px2rem(10px);
|
||||
|
||||
|
|
@ -244,9 +245,9 @@ $Table-fontSize: px2rem(12px);
|
|||
$Table-color: #333;
|
||||
$Table-thead-color: #333;
|
||||
$Table-lineHeight: 20 / 12;
|
||||
$Table-borderColor: #F5F5F5;
|
||||
$Table-borderColor: #f5f5f5;
|
||||
$Table-tree-borderColor: darken($Table-borderColor, 10%);
|
||||
$Table-thead-bg: #F5F5F5;
|
||||
$Table-thead-bg: #f5f5f5;
|
||||
$Table-thead-borderColor: #fff;
|
||||
$Table-thead-iconColor: #999;
|
||||
$Table-strip-bg: transparent;
|
||||
|
|
@ -261,12 +262,12 @@ $Table-onChecked-onHover-color: #666;
|
|||
$TableCell-paddingX: px2rem(10px);
|
||||
|
||||
$TableCell-sortBtn-width: px2rem(14px);
|
||||
$TableCell-sortBtn--down-iconVendor: "iconfont";
|
||||
$TableCell-sortBtn--down-icon: "\e712";
|
||||
$TableCell-sortBtn--up-iconVendor: "iconfont";
|
||||
$TableCell-sortBtn--up-icon: "\e713";
|
||||
$TableCell-sortBtn--default-iconVendor: "iconfont";
|
||||
$TableCell-sortBtn--default-icon: "\e711";
|
||||
$TableCell-sortBtn--down-iconVendor: 'iconfont';
|
||||
$TableCell-sortBtn--down-icon: '\e712';
|
||||
$TableCell-sortBtn--up-iconVendor: 'iconfont';
|
||||
$TableCell-sortBtn--up-icon: '\e713';
|
||||
$TableCell-sortBtn--default-iconVendor: 'iconfont';
|
||||
$TableCell-sortBtn--default-icon: '\e711';
|
||||
$TableCell-sortBtn--default-opacity: 0;
|
||||
$TableCell-sortBtn--default-onActive-opacity: 1;
|
||||
|
||||
|
|
@ -324,6 +325,9 @@ $Modal-body-borderBottom: px2rem(1px) solid #eceff8;
|
|||
$Modal-footer-marginX: px2rem(30px);
|
||||
$Modal-footer-padding: px2rem(15px) 0;
|
||||
|
||||
// Drawer
|
||||
$Drawer-widthBase: px2rem(400px);
|
||||
|
||||
// Remark
|
||||
$Remark-icon-fontSize: px2rem(12px);
|
||||
$Remark-iconColor: #999;
|
||||
|
|
@ -341,8 +345,8 @@ $Wizard-steps-textAlign: center;
|
|||
$Wizard-steps-ulDisplay: inline-block;
|
||||
$Wizard-steps-height: px2rem(60px);
|
||||
$Wizard-steps-padding: px2rem(10) 0;
|
||||
$Wizard-steps-liVender: "iconfont";
|
||||
$Wizard-steps-liAfterContent: "\e6ee";
|
||||
$Wizard-steps-liVender: 'iconfont';
|
||||
$Wizard-steps-liAfterContent: '\e6ee';
|
||||
$Wizard-steps-liAfterBorder: 0 !important;
|
||||
$Wizard-steps-li-onActive-color: #333333;
|
||||
$Wizard-steps-bg--isComplete: #fff;
|
||||
|
|
@ -360,11 +364,10 @@ $Tabs-linkFontSize: px2rem(14px);
|
|||
$Tabs--card-onActive-borderColor: $white;
|
||||
$Tabs--radio-bg: $white;
|
||||
|
||||
|
||||
// Pagination
|
||||
$Pagination-arrowVendor: "iconfont";
|
||||
$Pagination-prevArrowContent: "\e759";
|
||||
$Pagination-nextArrowContent: "\e757";
|
||||
$Pagination-arrowVendor: 'iconfont';
|
||||
$Pagination-prevArrowContent: '\e759';
|
||||
$Pagination-nextArrowContent: '\e757';
|
||||
$Pagination-fontSize: px2rem(12px);
|
||||
$Pagination-onActive-backgroundColor: $white;
|
||||
$Pagination-onActive-color: $primary;
|
||||
|
|
@ -457,12 +460,12 @@ $Toast--warning-color: $warning;
|
|||
$Toast--warning-bgColor: $warning-bg;
|
||||
$Toast--warning-borderColor: $warning;
|
||||
|
||||
$Toast-iconVendor: "iconfont";
|
||||
$Toast-iconVendor: 'iconfont';
|
||||
|
||||
$Toast--error-icon: "\e6d2";
|
||||
$Toast--warning-icon: "\e6e5";
|
||||
$Toast--info-icon: "";
|
||||
$Toast--success-icon: "\e6e8";
|
||||
$Toast--error-icon: '\e6d2';
|
||||
$Toast--warning-icon: '\e6e5';
|
||||
$Toast--info-icon: '';
|
||||
$Toast--success-icon: '\e6e8';
|
||||
|
||||
$TagControl-sugTip-color: $primary;
|
||||
|
||||
|
|
@ -479,87 +482,86 @@ $Card-actions-onHover-bg: white;
|
|||
$Card-actions-onHover-color: $primary;
|
||||
$Card-actions-onChecked-onHover-bg: $white;
|
||||
|
||||
@import '../variables';
|
||||
@import '../mixins';
|
||||
@import '../base/reset';
|
||||
@import '../base/normalize';
|
||||
@import '../base/typography';
|
||||
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
@import "../base/reset";
|
||||
@import "../base/normalize";
|
||||
@import "../base/typography";
|
||||
@import '../layout/layout';
|
||||
@import '../layout/grid';
|
||||
@import '../layout/aside';
|
||||
@import '../layout/hbox';
|
||||
@import '../layout/vbox';
|
||||
@import '../components/modal';
|
||||
@import '../components/drawer';
|
||||
@import '../components/tooltip';
|
||||
@import '../components/popover';
|
||||
@import '../components/toast';
|
||||
@import '../components/alert';
|
||||
@import '../components/tabs';
|
||||
@import '../components/nav';
|
||||
@import '../components/page';
|
||||
@import '../components/remark';
|
||||
@import '../components/chart';
|
||||
@import '../components/video';
|
||||
@import '../components/audio';
|
||||
@import '../components/panel';
|
||||
@import '../components/service';
|
||||
@import '../components/spinner';
|
||||
@import '../components/button';
|
||||
@import '../components/button-group';
|
||||
@import '../components/dropdown';
|
||||
@import '../components/collapse';
|
||||
@import '../components/color';
|
||||
@import '../components/wizard';
|
||||
@import '../components/crud';
|
||||
@import '../components/table';
|
||||
@import '../components/list';
|
||||
@import '../components/cards';
|
||||
@import '../components/card';
|
||||
@import '../components/quick-edit';
|
||||
@import '../components/popoverable';
|
||||
@import '../components/copyable';
|
||||
@import '../components/divider';
|
||||
@import '../components/pagination';
|
||||
@import '../components/wrapper';
|
||||
@import '../components/status';
|
||||
@import '../components/carousel';
|
||||
|
||||
@import "../layout/layout";
|
||||
@import "../layout/grid";
|
||||
@import "../layout/aside";
|
||||
@import "../layout/hbox";
|
||||
@import "../layout/vbox";
|
||||
@import "../components/modal";
|
||||
@import "../components/drawer";
|
||||
@import "../components/tooltip";
|
||||
@import "../components/popover";
|
||||
@import "../components/toast";
|
||||
@import "../components/alert";
|
||||
@import "../components/tabs";
|
||||
@import "../components/nav";
|
||||
@import "../components/page";
|
||||
@import "../components/remark";
|
||||
@import "../components/chart";
|
||||
@import "../components/video";
|
||||
@import "../components/audio";
|
||||
@import "../components/panel";
|
||||
@import "../components/service";
|
||||
@import "../components/spinner";
|
||||
@import "../components/button";
|
||||
@import "../components/button-group";
|
||||
@import "../components/dropdown";
|
||||
@import "../components/collapse";
|
||||
@import "../components/color";
|
||||
@import "../components/wizard";
|
||||
@import "../components/crud";
|
||||
@import "../components/table";
|
||||
@import "../components/list";
|
||||
@import "../components/cards";
|
||||
@import "../components/card";
|
||||
@import "../components/quick-edit";
|
||||
@import "../components/popoverable";
|
||||
@import "../components/copyable";
|
||||
@import "../components/divider";
|
||||
@import "../components/pagination";
|
||||
@import "../components/wrapper";
|
||||
@import "../components/status";
|
||||
@import "../components/carousel";
|
||||
@import '../components/form/fieldset';
|
||||
@import '../components/form/group';
|
||||
@import '../components/form/input-group';
|
||||
@import '../components/form/text';
|
||||
@import '../components/form/textarea';
|
||||
@import '../components/form/checks';
|
||||
@import '../components/form/city';
|
||||
@import '../components/form/switch';
|
||||
@import '../components/form/number';
|
||||
@import '../components/form/select';
|
||||
@import '../components/form/list';
|
||||
@import '../components/form/matrix';
|
||||
@import '../components/form/color';
|
||||
@import '../components/form/date';
|
||||
@import '../components/form/date-range';
|
||||
@import '../components/form/image';
|
||||
@import '../components/form/file';
|
||||
@import '../components/form/editor';
|
||||
@import '../components/form/rich-text';
|
||||
@import '../components/form/range';
|
||||
@import '../components/form/repeat';
|
||||
@import '../components/form/tree';
|
||||
@import '../components/form/tree-select';
|
||||
@import '../components/form/combo';
|
||||
@import '../components/form/sub-form';
|
||||
@import '../components/form/chained-select';
|
||||
@import '../components/form/picker';
|
||||
@import '../components/form/qr-code';
|
||||
@import '../components/form/tag';
|
||||
@import '../components/form/rating';
|
||||
@import '../components/form/form';
|
||||
@import '../components/form/transfer-select';
|
||||
@import '../components/form/nested-select';
|
||||
@import '../components/form/icon-picker';
|
||||
|
||||
@import "../components/form/fieldset";
|
||||
@import "../components/form/group";
|
||||
@import "../components/form/input-group";
|
||||
@import "../components/form/text";
|
||||
@import "../components/form/textarea";
|
||||
@import "../components/form/checks";
|
||||
@import "../components/form/city";
|
||||
@import "../components/form/switch";
|
||||
@import "../components/form/number";
|
||||
@import "../components/form/select";
|
||||
@import "../components/form/list";
|
||||
@import "../components/form/matrix";
|
||||
@import "../components/form/color";
|
||||
@import "../components/form/date";
|
||||
@import "../components/form/date-range";
|
||||
@import "../components/form/image";
|
||||
@import "../components/form/file";
|
||||
@import "../components/form/editor";
|
||||
@import "../components/form/rich-text";
|
||||
@import "../components/form/range";
|
||||
@import "../components/form/repeat";
|
||||
@import "../components/form/tree";
|
||||
@import "../components/form/tree-select";
|
||||
@import "../components/form/combo";
|
||||
@import "../components/form/sub-form";
|
||||
@import "../components/form/chained-select";
|
||||
@import "../components/form/picker";
|
||||
@import "../components/form/qr-code";
|
||||
@import "../components/form/tag";
|
||||
@import "../components/form/rating";
|
||||
@import "../components/form/form";
|
||||
@import "../components/form/transfer-select";
|
||||
@import "../components/form/nested-select";
|
||||
@import "../components/form/icon-picker";
|
||||
|
||||
@import "../utilities";
|
||||
@import '../utilities';
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ type DrawerPosition = 'top' | 'right' | 'bottom' | 'left';
|
|||
|
||||
export interface DrawerProps {
|
||||
className?: string;
|
||||
bodyClassName?: string;
|
||||
size: any;
|
||||
overlay: boolean;
|
||||
onHide: () => void;
|
||||
|
|
@ -123,7 +124,8 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
|||
size,
|
||||
onHide,
|
||||
disabled,
|
||||
overlay
|
||||
overlay,
|
||||
bodyClassName
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
|
|
@ -166,7 +168,11 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
|
|||
) : null}
|
||||
<div
|
||||
ref={this.contentRef}
|
||||
className={cx(`${ns}Drawer-content`, fadeStyles[status])}
|
||||
className={cx(
|
||||
`${ns}Drawer-content`,
|
||||
bodyClassName,
|
||||
fadeStyles[status]
|
||||
)}
|
||||
>
|
||||
<a
|
||||
onClick={disabled ? undefined : onHide}
|
||||
|
|
|
|||
Loading…
Reference in New Issue