Skip to content

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

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

parent 7cede16d
Expand all Hide 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,19 +27,7 @@
@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 {
border: 0;
}
......@@ -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) {
&,
&:hover,
&:focus {
&:hover {
color: $--button-disabled-font-color;
cursor: not-allowed;
background-image: none;
......@@ -88,9 +55,9 @@
&.is-plain {
&,
&:hover,
&:focus {
background-color: $--color-white;
&:hover {
cursor: not-allowed;
background-color: $--button-disabled-background-color;
border-color: $--button-disabled-border-color;
color: $--button-disabled-font-color;
}
......@@ -121,20 +88,48 @@
border-radius: 50%;
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 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 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 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 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 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 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";
@mixin button-plain($color) {
@mixin button-plain($color, $background-color, $border-color,$color-hover, $background-color-hover, $border-color-hover) {
color: $color;
background: mix($--color-white, $color, 90%);
border-color: mix($--color-white, $color, 60%);
background: $background-color;
border-color: $border-color;
&:hover,
&:focus {
@if($color==#4EC87C){
background: red;
border-color: #CFEFDF;
color: $color;
}
&:hover {
background: $background-color-hover;
border-color: $border-color-hover;
color: $color-hover;
}
&:active {
background: mix($--color-black, $color, $--button-active-shade-percent);
border-color: mix($--color-black, $color, $--button-active-shade-percent);
color: $--color-white;
background: $background-color-hover;
border-color: $border-color-hover;
color: $color-hover;
outline: none;
}
&.is-disabled {
&,
&:hover,
&:focus,
&:hover
&:active {
color: mix($--color-white, $color, 40%);
background-color: mix($--color-white, $color, 90%);
border-color: mix($--color-white, $color, 80%);
background-color: $--button-disabled-background-color;
border-color: $--button-disabled-border-color;
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;
background-color: $background-color;
border-color: $border-color;
&:hover,
&:focus {
background: mix($--color-white, $background-color, $--button-hover-tint-percent);
border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
color: $color;
&:hover {
background: $background-color-hover;
border-color: $border-color-hover;
color: $color-hover;
}
&:active {
background: mix($--color-black, $background-color, $--button-active-shade-percent);
border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
color: $color;
background: $background-color-hover;
border-color: $border-color-hover;
color: $color-hover;
outline: none;
}
&.is-active {
background: mix($--color-black, $background-color, $--button-active-shade-percent);
border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
color: $color;
background: $background-color-hover;
border-color: $border-color-hover;
color: $color-hover;
}
&.is-disabled {
......@@ -62,14 +62,15 @@
&:hover,
&:focus,
&:active {
color: $--color-white;
background-color: mix($background-color, $--color-white);
border-color: mix($border-color, $--color-white);
background-color: $--button-disabled-background-color;
border-color: $--button-disabled-border-color;
color: $--button-disabled-font-color;
}
}
&.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