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; justify-content: center;
cursor: pointer; cursor: pointer;
&.start { &.start {
background-color: rgba(38, 38, 38, 0.05); background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba(38, 38, 38, 0.05); border-color: rgba($flow-status-start-color, 0.1);
color: #595959; color: $flow-status-start-color;
} }
&.progress { &.progress {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-progress-color, 0.1);;
color: #0171c2; color: $flow-status-progress-color;
} }
&.test { &.test {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-test-color, 0.1);;
color: #0171c2; color: $flow-status-test-color;
} }
&.end { &.end {
background-color: rgba(21, 173, 49, 0.1); background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba(21, 173, 49, 0.1); border-color: rgba($flow-status-end-color, 0.1);;
color: #038a24; color: $flow-status-end-color;
} }
} }
} }
@ -407,24 +407,24 @@
margin-right: 4px; margin-right: 4px;
text-align: center; text-align: center;
&.start { &.start {
background-color: rgba(38, 38, 38, 0.05); background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba(38, 38, 38, 0.05); border-color: rgba($flow-status-start-color, 0.1);
color: #595959; color: $flow-status-start-color;
} }
&.progress { &.progress {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-progress-color, 0.1);;
color: #0171c2; color: $flow-status-progress-color;
} }
&.test { &.test {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-test-color, 0.1);;
color: #0171c2; color: $flow-status-test-color;
} }
&.end { &.end {
background-color: rgba(21, 173, 49, 0.1); background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba(21, 173, 49, 0.1); border-color: rgba($flow-status-end-color, 0.1);;
color: #038a24; color: $flow-status-end-color;
} }
} }
> pre { > pre {
@ -775,24 +775,24 @@
margin-right: 3px; margin-right: 3px;
text-align: center; text-align: center;
&.start { &.start {
background-color: rgba(38, 38, 38, 0.05); background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba(38, 38, 38, 0.05); border-color: rgba($flow-status-start-color, 0.1);
color: #595959; color: $flow-status-start-color;
} }
&.progress { &.progress {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-progress-color, 0.1);;
color: #0171c2; color: $flow-status-progress-color;
} }
&.test { &.test {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-test-color, 0.1);;
color: #0171c2; color: $flow-status-test-color;
} }
&.end { &.end {
background-color: rgba(21, 173, 49, 0.1); background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba(21, 173, 49, 0.1); border-color: rgba($flow-status-end-color, 0.1);;
color: #038a24; color: $flow-status-end-color;
} }
} }
} }
@ -979,35 +979,32 @@
color: $primary-text-color !important; color: $primary-text-color !important;
&.start { &.start {
color: #595959 !important; color: $flow-status-start-color !important;
} }
&.progress { &.progress {
color: #0171c2 !important; color: $flow-status-progress-color !important;
} }
&.test { &.test {
color: #0171c2 !important; color: $flow-status-test-color !important;
} }
&.end { &.end {
color: #038a24 !important; color: $flow-status-end-color !important;
} }
&:hover, &:hover,
&.ivu-cascader-menu-item-active { &.ivu-cascader-menu-item-active {
&.project-list-flow-cascader-item { &.project-list-flow-cascader-item {
&.start { &.start {
background-color: rgba(38, 38, 38, 0.05); background-color: rgba($flow-status-start-color, 0.1);
} }
&.progress { &.progress {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-progress-color, 0.1);;
} }
&.test { &.test {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-test-color, 0.1);;
} }
&.end { &.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; vertical-align: middle;
overflow: hidden; overflow: hidden;
&.start { &.start {
background-color: rgba(38, 38, 38, 0.05); background-color: rgba($flow-status-start-color, 0.1);
border-color: rgba(38, 38, 38, 0.05); border-color: rgba($flow-status-start-color, 0.1);
color: #595959; color: $flow-status-start-color;
} }
&.progress { &.progress {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-progress-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-progress-color, 0.1);;
color: #0171c2; color: $flow-status-progress-color;
} }
&.test { &.test {
background-color: rgba(27, 154, 238, 0.1); background-color: rgba($flow-status-test-color, 0.1);;
border-color: rgba(27, 154, 238, 0.1); border-color: rgba($flow-status-test-color, 0.1);;
color: #0171c2; color: $flow-status-test-color;
} }
&.end { &.end {
background-color: rgba(21, 173, 49, 0.1); background-color: rgba($flow-status-end-color, 0.1);;
border-color: rgba(21, 173, 49, 0.1); border-color: rgba($flow-status-end-color, 0.1);;
color: #038a24; color: $flow-status-end-color;
} }
} }
} }
@ -321,31 +321,80 @@
} }
&.start { &.start {
border-color: #e5e5e5; border-color:rgba($flow-status-start-color, 0.2);
&:hover { &: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 { &.progress {
border-color: #ccecff; border-color: rgba($flow-status-progress-color, 0.2);
&:hover { &: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 { &.test {
border-color: #ccecff; border-color: rgba($flow-status-test-color, 0.2);
&:hover { &: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 { &.end {
border-color: #cafac8; border-color: rgba($flow-status-end-color, 0.2);
&:hover { &: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 { &.start {
background: rgba(38,38,38,0.05); background-color: rgba($flow-status-start-color, 0.1);
color: #595959 color: $flow-status-start-color;
} }
&.progress { &.progress {
background: rgba(27,154,238,0.1); background-color: rgba($flow-status-progress-color, 0.1);;
color: #0171c2 color: $flow-status-progress-color;
} }
&.test { &.test {
background: rgba(27,154,238,0.1); background-color: rgba($flow-status-test-color, 0.1);;
color: #0171c2 color: $flow-status-test-color;
} }
&.end { &.end {
background: rgba(21,173,49,0.1); background-color: rgba($flow-status-end-color, 0.1);;
color: #038a24 color: $flow-status-end-color;
} }
.name { .name {

View File

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

View File

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

View File

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

View File

@ -1,3 +1,9 @@
$primary-color: #8bcf70; $primary-color: #8bcf70;
$primary-title-color: #303133; $primary-title-color: #303133;
$primary-text-color: #606266; $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;