perf: 优化工作量配色

This commit is contained in:
kuaifan 2022-03-23 11:52:03 +08:00
parent 98729cfa7b
commit 590b76a884
6 changed files with 180 additions and 130 deletions

View File

@ -165,24 +165,24 @@
justify-content: center;
cursor: pointer;
&.start {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
}
@ -407,24 +407,24 @@
margin-right: 4px;
text-align: center;
&.start {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
> pre {
@ -775,24 +775,24 @@
margin-right: 3px;
text-align: center;
&.start {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
}
@ -979,35 +979,32 @@
color: $primary-text-color !important;
&.start {
color: #595959 !important;
color: $flow-status-start-color !important;
}
&.progress {
color: #0171c2 !important;
color: $flow-status-progress-color !important;
}
&.test {
color: #0171c2 !important;
color: $flow-status-test-color !important;
}
&.end {
color: #038a24 !important;
color: $flow-status-end-color !important;
}
&:hover,
&.ivu-cascader-menu-item-active {
&.project-list-flow-cascader-item {
&.start {
background-color: rgba(38, 38, 38, 0.05);
background-color: rgba($flow-status-start-color, 0.1);
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
background-color: rgba($flow-status-progress-color, 0.1);;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
background-color: rgba($flow-status-test-color, 0.1);;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
background-color: rgba($flow-status-end-color, 0.1);;
}
}
}

View File

@ -61,24 +61,24 @@
vertical-align: middle;
overflow: hidden;
&.start {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
}
@ -321,31 +321,80 @@
}
&.start {
border-color: #e5e5e5;
border-color:rgba($flow-status-start-color, 0.2);
&:hover {
border-color: #bfbfbf
border-color: rgba($flow-status-start-color, 0.7);
}
.ivu-radio-checked .ivu-radio-inner {
border-color: $flow-status-start-color;
box-shadow: none;
}
.ivu-radio-inner::after {
background-color: $flow-status-start-color;
}
.ivu-checkbox-checked .ivu-checkbox-inner {
border-color: $flow-status-start-color;
background-color: $flow-status-start-color;
}
}
&.progress {
border-color: #ccecff;
border-color: rgba($flow-status-progress-color, 0.2);
&:hover {
border-color: #87d2ff
border-color: rgba($flow-status-progress-color, 0.7);
}
.ivu-radio-checked .ivu-radio-inner {
border-color: $flow-status-progress-color;
box-shadow: none;
}
.ivu-radio-inner::after {
background-color: $flow-status-progress-color;
}
.ivu-checkbox-checked .ivu-checkbox-inner {
border-color: $flow-status-progress-color;
background-color: $flow-status-progress-color;
}
}
&.test {
border-color: #ccecff;
border-color: rgba($flow-status-test-color, 0.2);
&:hover {
border-color: #87d2ff
border-color: rgba($flow-status-test-color, 0.7);
}
.ivu-radio-checked .ivu-radio-inner {
border-color: $flow-status-test-color;
box-shadow: none;
}
.ivu-radio-inner::after {
background-color: $flow-status-test-color;
}
.ivu-checkbox-checked .ivu-checkbox-inner {
border-color: $flow-status-test-color;
background-color: $flow-status-test-color;
}
}
&.end {
border-color: #cafac8;
border-color: rgba($flow-status-end-color, 0.2);
&:hover {
border-color: #64d16d
border-color: rgba($flow-status-end-color, 0.7);
}
.ivu-radio-checked .ivu-radio-inner {
border-color: $flow-status-end-color;
box-shadow: none;
}
.ivu-radio-inner::after {
background-color: $flow-status-end-color;
}
.ivu-checkbox-checked .ivu-checkbox-inner {
border-color: $flow-status-end-color;
background-color: $flow-status-end-color;
}
}
.ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner {
background-color: #f3f3f3 !important;
border-color: #dcdee2 !important;
}
}
@ -380,23 +429,20 @@
}
&.start {
background: rgba(38,38,38,0.05);
color: #595959
background-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background: rgba(27,154,238,0.1);
color: #0171c2
background-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background: rgba(27,154,238,0.1);
color: #0171c2
background-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background: rgba(21,173,49,0.1);
color: #038a24
background-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
.name {

View File

@ -65,26 +65,30 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&.start,
&.archived {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-archived-color, 0.1);
border-color: rgba($flow-status-archived-color, 0.1);
color: $flow-status-archived-color;
}
&.start {
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
}
@ -355,24 +359,24 @@
text-align: center;
cursor: pointer;
&.start {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
}

View File

@ -82,27 +82,24 @@
color: #595959;
&.start {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
}

View File

@ -178,24 +178,24 @@
margin-right: 3px;
text-align: center;
&.start {
background-color: rgba(38, 38, 38, 0.05);
border-color: rgba(38, 38, 38, 0.05);
color: #595959;
background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba($flow-status-progress-color, 0.1);;
color: $flow-status-progress-color;
}
&.test {
background-color: rgba(27, 154, 238, 0.1);
border-color: rgba(27, 154, 238, 0.1);
color: #0171c2;
background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba($flow-status-test-color, 0.1);;
color: $flow-status-test-color;
}
&.end {
background-color: rgba(21, 173, 49, 0.1);
border-color: rgba(21, 173, 49, 0.1);
color: #038a24;
background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba($flow-status-end-color, 0.1);;
color: $flow-status-end-color;
}
}
}

View File

@ -1,3 +1,9 @@
$primary-color: #8bcf70;
$primary-title-color: #303133;
$primary-text-color: #606266;
$flow-status-archived-color: #7f7f7f;
$flow-status-start-color: #FF7070;
$flow-status-progress-color: #fc984b;
$flow-status-test-color: #2f99ec;
$flow-status-end-color: #0bc037;