Skip to content

Commit

Permalink
fix: 修复插件a标签样式冲突
Browse files Browse the repository at this point in the history 
# Reviewed, transaction id: 4819
  • Loading branch information
@liangling0628
liangling0628 committed Mar 28, 2024
1 parent 01a0398 commit c5c9c86
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 61 deletions.
6 changes: 4 additions & 2 deletions .stylelintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ module.exports = {
{
files: ['./src/**/*.scss'],
plugins: ['stylelint-scss', 'stylelint-order'],
rules: {
'scss/at-extend-no-missing-placeholder': true,
'scss/dollar-variable-pattern': '^_?[a-z]+[\\w-]*$',
},
},
],
rules: {
Expand Down Expand Up @@ -51,8 +55,6 @@ module.exports = {
ignore: ['after-comment'],
},
],
'scss/at-extend-no-missing-placeholder': true,
'scss/dollar-variable-pattern': '^_?[a-z]+[\\w-]*$',
'selector-list-comma-newline-after': 'always',
'selector-max-id': 3,
'selector-no-vendor-prefix': true,
Expand Down
102 changes: 59 additions & 43 deletions src/alert/src/sass/query.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
.copy-mode-input {
display: flex;
align-items: center;
background-color: #F0F1F5;
background-color: #f0f1f5;
border-radius: 2px;
width: 88px;
height: 26px;
Expand All @@ -144,7 +144,7 @@
cursor: pointer;
.fa-angle-down {
margin-left: auto;
color: #979BA5;
color: #979ba5;
font-size: 12px;
width: 12px;
height: 12px;
Expand All @@ -169,13 +169,15 @@
width: 12px;
height: 12px;
margin-top: -6px;
color: rgba(0,0,0,.25);
color: rgba(0, 0, 0, 0.25);
font-size: 12px;
line-height: 12px;
background: #fff;
cursor: pointer;
opacity: 0;
transition: color .3s ease,opacity .15s ease;
transition:
color 0.3s ease,
opacity 0.15s ease;
}
.metric-label {
color: #63656e;
Expand Down Expand Up @@ -439,18 +441,18 @@
display: flex;
width: 100%;
align-items: center;
color: #3A84FF;
color: #3a84ff;
margin: 12px 0;
.search-play {
display: flex;
align-items: center;
justify-content: center;
height: 26px;
width: 26px;
border: 1px solid #C4C6CC;
border: 1px solid #c4c6cc;
border-radius: 2px;
background-color: white;
color: #979BA5;
color: #979ba5;
margin-left: auto;
cursor: pointer;
font-size: 12px;
Expand All @@ -470,7 +472,7 @@
margin-left: 2px;
cursor: pointer;
&.is-loading {
background: #A3C5FD;
background: #a3c5fd;
color: white;
cursor: not-allowed;
border: none;
Expand All @@ -486,7 +488,7 @@
margin-right: 3px;
}
&.is-loading {
color: #C4C6CC;
color: #c4c6cc;
cursor: not-allowed;
}
}
Expand All @@ -507,15 +509,15 @@
align-items: center;
justify-content: center;
transform: rotate(-90deg);
transition: all ease-in-out .3s;
transition: all ease-in-out 0.3s;
&.is-open {
transform: rotate(0deg);
}
}
.header-content {
display: flex;
align-items: center;
color: #979BA5;
color: #979ba5;
&-item {
margin-left: 24px;
}
Expand Down Expand Up @@ -574,7 +576,6 @@

/* stylelint-disable-next-line declaration-no-important */
background-color: white !important;

}
}
}
Expand Down Expand Up @@ -671,22 +672,22 @@
.select-list {
display: flex;
flex-direction: column;
max-height: 256px;
overflow-y: auto;
max-height: 256px;
overflow-y: auto;
overflow-anchor: none;
&-item {
display: flex;
flex: 0 0 32px;
height: 32px;
color: rgba(0,0,0,.65);
color: rgba(0, 0, 0, 0.65);
align-items: center;
padding: 0 12px;
&:hover {
cursor: pointer;
background-color: #f5f5f5;
}
&.active {
color: rgba(0,0,0,.65);
color: rgba(0, 0, 0, 0.65);
font-weight: 600;
background-color: #f0f8ff;
}
Expand Down Expand Up @@ -733,7 +734,7 @@
width: auto !important;
min-width: 100px !important;
// .target-dropdown-list:last-child div div {
// position: static !important;
// position: static !important;
// top: auto !important;
// left: auto !important;
// right: auto !important;
Expand Down Expand Up @@ -777,7 +778,7 @@
justify-content: center;
margin-left: 10px;
font-size: 14px;
transition: all .3s;
transition: all 0.3s;
&.reflesh-pendding {
animation: 1s rowup linear infinite normal;
}
Expand Down Expand Up @@ -814,7 +815,7 @@
color: #63656e;
height: 22px;
&:hover {
border-color: rgba(58,132,255,.30);
border-color: rgba(58, 132, 255, 0.3);
background-color: #edf4ff;
color: #3a84ff;
cursor: pointer;
Expand All @@ -826,11 +827,11 @@
.ant-tabs-tab {
padding: 8px 0 12px 0;
}
.ant-tabs-tab+.ant-tabs-tab {
.ant-tabs-tab + .ant-tabs-tab {
margin: 0 0 0 6px;
}
.ant-tabs-tab.ant-tabs-tab-active .tab-tag {
border-color: rgba(58,132,255,.30);
border-color: rgba(58, 132, 255, 0.3);
background-color: #edf4ff;
color: #3a84ff;
}
Expand Down Expand Up @@ -984,7 +985,7 @@
}
.ant-checkbox-input,
.ant-checkbox-inner {
top: -3px !important
top: -3px !important;
}
}
}
Expand Down Expand Up @@ -1060,40 +1061,40 @@
}
body {
&.theme-dark {
$monitor-font-color: #ccccdc;
$monitor-bg-color: #111217;
$monitor-border-color: #2C2D36;
$monitor-label-bg-color: #22252b;
$monitor-metric-bg-color: #282b31;
$monitor-font-color: #ccccdc;
$monitor-bg-color: #111217;
$monitor-border-color: #2c2d36;
$monitor-label-bg-color: #22252b;
$monitor-metric-bg-color: #282b31;
.variable-editor,
.monitor-grafana {
color:$monitor-font-color !important;
color: $monitor-font-color !important;
background-color: $monitor-bg-color !important;
.variable-line-label {
color:$monitor-font-color !important;
color: $monitor-font-color !important;
background: $monitor-label-bg-color !important;
}
.function-menu-anchor,
.condition-input-add,
.search-play {
color: #63656E !important;
background: #191B1F !important;
color: #63656e !important;
background: #191b1f !important;
border-color: $monitor-border-color !important;
}
.query-editor-label {
background-color: #1D417E !important;
background-color: #1d417e !important;
}
.editor-form-label {
background-color: $monitor-label-bg-color !important;
color:$monitor-font-color !important;
color: $monitor-font-color !important;
}
.mitric-input {
.mitric-input {
background-color: $monitor-bg-color !important;
&-name {
border-color: $monitor-border-color !important;
}
.metric-label {
color:$monitor-font-color !important;
color: $monitor-font-color !important;
}
}
.promql-editor-instance {
Expand All @@ -1102,12 +1103,12 @@ body {
}
.copy-mode-input {
background-color: $monitor-bg-color !important;
color: #EAEBF0;
color: #eaebf0;
border: 1px solid $monitor-border-color !important;
}
.query-editor-tools {
background-color: #35383D !important;
color: #EAEBF0 !important;
background-color: #35383d !important;
color: #eaebf0 !important;
border: 1px solid $monitor-border-color !important;
}
.mitric-input .ant-cascader-picker-clear {
Expand All @@ -1121,7 +1122,7 @@ body {
}
.metric-dropdown-tag .tab-tag {
background-color: $monitor-metric-bg-color !important;
color: #EAEBF0 !important;
color: #eaebf0 !important;
border: 1px solid $monitor-metric-bg-color !important;
}
.ant-popover-inner-content {
Expand All @@ -1140,14 +1141,14 @@ body {
}
.function-menu-panel {
background-color: $monitor-bg-color !important;
color: #EAEBF0 !important;
color: #eaebf0 !important;
border: 1px solid $monitor-border-color !important;
.list-item {
&.item-active,
&:hover {
background-color: $monitor-metric-bg-color !important;
color: #3a84ff !important;
cursor: pointer !important;
cursor: pointer !important;
}
}
.panel-item {
Expand All @@ -1166,7 +1167,7 @@ body {
.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: $monitor-bg-color !important;
border: 1px solid $monitor-border-color !important;
color: #EAEBF0 !important;
color: #eaebf0 !important;
}
.metric-dropdown-content .content-list .metric-item:not(.is-arrow):hover,
.metric-dropdown-content .content-list .metric-item.is-checked {
Expand All @@ -1179,4 +1180,19 @@ body {
&.theme-light {
background-color: #f4f5f5 !important;
}
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
background-color: transparent;
outline: none;
transition: color 0.3s;
text-decoration-skip: objects;
}
a:hover {
color: inherit;
}
a:active {
color: #366fd9;
}
}
30 changes: 24 additions & 6 deletions src/event/src/sass/query.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@
font-size: 12px;
color: #63656e;

@include query-editor()
@include query-editor();
}

.key-del {
Expand Down Expand Up @@ -402,7 +402,7 @@ body {

.query-editor-tools {
color: #eaebf0 !important;
background-color: #35383d !important;
background-color: #35383d !important;
border: 1px solid $monitor-border-color !important;
}

Expand All @@ -419,7 +419,7 @@ body {

.metric-dropdown-tag .tab-tag {
color: #eaebf0 !important;
background-color: $monitor-metric-bg-color !important;
background-color: $monitor-metric-bg-color !important;
border: 1px solid $monitor-metric-bg-color !important;
}

Expand All @@ -443,15 +443,15 @@ body {

.function-menu-panel {
color: #eaebf0 !important;
background-color: $monitor-bg-color !important;
background-color: $monitor-bg-color !important;
border: 1px solid $monitor-border-color !important;

.list-item {
&.item-active,
&:hover {
color: #3a84ff !important;
cursor: pointer !important;
background-color: $monitor-metric-bg-color !important;
background-color: $monitor-metric-bg-color !important;
}
}

Expand Down Expand Up @@ -491,4 +491,22 @@ body {
&.theme-light {
background-color: #f4f5f5 !important;
}
}

a {
color: inherit;
text-decoration: none;
cursor: pointer;
background-color: transparent;
outline: none;
transition: color 0.3s;
text-decoration-skip: objects;
}

a:hover {
color: inherit;
}

a:active {
color: #366fd9;
}
}
Loading

0 comments on commit c5c9c86

Please sign in to comment.