From 5a2fc5bffb09eafef5ee9248040c9cd9b09d2bc7 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 25 Nov 2019 17:43:25 +0000 Subject: [PATCH] ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames. --- ui-v2/app/components/tabular-collection.js | 2 +- .../base/components/action-group/index.scss | 13 ++- .../base/components/action-group/layout.scss | 85 +++++++------------ .../base/components/action-group/skin.scss | 31 +------ .../base/components/breadcrumbs/index.scss | 15 ++++ .../base/components/breadcrumbs/skin.scss | 19 ++++- .../base/components/buttons/layout.scss | 6 ++ .../styles/base/components/buttons/skin.scss | 24 +++++- .../base/components/checkbox-group/index.scss | 2 + .../components/checkbox-group/layout.scss | 14 +++ .../base/components/checkbox-group/skin.scss | 3 + .../components/confirmation-alert/index.scss | 6 ++ .../components/confirmation-alert/layout.scss | 14 +++ .../components/confirmation-alert/skin.scss | 26 ++++++ .../base/components/form-elements/index.scss | 27 ++++++ .../base/components/form-elements/layout.scss | 52 ++++++++++++ .../base/components/form-elements/skin.scss | 45 ++++++++++ .../base/components/inline-alert/index.scss | 2 + .../base/components/inline-alert/layout.scss | 10 +++ .../base/components/inline-alert/skin.scss | 39 +++++++++ .../base/components/menu-panel/index.scss | 9 ++ .../base/components/menu-panel/layout.scss | 28 ++++++ .../base/components/menu-panel/skin.scss | 12 +++ .../base/components/modal-dialog/index.scss | 2 + .../base/components/modal-dialog/layout.scss | 75 ++++++++++++++++ .../base/components/modal-dialog/skin.scss | 32 +++++++ .../base/components/radio-group/index.scss | 2 + .../base/components/radio-group/layout.scss | 23 +++++ .../base/components/radio-group/skin.scss | 0 .../base/components/sliding-toggle/index.scss | 2 + .../components/sliding-toggle/layout.scss | 36 ++++++++ .../base/components/sliding-toggle/skin.scss | 30 +++++++ .../base/components/stats-card/layout.scss | 1 - .../app/styles/base/icons/base-variables.scss | 5 +- .../styles/base/icons/icon-placeholders.scss | 14 ++- ui-v2/app/styles/components/action-group.scss | 7 +- .../app/styles/components/form-elements.scss | 13 +-- ui-v2/app/styles/components/icons/index.scss | 27 +----- ui-v2/app/styles/components/modal-dialog.scss | 2 +- ui-v2/app/styles/core/typography.scss | 4 +- .../app/templates/components/action-group.hbs | 10 ++- 41 files changed, 629 insertions(+), 140 deletions(-) create mode 100644 ui-v2/app/styles/base/components/checkbox-group/index.scss create mode 100644 ui-v2/app/styles/base/components/checkbox-group/layout.scss create mode 100644 ui-v2/app/styles/base/components/checkbox-group/skin.scss create mode 100644 ui-v2/app/styles/base/components/confirmation-alert/index.scss create mode 100644 ui-v2/app/styles/base/components/confirmation-alert/layout.scss create mode 100644 ui-v2/app/styles/base/components/confirmation-alert/skin.scss create mode 100644 ui-v2/app/styles/base/components/form-elements/index.scss create mode 100644 ui-v2/app/styles/base/components/form-elements/layout.scss create mode 100644 ui-v2/app/styles/base/components/form-elements/skin.scss create mode 100644 ui-v2/app/styles/base/components/inline-alert/index.scss create mode 100644 ui-v2/app/styles/base/components/inline-alert/layout.scss create mode 100644 ui-v2/app/styles/base/components/inline-alert/skin.scss create mode 100644 ui-v2/app/styles/base/components/menu-panel/index.scss create mode 100644 ui-v2/app/styles/base/components/menu-panel/layout.scss create mode 100644 ui-v2/app/styles/base/components/menu-panel/skin.scss create mode 100644 ui-v2/app/styles/base/components/modal-dialog/index.scss create mode 100644 ui-v2/app/styles/base/components/modal-dialog/layout.scss create mode 100644 ui-v2/app/styles/base/components/modal-dialog/skin.scss create mode 100644 ui-v2/app/styles/base/components/radio-group/index.scss create mode 100644 ui-v2/app/styles/base/components/radio-group/layout.scss create mode 100644 ui-v2/app/styles/base/components/radio-group/skin.scss create mode 100644 ui-v2/app/styles/base/components/sliding-toggle/index.scss create mode 100644 ui-v2/app/styles/base/components/sliding-toggle/layout.scss create mode 100644 ui-v2/app/styles/base/components/sliding-toggle/skin.scss diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js index c4d2e1c7a8..9a7c107ba8 100644 --- a/ui-v2/app/components/tabular-collection.js +++ b/ui-v2/app/components/tabular-collection.js @@ -82,7 +82,7 @@ const change = function(e) { const dom = get(this, 'dom'); const $tr = dom.closest('tr', e.currentTarget); - const $group = dom.sibling(e.currentTarget, 'ul'); + const $group = dom.sibling(e.currentTarget, 'div'); const groupRect = $group.getBoundingClientRect(); const groupBottom = groupRect.top + $group.clientHeight; diff --git a/ui-v2/app/styles/base/components/action-group/index.scss b/ui-v2/app/styles/base/components/action-group/index.scss index 8f8357d067..21a6ef1bae 100644 --- a/ui-v2/app/styles/base/components/action-group/index.scss +++ b/ui-v2/app/styles/base/components/action-group/index.scss @@ -1,7 +1,18 @@ @import '../toggle-button/index'; +@import '../menu-panel/index'; +@import '../confirmation-alert/index'; @import './skin'; @import './layout'; -%action-group label:first-of-type { +%action-group > div { + @extend %menu-panel; +} +%action-group > label:first-of-type { @extend %toggle-button; } +%action-group .confirmation-alert { + @extend %confirmation-alert; +} +%action-group .type-delete { + @extend %internal-button-dangerous; +} diff --git a/ui-v2/app/styles/base/components/action-group/layout.scss b/ui-v2/app/styles/base/components/action-group/layout.scss index 44cab04720..2c937bdfa7 100644 --- a/ui-v2/app/styles/base/components/action-group/layout.scss +++ b/ui-v2/app/styles/base/components/action-group/layout.scss @@ -4,75 +4,36 @@ width: 30px; height: 30px; } -%action-group label span { +%action-group > div { + transition: min-height 150ms; + min-height: 0; + width: 192px; +} +%action-group .confirmation-alert { + position: absolute; + top: 0; + left: 100%; + width: 100%; +} +%action-group > label span { display: none; } -%action-group label { +%action-group > label { display: block; height: 100%; } -%action-group label:last-of-type { +%action-group > label:last-of-type { position: absolute; width: 100%; z-index: -1; top: 0; } -%action-group-action { - width: 170px; - padding: 10px 10px; - text-align: left; -} -/* this is actually the group */ -%action-group ul { - position: absolute; - padding: 1px; -} -%action-group li > * { - @extend %action-group-action; -} -%action-group ul::before { - position: absolute; - content: ''; - display: block; - width: 10px; - height: 10px; -} -%action-group ul:not(.left) { - right: 0px; -} -%action-group ul:not(.left)::before { - right: 9px; -} -%action-group ul.left { - left: 0px; -} -%action-group ul.left::before { - left: 9px; -} -%action-group ul:not(.above) { - top: 23px; -} -%action-group ul:not(.above)::before { - top: -6px; - transform: rotate(45deg); -} -%action-group ul.above { - bottom: 23px; -} -%action-group ul.above::before { - bottom: -6px; - transform: rotate(225deg); -} -%action-group li { - position: relative; - z-index: 1; -} %action-group input[type='radio'], -%action-group input[type='radio'] ~ ul, +%action-group input[type='radio'] ~ div, %action-group input[type='radio'] ~ .with-confirmation > ul { display: none; } -%action-group input[type='radio']:checked ~ ul, +%action-group input[type='radio']:checked ~ div, %action-group input[type='radio']:checked ~ .with-confirmation > ul { display: block; } @@ -80,3 +41,17 @@ %action-group input[type='radio']:checked ~ label[for='actions_close'] { z-index: 1; } +%action-group input[type='checkbox'] { + @extend %action-group-confirm-toggle; +} +%action-group-confirm-toggle { + display: none; +} +%action-group-confirm-toggle + div > ul, +%action-group-confirm-toggle + div > ul + div { + transition: transform 150ms; +} +%action-group-confirm-toggle:checked + div > ul, +%action-group-confirm-toggle:checked + div > ul + div { + transform: translateX(-100%); +} diff --git a/ui-v2/app/styles/base/components/action-group/skin.scss b/ui-v2/app/styles/base/components/action-group/skin.scss index d9ffcfb222..b1afbb5861 100644 --- a/ui-v2/app/styles/base/components/action-group/skin.scss +++ b/ui-v2/app/styles/base/components/action-group/skin.scss @@ -2,38 +2,11 @@ /* frame-gray */ background-color: $gray-050; } -%action-group label, -%action-group-action { +%action-group > label { cursor: pointer; } -%action-group label:first-of-type::after { +%action-group > label:first-of-type::after { @extend %with-more-horizontal-icon; @extend %as-pseudo; opacity: 0.7; } -%action-group ul { - border: $decor-border-100; - border-radius: $decor-radius-100; - box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21); -} -%action-group ul::before { - border-top: $decor-border-100; - border-left: $decor-border-100; -} -%action-group ul, -%action-group ul::before { - border-color: $color-action; -} -%action-group-action { - background-color: $white; -} -%action-group-action:hover { - @extend %frame-blue-800; -} -%action-group ul, -%action-group ul::before { - background-color: $white; -} -%action-group li { - list-style-type: none; -} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/index.scss b/ui-v2/app/styles/base/components/breadcrumbs/index.scss index 074420f1da..ebf1af8eb5 100644 --- a/ui-v2/app/styles/base/components/breadcrumbs/index.scss +++ b/ui-v2/app/styles/base/components/breadcrumbs/index.scss @@ -6,3 +6,18 @@ %breadcrumbs strong { @extend %breadcrumb-selected; } +%breadcrumbs-milestone { + @extend %breadcrumbs; +} +%breadcrumbs-milestone li:first-child > * { + @extend %breadcrumb-milestone; +} +%breadcrumbs-filesystem { + @extend %breadcrumbs; +} +%breadcrumbs-filesystem li:not(:first-child) > * { + @extend %breadcrumb-path; +} +%breadcrumbs-filesystem li:first-child > * { + @extend %breadcrumb-folder; +} diff --git a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss index 853da9dedf..d2f9acf6e3 100644 --- a/ui-v2/app/styles/base/components/breadcrumbs/skin.scss +++ b/ui-v2/app/styles/base/components/breadcrumbs/skin.scss @@ -2,10 +2,25 @@ list-style-type: none; } %breadcrumb::before { - content: '❮'; line-height: 1; font-size: 0.7em; - margin-top: 0.1em; + margin-top: 0.2em; +} +%breadcrumb::before { + content: '❮'; +} +%breadcrumb-milestone::before { + content: '❮❮'; +} +%breadcrumb-path::before { + content: '/'; +} +%breadcrumb-folder::before { + position: relative; + top: 2px; + margin-top: -4px; + @extend %with-folder-outline-color-icon; + @extend %as-pseudo; } %breadcrumb { color: $color-action; diff --git a/ui-v2/app/styles/base/components/buttons/layout.scss b/ui-v2/app/styles/base/components/buttons/layout.scss index 33c64218cf..08cb2c4032 100644 --- a/ui-v2/app/styles/base/components/buttons/layout.scss +++ b/ui-v2/app/styles/base/components/buttons/layout.scss @@ -38,3 +38,9 @@ padding-top: calc(0.35em - 1px) !important; height: 2.3em !important; } +%internal-button { + padding: 0.75rem 1rem; + text-align: center; + display: inline-block; + box-sizing: border-box; +} diff --git a/ui-v2/app/styles/base/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss index 5c506b6f93..93aa66005f 100644 --- a/ui-v2/app/styles/base/components/buttons/skin.scss +++ b/ui-v2/app/styles/base/components/buttons/skin.scss @@ -1,10 +1,12 @@ /* decor */ -%button { +%button, +%internal-button { @extend %user-select-none; cursor: pointer; white-space: nowrap; } -%button:disabled { +%button:disabled, +%internal-button:disabled { cursor: default; box-shadow: none; } @@ -92,3 +94,21 @@ %dangerous-button:hover:active { @extend %frame-red-900; } + +%internal-button-dangerous { + @extend %frame-red-300; +} +%internal-button-dangerous-intent { + @extend %frame-red-700; +} +%internal-button-intent { + background-color: $gray-100; +} +%internal-button:focus, +%internal-button:hover { + @extend %internal-button-intent; +} +%internal-button-dangerous:focus, +%internal-button-dangerous:hover { + @extend %internal-button-dangerous-intent; +} diff --git a/ui-v2/app/styles/base/components/checkbox-group/index.scss b/ui-v2/app/styles/base/components/checkbox-group/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/base/components/checkbox-group/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/base/components/checkbox-group/layout.scss b/ui-v2/app/styles/base/components/checkbox-group/layout.scss new file mode 100644 index 0000000000..57d8b99efc --- /dev/null +++ b/ui-v2/app/styles/base/components/checkbox-group/layout.scss @@ -0,0 +1,14 @@ +/* TODO: This is positioning the group */ +/* probably should be in a special %form class*/ +%checkbox-group { + @extend %form-row; +} +%checkbox-group span { + display: inline-block; + margin-left: 10px; + min-width: 50px; +} +%checkbox-group label { + margin-right: 10px; + white-space: nowrap; +} diff --git a/ui-v2/app/styles/base/components/checkbox-group/skin.scss b/ui-v2/app/styles/base/components/checkbox-group/skin.scss new file mode 100644 index 0000000000..5ae8b1a222 --- /dev/null +++ b/ui-v2/app/styles/base/components/checkbox-group/skin.scss @@ -0,0 +1,3 @@ +%checkbox-group label { + cursor: pointer; +} diff --git a/ui-v2/app/styles/base/components/confirmation-alert/index.scss b/ui-v2/app/styles/base/components/confirmation-alert/index.scss new file mode 100644 index 0000000000..8047a4544b --- /dev/null +++ b/ui-v2/app/styles/base/components/confirmation-alert/index.scss @@ -0,0 +1,6 @@ +@import './skin'; +@import './layout'; + +%confirmation-alert > ul > li > * { + @extend %internal-button; +} diff --git a/ui-v2/app/styles/base/components/confirmation-alert/layout.scss b/ui-v2/app/styles/base/components/confirmation-alert/layout.scss new file mode 100644 index 0000000000..748a38d94a --- /dev/null +++ b/ui-v2/app/styles/base/components/confirmation-alert/layout.scss @@ -0,0 +1,14 @@ +%confirmation-alert > div { + padding: 1rem; +} +%confirmation-alert > ul { + display: flex; + margin: 0; + padding: 4px; +} +%confirmation-alert > ul > li { + width: 50%; +} +%confirmation-alert > ul > li > * { + width: 100%; +} diff --git a/ui-v2/app/styles/base/components/confirmation-alert/skin.scss b/ui-v2/app/styles/base/components/confirmation-alert/skin.scss new file mode 100644 index 0000000000..0f79e6329d --- /dev/null +++ b/ui-v2/app/styles/base/components/confirmation-alert/skin.scss @@ -0,0 +1,26 @@ +%confirmation-alert { + background-color: $white; +} + +%confirmation-alert > div { + background-color: $yellow-050; + border-top-left-radius: $decor-radius-200; + border-top-right-radius: $decor-radius-200; +} +%confirmation-alert > ul { + list-style: none; +} +%confirmation-alert > ul > li > * { + cursor: pointer; +} +%confirmation-alert > ul > li > *:hover, +%confirmation-alert > ul > li > *:focus { + background-color: $gray-100; +} +%confirmation-alert > ul > .dangerous > * { + @extend %frame-red-300; +} +%confirmation-alert > ul > .dangerous > *:hover, +%confirmation-alert > ul > .dangerous > *:focus { + @extend %frame-red-700; +} diff --git a/ui-v2/app/styles/base/components/form-elements/index.scss b/ui-v2/app/styles/base/components/form-elements/index.scss new file mode 100644 index 0000000000..d2da88cf10 --- /dev/null +++ b/ui-v2/app/styles/base/components/form-elements/index.scss @@ -0,0 +1,27 @@ +@import './skin'; +@import './layout'; +/* TODO: This is positioning the element */ +/* probably should be in a special %form class*/ +%form-element { + @extend %form-row; +} +%form-element > span { + @extend %form-element-label; +} +%form-element > em { + @extend %form-element-note; +} +%form-element-error > strong { + @extend %inline-alert-error; +} +%form-element [type='text'], +%form-element [type='password'], +%form-element textarea { + @extend %form-element-text-input; +} +%form-element-text-input:hover { + @extend %form-element-text-input-hover; +} +%form-element-text-input:focus { + @extend %form-element-text-input-focus; +} diff --git a/ui-v2/app/styles/base/components/form-elements/layout.scss b/ui-v2/app/styles/base/components/form-elements/layout.scss new file mode 100644 index 0000000000..20ae6d73f3 --- /dev/null +++ b/ui-v2/app/styles/base/components/form-elements/layout.scss @@ -0,0 +1,52 @@ +%form-element, +%form-element-label, +%form-element-note, +%form-element textarea { + display: block; +} +%form-element a { + display: inline; +} +%form-element-note > code { + display: inline-block; +} +%form-element [type='text'], +%form-element [type='password'] { + display: inline-flex; + justify-content: flex-start; +} +%form-element textarea { + resize: vertical; +} +%form-row { + margin-bottom: 1.4em; +} +%form-element-label { + margin-bottom: 0.3em; +} +%form-element [type='text'], +%form-element [type='password'] { + max-width: 100%; + width: 100%; + /* height: 2.25em; */ + height: 0; + padding: 17px 13px; +} +%form-element textarea { + max-width: 100%; + min-width: 100%; + min-height: 70px; + padding: 6px 13px; +} +%form-element-note { + margin-top: 2px; +} + +/* this is for label span em input */ +%form-element-label + em { + margin-top: -0.5em; + margin-bottom: 0.5em; +} +%form-element-note > code { + padding: 0 4px; +} diff --git a/ui-v2/app/styles/base/components/form-elements/skin.scss b/ui-v2/app/styles/base/components/form-elements/skin.scss new file mode 100644 index 0000000000..3c4140ae7e --- /dev/null +++ b/ui-v2/app/styles/base/components/form-elements/skin.scss @@ -0,0 +1,45 @@ +%form-element-note { + font-style: normal; +} +%form-element-label { + font-weight: $typo-weight-semibold; +} +%form-element-text-input { + -moz-appearance: none; + -webkit-appearance: none; + box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.06); + border-radius: $decor-radius-100; + border: $decor-border-100; + outline: none; +} +%form-element-text-input::placeholder { + color: $gray-400; +} +%form-element-note > code { + border-radius: $decor-radius-100; +} +%form-element-error > input, +%form-element-error > textarea { + border-color: $color-failure !important; +} +%form-element-text-input { + color: $gray-500; + border-color: $gray-300; +} +%form-element-text-input-hover { + border-color: $gray-500; +} +%form-element-text-input-focus { + border-color: $blue-500; +} +%form-element-label { + color: $black; +} +%form-element-note { + color: $gray-400; +} +%form-element-note > code { + background-color: $gray-200; + /* consul color but its a code looking style?*/ + color: $magenta-600; +} diff --git a/ui-v2/app/styles/base/components/inline-alert/index.scss b/ui-v2/app/styles/base/components/inline-alert/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/base/components/inline-alert/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/base/components/inline-alert/layout.scss b/ui-v2/app/styles/base/components/inline-alert/layout.scss new file mode 100644 index 0000000000..c222b9f2b3 --- /dev/null +++ b/ui-v2/app/styles/base/components/inline-alert/layout.scss @@ -0,0 +1,10 @@ +%inline-alert { + position: relative; + padding-left: 20px; +} +%inline-alert::before { + position: absolute; + top: 50%; + left: 0; + margin-top: -8px; +} diff --git a/ui-v2/app/styles/base/components/inline-alert/skin.scss b/ui-v2/app/styles/base/components/inline-alert/skin.scss new file mode 100644 index 0000000000..198e8ab6e9 --- /dev/null +++ b/ui-v2/app/styles/base/components/inline-alert/skin.scss @@ -0,0 +1,39 @@ +%inline-alert { + font-style: normal; + font-weight: normal; +} +%inline-alert-success, +%inline-alert-info, +%inline-alert-error, +%inline-alert-warning { + @extend %inline-alert; +} +%inline-alert { + color: inherit; +} +%inline-alert-error { + color: $color-failure; +} +%inline-alert::before { + font-size: 14px; +} +%inline-alert-success::before { + @extend %with-check-circle-fill-color-icon; + @extend %as-pseudo; +} +%inline-alert-error::before { + @extend %with-cancel-square-fill-color-icon; + @extend %as-pseudo; +} +%inline-alert-warning::before { + @extend %with-alert-triangle-color-icon; + @extend %as-pseudo; + /* the warning triangle always looks */ + /* too low just because its a triangle */ + /* this tweak make it look better */ + margin-top: -9px; +} +%inline-alert-info::before { + @extend %with-info-circle-fill-color-icon; + @extend %as-pseudo; +} diff --git a/ui-v2/app/styles/base/components/menu-panel/index.scss b/ui-v2/app/styles/base/components/menu-panel/index.scss new file mode 100644 index 0000000000..68e1f00252 --- /dev/null +++ b/ui-v2/app/styles/base/components/menu-panel/index.scss @@ -0,0 +1,9 @@ +@import './skin'; +@import './layout'; + +%menu-panel > ul > li > * { + @extend %internal-button; +} +%menu-panel > ul > li.dangerous > * { + @extend %internal-button-dangerous; +} diff --git a/ui-v2/app/styles/base/components/menu-panel/layout.scss b/ui-v2/app/styles/base/components/menu-panel/layout.scss new file mode 100644 index 0000000000..740cd7088e --- /dev/null +++ b/ui-v2/app/styles/base/components/menu-panel/layout.scss @@ -0,0 +1,28 @@ +%menu-panel { + position: absolute; + overflow: hidden; +} +%menu-panel:not(.left) { + right: 0px; +} +%menu-panel.left { + left: 0px; +} +%menu-panel:not(.above) { + top: 28px; +} +%menu-panel.above { + bottom: 28px; +} +%menu-panel > ul { + margin: 0; + padding: 4px 0; +} +%menu-panel > ul, +%menu-panel > ul > li, +%menu-panel > ul > li > * { + width: 100%; +} +%menu-panel > ul > li > * { + text-align: left !important; +} diff --git a/ui-v2/app/styles/base/components/menu-panel/skin.scss b/ui-v2/app/styles/base/components/menu-panel/skin.scss new file mode 100644 index 0000000000..9d122d7510 --- /dev/null +++ b/ui-v2/app/styles/base/components/menu-panel/skin.scss @@ -0,0 +1,12 @@ +%menu-panel { + border: $decor-border-100; + border-radius: $decor-radius-200; + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21); +} +%menu-panel { + border-color: $gray-300; + background-color: $white; +} +%menu-panel > ul > li { + list-style-type: none; +} diff --git a/ui-v2/app/styles/base/components/modal-dialog/index.scss b/ui-v2/app/styles/base/components/modal-dialog/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/base/components/modal-dialog/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/base/components/modal-dialog/layout.scss b/ui-v2/app/styles/base/components/modal-dialog/layout.scss new file mode 100644 index 0000000000..66c85bb181 --- /dev/null +++ b/ui-v2/app/styles/base/components/modal-dialog/layout.scss @@ -0,0 +1,75 @@ +%with-modal { + overflow: hidden; +} +/*TODO: %display-toggle?*/ +%modal-control, +%modal-control + * { + display: none; +} +%modal-control:checked + * { + display: block; +} +%modal-dialog > div > div { + @extend %modal-window; +} +%modal-dialog { + z-index: 500; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; +} +%modal-dialog > label { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +%modal-dialog > div { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +/*TODO: Should these be here? */ +%modal-window table { + height: 150px !important; +} +%modal-window tbody { + max-height: 100px; +} +/**/ +%modal-window.overflowing { + overflow: auto; + height: 100%; +} +%modal-window { + max-width: 855px; + position: relative; + z-index: 1; +} +%modal-window > * { + padding-left: 15px; + padding-right: 15px; +} +%modal-window > div { + overflow-y: auto; + max-height: 80vh; + padding: 20px 23px; +} +%modal-window > footer, +%modal-window > header { + padding-top: 12px; + padding-bottom: 10px; +} +%modal-window > header { + position: relative; +} +%modal-window > header [for='modal_close'] { + float: right; + text-indent: -9000px; + width: 23px; + height: 23px; +} diff --git a/ui-v2/app/styles/base/components/modal-dialog/skin.scss b/ui-v2/app/styles/base/components/modal-dialog/skin.scss new file mode 100644 index 0000000000..e81eefcb14 --- /dev/null +++ b/ui-v2/app/styles/base/components/modal-dialog/skin.scss @@ -0,0 +1,32 @@ +%modal-dialog > label { + background-color: rgba($white, 0.9); +} +%modal-window { + box-shadow: 2px 8px 8px 0 rgba($black, 0.1); +} +%modal-window { + /*%frame-gray-000*/ + background-color: $white; + border: $decor-border-100; + border-color: $gray-300; +} +%modal-window > footer, +%modal-window > header { + @extend %frame-gray-800; +} +%modal-window > footer { + border-top-width: 1px; +} +%modal-window > header { + border-bottom-width: 1px; +} + +%modal-window > header [for='modal_close'] { + @extend %with-cancel-plain-icon; + cursor: pointer; + border: $decor-border-100; + /*%frame-gray-050??*/ + background-color: $gray-050; + border-color: $gray-300; + border-radius: $decor-radius-100; +} diff --git a/ui-v2/app/styles/base/components/radio-group/index.scss b/ui-v2/app/styles/base/components/radio-group/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/base/components/radio-group/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/base/components/radio-group/layout.scss b/ui-v2/app/styles/base/components/radio-group/layout.scss new file mode 100644 index 0000000000..120a5bf4ce --- /dev/null +++ b/ui-v2/app/styles/base/components/radio-group/layout.scss @@ -0,0 +1,23 @@ +%radio-group { + overflow: hidden; +} +%radio-group label { + float: left; +} +%radio-group label > span { + float: right; +} +%radio-group { + padding-left: 1px; +} +%radio-group label:not(:last-child) { + margin-right: 25px; +} +%radio-group label > span { + margin-left: 1em; + margin-top: 0.2em; +} +%radio-group label, +%radio-group label > span { + margin-bottom: 0 !important; +} diff --git a/ui-v2/app/styles/base/components/radio-group/skin.scss b/ui-v2/app/styles/base/components/radio-group/skin.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ui-v2/app/styles/base/components/sliding-toggle/index.scss b/ui-v2/app/styles/base/components/sliding-toggle/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/base/components/sliding-toggle/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/base/components/sliding-toggle/layout.scss b/ui-v2/app/styles/base/components/sliding-toggle/layout.scss new file mode 100644 index 0000000000..da34b06542 --- /dev/null +++ b/ui-v2/app/styles/base/components/sliding-toggle/layout.scss @@ -0,0 +1,36 @@ +%sliding-toggle label { + position: relative; +} +%sliding-toggle input { + display: none; +} +%sliding-toggle label span { + display: inline-block; + padding-left: 34px; +} +%sliding-toggle label span::before, +%sliding-toggle label span::after { + position: absolute; + display: block; + content: ''; + top: 50%; +} +%sliding-toggle label span::before { + left: 0px; + width: 24px; + height: 12px; + margin-top: -5px; +} +%sliding-toggle label span::after { + margin-top: -3px; + width: 8px; + height: 8px; +} +%sliding-toggle label input:checked + span::after, +%sliding-toggle-negative label input + span::after { + left: 14px; +} +%sliding-toggle label span::after, +%sliding-toggle-negative label input:checked + span::after { + left: 2px; +} diff --git a/ui-v2/app/styles/base/components/sliding-toggle/skin.scss b/ui-v2/app/styles/base/components/sliding-toggle/skin.scss new file mode 100644 index 0000000000..dca7f138e1 --- /dev/null +++ b/ui-v2/app/styles/base/components/sliding-toggle/skin.scss @@ -0,0 +1,30 @@ +/* TODO: Maybe move this to reset? */ +%sliding-toggle label span { + cursor: pointer; +} +%sliding-toggle label span::after { + border-radius: $decor-radius-full; +} +%sliding-toggle label span::before { + border-radius: 7px; +} +%sliding-toggle-negative { + border: 0; +} +%sliding-toggle.type-negative { + @extend %sliding-toggle-negative; +} +%sliding-toggle label span { + color: $gray-900; +} +%sliding-toggle label span::after { + background-color: $white; +} +%sliding-toggle label input:checked + span::before, +%sliding-toggle-negative label input + span::before { + background-color: $blue-500; +} +%sliding-toggle label span::before, +%sliding-toggle-negative label input:checked + span::before { + background-color: $gray-300; +} diff --git a/ui-v2/app/styles/base/components/stats-card/layout.scss b/ui-v2/app/styles/base/components/stats-card/layout.scss index a6aed4fa28..7068b26e79 100644 --- a/ui-v2/app/styles/base/components/stats-card/layout.scss +++ b/ui-v2/app/styles/base/components/stats-card/layout.scss @@ -1,4 +1,3 @@ -/*%stats-card li:not(:last-child) span {*/ %stats-card { position: relative; } diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index 0c1186120f..02b92a8dda 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -32,7 +32,7 @@ $code-svg: url('data:image/svg+xml;charset=UTF-8,'); $copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); $copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); -$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $deny-svg: url('data:image/svg+xml;charset=UTF-8,'); $disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); $docs-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -47,6 +47,7 @@ $file-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $flag-svg: url('data:image/svg+xml;charset=UTF-8,'); $folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +$folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $git-branch-svg: url('data:image/svg+xml;charset=UTF-8,'); $git-commit-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -82,8 +83,8 @@ $plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $refresh-svg: url('data:image/svg+xml;charset=UTF-8,'); $run-svg: url('data:image/svg+xml;charset=UTF-8,'); -$search-svg: url('data:image/svg+xml;charset=UTF-8,'); $search-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$search-svg: url('data:image/svg+xml;charset=UTF-8,'); $service-identity-svg: url('data:image/svg+xml;charset=UTF-8,'); $settings-svg: url('data:image/svg+xml;charset=UTF-8,'); $star-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss index b7bc145c29..2f46d14c68 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -243,6 +243,11 @@ background-image: $folder-fill-svg; } +%with-folder-outline-color-icon { + @extend %with-icon; + background-image: $folder-outline-color-svg; +} + %with-folder-outline-icon { @extend %with-icon; background-image: $folder-outline-svg; @@ -418,15 +423,16 @@ background-image: $run-svg; } -%with-search-icon { - @extend %with-icon; - background-image: $search-svg; -} %with-search-color-icon { @extend %with-icon; background-image: $search-color-svg; } +%with-search-icon { + @extend %with-icon; + background-image: $search-svg; +} + %with-service-identity-icon { @extend %with-icon; background-image: $service-identity-svg; diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss index 93c2a53d38..c9d6fee84f 100644 --- a/ui-v2/app/styles/components/action-group.scss +++ b/ui-v2/app/styles/components/action-group.scss @@ -8,9 +8,6 @@ top: 8px; right: 15px; } -%action-group ul.above { - bottom: 35px; -} -%action-group ul:not(.above) { - top: 35px; +%action-group .type-delete { + @extend %internal-button-dangerous; } diff --git a/ui-v2/app/styles/components/form-elements.scss b/ui-v2/app/styles/components/form-elements.scss index 7717f9baa8..e10063e2a5 100644 --- a/ui-v2/app/styles/components/form-elements.scss +++ b/ui-v2/app/styles/components/form-elements.scss @@ -1,9 +1,10 @@ /*TODO: This remains a mix of form-elements */ /* form-elements should probably be a collection of these */ -@import './form-elements/index'; -@import './toggle/index'; -@import './radio-group/index'; -@import './checkbox-group/index'; +@import '../base/components/inline-alert/index'; +@import '../base/components/form-elements/index'; +@import '../base/components/sliding-toggle/index'; +@import '../base/components/radio-group/index'; +@import '../base/components/checkbox-group/index'; label span { @extend %user-select-none; } @@ -15,7 +16,7 @@ label span { @extend %form-element; } .type-toggle { - @extend %form-element, %toggle; + @extend %form-element, %sliding-toggle; } %form-element, %radio-group, @@ -37,6 +38,6 @@ form table, fieldset > p { color: $gray-400; } -%toggle + .checkbox-group { +%sliding-toggle + .checkbox-group { margin-top: -1em; } diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss index 0b04361ef7..1952e9b252 100644 --- a/ui-v2/app/styles/components/icons/index.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -58,8 +58,7 @@ %with-hashicorp, %with-folder, %with-chevron, -%with-clipboard, -%with-right-arrow { +%with-clipboard { position: relative; } %with-chevron { @@ -169,31 +168,7 @@ height: 20px !important; width: 16px !important; } -%with-cross { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} %with-minus { @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); } -%with-right-arrow-green { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); - width: 16px; - height: 14px; - background-color: $color-transparent; -} -%with-right-arrow-grey { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} -// swap this out for new icons -%with-error { - position: relative; - padding-left: 18px; -} -%with-error::before { - @extend %with-cross; - margin-top: -0.5em; -} diff --git a/ui-v2/app/styles/components/modal-dialog.scss b/ui-v2/app/styles/components/modal-dialog.scss index a194462ce3..1fc7f9a6b1 100644 --- a/ui-v2/app/styles/components/modal-dialog.scss +++ b/ui-v2/app/styles/components/modal-dialog.scss @@ -1,4 +1,4 @@ -@import './modal-dialog/index'; +@import '../base/components/modal-dialog/index'; [role='dialog'] { @extend %modal-dialog; } diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 154cbe8e8f..a79e321f31 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -26,7 +26,8 @@ h3, letter-spacing: -0.05em; } -%button { +%button, +%internal-button { font-family: $typo-family-sans; } /* Weighting */ @@ -96,6 +97,7 @@ body, pre code, input, textarea, +%internal-button, %action-group-action, %tbody-th { font-size: $typo-size-600; diff --git a/ui-v2/app/templates/components/action-group.hbs b/ui-v2/app/templates/components/action-group.hbs index eae6e4421d..138d878d18 100644 --- a/ui-v2/app/templates/components/action-group.hbs +++ b/ui-v2/app/templates/components/action-group.hbs @@ -1,12 +1,14 @@ {{! action groups are block only components, you MUST specify a list of actions in the component body }} {{! therefore if you call this component as an inline component, nothing is produced }} {{#if hasBlock }} - + - {{yield}} +
+ {{yield}} +
{{/if}}