Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

problems: styles clean up

Browse Source
This commit is contained in:
Alexander Zobnin
2019-02-13 12:32:58 +03:00
parent 55f206d091
commit 10601fc9e8
1 changed files with 2 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/sass/_panel-problems.scss
View File

@@ -44,26 +44,14 @@
} }
&:hover { &:hover {
// border-left: solid 2px $problems-table-row-hovered-shadow-color;
.rt-tr { .rt-tr {
background: $problems-table-row-hovered; background: $problems-table-row-hovered;
// box-shadow: $problems-table-row-hovered-shadow;
z-index: 1; z-index: 1;
} }
.rt-tr.-even { .rt-tr.-even {
// margin-left: 0;
background: $problems-table-row-hovered; background: $problems-table-row-hovered;
.rt-td:first-child {
// margin-left: 0;
}
}
.problem-details-container {
// border-left-color: $problems-table-row-hovered-shadow-color;
// box-shadow: 0px 0px 5px rgba($blue, 0.5);
} }
} }
@@ -73,18 +61,8 @@
transition: 0s; transition: 0s;
} }
// &:hover {
// background: $problems-table-row-hovered;
// box-shadow: 0px 0px 5px rgba($blue, 0.5);
// z-index: 1;
// }
&.-even { &.-even {
background: $problems-table-stripe; background: $problems-table-stripe;
// margin-left: -2px;
.rt-td:first-child {
// margin-left: 2px;
}
} }
} }
} }
@@ -119,7 +97,6 @@
.-center { .-center {
flex: 3; flex: 3;
width: 32rem; width: 32rem;
// height: $footer-height;
.-pageJump { .-pageJump {
margin: 0px 0.4rem; margin: 0px 0.4rem;
@@ -160,10 +137,6 @@
animation: blink-opacity 2s ease-in-out infinite; animation: blink-opacity 2s ease-in-out infinite;
} }
// .problem-description {
// font-weight: 500;
// }
.rt-tr .rt-td { .rt-tr .rt-td {
&.custom-expander { &.custom-expander {
text-align: center; text-align: center;
@@ -177,18 +150,15 @@
color: $problem-expander-expanded-color; color: $problem-expander-expanded-color;
} }
} }
// background: linear-gradient(to bottom, $dark-5 50%, $dark-2 50%);
// background-size: 100% 200%;
// background-position: right bottom;
// transition: all .3s ease-out;
} }
&.custom-expander:hover { &.custom-expander:hover {
// background-position: right top;
background-color: $problem-expander-highlighted-background; background-color: $problem-expander-highlighted-background;
i { i {
color: $problem-expander-highlighted-color; color: $problem-expander-highlighted-color;
} }
} }
&.last-change { &.last-change {
text-align: left; text-align: left;
} }
@@ -199,7 +169,6 @@
font-size: 1.5em; font-size: 1.5em;
i { i {
// margin: 0 1.2em;
width: 100%; width: 100%;
padding-left: 0.6em; padding-left: 0.6em;
text-align: center; text-align: center;
@@ -240,15 +209,11 @@
display: flex; display: flex;
padding-top: 4px; padding-top: 4px;
background-color: $problem-details-background; background-color: $problem-details-background;
// border: 1px solid $problems-border-color;
// border-left: 2px solid $problem-details-background;
// margin-left: -2px;
border-bottom-width: 0px; border-bottom-width: 0px;
max-height: 0px; max-height: 0px;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
// transition: all 0.3s ease-out;
transition-duration: 0.3s; transition-duration: 0.3s;
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition-property: opacity, max-height; transition-property: opacity, max-height;
@@ -294,11 +259,6 @@
} }
.problem-item { .problem-item {
// border-bottom: solid 2px transparent;
// &:hover {
// border-bottom: solid 2px $blue;
// }
.problem-item-name { .problem-item-name {
color: $text-muted; color: $text-muted;
} }
@@ -310,11 +270,9 @@
.problem-statusbar { .problem-statusbar {
// margin-top: auto;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// max-width: 13rem;
&.compact .problem-statusbar-item { &.compact .problem-statusbar-item {
width: 2.5rem; width: 2.5rem;
@@ -328,7 +286,6 @@
background: $problem-statusbar-background; background: $problem-statusbar-background;
margin-right: 2px; margin-right: 2px;
border-radius: 2px; border-radius: 2px;
// border: 1px solid $dark-5;
&:hover { &:hover {
background: darken($problem-statusbar-background, 2%); background: darken($problem-statusbar-background, 2%);
@@ -344,7 +301,6 @@
.fa-icon-container { .fa-icon-container {
color: $problem-statusbar-fired; color: $problem-statusbar-fired;
text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5); text-shadow: 0px 0px 10px rgba($problem-statusbar-fired, 0.5);
// animation: fade-in 1s ease-out;
} }
} }
} }
@@ -376,9 +332,7 @@
.problem-details-middle { .problem-details-middle {
flex: 1 0 auto; flex: 1 0 auto;
// padding: 0.6rem 1rem;
overflow: auto; overflow: auto;
// box-shadow: 1px 0 10px $problem-container-shadow;
.problem-ack-container { .problem-ack-container {
margin: 0.5rem 0.4rem; margin: 0.5rem 0.4rem;
@@ -390,7 +344,6 @@
margin-top: 0.6rem; margin-top: 0.6rem;
margin-left: -0.6rem; margin-left: -0.6rem;
padding: 1.2rem 0.6rem; padding: 1.2rem 0.6rem;
// border-top: 2px solid $dark-4;
overflow: auto; overflow: auto;
box-shadow: $porblem-ack-shadow; box-shadow: $porblem-ack-shadow;
} }
@@ -409,16 +362,12 @@
.problem-ack-user { .problem-ack-user {
color: $text-muted; color: $text-muted;
} }
// span {
// padding-right: 0.6rem;
// }
} }
.problem-details-right { .problem-details-right {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
// background: $dark-4;
color: $text-muted; color: $text-muted;
&.compact { &.compact {
@@ -427,11 +376,8 @@
.problem-details-right-item { .problem-details-right-item {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
// border-bottom: solid 2px transparent;
&:hover { &:hover {
// box-shadow: 1px 0 10px $problem-container-shadow;
// border-bottom: solid 2px $blue;
color: $text-color-emphasis; color: $text-color-emphasis;
.fa-icon-container { .fa-icon-container {
@@ -459,14 +405,12 @@
position: relative; position: relative;
margin: 0.2rem 0; margin: 0.2rem 0;
padding-top: 2.6rem; padding-top: 2.6rem;
// margin-top: auto;
.timeline-info-container { .timeline-info-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
// opacity: 0.8;
.event-timestamp { .event-timestamp {
font-weight: 500; font-weight: 500;
@@ -482,8 +426,6 @@
} }
.problem-event-region { .problem-event-region {
// transition: all 0.2s ease-out;
// opacity: 0.7;
&.problem-event { &.problem-event {
&--ok { &--ok {
@@ -496,7 +438,6 @@
&:hover, &:hover,
&.highlighted { &.highlighted {
// opacity: 1;
stroke: $problem-event-highlighted; stroke: $problem-event-highlighted;
filter: url(#glowShadow); filter: url(#glowShadow);
} }
@@ -560,11 +501,6 @@
} }
} }
} }
// .rt-tr-group {
// transition: top 1s ease-out;
// animation: all 1s ease;
// }
} }
@for $i from 8 through 9 { @for $i from 8 through 9 {
@@ -621,17 +557,6 @@
text-align: left; text-align: left;
} }
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes blink-opacity { @keyframes blink-opacity {
0% { 0% {
opacity: 1; opacity: 1;