diff options
author | 2018-08-29 10:25:14 +0300 | |
---|---|---|
committer | 2018-08-29 10:26:30 +0300 | |
commit | 7f36de0b3bb7e0dcbc80b92819831d3631f7efd4 (patch) | |
tree | 0e5f6304c03c43aed3f100f8b3b34e6f0d09a96a /workflow-designer-ui/src/main/frontend/resources | |
parent | 7b771d212127f74a6bd5f6d1a85c39a0b71416d3 (diff) |
Add scrollbars to Input/Output table
Issue-ID: SDC-1686
Change-Id: I384bc04685a8f5cbbaedcb6d499fac7c0ed300ea
Signed-off-by: Malek <malek.zoabi@amdocs.com>
Diffstat (limited to 'workflow-designer-ui/src/main/frontend/resources')
4 files changed, 74 insertions, 11 deletions
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss index 974317e8..93c75bf5 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss @@ -8,5 +8,4 @@ @import 'components/loader'; @import 'components/tree'; @import 'components/customModal'; - - +@import 'components/scrollbars'; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss new file mode 100644 index 00000000..d036c714 --- /dev/null +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss @@ -0,0 +1,63 @@ +.ps__rail-x { + opacity: 1; + height: 4px; + /* there must be 'bottom' or 'top' for ps__rail-x */ + bottom: 0px; +} + +.ps__rail-y { + opacity: 1; + width: 4px; + /* there must be 'right' or 'left' for ps__rail-y */ + right: 0; +} + +.ps__thumb-x { + background-color: $light-gray; + border-radius: 0px; + height: 4px; + /* there must be 'bottom' for ps__thumb-x */ + bottom: 0px; +} + +.ps__thumb-y { + background-color: $light-gray; + border-radius: 0px; + width: 4px; + /* there must be 'right' for ps__thumb-y */ + right: 0px; +} + +.ps:hover > .ps__rail-x, +.ps:hover > .ps__rail-y, +.ps--focus > .ps__rail-x, +.ps--focus > .ps__rail-y, +.ps--scrolling-x > .ps__rail-x, +.ps--scrolling-y > .ps__rail-y { + opacity: 1; + background-color: transparent; +} + +.ps .ps__rail-x:hover, +.ps .ps__rail-y:hover, +.ps .ps__rail-x:focus, +.ps .ps__rail-y:focus, +.ps .ps__rail-x.ps--clicking, +.ps .ps__rail-y.ps--clicking { + opacity: 1; + background-color: transparent; +} + +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x, +.ps__rail-x.ps--clicking .ps__thumb-x { + background-color: $light-gray; + height: 4px; +} + +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, +.ps__rail-y.ps--clicking .ps__thumb-y { + background-color: $light-gray; + width: 4px; +} 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 bc12a150..56a8dd6b 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 @@ -45,17 +45,17 @@ } &__table { - min-height: 102px; - max-height: calc(100vh - 202px); - overflow-y: auto; &__thead { background-color: $silver; @include body-1-emphasis; - position: -webkit-sticky; - position: sticky; - top: 0px; - z-index: 1; } + .scrollbars { + min-height: 102px; + max-height: calc(100vh - 243px); + overflow: auto; + position: relative; + } + &__tbody { } } @@ -83,7 +83,7 @@ flex: 1; display: flex; align-items: center; - padding: 20px 17px; + padding: 22px 17px; &--empty { padding: 20px; color: $dark-gray; @@ -114,7 +114,7 @@ .sdc-label__error { margin: unset; position: absolute; - bottom: -20px; + bottom: -22px; } } } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/style.scss b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss index 49278565..88e33a9c 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/style.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss @@ -2,5 +2,6 @@ @import '../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; @import 'common'; @import '../../node_modules/sdc-ui/lib/css/style.css'; +@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css'; @import 'components'; @import 'features'; |