This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 56a02293 fix: update alerting detail style (#317)
56a02293 is described below
commit 56a02293cfd3b62eb46d749895ff628f1830b116
Author: Fine0830 <[email protected]>
AuthorDate: Fri Sep 1 15:38:22 2023 +0800
fix: update alerting detail style (#317)
---
src/views/alarm/Content.vue | 99 +++++++++++++++++++++++++++++++++-
src/views/components/style.scss | 115 ----------------------------------------
2 files changed, 98 insertions(+), 116 deletions(-)
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index 90bf50ee..56001b31 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -142,7 +142,79 @@ limitations under the License. -->
}
</script>
<style lang="scss" scoped>
- @import url("../components/style.scss");
+ .timeline-table {
+ padding: 30px 20px 20px 40px;
+ flex-grow: 1;
+ overflow: auto;
+ height: 100%;
+ }
+
+ .time-line {
+ padding: 14px 30px;
+ min-height: 63px;
+ max-width: 132px;
+ }
+
+ .timeline-table-i {
+ padding: 10px 15px;
+ border-left: 4px solid #eee;
+ position: relative;
+
+ &::after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ width: 7px;
+ height: 7px;
+ left: -23px;
+ top: 25px;
+ border-radius: 4px;
+ background-color: #448dfe;
+ }
+
+ &::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ width: 1px;
+ height: calc(100% + 11px);
+ top: 0;
+ left: -20px;
+ border-radius: 5px;
+ background-color: #448dfe99;
+ }
+ }
+
+ .timeline-table-i-scope {
+ display: inline-block;
+ padding: 0 8px;
+ border: 1px solid;
+ margin-top: -1px;
+ border-radius: 4px;
+ }
+
+ .timeline-item {
+ cursor: pointer;
+ margin-bottom: 9px;
+ }
+
+ .keys {
+ font-weight: bold;
+ display: inline-block;
+ width: 120px;
+ }
+
+ .source > span {
+ display: inline-block;
+ }
+
+ .source > div {
+ padding-left: 120px;
+ }
+
+ .uuid {
+ width: 280px;
+ }
.tips {
width: 100%;
@@ -150,4 +222,29 @@ limitations under the License. -->
text-align: center;
font-size: $font-size-normal;
}
+
+ .alarm-detail {
+ max-height: 600px;
+ overflow: auto;
+
+ ul {
+ min-height: 100px;
+ overflow: auto;
+ margin-bottom: 20px;
+ }
+
+ li {
+ cursor: pointer;
+
+ > span {
+ width: 160px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ display: inline-block;
+ border-bottom: 1px solid $disabled-color;
+ overflow: hidden;
+ }
+ }
+ }
</style>
diff --git a/src/views/components/style.scss b/src/views/components/style.scss
deleted file mode 100644
index 179e9fb1..00000000
--- a/src/views/components/style.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.timeline-table {
- padding: 30px 20px 20px 40px;
- flex-grow: 1;
- overflow: auto;
- height: 100%;
-}
-
-.time-line {
- padding: 14px 30px;
- min-height: 63px;
- max-width: 132px;
-}
-
-.timeline-table-i {
- padding: 10px 15px;
- border-left: 4px solid #eee;
- position: relative;
-
- &::after {
- content: "";
- display: inline-block;
- position: absolute;
- width: 7px;
- height: 7px;
- left: -23px;
- top: 25px;
- border-radius: 4px;
- background-color: #448dfe;
- }
-
- &::before {
- content: "";
- display: inline-block;
- position: absolute;
- width: 1px;
- height: calc(100% + 11px);
- top: 0;
- left: -20px;
- border-radius: 5px;
- background-color: #448dfe99;
- }
-}
-
-.timeline-table-i-scope {
- display: inline-block;
- padding: 0 8px;
- border: 1px solid;
- margin-top: -1px;
- border-radius: 4px;
-}
-
-.timeline-item {
- cursor: pointer;
- margin-bottom: 9px;
-}
-
-.alarm-detail {
- max-height: 600px;
- overflow: auto;
-
- ul {
- min-height: 100px;
- overflow: auto;
- margin-bottom: 20px;
- }
-
- li {
- cursor: pointer;
-
- > span {
- width: 160px;
- height: 20px;
- line-height: 20px;
- text-align: center;
- display: inline-block;
- border-bottom: 1px solid $disabled-color;
- overflow: hidden;
- }
- }
-}
-
-.keys {
- font-weight: bold;
- display: inline-block;
- width: 120px;
-}
-
-.source > span {
- display: inline-block;
-}
-
-.source > div {
- padding-left: 120px;
-}
-
-.uuid {
- width: 280px;
-}
