test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

contextmenu 支持左侧呼出

Browse Source
This commit is contained in:
liaoxuezhi 2019-11-20 10:35:31 +08:00
parent d9495a734d
commit 097079446b
3 changed files with 142 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

307
scss/_variables.scss
View File

@ -35,17 +35,31 @@ $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;
@ -85,13 +99,11 @@ $boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default;
// 窗口适配
$breakpoints: (
xs: 0,
$breakpoints: (xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
xl: 1200px) !default;
// 段落间距
$paragraph-marginBottom: 1rem !default;
@ -147,14 +159,10 @@ $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;
@ -175,16 +183,14 @@ $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;
@ -217,9 +223,7 @@ $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,10 +231,8 @@ $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;
@ -353,10 +355,8 @@ $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;
@ -364,17 +364,13 @@ $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;
@ -462,8 +458,7 @@ $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;
@ -478,20 +473,16 @@ $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;
@ -650,15 +641,10 @@ $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;
@ -700,14 +686,10 @@ $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;
@ -736,10 +718,7 @@ $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;
@ -765,10 +744,7 @@ $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;
@ -776,40 +752,28 @@ $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;
@ -821,8 +785,10 @@ $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;
@ -831,26 +797,20 @@ $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;
@ -860,10 +820,8 @@ $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;
@ -883,10 +841,8 @@ $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;
@ -926,10 +882,8 @@ $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;
@ -945,9 +899,7 @@ $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;
@ -1002,9 +954,7 @@ $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;
@ -1020,9 +970,7 @@ $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;
@ -1048,18 +996,13 @@ $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;
@ -1077,16 +1020,12 @@ $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;
@ -1109,18 +1048,14 @@ $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;
@ -1153,10 +1088,7 @@ $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;
@ -1171,10 +1103,8 @@ $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;
@ -1190,10 +1120,8 @@ $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;
@ -1201,10 +1129,7 @@ $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;
@ -1217,17 +1142,15 @@ $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;
@ -1239,7 +1162,8 @@ $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;
@ -1248,16 +1172,12 @@ $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;
@ -1270,16 +1190,12 @@ $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;
@ -1288,10 +1204,7 @@ $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;
@ -1465,4 +1378,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;

24
scss/components/_context-menu.scss
View File

@ -41,7 +41,8 @@
box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.34);
color: rgba(0, 0, 0, 0.75);
font-family: -apple-system, Lucida Grande;
font-family: -apple-system,
Lucida Grande;
font-size: 14px;
line-height: 15px;
@ -77,7 +78,8 @@
&-item {
position: relative;
> a {
>a {
white-space: nowrap;
display: block;
padding: 0 20px;
@ -86,7 +88,7 @@
color: inherit;
}
&:not(.is-disabled):hover > a {
&:not(.is-disabled):hover>a {
text-decoration: none;
color: #fff;
background: -webkit-linear-gradient(top, #648bf5, #2866f2);
@ -96,12 +98,12 @@
cursor: pointer;
}
&.is-disabled > a {
&.is-disabled>a {
color: #999;
pointer-events: none;
}
&.has-child > a::after {
&.has-child>a::after {
content: '';
width: 0;
height: 0;
@ -114,7 +116,8 @@
right: 0;
transform: translateY(-50%);
}
&.has-child:hover > a::after {
&.has-child:hover>a::after {
border-color: transparent transparent transparent #fff;
}
}
@ -124,7 +127,7 @@
list-style: none;
}
&-item:hover > &-subList {
&-item:hover>&-subList {
display: block;
animation-duration: 0.35s;
animation-fill-mode: both;
@ -162,6 +165,11 @@
}
}
&--left &-item:hover>&-subList {
left: auto;
right: 100%;
}
&-overlay {
position: fixed !important;
top: 0;
@ -171,4 +179,4 @@
bottom: 0;
background: transparent;
}
}
}

21
src/components/ContextMenu.tsx
View File

@ -40,6 +40,7 @@ interface ContextMenuState {
menus: Array<MenuItem | MenuDivider>;
x: number;
y: number;
align?: 'left' | 'right';
}
export class ContextMenu extends React.Component<
@ -58,7 +59,7 @@ export class ContextMenu extends React.Component<
return ContextMenu.instance;
}
state = {
state: ContextMenuState = {
isOpened: false,
menus: [],
x: -99999,
@ -80,12 +81,16 @@ export class ContextMenu extends React.Component<
}
@autobind
openContextMenus(info: {x: number; y: number}, menus: Array<MenuItem>) {
openContextMenus(
info: {x: number; y: number; align?: 'left' | 'right'},
menus: Array<MenuItem>
) {
this.setState({
isOpened: true,
x: info.x,
y: info.y,
menus: menus
menus: menus,
align: info.align
});
}
@ -183,7 +188,13 @@ export class ContextMenu extends React.Component<
<div
ref={this.menuRef}
role="contextmenu"
className={cx('ContextMenu', className)}
className={cx(
'ContextMenu',
{
'ContextMenu--left': this.state.align === 'left'
},
className
)}
>
<div
style={{left: `${this.state.x}px`, top: `${this.state.y}px`}}
@ -205,7 +216,7 @@ export const ThemedContextMenu = themeable(ContextMenu);
export default ThemedContextMenu;
export function openContextMenus(
info: Event | {x: number; y: number},
info: Event | {x: number; y: number; align?: 'left' | 'right'},
menus: Array<MenuItem | MenuDivider>
) {
return ContextMenu.getInstance().openContextMenus(info, menus);