Skip to content

S
style_tool
Commit 70c61894 authored by 刘安琪's avatar 刘安琪
Browse files
Options

修改按钮相关配置值，增加特殊颜色变量

parent e0e38917
Show whitespace changes
Inline Side-by-side
Showing with 199 additions and 28 deletions
element-variables.scss
View file @ 70c61894
...@@ -16,7 +16,19 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; ...@@ -16,7 +16,19 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
/* Color /* Color
-------------------------- */ -------------------------- */
/// color|1|Brand Color|0 /// color|1|Brand Color|0
$--color-primary: #000000 !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
...@@ -31,13 +43,52 @@ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; / ...@@ -31,13 +43,52 @@ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--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: #67C23A !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-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-warning: #E6A23C !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|1|Functional Color|1
$--color-danger: #F56C6C !default; $--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: #909399 !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: #C0C4CC !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
...@@ -515,48 +569,67 @@ $--button-font-weight: $--font-weight-primary !default; ...@@ -515,48 +569,67 @@ $--button-font-weight: $--font-weight-primary !default;
/// borderRadius||Border|2 /// borderRadius||Border|2
$--button-border-radius: $--border-radius-base !default; $--button-border-radius: $--border-radius-base !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-padding-vertical: 12px !default; $--button-padding-vertical: 10px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-padding-horizontal: 20px !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: 10px !default; $--button-medium-padding-vertical: 9px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-medium-padding-horizontal: 20px !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: 9px !default; $--button-small-padding-vertical: 7px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-small-padding-horizontal: 15px !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: 7px !default; $--button-mini-padding-vertical: 5px !default;
/// padding||Spacing|3 /// padding||Spacing|3
$--button-mini-padding-horizontal: 15px !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: $--color-white !default; $--button-disabled-background-color: $--background-color-lighter !default;
/// color||Color|0 /// color||Color|0
$--button-disabled-border-color: $--border-color-lighter !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;
......
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