Skip to content

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

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

parent 7cede16d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 266 additions and 100 deletions
element-variables.scss
View file @ 20e5525d
This diff is collapsed.
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