diff options
author | 2018-08-21 12:12:47 +0300 | |
---|---|---|
committer | 2018-08-21 12:12:54 +0300 | |
commit | 4611ecf0928196aabfdb20b9dbeb89e5977ac293 (patch) | |
tree | b060fc6b2e8aa768243e8d50ea275a2646c29d4b /workflow-designer-ui/src/main/frontend/resources/scss | |
parent | 1c519a911f04a03d066b123d011e37902b0941fc (diff) |
bugRelease1 after changes
Issue-ID: SDC-1655
Change-Id: I0e049a77751c9df930d9d70bbe7ea6697df7a573
Signed-off-by: Yarin Dekel <yarind@amdocs.com>
Diffstat (limited to 'workflow-designer-ui/src/main/frontend/resources/scss')
11 files changed, 72 insertions, 118 deletions
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss index cd5e6db5..edde536f 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss @@ -1,4 +1,5 @@ +@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss'; @import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss'; -@import 'common/customVariables'; @import 'common/fonts'; @import 'common/utils'; +@import 'common/customVariables'; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss index 9472fe68..1a532c88 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss @@ -1,90 +1,16 @@ $cursor-disabled: not-allowed !default; $cursor-pointer: pointer; -$heading-font-1: 28px; -$heading-font-2: 24px; -$heading-font-3: 20px; -$heading-font-4: 16px; -$heading-font-5: 14px; - -$body-font-1: 14px; -$body-font-2: 13px; -$body-font-3: 12px; -$body-font-4: 10px; - -@mixin regular-font() { - font-family: OpenSans-Regular, Arial, sans-serif; - font-style: normal; - font-weight: 400; -} - -@mixin italic-font() { - font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif; - font-style: italic; - font-weight: 400; -} - -@mixin semibold-font() { - font-family: OpenSans-Semibold, Arial, sans-serif; - font-style: normal; - font-weight: 600; -} - -@mixin body-1() { - @include regular-font; - font-size: $body-font-1; -} - -@mixin body-1-semibold() { - @include semibold-font; +@mixin body-1-emphasis() { + @include base-font-semibold; font-size: $body-font-1; } -@mixin body-2() { - @include regular-font; - font-size: $body-font-2; -} - -@mixin body-2-semibold() { - @include semibold-font; - font-size: $body-font-2; -} - -@mixin body-3() { - @include regular-font; - font-size: $body-font-3; -} - -@mixin body-4() { - @include regular-font; - font-size: $body-font-4; -} - -@mixin heading-1() { - @include regular-font; - font-size: $heading-font-1; -} - -@mixin heading-1-semibold() { - @include semibold-font; +@mixin heading-1-emphasis() { + @include base-font-semibold; font-size: $heading-font-1; } -@mixin heading-4() { - @include regular-font; - font-size: $heading-font-4; -} - -@mixin heading-4-semibold() { - @include semibold-font; - font-size: $heading-font-4; -} - -@mixin heading-5() { - @include regular-font; - font-size: $heading-font-5; -} - .flex { display: flex; flex: 1; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss index 3cf90bc9..7a35b38c 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss @@ -74,6 +74,11 @@ $browserPrefixes: webkit moz o ms; @include prefix(box-shadow, $value, $box-shadow-radius-prefix); } +@mixin sticky($value) { + position: sticky; + top: $value; +} + @mixin text-shadow($value) { @include prefix(text-shadow, $value, $text-shadow-radius-prefix); } 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 c0cc1091..6862d554 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 @@ -23,4 +23,12 @@ pointer-events: none; opacity: 0.4; } + + .selectable { + user-select: text; + } + + .separator { + border-left: 1px solid $silver; + } } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss index 6cff0561..c830c028 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss @@ -16,7 +16,7 @@ flex-direction: column; background-color: $light-silver; .group-name { - @include heading-4-semibold; + @include heading-4-emphasis; @include ellipsis; display: block; padding: 24px 12px 13px 40px; @@ -45,13 +45,13 @@ @include ellipsis; white-space: normal; &.selected { - @include body-1-semibold; + @include body-1-emphasis; border-left: 4px solid $blue; padding-left: 18px; color: $blue; } &.bold-name { - @include body-1-semibold; + @include body-1-emphasis; } } } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss index 6e1e9795..58f1f995 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss @@ -22,7 +22,7 @@ text { text-anchor: end; - @include body-2-semibold; + @include body-2-emphasis; fill: $blue; } diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss index 45985a65..4fa8d841 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss @@ -7,10 +7,10 @@ .group-name-wrapper { width: 245px; .group-name { - @include heading-4-semibold; + @include heading-4-emphasis; @include ellipsis; display: block; - padding: 24px 12px 13px 40px; + padding: 24px 12px 13px 20px; background-color: $white; } } @@ -25,6 +25,7 @@ padding-left: 16px; padding-right: 100px; border-left: 1px solid #eaeaea; + height: 45px; .vc-separator { border-left: 1px solid $silver; @@ -33,12 +34,13 @@ .version-status-container { .version-selector-more-versions { + @include body-1-emphasis; color: $blue; cursor: pointer; } .version-selector { - margin-top: 0px; + margin-top: 0; padding-right: 10px; margin-right: 15px; margin-left: 10px; 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 76f3f658..ea5bba28 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 @@ -80,7 +80,7 @@ } &__label { text-transform: uppercase; - @include body-1-semibold; + @include body-1-emphasis; } &:hover { color: $blue; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss index 6e8b3522..f11c2c0a 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss @@ -1,19 +1,19 @@ .general-page { @include body-1; - padding: 0 131px 20px 100px; + padding: 35px 90px 0 50px; background-color: #fff; .general-page-title { height: 110px; line-height: 110px; - @include heading-1-semibold; + @include heading-1-emphasis; color: $dark-gray; } .general-page-content { display: grid; - grid-template-columns: 50% 50%; - grid-gap: 30px; + grid-template-columns: 60% 40%; + grid-gap: 40px; color: #444; .description-part textarea { @@ -24,7 +24,7 @@ .version-info-part { background-color: $light-silver; height: 200px; - margin-top: 25px; + margin-top: 22px; padding: 20px; box-sizing: border-box; .label { 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 8625403f..bc12a150 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 @@ -10,7 +10,7 @@ &__title { height: 110px; line-height: 110px; - @include heading-1-semibold; + @include heading-1-emphasis; color: $dark-gray; } @@ -26,7 +26,7 @@ &__tab { padding: 12px; - @include body-1-semibold; + @include body-1-emphasis; @include border(1px, 1px, 0, 1px); background-color: $light-silver; color: $gray; @@ -50,7 +50,7 @@ overflow-y: auto; &__thead { background-color: $silver; - @include body-1-semibold; + @include body-1-emphasis; position: -webkit-sticky; position: sticky; top: 0px; diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss index 67883fbb..24f632db 100644 --- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss +++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss @@ -1,19 +1,32 @@ .overview-page { @include body-1; - padding: 25px; + color: $dark-gray; + overflow-y: auto; + height: 100vh; .overview-content { display: flex; flex-wrap: wrap; + min-height: 775px; + + .overview-separator { + border-left: 1px solid $silver; + } .workflow-details { @extend .flex; - padding: 20px 0 0 60px; + @media (min-width: 1076px) { + @include sticky(30px); + } + max-height: 600px; + padding: 0 45px 0 56px; flex-direction: column; - .description-part textarea{ - height: 200px; - padding-top: 5px; + .description-part { + padding-top: 20px; + textarea{ + height: 200px; + } } .save-description { @@ -31,7 +44,10 @@ margin-bottom: 5px; } .value { - margin-bottom: 10px; + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } } } } @@ -45,7 +61,7 @@ .overview-header { @include heading-1; text-transform: uppercase; - margin: 35px 0 35px 60px; + margin: 63px 0 35px 56px; color: $blue; } @@ -56,24 +72,16 @@ @mixin version-page-sub-title(){ color: $text-black; text-transform: uppercase; - //background-color: $white; border-bottom: 1px solid $light-gray; padding: 12px 0 10px 45px; } .versions-page-view { - height: 100%; - overflow: auto; - padding: 0 35px 0 90px; + padding: 0 56px 0 45px; display: flex; flex: 2; flex-direction: column; - .svg-icon-wrapper { - justify-content: flex-start; - margin: 5px; - } - .create-new-version { @extend .text-uppercase; display: flex; @@ -104,7 +112,7 @@ .versions-page-list-and-tree { display: flex; - margin-top: 20px; + margin-top: 10px; .version-tree-wrapper { display: flex; @@ -113,7 +121,10 @@ @include version-page-box-shadow(); .version-tree-title-container { - @include body-1-semibold(); + @include body-1-emphasis(); + @media (min-width: 1076px) { + @include sticky(1px); + } background-color: $light-silver; display: flex; align-items: center; @@ -143,7 +154,6 @@ .version-list { @extend .flex; - color: $text-black; flex-direction: column; .version-list-items { @@ -170,6 +180,7 @@ padding: 15px 30px; @include version-page-box-shadow(); height: 70px; + max-height: 70px; &:hover { background-color: $row-hover-color; @@ -187,8 +198,10 @@ &.header-row { height: 40px; background-color: $light-silver; - - @include body-1-semibold(); + @media (min-width: 1076px) { + @include sticky(1px); + } + @include body-1-emphasis(); @include version-page-sub-title(); padding: 15px 27px; @@ -214,11 +227,10 @@ &.item-description, &.item-last-edited { @include body-1; - color: $dark-gray; } &.item-description, &.header-description { - flex: 2 1 0; + flex: 1 1 0; } &.item-description > .description-text { |