contextmenu 支持左侧呼出

scss/_variables.scss

@@ -35,17 +35,31 @@ $dark: $gray800 !default;
 $remFactor: 16px !default;
 
 // 字体相关
-$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, 'SF Pro SC',
+$fontFamilySansSerif: -apple-system,
-  'SF Pro Text', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Segoe UI', Roboto,
+BlinkMacSystemFont,
-  'Hiragino Sans GB', 'Arial', 'microsoft yahei ui', 'Microsoft YaHei', SimSun,
+'SF Pro SC',
-  sans-serif !default;
+'SF Pro Text',
-$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+'Helvetica Neue',
-  'Courier New', monospace !default;
+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(
+$fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px`
-  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: (
+$breakpoints: (xs: 0,
-  xs: 0,
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1200px) !default;
-) !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(
+$Layout-aside-onAcitve-bg: saturate(darken($Layout-aside-bg, 5%),
-  darken($Layout-aside-bg, 5%),
+  2.5%) !default;
-  2.5%
+$Layout-aside-subList-bg: saturate(darken($Layout-aside-bg, 10%),
-) !default;
+  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(
+$Layout-brandBar-color: desaturate(lighten($Layout-brand-bg, 40%),
-  lighten($Layout-brand-bg, 40%),
+  10%) !default;
-  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-paddingY: ($Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize) / 2 !default;
-    $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
+$Modal-body-borderTop: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
-  lighten($Modal-content-borderColor, 5%) !default;
+$Modal-body-borderBottom: $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(
+$Alert--danger-borderColor: darken(adjust-hue($Alert--danger-bg, -10),
-  adjust-hue($Alert--danger-bg, -10),
+  5%) !default;
-  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(
+$Alert--success-borderColor: darken(adjust-hue($Alert--success-bg, -10),
-  adjust-hue($Alert--success-bg, -10),
+  5%) !default;
-  5%
-) !default;
 
 $Alert--warning-color: #8a6d3b !default;
 $Alert--warning-bg: #fcf8e3 !default;
-$Alert--warning-borderColor: darken(
+$Alert--warning-borderColor: darken(adjust-hue($Alert--warning-bg, -10),
-  adjust-hue($Alert--warning-bg, -10),
+  5%) !default;
-  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) /
+$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / 2;
-  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-onHover-borderColor: darken($Table-onChecked-borderColor,
-  $Table-onChecked-borderColor,
+  5%) !default;
-  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-borderColor: darken($Table-onModified-onHover-bg,
-  $Table-onModified-onHover-bg,
+  5%) !default;
-  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-paddingY: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
-    $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-label-paddingTop: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 !default;
-    $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(
+$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%),
-  lighten($Form-selectValue-color, 40%),
+  2.5%) !default;
-  2.5%
+$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%),
-) !default;
+  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-paddingY: ($InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
-    $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-paddingY: ($Button-height - $Button-borderWidth * 2 - $Button-lineHeight * $Button-fontSize)/2 !default;
-    $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-paddingY: ($Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * $Button--xs-fontSize)/2 !default;
-    $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-paddingY: ($Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * $Button--sm-fontSize)/2 !default;
-    $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-paddingY: ($Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * $Button--md-fontSize)/2 !default;
-    $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-paddingY: ($Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * $Button--lg-fontSize)/2 !default;
-    $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,
+$Button-transition: color 0.15s ease-in-out,
-  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+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-onActive-border: darken($Button--primary-border,
-  $Button--primary-border,
+  12.5%) !default;
-  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-onHover-border: darken($Button--secondary-border,
-  $Button--secondary-border,
+  10%) !default;
-  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-onActive-border: darken($Button--secondary-border,
-  $Button--secondary-border,
+  12.5%) !default;
-  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-onActive-border: darken($Button--success-border,
-  $Button--success-border,
+  12.5%) !default;
-  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-onActive-border: darken($Button--warning-border,
-  $Button--warning-border,
+  12.5%) !default;
-  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-onActive-border: darken($Button--default-border,
-  $Button--default-border,
+  12.5%) !default;
-  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-menuItem-paddingY: ($DropDown-menu-height - $fontSizeBase * $lineHeightBase) / 2 !default;
-    $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-paddingY: ($ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize)/2 - $ColorPicker-borderWidth !default;
-    $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-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;
-    $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-paddingY: ($Calendar-input-height - $Calendar-input-lineHeight * $Calendar-input-fontSize) / 2;
-    $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-paddingY: ($Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize)/2 !default;
-    $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-onHover-border: darken($Calendar-btnCancel-border,
-  $Calendar-btnCancel-border,
+  10%) !default;
-  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-onActive-border: darken($Calendar-btnCancel-border,
-  $Calendar-btnCancel-border,
+  12.5%) !default;
-  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-onHover-borderColor: darken($ListControl-item-borderColor,
-  $ListControl-item-borderColor,
+  10%) !default;
-  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-borderColor: darken($ListControl-item-onActive-bg,
-  $ListControl-item-onActive-bg,
+  10%) !default;
-  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-paddingY: ($Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight * $Combo-addBtn-fontSize)/2 !default;
-    $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-borderColor: darken($Combo--vertical-itemToolbar-bg,
-  $Combo--vertical-itemToolbar-bg,
+  5%) !default;
-  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-onActive-border: darken($SubForm--addBtn-border,
-  $SubForm--addBtn-border,
+  12.5%) !default;
-  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-paddingY: ($SubForm--addBtn-height - $Button-borderWidth * 2 - $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize)/2 !default;
-    $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-boxShadow: 0 0 0 $InputRange-slider-onFocus-borderRadius transparentize($InputRange-slider-bg, 0.8) !default;
-  $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-slider-onDisabled-border: px2rem(1px) solid $InputRange-onDisabled-color !default;
-  $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-onHover-border: darken($ImageControl-addBtn-border,
-  $ImageControl-addBtn-border,
+  10%) !default;
-  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-onActive-border: darken($ImageControl-addBtn-border,
-  $ImageControl-addBtn-border,
+  12.5%) !default;
-  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-onHover-border: darken($TagControl-sugBtn-border,
-  $TagControl-sugBtn-border,
+  10%) !default;
-  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-onActive-border: darken($TagControl-sugBtn-border,
-  $TagControl-sugBtn-border,
+  12.5%) !default;
-  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-paddingY: ($TagControl-sugBtn-height - $Button-borderWidth * 2 - $TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize)/2 !default;
-    $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;

scss/components/_context-menu.scss

@@ -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;
   }
-}
+}

src/components/ContextMenu.tsx

@@ -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);