新增全局按钮样式
This commit is contained in:
134
src/assets/styles/custom/button.scss
Normal file
134
src/assets/styles/custom/button.scss
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
// Color variables
|
||||||
|
$orange: #ff9800;
|
||||||
|
$orange-hover: #ffb74d;
|
||||||
|
|
||||||
|
$blue: #2196f3;
|
||||||
|
$blue-hover: #42a5f5;
|
||||||
|
|
||||||
|
$red: #f44336;
|
||||||
|
$red-hover: #ef5350;
|
||||||
|
|
||||||
|
$green: #4caf50;
|
||||||
|
$green-hover: #66bb6a;
|
||||||
|
|
||||||
|
$purple: #9c27b0;
|
||||||
|
$purple-hover: #ab47bc;
|
||||||
|
|
||||||
|
$teal: #009688;
|
||||||
|
$teal-hover: #26a69a;
|
||||||
|
|
||||||
|
$indigo: #3f51b5;
|
||||||
|
$indigo-hover: #5c6bc0;
|
||||||
|
|
||||||
|
$pink: #e91e63;
|
||||||
|
$pink-hover: #ec407a;
|
||||||
|
|
||||||
|
$cyan: #00bcd4;
|
||||||
|
$cyan-hover: #26c6da;
|
||||||
|
|
||||||
|
$amber: #ffc107;
|
||||||
|
$amber-hover: #ffd54f;
|
||||||
|
|
||||||
|
$brown: #795548;
|
||||||
|
$brown-hover: #8d6e63;
|
||||||
|
|
||||||
|
$grey: #9e9e9e;
|
||||||
|
$grey-hover: #bdbdbd;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
&.orange-btn {
|
||||||
|
background-color: $orange;
|
||||||
|
|
||||||
|
& &:hover {
|
||||||
|
background-color: $orange-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blue-btn {
|
||||||
|
background-color: $blue;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.red-btn {
|
||||||
|
background-color: $red;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $red-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.green-btn {
|
||||||
|
background-color: $green;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $green-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.purple-btn {
|
||||||
|
background-color: $purple;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $purple-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.teal-btn {
|
||||||
|
background-color: $teal;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $teal-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.indigo-btn {
|
||||||
|
background-color: $indigo;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $indigo-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pink-btn {
|
||||||
|
background-color: $pink;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $pink-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.cyan-btn {
|
||||||
|
background-color: $cyan;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $cyan-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.amber-btn {
|
||||||
|
background-color: $amber;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $amber-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.brown-btn {
|
||||||
|
background-color: $brown;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $brown-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.grey-btn {
|
||||||
|
background-color: $grey;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $grey-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/assets/styles/custom/index.scss
Normal file
1
src/assets/styles/custom/index.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@forward './button';
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
@forward './base';
|
@forward './base';
|
||||||
@forward './variables';
|
@forward './variables';
|
||||||
@forward './ant-design';
|
@forward './ant-design';
|
||||||
|
@forward './custom/index';
|
||||||
Reference in New Issue
Block a user