problems: tweak styles

This commit is contained in:
Alexander Zobnin
2019-01-18 11:58:27 +03:00
parent 2a70366ea9
commit 1a0a0859f6
3 changed files with 21 additions and 20 deletions

View File

@@ -36,34 +36,34 @@
.rt-tr-group { .rt-tr-group {
flex: 0 0 auto; flex: 0 0 auto;
border-bottom: solid 2px $problems-border-color; border-bottom: solid 1px $problems-border-color;
border-left: solid 2px transparent; // border-left: solid 2px transparent;
&:last-child { &:last-child {
border-bottom: solid 2px $problems-border-color; border-bottom: solid 1px $problems-border-color;
} }
&:hover { &:hover {
border-left: solid 2px $problems-table-row-hovered-shadow-color; // 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; // box-shadow: $problems-table-row-hovered-shadow;
z-index: 1; z-index: 1;
} }
.rt-tr.-even { .rt-tr.-even {
margin-left: 0; // margin-left: 0;
background: $problems-table-row-hovered; background: $problems-table-row-hovered;
.rt-td:first-child { .rt-td:first-child {
margin-left: 0; // margin-left: 0;
} }
} }
.problem-details-container { .problem-details-container {
border-left-color: $problems-table-row-hovered-shadow-color; // border-left-color: $problems-table-row-hovered-shadow-color;
box-shadow: 0px 0px 5px rgba($blue, 0.5); // box-shadow: 0px 0px 5px rgba($blue, 0.5);
} }
} }
@@ -81,9 +81,9 @@
&.-even { &.-even {
background: $problems-table-stripe; background: $problems-table-stripe;
margin-left: -2px; // margin-left: -2px;
.rt-td:first-child { .rt-td:first-child {
margin-left: 2px; // margin-left: 2px;
} }
} }
} }
@@ -237,13 +237,14 @@
.problem-details-container { .problem-details-container {
display: flex; display: flex;
padding-top: 4px;
background-color: $problem-details-background; background-color: $problem-details-background;
border: 1px solid $problems-border-color; // border: 1px solid $problems-border-color;
border-left: 2px solid $problem-details-background; // border-left: 2px solid $problem-details-background;
margin-left: -2px; // margin-left: -2px;
border-bottom-width: 0px; border-bottom-width: 0px;
max-height: 0; max-height: 0px;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
// transition: all 0.3s ease-out; // transition: all 0.3s ease-out;
@@ -254,7 +255,7 @@
&.show { &.show {
max-height: 20rem; max-height: 20rem;
opacity: 1; opacity: 1;
box-shadow: inset -1px 2px 8px $problem-container-shadow; box-shadow: inset -3px 3px 10px $problem-container-shadow;
} }
.problem-details-row { .problem-details-row {

View File

@@ -9,9 +9,9 @@ $zbx-card-background-stop: rgba(38, 38, 40, 0.8);
$action-button-color: $blue-dark; $action-button-color: $blue-dark;
$action-button-text-color: $gray-4; $action-button-text-color: $gray-4;
$problems-border-color: #1b1b1b; $problems-border-color: #353535;
$problems-table-stripe: $dark-3; $problems-table-stripe: $dark-3;
$problems-table-row-hovered: darken($problems-table-stripe, 2%); $problems-table-row-hovered: lighten($problems-table-stripe, 4%);
$problems-table-row-hovered-shadow-color: rgba($blue, 0.5); $problems-table-row-hovered-shadow-color: rgba($blue, 0.5);
$problems-table-row-hovered-shadow: 0px 0px 8px $problems-table-row-hovered-shadow-color; $problems-table-row-hovered-shadow: 0px 0px 8px $problems-table-row-hovered-shadow-color;
$problem-details-background: $dark-3; $problem-details-background: $dark-3;

View File

@@ -9,9 +9,9 @@ $zbx-card-background-stop: rgba(221, 228, 237, 1);
$action-button-color: #497dc0; $action-button-color: #497dc0;
$action-button-text-color: $gray-6; $action-button-text-color: $gray-6;
$problems-border-color: #e5e5e5; $problems-border-color: #9d9d9d;
$problems-table-stripe: $gray-6; $problems-table-stripe: $gray-6;
$problems-table-row-hovered: $white; $problems-table-row-hovered: #a2e0ef;
$problems-table-row-hovered-shadow-color: $blue; $problems-table-row-hovered-shadow-color: $blue;
$problems-table-row-hovered-shadow: 0px 1px 8px 1px $problems-table-row-hovered-shadow-color; $problems-table-row-hovered-shadow: 0px 1px 8px 1px $problems-table-row-hovered-shadow-color;
$problem-details-background: $gray-6; $problem-details-background: $gray-6;