From 4a50b51b4ce2019f468e77d034daa509db82f6d5 Mon Sep 17 00:00:00 2001 From: PRINCESANCHEZ <67511950+PRINCESANCHEZ@users.noreply.github.com> Date: Fri, 4 Oct 2024 18:37:13 -0700 Subject: [PATCH] #2193 Convert common-canvas scss files to use Carbon spacing tokens (#2102) Signed-off-by: Prince Sanchez --- canvas_modules/common-canvas/package.json | 6 +-- .../src/common-canvas/common-canvas.scss | 20 +++++----- .../src/common-canvas/svg-canvas-d3.scss | 28 +++++++------- .../components/control-item/control-item.scss | 4 +- .../components/editor-form/editor-form.scss | 4 +- .../components/title-editor/title-editor.scss | 2 +- .../virtualized-table/virtualized-table.scss | 4 +- .../components/wide-flyout/wide-flyout.scss | 2 +- .../controls/dropdown/dropdown.scss | 6 +-- .../expression-builder.scss | 4 +- .../controls/numberfield/numberfield.scss | 6 +-- .../controls/readonly/readonly.scss | 4 +- .../controls/slider/slider.scss | 4 +- .../controls/someofselect/someofselect.scss | 2 +- .../controls/textfield/textfield.scss | 6 +-- .../controls/toggletext/toggletext.scss | 4 +- .../src/common-properties/index.scss | 2 +- .../panels/sub-panel/sub-panel.scss | 6 +-- .../panels/summary/summary.scss | 6 +-- .../panels/tearsheet/tearsheet.scss | 2 +- .../src/context-menu/context-menu.scss | 8 ++-- .../notification-panel.scss | 14 +++---- .../common-canvas/src/palette/palette.scss | 38 +++++++++---------- .../common-canvas/src/toolbar/toolbar.scss | 36 +++++++++--------- .../common-canvas/src/tooltip/tooltip.scss | 12 +++--- .../react-nodes-mapping.scss | 10 +++-- 26 files changed, 119 insertions(+), 121 deletions(-) diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json index abda9a2b6a..47bff42c37 100644 --- a/canvas_modules/common-canvas/package.json +++ b/canvas_modules/common-canvas/package.json @@ -147,9 +147,9 @@ }, "overrides": { "@wojtekmaj/enzyme-adapter-react-17": { - "react": "^18", - "react-dom": "^18" - }, + "react": "^18", + "react-dom": "^18" + }, "enzyme": { "cheerio": "1.0.0-rc.12" } diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss index 95e4fb0650..9e9e5db49c 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss @@ -68,7 +68,7 @@ $panel-border-color: $border-subtle-01; .bottom-panel-drag { border-top: $panel-border-color; cursor: row-resize; - flex: 0 0 2px; + flex: 0 0 $spacing-01; border-top-width: 1px; background: $layer-01; transition: all 0.2s ease-in; @@ -109,7 +109,7 @@ $panel-border-color: $border-subtle-01; .toolbar-overflow-item { button:focus { border-color: transparent; - box-shadow: inset 2px 2px $focus, inset -6px -2px $focus; + box-shadow: inset $spacing-01 $spacing-01 $focus, inset -6px -2px $focus; } } } @@ -128,7 +128,7 @@ $panel-border-color: $border-subtle-01; // cursor is immediately moved away from the toolbar, after it opens. That's because, // when the toolbar opens, the border will be underneath the mouse cursor and so the // mouseLeave event is fired when the cursor is moved away. - border-bottom: 4px solid transparent; + border-bottom: $spacing-02 solid transparent; .toolbar-div { // Position the div 'relative' to text-toolbar so we can animate its @@ -248,7 +248,7 @@ $panel-border-color: $border-subtle-01; margin-right: 7px; } & span { - padding-bottom: 2px; + padding-bottom: $spacing-01; } } } @@ -277,7 +277,7 @@ $panel-border-color: $border-subtle-01; bottom: 30px; border-color: $border-strong-01; border-style: dashed; - border-width: 2px; + border-width: $spacing-01; } .toolbar-item.notificationCounterIcon { @@ -297,13 +297,15 @@ $panel-border-color: $border-subtle-01; .state-tag { @include type-style("productive-heading-01"); + display: flex; + align-items: center; color: $text-inverse; background-color: $background-inverse; width: fit-content; - height: 40px; + height: $spacing-08; position: absolute; /* Positioned relative to the common-canvas-drop-div */ left: 50%; - top: 16px; + top: $spacing-05; transform: translate(-50%, 0%); border-radius: 20px; padding: 9px 0; @@ -311,12 +313,10 @@ $panel-border-color: $border-subtle-01; svg { color: $text-inverse; - position: relative; - top: 3px; margin-left: 14px; } span { - margin: 0 16px 0 10px; + margin: 0 $spacing-05 0 10px; } } diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss index d38a020e96..529d027b6a 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss @@ -45,7 +45,7 @@ $node-warning-color: $support-warning; // Warning yellow $node-label-color: $text-primary; $node-label-font-size: 12px; $node-label-font-weight: 600; -$node-label-display-border: 2px; +$node-label-display-border: $spacing-01; $node-label-entry-border: 6px; $node-label-edit-icon-hover-color: $layer-accent-01; @@ -85,8 +85,8 @@ $comment-text-color: $text-primary; $comment-text-font-size: 12px; $comment-text-font-weight: 500; $comment-text-line-height: 1.2; -$comment-text-display-border: 8px; -$comment-text-entry-border: $comment-text-display-border - 2px; // Remove 2px to allow for focus border +$comment-text-display-border: $spacing-03; +$comment-text-entry-border: $comment-text-display-border - $spacing-01; // Remove 2px to allow for focus border // Link colors $comment-link-color: $border-strong-01; @@ -128,7 +128,7 @@ $link-highlight-color: $support-info; // Supress the default focus highlighting with non-carbon color and round corners. outline: none; // Add our own focus highlighting with our own color and square corners - box-shadow: 0 0 0 2px $focus; + box-shadow: 0 0 0 $spacing-01 $focus; } .d3-foreign-object-text-entry:focus, @@ -292,7 +292,7 @@ $link-highlight-color: $support-info; .d3-node-group.d3-branch-highlight { .d3-node-body-outline { stroke: $layer-selected-inverse; - stroke-width: 2px; + stroke-width: $spacing-01; fill: $highlight; } @@ -304,7 +304,7 @@ $link-highlight-color: $support-info; .d3-node-group.d3-branch-highlight:hover { .d3-node-body-outline { stroke: $layer-selected-inverse; - stroke-width: 2px; + stroke-width: $spacing-01; fill: $button-primary-hover; } } @@ -758,7 +758,7 @@ g.bkg-col-cyan-50 { max-width: 100%; } blockquote { - padding: 0 12px; + padding: 0 $spacing-04; border-left: 3px solid $layer-accent-01; line-height: 8px; } @@ -767,7 +767,7 @@ g.bkg-col-cyan-50 { font-weight: $comment-text-font-weight; line-height: $comment-text-line-height; background-color: $layer-accent-01; - border-radius: 4px; + border-radius: $spacing-02; white-space: pre-wrap; } pre { @@ -775,9 +775,9 @@ g.bkg-col-cyan-50 { font-weight: $comment-text-font-weight; line-height: $comment-text-line-height; background-color: $layer-02; - padding: 4px; + padding: $spacing-02; border: 1px solid $layer-accent-01; - border-radius: 4px; + border-radius: $spacing-02; white-space: pre-wrap; code { background-color: $layer-02; @@ -801,18 +801,18 @@ g.bkg-col-cyan-50 { background-color: $layer-accent-01; text-align: left; tr th { - padding: 8px; - border-bottom: 2px solid $layer-accent-01; + padding: $spacing-03; + border-bottom: $spacing-01 solid $layer-accent-01; } } tbody { @include type-style("body-short-01"); font-size: 12px; tr { - border-bottom: 2px solid $layer-accent-01; + border-bottom: $spacing-01 solid $layer-accent-01; background-color: $layer-02; td { - padding: 8px; + padding: $spacing-03; } } } diff --git a/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss b/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss index 227f41e90e..4f017cdb86 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss @@ -58,8 +58,8 @@ .properties-label-container, .properties-summary-link-container, .properties-checkbox-tooltip-container, .properties-radioset-panel { .tooltip-container { display: flex; - width: 16px; - height: 16px; + width: $spacing-05; + height: $spacing-05; margin-left: $spacing-03; cursor: pointer; } diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss index 3df5f512e7..7b1b823d40 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss @@ -109,8 +109,8 @@ $primary-tab-height: $spacing-08; } } svg { - width: 16px; - height: 16px; + width: $spacing-05; + height: $spacing-05; margin-right: $spacing-03; } } diff --git a/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss b/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss index 41ff237c77..fae44bb2f2 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss @@ -130,7 +130,7 @@ // warning and invalid icons should be aligned with close icon. And input field should stretch full width .properties-title-editor-with-warning, .properties-title-editor-with-error { - width: calc(100% - 2px); // subtract 2px for input active right border + width: calc(100% - #{$spacing-01}); // subtract 2px for input active right border } // Close icon without heading diff --git a/canvas_modules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss b/canvas_modules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss index 01ecf5a6ab..827c44f3ce 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss @@ -202,10 +202,10 @@ padding-left: 3px; } .properties-vt-row-selected { - border-left: 4px solid $button-primary; + border-left: $spacing-02 solid $button-primary; padding-left: 0; &:not(.properties-vt-row-disabled):hover { - border-left: 4px solid $button-primary; + border-left: $spacing-02 solid $button-primary; } } } diff --git a/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss b/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss index b0b83db6c4..10f0eaac77 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss @@ -15,7 +15,7 @@ */ $properties-wf-title-height: 41px; -$properties-modal-buttons-height: 64px; +$properties-modal-buttons-height: $spacing-10; .properties-wf-overlay { position: fixed; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss index 30e0d239af..d5cce52acf 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss @@ -42,7 +42,7 @@ width: inherit; // Override carbon default width: auto background-color: transparent; // Override carbon default background-color: #f4f4f4; padding: 0 1.25rem 0 0; - box-shadow: 0 2px 0 0 $button-primary; + box-shadow: 0 $spacing-01 0 0 $button-primary; &:focus { outline: unset; } @@ -50,12 +50,12 @@ } &.error { .cds--select-input { - box-shadow: 0 2px 0 0 $support-error; + box-shadow: 0 $spacing-01 0 0 $support-error; } } &.warning { .cds--select-input { - box-shadow: 0 2px 0 0 $support-warning; + box-shadow: 0 $spacing-01 0 0 $support-warning; } } } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss index 33ac8f3be2..8bc3bc785c 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss @@ -112,8 +112,8 @@ $operator-margin: 50%; } .properties-operator-title { - padding-top: 1rem; - padding-bottom: 2rem; + padding-top: $spacing-05; + padding-bottom: $spacing-07; width: 100%; font-weight: bold; text-align: center; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.scss b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.scss index bdee8a73a1..2a7f5ed4ac 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.scss @@ -44,18 +44,18 @@ } &.error { input[type="number"]:not([disabled]), input[type="number"]:focus:not([disabled]) { - box-shadow: 0 2px 0 0 $support-error; + box-shadow: 0 $spacing-01 0 0 $support-error; } } &.warning { input[type="number"]:not([disabled]), input[type="number"]:focus:not([disabled]) { - box-shadow: 0 2px 0 0 $support-warning; + box-shadow: 0 $spacing-01 0 0 $support-warning; } } input[type="number"] { //override styling from carbon background-color: unset; padding: 0; - height: 1.5rem; + height: $spacing-06; } .cds--number input[type="number"] { min-width: 0; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/readonly/readonly.scss b/canvas_modules/common-canvas/src/common-properties/controls/readonly/readonly.scss index 621ba227e7..cdd267758b 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/readonly/readonly.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/readonly/readonly.scss @@ -52,8 +52,8 @@ flex-shrink: 0; // prevent icon from shrinking if text too long svg { - width: 16px; - height: 16px; + width: $spacing-05; + height: $spacing-05; } } } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss index 1e85ddc71e..1dca57b1ba 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss @@ -32,7 +32,7 @@ outline-offset: unset; } input[type="number"]:not([disabled]) { - border: 2px solid $support-error; + border: $spacing-01 solid $support-error; } } &.warning { @@ -41,7 +41,7 @@ outline-offset: unset; } input[type="number"]:not([disabled]) { - border: 2px solid $support-warning; + border: $spacing-01 solid $support-warning; } } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.scss b/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.scss index 14c901e4eb..73f2218746 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.scss @@ -35,6 +35,6 @@ } } .properties-vt-row-checkbox { - margin-right: 1rem; + margin-right: $spacing-05; } } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.scss b/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.scss index 85a3a5057f..98c2b5f26f 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.scss @@ -44,17 +44,17 @@ $textinput-bottom-padding: 5px; } &.error { input:not([disabled]) { - box-shadow: 0 2px 0 0 $support-error; + box-shadow: 0 $spacing-01 0 0 $support-error; } } &.warning { input:not([disabled]) { - box-shadow: 0 2px 0 0 $support-warning; + box-shadow: 0 $spacing-01 0 0 $support-warning; } } } input:disabled:hover { - box-shadow: 0 2px 0 0 $text-secondary; + box-shadow: 0 $spacing-01 0 0 $text-secondary; } // Readonly control for error handling in table cells diff --git a/canvas_modules/common-canvas/src/common-properties/controls/toggletext/toggletext.scss b/canvas_modules/common-canvas/src/common-properties/controls/toggletext/toggletext.scss index 135ab844f1..aa332a5ef8 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/toggletext/toggletext.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/toggletext/toggletext.scss @@ -21,12 +21,12 @@ } &.error { button { - border-bottom: 2px solid $support-error; + border-bottom: $spacing-01 solid $support-error; } } &.warning { button { - border-bottom: 2px solid $support-warning; + border-bottom: $spacing-01 solid $support-warning; } } } diff --git a/canvas_modules/common-canvas/src/common-properties/index.scss b/canvas_modules/common-canvas/src/common-properties/index.scss index 5774060f71..16d834ec23 100644 --- a/canvas_modules/common-canvas/src/common-properties/index.scss +++ b/canvas_modules/common-canvas/src/common-properties/index.scss @@ -21,7 +21,7 @@ @import "./properties-main/properties-main"; .properties-error-heading .properties-validation-message { - padding: 40px 10px 0; + padding: $spacing-08 10px 0; align-items: left; -webkit-box-align: left; display: flex; diff --git a/canvas_modules/common-canvas/src/common-properties/panels/sub-panel/sub-panel.scss b/canvas_modules/common-canvas/src/common-properties/panels/sub-panel/sub-panel.scss index 3636c543ea..5802a6e344 100644 --- a/canvas_modules/common-canvas/src/common-properties/panels/sub-panel/sub-panel.scss +++ b/canvas_modules/common-canvas/src/common-properties/panels/sub-panel/sub-panel.scss @@ -16,9 +16,9 @@ button.properties-subpanel-button { padding: 0; // override carbon - min-height: 2rem; // override carbon - height: 2rem; - width: 2rem; + min-height: $spacing-07; // override carbon + height: $spacing-07; + width: $spacing-07; display: flex; align-items: center; } diff --git a/canvas_modules/common-canvas/src/common-properties/panels/summary/summary.scss b/canvas_modules/common-canvas/src/common-properties/panels/summary/summary.scss index 476841a86c..10ce617b51 100644 --- a/canvas_modules/common-canvas/src/common-properties/panels/summary/summary.scss +++ b/canvas_modules/common-canvas/src/common-properties/panels/summary/summary.scss @@ -23,8 +23,8 @@ pointer-events: none; } .properties-summary-link-icon { - width: 16px; - height: 16px; + width: $spacing-05; + height: $spacing-05; } } .properties-summary-link-container { @@ -58,7 +58,7 @@ .properties-summary-row { display: flex; - padding: 2px 0; + padding: $spacing-01 0; span { cursor: text; user-select: text; diff --git a/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss b/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss index dd660ab363..ee003dd5f7 100644 --- a/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss +++ b/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss @@ -19,7 +19,7 @@ $properties-buttons-height: $spacing-10; .properties-tearsheet-panel.properties-tearsheet-stacked.cds--modal { .cds--modal-container { max-height: calc(100% - 104px); - width: calc(100% - 96px); + width: calc(100% - $spacing-12); } } diff --git a/canvas_modules/common-canvas/src/context-menu/context-menu.scss b/canvas_modules/common-canvas/src/context-menu/context-menu.scss index c6b814a881..9afae27762 100644 --- a/canvas_modules/common-canvas/src/context-menu/context-menu.scss +++ b/canvas_modules/common-canvas/src/context-menu/context-menu.scss @@ -24,9 +24,9 @@ background-clip: padding-box; border: 0; outline: none; - -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + -moz-box-shadow: $spacing-01 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2); + -webkit-box-shadow: $spacing-01 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2); + box-shadow: $spacing-01 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2); position: absolute; // For cascaded sub-menu @@ -73,7 +73,7 @@ & svg { color: $text-primary; position: absolute; - right: 12px; + right: $spacing-04; } } diff --git a/canvas_modules/common-canvas/src/notification-panel/notification-panel.scss b/canvas_modules/common-canvas/src/notification-panel/notification-panel.scss index 6d667d6dfa..bfc270fa8b 100644 --- a/canvas_modules/common-canvas/src/notification-panel/notification-panel.scss +++ b/canvas_modules/common-canvas/src/notification-panel/notification-panel.scss @@ -15,8 +15,8 @@ */ $notification-panel-header-height: 33px; -$notification-message-height: 48px; -$notification-left-border-color-width: 4px; +$notification-message-height: $spacing-09; +$notification-left-border-color-width: $spacing-02; $notification-panel-button-container-height: 49px; .notification-panel { @@ -44,7 +44,7 @@ $notification-panel-button-container-height: 49px; &:focus { border-color: $focus; - box-shadow: inset 0 0 0 2px $focus; + box-shadow: inset 0 0 0 $spacing-01 $focus; } .notification-panel-header { @@ -63,8 +63,8 @@ $notification-panel-button-container-height: 49px; .notification-panel-close-button { position: absolute; - top: 12px; - right: 12px; + top: $spacing-04; + right: $spacing-04; } .notification-panel-button-container { @@ -100,7 +100,7 @@ $notification-panel-button-container-height: 49px; &:focus { border-color: $focus; - box-shadow: inset 0 0 0 2px $focus; + box-shadow: inset 0 0 0 $spacing-01 $focus; } .notification-panel-empty-message { @@ -130,7 +130,7 @@ $notification-panel-button-container-height: 49px; &:focus { border-color: $focus; - box-shadow: inset 0 0 0 2px $focus; + box-shadow: inset 0 0 0 $spacing-01 $focus; } &:hover { diff --git a/canvas_modules/common-canvas/src/palette/palette.scss b/canvas_modules/common-canvas/src/palette/palette.scss index 9c74db85c6..185c67cd3a 100644 --- a/canvas_modules/common-canvas/src/palette/palette.scss +++ b/canvas_modules/common-canvas/src/palette/palette.scss @@ -17,6 +17,7 @@ $palette-border-width: 1px; $palette-border-color: $layer-accent-01; $palette-search-container-height: 41px; +$palette-dialog-list-item-height: 46px; //-------------------------------------------------------- // Classes used by Flyout palette @@ -116,7 +117,7 @@ $palette-search-container-height: 41px; &:focus { border-color: $focus; - box-shadow: inset 0 0 0 2px $focus; + box-shadow: inset 0 0 0 $spacing-01 $focus; } .palette-list-item-category-label { @@ -161,7 +162,7 @@ $palette-search-container-height: 41px; .palette-list-item-icon-warning { transform: scale(1.5); width: 28px; /* Not specifying height preserves the image's aspect ratio. */ - line-height: 46px; /* Must be same as containing div height */ + line-height: $palette-dialog-list-item-height; /* Must be same as containing div height */ color: $text-secondary; margin-left: 0; } @@ -214,11 +215,6 @@ $palette-search-container-height: 41px; .cds--accordion__heading { padding: 0; - .cds--accordion__title { - margin: 0; - padding: 0 0 0 11px; - height: 45px; - } } .cds--accordion__wrapper { @@ -257,7 +253,7 @@ $palette-search-container-height: 41px; .palette-flyout-category-item-loading { display: flex; - margin-left: 16px; + margin-left: $spacing-05; width: 100%; height: 100%; justify-content: center; @@ -268,7 +264,7 @@ $palette-search-container-height: 41px; width: 20px; /* Not specifying height preserves the image's aspect ratio. */ margin-left: 5px; fill: $icon-primary; - padding-top: 4px; + padding-top: $spacing-02; } .palette-flyout-text-container { @@ -283,7 +279,7 @@ $palette-search-container-height: 41px; width: 165px; overflow-wrap: break-word; line-height: 1.2; - padding-left: 16px; + padding-left: $spacing-05; align-items: center; height: 100%; max-height: 59px; @@ -327,8 +323,8 @@ $palette-search-container-height: 41px; input { background: $field-01; height: 100%; - padding-right: 3rem; - padding-left: 52px; + padding-right: $spacing-09; + padding-left: 53px; } // Position the x icon button to the right (when it appears after the user @@ -338,8 +334,8 @@ $palette-search-container-height: 41px; // Getting rid of ::before allows the right side of the highlight rectangle // on hover to appear. button { - margin-right: 8px; - margin-top: 4px; + margin-right: $spacing-03; + margin-top: $spacing-02; border-bottom-width: 0; &.cds--search-close::before { @@ -400,7 +396,7 @@ $palette-search-container-height: 41px; .palette-list-item-icon { width: 28px; /* Not specifying height preserves the image's aspect ratio. */ - line-height: 46px; /* Must be same as containing div height */ + line-height: $palette-dialog-list-item-height; /* Must be same as containing div height */ color: $text-secondary; margin-left: 0; margin-right: 10px; @@ -416,13 +412,13 @@ $palette-search-container-height: 41px; text-overflow: ellipsis; white-space: nowrap; margin-left: 10px; - line-height: 16px; + line-height: $spacing-05; } .palette-list-item-icon-warning { transform: scale(1.5); width: 28px; /* Not specifying height preserves the image's aspect ratio. */ - line-height: 46px; /* Must be same as containing div height */ + line-height: $palette-dialog-list-item-height; /* Must be same as containing div height */ color: $text-secondary; margin-left: 0; margin-right: 10px; @@ -472,7 +468,7 @@ $palette-search-container-height: 41px; border-style: solid; width: 130px; min-width: 130px; - padding-left: 8px; + padding-left: $spacing-03; padding-top: 10px; padding-bottom: 10px; cursor: pointer; @@ -501,7 +497,7 @@ $palette-search-container-height: 41px; } .palette-dialog-grid-node-inner { - padding-top: 16px; + padding-top: $spacing-05; } .palette-dialog-grid-node-icon svg { @@ -509,8 +505,8 @@ $palette-search-container-height: 41px; } .palette-dialog-grid-node-icon .node-icon { - width: 64px; - height: 64px; + width: $spacing-10; + height: $spacing-10; } .palette-dialog-grid-node-icon-warning { diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar.scss b/canvas_modules/common-canvas/src/toolbar/toolbar.scss index 10b91e5fb5..b7f2e74f66 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar.scss +++ b/canvas_modules/common-canvas/src/toolbar/toolbar.scss @@ -14,12 +14,12 @@ * limitations under the License. */ -$toolbar-icon-label-margin: 8px; -$toolbar-icon-size: 16px; -$toolbar-button-height: 40px; -$toolbar-button-width: 40px; -$toolbar-button-sm-height: 32px; -$toolbar-button-sm-width: 32px; +$toolbar-icon-label-margin: $spacing-03; +$toolbar-icon-size: $spacing-05; +$toolbar-button-height: $spacing-08; +$toolbar-button-width: $spacing-08; +$toolbar-button-sm-height: $spacing-07; +$toolbar-button-sm-width: $spacing-07; $toolbar-divider-width: 1px; .toolbar-div { @@ -61,7 +61,7 @@ $toolbar-divider-width: 1px; .toolbar-item-content { height: $toolbar-button-sm-height; align-items: center; - min-width: 32px; + min-width: $spacing-07; &.is-in-menu { padding-left: 10px; @@ -77,7 +77,7 @@ $toolbar-divider-width: 1px; } & .toolbar-right-chevron { - padding: 4px 0 0; + padding: $spacing-02 0 0; } & .checkmark { @@ -126,7 +126,7 @@ $toolbar-divider-width: 1px; &.ghost { & > .toolbar-button-item > button { background-color: $layer-accent-01; - border-bottom: 2px solid $button-primary; + border-bottom: $spacing-01 solid $button-primary; } } } @@ -204,8 +204,8 @@ $toolbar-divider-width: 1px; width: 100%; padding-top: 0; padding-bottom: 0; - padding-left: 16px; - padding-right: 16px; + padding-left: $spacing-05; + padding-right: $spacing-05; min-height: 20px; } } @@ -248,7 +248,7 @@ $toolbar-divider-width: 1px; } & .toolbar-right-chevron { - padding: 9px 0 2px; + padding: 9px 0 $spacing-01; pointer-events: none; } @@ -260,7 +260,7 @@ $toolbar-divider-width: 1px; justify-content: space-between; & .content-main { - padding: 8px 0 6px; + padding: $spacing-03 0 6px; } } @@ -285,7 +285,7 @@ $toolbar-divider-width: 1px; } .toolbar-icon { - height: 16px; + height: $spacing-05; & svg { height: $toolbar-icon-size; width: $toolbar-icon-size; @@ -306,18 +306,18 @@ $toolbar-divider-width: 1px; } .toolbar-icon-label { - line-height: 16px; + line-height: $spacing-05; &.before { - padding-right: 8px; + padding-right: $spacing-03; } &.after { - padding-left: 8px; + padding-left: $spacing-03; } &.overflow { - padding-left: 8px; + padding-left: $spacing-03; word-break: break-word; hyphens: auto; text-wrap: nowrap; diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.scss b/canvas_modules/common-canvas/src/tooltip/tooltip.scss index 77c7600196..453aec200f 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.scss +++ b/canvas_modules/common-canvas/src/tooltip/tooltip.scss @@ -32,7 +32,7 @@ z-index: 10000; // Modal layout has z-index 9000. Show tooltip on top of modal. word-wrap: break-word; max-width: 228px; - border-radius: 2px; + border-radius: $spacing-01; white-space: pre-wrap; // Add a line break for \n in tooltip .cds--link { display: block; @@ -111,14 +111,14 @@ } .tip-palette-item, .tip-node { - min-width: 80px; + min-width: $spacing-11; max-width: 180px; text-align: left; } .tip-palette-category { font-size: 10px; - padding-bottom: 4px; + padding-bottom: $spacing-02; color: $text-inverse; } @@ -128,13 +128,13 @@ } .tip-palette-desc, .tip-node-desc { - padding-top: 4px; + padding-top: $spacing-02; } .tip-node-status { position: absolute; - width: 12px; - height: 12px; + width: $spacing-04; + height: $spacing-04; right: $spacing-05; top: $spacing-03; &.warning { diff --git a/canvas_modules/harness/src/client/components/custom-canvases/react-nodes-mapping/react-nodes-mapping.scss b/canvas_modules/harness/src/client/components/custom-canvases/react-nodes-mapping/react-nodes-mapping.scss index 83eff85690..e3ebc837f4 100644 --- a/canvas_modules/harness/src/client/components/custom-canvases/react-nodes-mapping/react-nodes-mapping.scss +++ b/canvas_modules/harness/src/client/components/custom-canvases/react-nodes-mapping/react-nodes-mapping.scss @@ -16,6 +16,8 @@ /* Override styles for react-nodes sample application. */ +$nodes-mapping-height: 30px; + .react-nodes-scrollable { .d3-node-group { @@ -38,7 +40,7 @@ } .node-header { - height: 30px; + height: $nodes-mapping-height; padding: 5px; background-color: $background; display: grid; @@ -61,7 +63,7 @@ } .scrollable-row { - height: 30px; + height: $nodes-mapping-height; padding: 5px; background-color: $background; border-width: 2px; @@ -78,13 +80,13 @@ } .node-no-columns { - height: 30px; + height: $nodes-mapping-height; padding: 5px; background-color: $background; } .node-footer { - height: 30px; + height: $nodes-mapping-height; padding: 5px; background-color: $background;