aboutsummaryrefslogtreecommitdiffstats
path: root/workflow-designer-ui/src/main/frontend/resources
diff options
context:
space:
mode:
authorMalek <malek.zoabi@amdocs.com>2018-08-29 10:25:14 +0300
committerMalek <malek.zoabi@amdocs.com>2018-08-29 10:26:30 +0300
commit7f36de0b3bb7e0dcbc80b92819831d3631f7efd4 (patch)
tree0e5f6304c03c43aed3f100f8b3b34e6f0d09a96a /workflow-designer-ui/src/main/frontend/resources
parent7b771d212127f74a6bd5f6d1a85c39a0b71416d3 (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')
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/_components.scss3
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss63
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss18
-rw-r--r--workflow-designer-ui/src/main/frontend/resources/scss/style.scss1
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';