Skip to content

S
style_tool
Commit 20e5525d authored by 刘安琪's avatar 刘安琪
Browse files
Options

修改按钮原生方法，增加参数，补充特殊颜色变量，覆盖按钮样式

parent 7cede16d
Show whitespace changes
Inline Side-by-side
Showing with 266 additions and 100 deletions
element-variables.scss
View file @ 20e5525d
...@@ -17,6 +17,18 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; ...@@ -17,6 +17,18 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
-------------------------- */ -------------------------- */
/// color|1|Brand Color|0 /// color|1|Brand Color|0
$--color-primary: #0994DC !default; $--color-primary: #0994DC !default;
$--color-primary-hover: #0885C6 !default;
$--color-primary-background-plain: #FFFFFF !default;
$--color-primary-border-plain: #0994DC !default;
$--color-primary-text-plain: #0994DC !default;
$--color-primary-background-plain-hover: #EDF6FC !default;
$--color-primary-border-plain-hover: #0885C6 !default;
$--color-primary-text-plain-hover: #0885C6 !default;
$--color-default-hover: #EDF6FC !default;
$--color-default-border-plain: #E4E4E4 !default;
$--color-default-text-plain: #999999 !default;
/// color|1|Background Color|4 /// color|1|Background Color|4
$--color-white: #FFFFFF !default; $--color-white: #FFFFFF !default;
/// color|1|Background Color|4 /// color|1|Background Color|4
...@@ -32,12 +44,51 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; / ...@@ -32,12 +44,51 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
/// color|1|Functional Color|1 /// color|1|Functional Color|1
$--color-success: #4EC87C !default; $--color-success: #4EC87C !default;
$--color-success-hover: #43BF73 !default;
$--color-success-background-plain: #EBF8F2 !default;
$--color-success-border-plain: #CFEFDF !default;
$--color-success-text-plain: #4EC87C !default;
$--color-success-background-plain-hover: #E1F2EA !default;
$--color-success-border-plain-hover: #43C072 !default;
$--color-success-text-plain-hover: #43BF73 !default;
/// color|1|Functional Color|1 /// color|1|Functional Color|1
$--color-warning: #FFA533 !default; $--color-warning: #FFA533 !default;
$--color-warning-hover: #F29924 !default;
$--color-warning-background-plain: #FFF5E6 !default;
$--color-warning-border-plain: #F8DDC0 !default;
$--color-warning-text-plain: #FFA533 !default;
$--color-warning-background-plain-hover: #FAEDD9 !default;
$--color-warning-border-plain-hover: #F0D2B2 !default;
$--color-warning-text-plain-hover: #F29924 !default;
/// color|1|Functional Color|1 /// color|1|Functional Color|1
$--color-danger: #FF3D33 !default; $--color-danger: #FF3D33 !default;
$--color-danger-hover: #F22F24 !default;
$--color-danger-background-plain: #FCEEED !default;
$--color-danger-border-plain: #FCDDDC !default;
$--color-danger-text-plain: #FF3D33 !default;
$--color-danger-background-plain-hover: #FAE7E6 !default;
$--color-danger-border-plain-hover: #F5CDCB !default;
$--color-danger-text-plain-hover: #F22F24 !default;
/// color|1|Functional Color|1
$--color-hint: #FFBF00 !default;
$--color-hint-hover: #F2B600 !default;
$--color-hint-background-plain: #FFF9E1 !default;
$--color-hint-border-plain: #FFE3BE !default;
$--color-hint-text-plain: #FFBF00 !default;
$--color-hint-background-plain-hover: #FAE7E6 !default;
$--color-hint-border-plain-hover: #F5CDCB !default;
$--color-hint-text-plain-hover: #EBB102 !default;
/// color|1|Functional Color|1 /// color|1|Functional Color|1
$--color-info: #FFBF00 !default; $--color-info: #00BBF2 !default;
$--color-info-hover: #00B0E5 !default;
$--color-info-background-plain: #EAF4FF !default;
$--color-info-border-plain: #D5E8FC !default;
$--color-info-text-plain: #666666 !default;
$--color-info-background-plain-hover: #BED7F2 !default;
$--color-info-border-plain-hover: #E0EDFB !default;
$--color-info-text-plain-hover: #605E5E !default;
$--color-success-light: mix($--color-white, $--color-success, 80%) !default; $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
...@@ -49,25 +100,28 @@ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; ...@@ -49,25 +100,28 @@ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|1|Font Color|2 /// color|1|Font Color|2
$--color-text-primary: #303133 !default; $--color-text-primary: #333333 !default;
/// color|1|Font Color|2 /// color|1|Font Color|2
$--color-text-regular: #606266 !default; $--color-text-regular: #666666 !default;
/// color|1|Font Color|2 /// color|1|Font Color|2
$--color-text-secondary: #909399 !default; $--color-text-secondary: #999999 !default;
/// color|1|Font Color|2 /// color|1|Font Color|2
$--color-text-placeholder: #CCCCCC !default; $--color-text-placeholder: #CCCCCC !default;
/// color|1|Border Color|3 /// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default; $--border-color-base: #E4E4E4 !default;
/// color|1|Border Color|3 /// color|1|Border Color|3
$--border-color-light: #E4E7ED !default; $--border-color-light: #E0E0E0 !default;
/// color|1|Border Color|3 /// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default; $--border-color-lighter: #EBEBEB !default;
/// color|1|Border Color|3 /// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default; $--border-color-extra-light: #F2F6FC !default;
// Background // Background
/// color|1|Background Color|4 /// color|1|Background Color|4
$--background-color-base: #F5F7FA !default; $--background-color-base: #F6F6F6 !default;
$--background-color-light: #F5F6F7 !default;
$--background-color-lighter: #F8F8F8 !default;
/* Link /* Link
-------------------------- */ -------------------------- */
...@@ -81,9 +135,9 @@ $--border-style-base: solid !default; ...@@ -81,9 +135,9 @@ $--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default; $--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
/// borderRadius|1|Radius|0 /// borderRadius|1|Radius|0
$--border-radius-base: 4px !default; $--border-radius-base: 3px !default;
/// borderRadius|1|Radius|0 /// borderRadius|1|Radius|0
$--border-radius-small: 2px !default; $--border-radius-small: 3px !default;
/// borderRadius|1|Radius|0 /// borderRadius|1|Radius|0
$--border-radius-circle: 100% !default; $--border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0 /// borderRadius|1|Radius|0
...@@ -517,46 +571,65 @@ $--button-border-radius: $--border-radius-base !default; ...@@ -517,46 +571,65 @@ $--button-border-radius: $--border-radius-base !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-padding-vertical: 10px !default; $--button-padding-vertical: 10px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-padding-horizontal: 18px !default; $--button-padding-horizontal: 16px !default;
/// fontSize||Font|1 /// fontSize||Font|1
$--button-medium-font-size: $--font-size-base !default; $--button-medium-font-size: $--font-size-base !default;
/// borderRadius||Border|2 /// borderRadius||Border|2
$--button-medium-border-radius: $--border-radius-base !default; $--button-medium-border-radius: $--border-radius-base !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-medium-padding-vertical: 8px !default; $--button-medium-padding-vertical: 9px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-medium-padding-horizontal: 18px !default; $--button-medium-padding-horizontal: 16px !default;
/// fontSize||Font|1 /// fontSize||Font|1
$--button-small-font-size: 12px !default; $--button-small-font-size: 12px !default;
$--button-small-border-radius: #{$--border-radius-base - 1} !default; $--button-small-border-radius: $--border-radius-base !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-small-padding-vertical: 7px !default; $--button-small-padding-vertical: 7px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-small-padding-horizontal: 13px !default; $--button-small-padding-horizontal: 16px !default;
/// fontSize||Font|1 /// fontSize||Font|1
$--button-mini-font-size: 12px !default; $--button-mini-font-size: 12px !default;
$--button-mini-border-radius: #{$--border-radius-base - 1} !default; $--button-mini-border-radius: $--border-radius-base !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-mini-padding-vertical: 5px !default; $--button-mini-padding-vertical: 5px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-mini-padding-horizontal: 13px !default; $--button-mini-padding-horizontal: 16px !default;
/// color||Color|0 /// color||Color|0
$--button-default-font-color: $--color-text-regular !default; $--button-default-font-color: $--color-primary !default;
/// color||Color|0 /// color||Color|0
$--button-default-background-color: $--color-white !default; $--button-default-background-color: $--color-white !default;
/// color||Color|0 /// color||Color|0
$--button-default-border-color: $--border-color-base !default; $--button-default-border-color: $--color-primary !default;
/// color||Color|0
$--button-default-font-color-hover: $--color-primary-hover !default;
/// color||Color|0
$--button-default-background-color-hover: $--color-primary-background-plain-hover !default;
/// color||Color|0
$--button-default-border-color-hover: $--color-primary-hover !default;
/// color||Color|0
$--button-default-font-color-plain: $--color-default-text-plain !default;
/// color||Color|0
$--button-default-background-color-plain: $--color-white !default;
/// color||Color|0
$--button-default-border-color-plain: $--color-default-border-plain !default;
/// color||Color|0
$--button-default-font-color-plain-hover: $--color-primary-text-plain-hover !default;
/// color||Color|0
$--button-default-background-color-plain-hover: $--color-primary-background-plain-hover !default;
/// color||Color|0
$--button-default-border-color-plain-hover: $--color-primary-border-plain-hover !default;
/// color||Color|0 /// color||Color|0
$--button-disabled-font-color: $--color-text-placeholder !default; $--button-disabled-font-color: $--color-text-placeholder !default;
/// color||Color|0 /// color||Color|0
$--button-disabled-background-color: #F8F8F8 !default; $--button-disabled-background-color: $--background-color-lighter !default;
/// color||Color|0 /// color||Color|0
$--button-disabled-border-color: #EBEBEB !default; $--button-disabled-border-color: $--border-color-lighter !default;
////button primary
/// color||Color|0 /// color||Color|0
$--button-primary-border-color: $--color-primary !default; $--button-primary-border-color: $--color-primary !default;
/// color||Color|0 /// color||Color|0
...@@ -564,29 +637,127 @@ $--button-primary-font-color: $--color-white !default; ...@@ -564,29 +637,127 @@ $--button-primary-font-color: $--color-white !default;
/// color||Color|0 /// color||Color|0
$--button-primary-background-color: $--color-primary !default; $--button-primary-background-color: $--color-primary !default;
/// color||Color|0 /// color||Color|0
$--button-primary-border-color-hover: $--color-primary-hover !default;
/// color||Color|0
$--button-primary-font-color-hover: $--color-white !default;
/// color||Color|0
$--button-primary-background-color-hover: $--color-primary-hover !default;
/// color||Color|0
$--button-primary-border-color-plain: $--color-primary-border-plain !default;
/// color||Color|0
$--button-primary-font-color-plain: $--color-primary-text-plain !default;
/// color||Color|0
$--button-primary-background-color-plain: $--color-primary-background-plain !default;
/// color||Color|0
$--button-primary-border-color-plain-hover: $--color-primary-border-plain-hover !default;
/// color||Color|0
$--button-primary-font-color-plain-hover: $--color-primary-text-plain-hover !default;
/// color||Color|0
$--button-primary-background-color-plain-hover: $--color-primary-background-plain-hover !default;
///button success
/// color||Color|0
$--button-success-border-color: $--color-success !default; $--button-success-border-color: $--color-success !default;
/// color||Color|0 /// color||Color|0
$--button-success-font-color: $--color-white !default; $--button-success-font-color: $--color-white !default;
/// color||Color|0 /// color||Color|0
$--button-success-background-color: $--color-success !default; $--button-success-background-color: $--color-success !default;
/// color||Color|0 /// color||Color|0
$--button-success-border-color-hover: $--color-success-hover !default;
/// color||Color|0
$--button-success-font-color-hover: $--color-white !default;
/// color||Color|0
$--button-success-background-color-hover: $--color-success-hover !default;
/// color||Color|0
$--button-success-border-color-plain: $--color-success-border-plain !default;
/// color||Color|0
$--button-success-font-color-plain: $--color-success-text-plain !default;
/// color||Color|0
$--button-success-background-color-plain: $--color-success-background-plain !default;
/// color||Color|0
$--button-success-border-color-plain-hover: $--color-success-border-plain-hover !default;
/// color||Color|0
$--button-success-font-color-plain-hover: $--color-success-text-plain-hover !default;
/// color||Color|0
$--button-success-background-color-plain-hover: $--color-success-background-plain-hover !default;
///button warning
/// color||Color|0
$--button-warning-border-color: $--color-warning !default; $--button-warning-border-color: $--color-warning !default;
/// color||Color|0 /// color||Color|0
$--button-warning-font-color: $--color-white !default; $--button-warning-font-color: $--color-white !default;
/// color||Color|0 /// color||Color|0
$--button-warning-background-color: $--color-warning !default; $--button-warning-background-color: $--color-warning !default;
/// color||Color|0 /// color||Color|0
$--button-warning-border-color-hover: $--color-warning-hover !default;
/// color||Color|0
$--button-warning-font-color-hover: $--color-white !default;
/// color||Color|0
$--button-warning-background-color-hover: $--color-warning-hover !default;
/// color||Color|0
$--button-warning-border-color-plain: $--color-warning-border-plain !default;
/// color||Color|0
$--button-warning-font-color-plain: $--color-warning-text-plain !default;
/// color||Color|0
$--button-warning-background-color-plain: $--color-warning-background-plain !default;
/// color||Color|0
$--button-warning-border-color-plain-hover: $--color-warning-border-plain-hover !default;
/// color||Color|0
$--button-warning-font-color-plain-hover: $--color-warning-text-plain-hover !default;
/// color||Color|0
$--button-warning-background-color-plain-hover: $--color-warning-background-plain-hover !default;
///button danger
/// color||Color|0
$--button-danger-border-color: $--color-danger !default; $--button-danger-border-color: $--color-danger !default;
/// color||Color|0 /// color||Color|0
$--button-danger-font-color: $--color-white !default; $--button-danger-font-color: $--color-white !default;
/// color||Color|0 /// color||Color|0
$--button-danger-background-color: $--color-danger !default; $--button-danger-background-color: $--color-danger !default;
/// color||Color|0 /// color||Color|0
$--button-danger-border-color-hover: $--color-danger-hover !default;
/// color||Color|0
$--button-danger-font-color-hover: $--color-white !default;
/// color||Color|0
$--button-danger-background-color-hover: $--color-danger-hover !default;
/// color||Color|0
$--button-danger-border-color-plain: $--color-danger-border-plain !default;
/// color||Color|0
$--button-danger-font-color-plain: $--color-danger-text-plain !default;
/// color||Color|0
$--button-danger-background-color-plain: $--color-danger-background-plain !default;
/// color||Color|0
$--button-danger-border-color-plain-hover: $--color-danger-text-plain-hover !default;
/// color||Color|0
$--button-danger-font-color-plain-hover: $--color-danger-text-plain-hover !default;
/// color||Color|0
$--button-danger-background-color-plain-hover: $--color-danger-background-plain-hover !default;
///button info
/// color||Color|0
$--button-info-border-color: $--color-info !default; $--button-info-border-color: $--color-info !default;
/// color||Color|0 /// color||Color|0
$--button-info-font-color: $--color-white !default; $--button-info-font-color: $--color-white !default;
/// color||Color|0 /// color||Color|0
$--button-info-background-color: $--color-info !default; $--button-info-background-color: $--color-info !default;
/// color||Color|0
$--button-info-border-color-hover: $--color-info-hover !default;
/// color||Color|0
$--button-info-font-color-hover: $--color-white !default;
/// color||Color|0
$--button-info-background-color-hover: $--color-info-hover !default;
/// color||Color|0
$--button-info-border-color-plain: $--color-info-border-plain !default;
/// color||Color|0
$--button-info-font-color-plain: $--color-info-text-plain !default;
/// color||Color|0
$--button-info-background-color-plain: $--color-info-background-plain !default;
/// color||Color|0
$--button-info-border-color-plain-hover: $--color-info-border-plain-hover !default;
/// color||Color|0
$--button-info-font-color-plain-hover: $--color-info-text-plain-hover !default;
/// color||Color|0
$--button-info-background-color-plain-hover: $--color-info-background-plain-hover !default;
$--button-hover-tint-percent: 20% !default; $--button-hover-tint-percent: 20% !default;
$--button-active-shade-percent: 10% !default; $--button-active-shade-percent: 10% !default;
...@@ -992,4 +1163,3 @@ $--breakpoints-spec: ( ...@@ -992,4 +1163,3 @@ $--breakpoints-spec: (
'lg-and-down': (max-width: $--xl - 1), 'lg-and-down': (max-width: $--xl - 1),
'xl-only' : (min-width: $--xl), 'xl-only' : (min-width: $--xl),
); );
node_module/element-theme-chalk/src/button.scss
View file @ 20e5525d
...@@ -27,18 +27,6 @@ ...@@ -27,18 +27,6 @@
@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius); @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
&:hover,
&:focus {
color: $--color-primary;
border-color: $--color-primary-light-7;
background-color: $--color-primary-light-9;
}
&:active {
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
outline: none;
}
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
...@@ -50,31 +38,10 @@ ...@@ -50,31 +38,10 @@
} }
} }
@include when(plain) {
&:hover,
&:focus {
background: $--color-white;
border-color: $--color-primary;
color: $--color-primary;
}
&:active {
background: $--color-white;
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
outline: none;
}
}
@include when(active) {
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
}
@include when(disabled) { @include when(disabled) {
&, &,
&:hover, &:hover {
&:focus {
color: $--button-disabled-font-color; color: $--button-disabled-font-color;
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
...@@ -88,9 +55,9 @@ ...@@ -88,9 +55,9 @@
&.is-plain { &.is-plain {
&, &,
&:hover, &:hover {
&:focus { cursor: not-allowed;
background-color: $--color-white; background-color: $--button-disabled-background-color;
border-color: $--button-disabled-border-color; border-color: $--button-disabled-border-color;
color: $--button-disabled-font-color; color: $--button-disabled-font-color;
} }
...@@ -121,20 +88,48 @@ ...@@ -121,20 +88,48 @@
border-radius: 50%; border-radius: 50%;
padding: $--button-padding-vertical; padding: $--button-padding-vertical;
} }
@include m(default) {
@include button-variant(
$--button-default-font-color, $--button-default-background-color, $--button-default-border-color,
$--button-default-font-color-hover, $--button-default-background-color-hover, $--button-default-border-color-hover,
$--button-default-font-color-plain, $--button-default-background-color-plain, $--button-default-border-color-plain,
$--button-default-font-color-plain-hover, $--button-default-background-color-plain-hover, $--button-default-border-color-plain-hover);
}
@include m(primary) { @include m(primary) {
@include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color); @include button-variant(
$--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color,
$--button-primary-font-color-hover, $--button-primary-background-color-hover, $--button-primary-border-color-hover,
$--button-primary-font-color-plain, $--button-primary-background-color-plain, $--button-primary-border-color-plain,
$--button-primary-font-color-plain-hover, $--button-primary-background-color-plain-hover, $--button-primary-border-color-plain-hover);
} }
@include m(success) { @include m(success) {
@include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color); @include button-variant(
$--button-success-font-color, $--button-success-background-color, $--button-success-border-color,
$--button-success-font-color-hover, $--button-success-background-color-hover, $--button-success-border-color-hover,
$--button-success-font-color-plain, $--button-success-background-color-plain, $--button-success-border-color-plain,
$--button-success-font-color-plain-hover, $--button-success-background-color-plain-hover, $--button-success-border-color-plain-hover);
} }
@include m(warning) { @include m(warning) {
@include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color); @include button-variant(
$--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color,
$--button-warning-font-color-hover, $--button-warning-background-color-hover, $--button-warning-border-color-hover,
$--button-warning-font-color-plain, $--button-warning-background-color-plain, $--button-warning-border-color-plain,
$--button-warning-font-color-plain-hover, $--button-warning-background-color-plain-hover, $--button-warning-border-color-plain-hover);
} }
@include m(danger) { @include m(danger) {
@include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color); @include button-variant(
$--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color,
$--button-danger-font-color-hover, $--button-danger-background-color-hover, $--button-danger-border-color-hover,
$--button-danger-font-color-plain, $--button-danger-background-color-plain, $--button-danger-border-color-plain,
$--button-danger-font-color-plain-hover, $--button-danger-background-color-plain-hover, $--button-danger-border-color-plain-hover);
} }
@include m(info) { @include m(info) {
@include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color); @include button-variant(
$--button-info-font-color, $--button-info-background-color, $--button-info-border-color,
$--button-info-font-color-hover, $--button-info-background-color-hover, $--button-info-border-color-hover,
$--button-info-font-color-plain, $--button-info-background-color-plain, $--button-info-border-color-plain,
$--button-info-font-color-plain-hover, $--button-info-background-color-plain-hover, $--button-info-border-color-plain-hover);
} }
@include m(medium) { @include m(medium) {
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius); @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
......
node_module/element-theme-chalk/src/mixins/_button.scss
View file @ 20e5525d
@import "../common/var"; @import "../common/var";
@mixin button-plain($color) { @mixin button-plain($color, $background-color, $border-color,$color-hover, $background-color-hover, $border-color-hover) {
color: $color; color: $color;
background: mix($--color-white, $color, 90%); background: $background-color;
border-color: mix($--color-white, $color, 60%); border-color: $border-color;
&:hover, &:hover {
&:focus { background: $background-color-hover;
@if($color==#4EC87C){ border-color: $border-color-hover;
background: red; color: $color-hover;
border-color: #CFEFDF;
color: $color;
}
} }
&:active { &:active {
background: mix($--color-black, $color, $--button-active-shade-percent); background: $background-color-hover;
border-color: mix($--color-black, $color, $--button-active-shade-percent); border-color: $border-color-hover;
color: $--color-white; color: $color-hover;
outline: none; outline: none;
} }
&.is-disabled { &.is-disabled {
&, &,
&:hover, &:hover
&:focus,
&:active { &:active {
color: mix($--color-white, $color, 40%); background-color: $--button-disabled-background-color;
background-color: mix($--color-white, $color, 90%); border-color: $--button-disabled-border-color;
border-color: mix($--color-white, $color, 80%); color: $--button-disabled-font-color;
} }
} }
} }
@mixin button-variant($color, $background-color, $border-color) { @mixin button-variant(
$color, $background-color, $border-color,
$color-hover, $background-color-hover, $border-color-hover,
$color-plain, $background-color-plain, $border-color-plain,
$color-plain-hover, $background-color-plain-hover, $border-color-plain-hover) {
color: $color; color: $color;
background-color: $background-color; background-color: $background-color;
border-color: $border-color; border-color: $border-color;
&:hover, &:hover {
&:focus { background: $background-color-hover;
background: mix($--color-white, $background-color, $--button-hover-tint-percent); border-color: $border-color-hover;
border-color: mix($--color-white, $border-color, $--button-hover-tint-percent); color: $color-hover;
color: $color;
} }
&:active { &:active {
background: mix($--color-black, $background-color, $--button-active-shade-percent); background: $background-color-hover;
border-color: mix($--color-black, $border-color, $--button-active-shade-percent); border-color: $border-color-hover;
color: $color; color: $color-hover;
outline: none; outline: none;
} }
&.is-active { &.is-active {
background: mix($--color-black, $background-color, $--button-active-shade-percent); background: $background-color-hover;
border-color: mix($--color-black, $border-color, $--button-active-shade-percent); border-color: $border-color-hover;
color: $color; color: $color-hover;
} }
&.is-disabled { &.is-disabled {
...@@ -62,14 +62,15 @@ ...@@ -62,14 +62,15 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: $--color-white; background-color: $--button-disabled-background-color;
background-color: mix($background-color, $--color-white); border-color: $--button-disabled-border-color;
border-color: mix($border-color, $--color-white); color: $--button-disabled-font-color;
} }
} }
&.is-plain { &.is-plain {
@include button-plain($background-color); @include button-plain($color-plain, $background-color-plain, $border-color-plain,
$color-plain-hover, $background-color-plain-hover, $border-color-plain-hover);
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment