From eef2764e29550ae7bb33f7d8985772d78c15047c Mon Sep 17 00:00:00 2001 From: Malek Date: Sun, 5 Aug 2018 15:19:57 +0300 Subject: Fix catalog/inputOutput styles Issue-ID: SDC-1597 Change-Id: I19e0e18f556dc31d99a6b40e6e8b23b6a8294dd1 Signed-off-by: Malek --- .../resources/scss/components/_layout.scss | 31 ++++++++++---------- .../resources/scss/components/_loader.scss | 3 +- .../frontend/resources/scss/features/_catalog.scss | 15 +++++----- .../resources/scss/features/_inputOutput.scss | 34 ++++++++++++++-------- .../resources/scss/features/_workflow.scss | 4 +-- 5 files changed, 48 insertions(+), 39 deletions(-) (limited to 'workflow-designer-ui/src/main/frontend/resources') diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss index fc51e812..316412e4 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss @@ -1,20 +1,21 @@ .workflow-app { - height: 100%; - * { - box-sizing: border-box; - } + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; - .version-wrapper { - height: 100%; - display: flex; - flex-direction: column; - } + * { + box-sizing: border-box; + } - .custom-textarea { - resize: none; - } -} + .custom-textarea { + resize: none; + } -#root { - height: 100%; + .version-wrapper { + display: grid; + grid-template-rows: 70px 1fr; + height: 100vh; + } } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss index eb91d7c7..36488e93 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss @@ -7,6 +7,7 @@ position: absolute; background-color: #E1E4E6; opacity: 0.5; + z-index: 99999; } .tlv-loader { height: 63px; @@ -156,5 +157,3 @@ } } } - - \ No newline at end of file diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss index e46e84c1..76f3f658 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss @@ -1,8 +1,10 @@ .wf-catalog { + overflow: auto; background-color: $light-silver; - height: 100%; - display: flex; - flex-direction: column; + display: grid; + grid-template-rows: 35px 1fr; + height: 100vh; + padding-bottom: 20px; .header { align-items: center; display: flex; @@ -16,20 +18,19 @@ } } .main { - flex: 1; &__header { display: flex; justify-content: space-between; align-items: center; padding: 25px 60px; &__total { - @include body-1-semibold; + @include body-1; color: $dark-gray; } &__order { display: flex; &__label { - @include body-1-semibold; + @include body-1; color: $dark-gray; } &__alphabetical { @@ -79,7 +80,7 @@ } &__label { text-transform: uppercase; - @include body-1; + @include body-1-semibold; } &:hover { color: $blue; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss index 68146f48..8625403f 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss @@ -4,8 +4,8 @@ border-style: solid; border-color: $light-gray; } - padding: 0 100px 20px 100px; - flex: 1; + padding: 44px; + max-width: 1567px; &__title { height: 110px; @@ -16,7 +16,6 @@ &__header { display: flex; - @include body-1-semibold; &__right { flex: 1; display: flex; @@ -27,6 +26,7 @@ &__tab { padding: 12px; + @include body-1-semibold; @include border(1px, 1px, 0, 1px); background-color: $light-silver; color: $gray; @@ -45,9 +45,18 @@ } &__table { + min-height: 102px; + max-height: calc(100vh - 202px); + overflow-y: auto; &__thead { background-color: $silver; @include body-1-semibold; + position: -webkit-sticky; + position: sticky; + top: 0px; + z-index: 1; + } + &__tbody { } } @@ -74,20 +83,22 @@ flex: 1; display: flex; align-items: center; - padding: 25px 30px; + padding: 20px 17px; &--empty { padding: 20px; color: $dark-gray; - @include body-1-semibold; + @include body-1; + text-transform: uppercase; justify-content: center; } .input-output-select { width: 100%; height: 32px; - border: solid 1px #d2d2d2; + @include border(); border-radius: 2px; - color: #5a5a5a; + padding-left: 5px; + color: $text-black; } .sdc-input { @@ -110,14 +121,13 @@ &__add { cursor: pointer; + @include body-1; + text-transform: uppercase; @include border(0, 0, 0, 1px); padding-left: 10px; margin-left: 10px; } - &__search { - } - &__td, &__th { .sdc-checkbox { @@ -127,10 +137,10 @@ flex: unset; justify-content: center; text-align: center; - width: 140px; + width: 127px; } &--icon { - width: 100px; + width: 98px; .svg-icon-wrapper { cursor: pointer; &:hover { diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss index 58d1df98..f959d17f 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss @@ -1,6 +1,4 @@ .workflow-view { display: grid; grid-template-columns: 245px 1fr; - height: auto; - flex: 1; -} \ No newline at end of file +} -- cgit 1.2.3-korg