diff --git a/ui-v2/app/components/stats-card.js b/ui-v2/app/components/stats-card.js new file mode 100644 index 0000000000..5d59c19c13 --- /dev/null +++ b/ui-v2/app/components/stats-card.js @@ -0,0 +1,4 @@ +import Component from '@ember/component'; +import Slotted from 'block-slots'; + +export default Component.extend(Slotted, {}); diff --git a/ui-v2/app/styles/base/components/notice/layout.scss b/ui-v2/app/styles/base/components/notice/layout.scss index 2e101a21f1..be21421b7f 100644 --- a/ui-v2/app/styles/base/components/notice/layout.scss +++ b/ui-v2/app/styles/base/components/notice/layout.scss @@ -1,11 +1,13 @@ %notice { position: relative; padding: 1em; - padding-left: 45px; +} +/* this is probably skin */ +%notice { + padding-left: calc(1em + 32px); } %notice::before { position: absolute; - left: 20px; - top: 18px; - margin-top: 0; + left: 16px; + top: 16px; } diff --git a/ui-v2/app/styles/base/components/notice/skin.scss b/ui-v2/app/styles/base/components/notice/skin.scss index 8feda9124e..53ce949f68 100644 --- a/ui-v2/app/styles/base/components/notice/skin.scss +++ b/ui-v2/app/styles/base/components/notice/skin.scss @@ -9,6 +9,9 @@ %notice-warning { @extend %notice; } +%notice::before { + @extend %as-pseudo; +} %notice-success { @extend %frame-green-500; } @@ -24,17 +27,3 @@ %notice-error { @extend %frame-red-500; } -%notice-highlight::before { - /* %with-star, bigger */ - width: 16px; - height: 16px; -} -%notice-success::before { - color: $color-success; -} -%notice-info::before { - color: $color-action; /* change to info */ -} -%notice-error::before { - color: $color-failure; -} diff --git a/ui-v2/app/styles/components/healthchecked-resource/index.scss b/ui-v2/app/styles/base/components/stats-card/index.scss similarity index 100% rename from ui-v2/app/styles/components/healthchecked-resource/index.scss rename to ui-v2/app/styles/base/components/stats-card/index.scss diff --git a/ui-v2/app/styles/base/components/stats-card/layout.scss b/ui-v2/app/styles/base/components/stats-card/layout.scss new file mode 100644 index 0000000000..a6aed4fa28 --- /dev/null +++ b/ui-v2/app/styles/base/components/stats-card/layout.scss @@ -0,0 +1,54 @@ +/*%stats-card li:not(:last-child) span {*/ +%stats-card { + position: relative; +} +%stats-card header a, +%stats-card header a > * { + display: block; +} +%stats-card header a > *, +%stats-card li a > :last-child { + /* TODO: %truncate */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +%stats-card header a { + padding: 12px 15px; +} +%stats-card header > :not(a) { + @extend %stats-card-icon; +} +%stats-card-icon { + display: inline-flex; + align-items: center; +} +%stats-card-icon:last-child { + position: absolute; + background-size: 16px; + background-position: 5px 5px; + font-size: 1.5em; + width: 28px; + height: 28px; + top: calc(-28px / 2); + left: 15px; + font-size: 0; +} +%stats-card-icon:first-child { + float: right; + padding-left: 30px; + height: 16px; + margin-top: 15px; + margin-right: 15px; +} + +%stats-card li { + height: 33px; +} +%stats-card li a { + display: flex; + vertical-align: text-top; + align-items: center; + padding: 0 15px 0 12px; + height: 100%; +} diff --git a/ui-v2/app/styles/base/components/stats-card/skin.scss b/ui-v2/app/styles/base/components/stats-card/skin.scss new file mode 100644 index 0000000000..4e9a908a22 --- /dev/null +++ b/ui-v2/app/styles/base/components/stats-card/skin.scss @@ -0,0 +1,31 @@ +%stats-card { + border: $decor-border-100; + border-radius: $decor-radius-100; +} +%stats-card li { + border-top: $decor-border-100; +} +%stats-card, +%stats-card li { + border-color: $gray-200; +} +%stats-card, +%stats-card header::before { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05); +} +%stats-card:hover, +%stats-card:focus { + box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1); +} +%stats-card header > :not(a):last-child { + border: $decor-border-100; + border-radius: 100%; + border-color: $gray-200; + background-color: $white; +} +%stats-card ul { + /*TODO: %list-style-none?*/ + list-style-type: none; + margin: 0; + padding: 0; +} diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index ba1359ed43..f2b222d53e 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -1,18 +1,22 @@ $alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); +$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); $arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); $calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $caret-down-svg: url('data:image/svg+xml;charset=UTF-8,'); $caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); +$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -28,6 +32,8 @@ $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-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,'); $download-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -49,6 +55,7 @@ $hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); $help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $history-svg: url('data:image/svg+xml;charset=UTF-8,'); +$info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); @@ -62,6 +69,7 @@ $menu-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +$minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $minus-svg: url('data:image/svg+xml;charset=UTF-8,'); $more-horizontal-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 98c0dec3ec..2e9e794dfe 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -8,6 +8,11 @@ background-image: $alert-circle-outline-svg; } +%with-alert-triangle-color-icon { + @extend %with-icon; + background-image: $alert-triangle-color-svg; +} + %with-alert-triangle-icon { @extend %with-icon; background-image: $alert-triangle-svg; @@ -23,6 +28,11 @@ background-image: $arrow-left-svg; } +%with-arrow-right-color-icon { + @extend %with-icon; + background-image: $arrow-right-color-svg; +} + %with-arrow-right-icon { @extend %with-icon; background-image: $arrow-right-svg; @@ -53,6 +63,11 @@ background-image: $cancel-plain-svg; } +%with-cancel-square-fill-color-icon { + @extend %with-icon; + background-image: $cancel-square-fill-color-svg; +} + %with-cancel-square-fill-icon { @extend %with-icon; background-image: $cancel-square-fill-svg; @@ -73,6 +88,11 @@ background-image: $caret-up-svg; } +%with-check-circle-fill-color-icon { + @extend %with-icon; + background-image: $check-circle-fill-color-svg; +} + %with-check-circle-fill-icon { @extend %with-icon; background-image: $check-circle-fill-svg; @@ -148,6 +168,16 @@ background-image: $copy-success-svg; } +%with-deny-color-icon { + @extend %with-icon; + background-image: $deny-color-svg; +} + +%with-deny-icon { + @extend %with-icon; + background-image: $deny-svg; +} + %with-disabled-icon { @extend %with-icon; background-image: $disabled-svg; @@ -253,6 +283,11 @@ background-image: $history-svg; } +%with-info-circle-fill-color-icon { + @extend %with-icon; + background-image: $info-circle-fill-color-svg; +} + %with-info-circle-fill-icon { @extend %with-icon; background-image: $info-circle-fill-svg; @@ -318,6 +353,11 @@ background-image: $minus-plain-svg; } +%with-minus-square-fill-color-icon { + @extend %with-icon; + background-image: $minus-square-fill-color-svg; +} + %with-minus-square-fill-icon { @extend %with-icon; background-image: $minus-square-fill-svg; diff --git a/ui-v2/app/styles/components/filter-bar.scss b/ui-v2/app/styles/components/filter-bar.scss index 5d65866dee..5945f6adb9 100644 --- a/ui-v2/app/styles/components/filter-bar.scss +++ b/ui-v2/app/styles/components/filter-bar.scss @@ -1,33 +1,29 @@ @import './filter-bar/index'; @import './expanded-single-select/index'; -@import './icons/index'; .filter-bar { @extend %filter-bar; } %filter-bar [role='radiogroup'] { @extend %expanded-single-select; } -%filter-bar .value-passing span { - @extend %with-passing; +%filter-bar span::before { + margin-right: 9px; + opacity: 0.4; + margin-left: -2px; } -%filter-bar .value-warning span { - @extend %with-warning; + +%filter-bar .value-passing span::before { + @extend %with-check-circle-fill-icon, %as-pseudo; } %filter-bar .value-warning span::before { - @extend %with-warning-icon-grey; + @extend %with-alert-triangle-icon, %as-pseudo; } -%filter-bar .value-allow span { - @extend %with-allow; -} -%filter-bar .value-deny span { - @extend %with-deny; -} -%filter-bar .value-deny span::before { - @extend %with-deny-icon-grey; +%filter-bar .value-critical span::before { + @extend %with-cancel-square-fill-icon, %as-pseudo; } %filter-bar .value-allow span::before { - @extend %with-right-arrow-grey; + @extend %with-arrow-right-icon, %as-pseudo; } -%filter-bar .value-critical span { - @extend %with-critical; +%filter-bar .value-deny span::before { + @extend %with-deny-icon, %as-pseudo; } diff --git a/ui-v2/app/styles/components/filter-bar/layout.scss b/ui-v2/app/styles/components/filter-bar/layout.scss index d4be8335c6..0b35d64c99 100644 --- a/ui-v2/app/styles/components/filter-bar/layout.scss +++ b/ui-v2/app/styles/components/filter-bar/layout.scss @@ -22,22 +22,3 @@ margin-bottom: 12px; } } -// icons -%filter-bar [role='radiogroup'] label span::before { - left: 11px; - top: 50%; - margin-top: -0.5em; -} -%filter-bar .value-allow span, -%filter-bar .value-deny span, -%filter-bar .value-passing span, -%filter-bar .value-warning span, -%filter-bar .value-critical span { - position: relative; - text-indent: 23px; -} -%filter-bar .value-warning span::after { - left: 0.7em; - top: 50%; - margin-top: -8px; -} diff --git a/ui-v2/app/styles/components/flash-message/layout.scss b/ui-v2/app/styles/components/flash-message/layout.scss index c7dea1fee6..8239a88caf 100644 --- a/ui-v2/app/styles/components/flash-message/layout.scss +++ b/ui-v2/app/styles/components/flash-message/layout.scss @@ -10,12 +10,3 @@ position: absolute; padding: 9px 15px; } -%flash-message p strong { - position: relative; - display: inline-block; - padding-left: 20px; -} -%flash-message p strong::before { - left: 0; - margin-top: -0.5em !important; -} diff --git a/ui-v2/app/styles/components/flash-message/skin.scss b/ui-v2/app/styles/components/flash-message/skin.scss index b06698fed8..3888776bd8 100644 --- a/ui-v2/app/styles/components/flash-message/skin.scss +++ b/ui-v2/app/styles/components/flash-message/skin.scss @@ -2,14 +2,17 @@ border-width: 1px; border-radius: $decor-radius-100; } -%flash-message p.success strong { - @extend %with-passing; +%flash-message p strong::before { + @extend %as-pseudo; } -%flash-message p.warning strong { - @extend %with-warning; +%flash-message p.success strong::before { + @extend %with-check-circle-fill-color-icon; } -%flash-message p.error strong { - @extend %with-critical; +%flash-message p.warning strong::before { + @extend %with-alert-triangle-color-icon; +} +%flash-message p.error strong::before { + @extend %with-cancel-square-fill-color-icon; } %flash-message p.success { @extend %frame-green-500; diff --git a/ui-v2/app/styles/components/healthcheck-info.scss b/ui-v2/app/styles/components/healthcheck-info.scss index ff44885a30..3cffc7e460 100644 --- a/ui-v2/app/styles/components/healthcheck-info.scss +++ b/ui-v2/app/styles/components/healthcheck-info.scss @@ -3,9 +3,10 @@ tr .healthcheck-info { @extend %healthcheck-info; } +// TODO: Look at why we can't have the zeros in the healthcheck-info td span.zero { - @extend %with-no-healthchecks; - // TODO: Why isn't this in layout? + @extend %with-minus-square-fill-color-icon; + background-position: left center; display: block; text-indent: 20px; color: $gray-400; diff --git a/ui-v2/app/styles/components/healthcheck-info/layout.scss b/ui-v2/app/styles/components/healthcheck-info/layout.scss index 06b64a930a..a9ec45a422 100644 --- a/ui-v2/app/styles/components/healthcheck-info/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-info/layout.scss @@ -4,22 +4,12 @@ %healthcheck-info > * { display: block; } -%healthcheck-info dt { - text-indent: -9000px; -} %healthcheck-info dt.zero { display: none; } %healthcheck-info dd.zero { visibility: hidden; } -%healthcheck-info dt.warning::before { - top: 7px; -} -%healthcheck-info dt.warning::after { - left: -2px; - top: -1px; -} %healthcheck-info dd { box-sizing: content-box; margin-left: 22px; diff --git a/ui-v2/app/styles/components/healthcheck-info/skin.scss b/ui-v2/app/styles/components/healthcheck-info/skin.scss index 9b22b05f01..5f268ab548 100644 --- a/ui-v2/app/styles/components/healthcheck-info/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-info/skin.scss @@ -1,11 +1,20 @@ -%healthcheck-info dt.passing { - @extend %with-passing; +%healthcheck-info dt { + font-size: 0; } -%healthcheck-info dt.warning { - @extend %with-warning; +%healthcheck-info dt::before { + @extend %as-pseudo; + position: absolute; + width: 18px; + height: 18px; } -%healthcheck-info dt.critical { - @extend %with-critical; +%healthcheck-info dt.passing::before { + @extend %with-check-circle-fill-color-icon; +} +%healthcheck-info dt.warning::before { + @extend %with-alert-triangle-color-icon; +} +%healthcheck-info dt.critical::before { + @extend %with-cancel-square-fill-color-icon; } %healthcheck-info dt.passing, %healthcheck-info dt.passing + dd { diff --git a/ui-v2/app/styles/components/healthcheck-output.scss b/ui-v2/app/styles/components/healthcheck-output.scss index 96216d6315..43ff813f07 100644 --- a/ui-v2/app/styles/components/healthcheck-output.scss +++ b/ui-v2/app/styles/components/healthcheck-output.scss @@ -1,35 +1,41 @@ @import './healthcheck-output/index'; -@import './icons/index'; .healthcheck-output { @extend %healthcheck-output; } -%healthcheck-output.passing { - @extend %with-passing; +%healthcheck-output::before { + @extend %as-pseudo; + position: absolute; + width: 32px; + height: 32px; } -%healthcheck-output.warning { - @extend %with-warning; +%healthcheck-output.passing::before { + @extend %with-check-circle-fill-color-icon; } -%healthcheck-output.critical { - @extend %with-critical; +%healthcheck-output.warning::before { + @extend %with-alert-triangle-color-icon; +} +%healthcheck-output.critical::before { + @extend %with-cancel-square-fill-color-icon; } @media #{$--lt-spacious-healthcheck-output} { .healthcheck-output button.copy-btn { - margin-top: -11px; - margin-right: -18px; + margin-top: -2px; + margin-right: -10px; padding: 0; + min-width: 20px !important; width: 20px; visibility: hidden; } %healthcheck-output { - padding-left: 30px; - padding-top: 10px; + padding-left: 40px; + padding-top: 12px; padding-bottom: 15px; padding-right: 13px; } %healthcheck-output::before { - width: 15px !important; - height: 15px !important; left: 9px; - top: 13px !important; + top: 13px; + width: 24px; + height: 24px; } } diff --git a/ui-v2/app/styles/components/healthcheck-output/layout.scss b/ui-v2/app/styles/components/healthcheck-output/layout.scss index 5f1a9403de..b48120e811 100644 --- a/ui-v2/app/styles/components/healthcheck-output/layout.scss +++ b/ui-v2/app/styles/components/healthcheck-output/layout.scss @@ -1,20 +1,13 @@ %healthcheck-output::before { - background-size: 55%; - width: 25px !important; - height: 25px !important; - left: 17px; - top: 20px !important; - margin-top: 0 !important; -} -%healthcheck-output.warning::before { - background-size: 100%; + left: 14px; + top: 20px; } %healthcheck-output { + position: relative; padding: 20px 24px; padding-bottom: 26px; padding-left: 57px; margin-bottom: 24px; - position: relative; } %healthcheck-output pre { padding: 12px; diff --git a/ui-v2/app/styles/components/healthcheck-output/skin.scss b/ui-v2/app/styles/components/healthcheck-output/skin.scss index 9d26d4d663..87e4020afe 100644 --- a/ui-v2/app/styles/components/healthcheck-output/skin.scss +++ b/ui-v2/app/styles/components/healthcheck-output/skin.scss @@ -27,9 +27,3 @@ @extend %frame-red-500; color: $gray-900; } -%healthcheck-output.passing::before { - background-color: $color-success !important; -} -%healthcheck-output.critical::before { - background-color: $color-danger !important; -} diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss index e163ff534e..88937a0386 100644 --- a/ui-v2/app/styles/components/healthchecked-resource.scss +++ b/ui-v2/app/styles/components/healthchecked-resource.scss @@ -1,14 +1,68 @@ -@import './healthchecked-resource/index'; -@import './icons/index'; -.healthchecked-resource { - @extend %healthchecked-resource; +@import '../base/components/stats-card/index'; +.healthchecked-resource > div { + @extend %stats-card; } -%healthchecked-resource li.passing { - @extend %with-passing; + +%tooltip-below::after { + top: calc(100% - 8px); + bottom: auto; + border-top: none; + border-bottom: 18px solid $gray-500; } -%healthchecked-resource li.warning { - @extend %with-warning; +%tooltip-below::before { + top: calc(100% + 4px); + bottom: auto; } -%healthchecked-resource li.critical { - @extend %with-critical; +%tooltip-left::before { + right: 0; +} +%tooltip-right::before { + left: -10px; +} +%stats-card-icon { + @extend %tooltip-below; + /*TODO: This should probably go into base*/ + line-height: 1em; +} +%stats-card-icon:first-child::before { + right: 0; +} +%stats-card-icon:last-child::before { + left: -10px; +} + +%stats-card-icon:last-child { + @extend %with-star-icon; +} +%stats-card header > .zero { + @extend %with-minus-square-fill-color-icon; + color: $gray-400; +} +%stats-card header > .non-zero { + @extend %with-check-circle-fill-color-icon; + color: $green-500; +} + +%stats-card li a > :first-child { + font-size: 0; + height: 16px; + min-width: 16px; +} +[data-tooltip] { + @extend %with-pseudo-tooltip; +} +%stats-card li a > :last-child { + margin-left: 10px; +} +%stats-card a > :first-child::before { + left: -10px; +} +%stats-card a.passing > :first-child { + @extend %with-check-circle-fill-color-icon; +} +%stats-card a.warning > :first-child { + @extend %with-alert-triangle-color-icon; +} +%stats-card a.critical > :first-child { + @extend %with-cancel-square-fill-color-icon; } diff --git a/ui-v2/app/styles/components/healthchecked-resource/layout.scss b/ui-v2/app/styles/components/healthchecked-resource/layout.scss deleted file mode 100644 index 2d39692e35..0000000000 --- a/ui-v2/app/styles/components/healthchecked-resource/layout.scss +++ /dev/null @@ -1,82 +0,0 @@ -%healthchecked-resource header strong, -%healthchecked-resource header span, -%healthchecked-resource header em, -%healthchecked-resource li:not(:last-child) span { - overflow: hidden; - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 100%; -} -%healthchecked-resource li:last-child:not(:only-child) { - overflow: hidden; - white-space: nowrap; -} -%healthchecked-resource, -%healthchecked-resource header, -%healthchecked-resource li { - position: relative; -} -%healthchecked-resource header strong { - position: absolute; -} -%healthchecked-resource a, -%healthchecked-resource header a > * { - display: block; -} -%healthchecked-resource li::before { - left: 11px; - top: 50%; - margin-top: -0.49em !important; -} -.healthy .healthchecked-resource header span { - padding-right: 20px; -} -.healthy .healthchecked-resource li { - position: absolute; - top: 8px; - right: 16px; - border: none; -} -.healthy .healthchecked-resource li::before { - left: 0; -} -.healthy .healthchecked-resource li span { - display: none; -} -.healthy .healthchecked-resource li a { - padding-left: 0; -} -%healthchecked-resource header strong { - top: 2.8em; - padding: 0 15px; -} -%healthchecked-resource header span { - margin-bottom: 1.75em; -} -%healthchecked-resource header a { - padding: 12px 15px; -} -.unhealthy .healthchecked-resource header a { - padding-bottom: 15px; -} -.unhealthy .healthchecked-resource header.with-service a { - padding-bottom: 25px; -} -%healthchecked-resource li a { - padding: 3px 15px; - padding-top: 4px; - padding-left: 39px; - height: 31px; -} -%healthchecked-resource li:not(.passing) strong, -.healthy .healthchecked-resource li:only-child strong { - display: none; -} -%healthchecked-resource ul:empty { - position: absolute; - top: 18px; - right: 20px; - width: 1em; - height: 1em; -} diff --git a/ui-v2/app/styles/components/healthchecked-resource/skin.scss b/ui-v2/app/styles/components/healthchecked-resource/skin.scss deleted file mode 100644 index 12b5ecc86e..0000000000 --- a/ui-v2/app/styles/components/healthchecked-resource/skin.scss +++ /dev/null @@ -1,33 +0,0 @@ -%healthchecked-resource { - border: $decor-border-100; - box-shadow: 0 4px 8px 0 rgba($black, 0.05); -} -%healthchecked-resource li { - border-top: $decor-border-100; -} -%healthchecked-resource, -%healthchecked-resource li { - border-color: $gray-200; -} -%healthchecked-resource li.passing { - color: $color-success; -} -%healthchecked-resource li.warning { - color: $color-alert; -} -%healthchecked-resource li.critical { - color: $color-failure; -} -%healthchecked-resource:hover, -%healthchecked-resource:focus { - box-shadow: 0 8px 10px 0 rgba($black, 0.1); -} -%healthchecked-resource { - border-radius: $radius-small; -} -%healthchecked-resource ul:empty { - @extend %with-no-healthchecks; -} -%healthchecked-resource ul:empty::before { - color: $gray-400; -} diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss index 7ff829e43a..5f6aeec04f 100644 --- a/ui-v2/app/styles/components/icons/index.scss +++ b/ui-v2/app/styles/components/icons/index.scss @@ -207,14 +207,6 @@ @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); } -%with-warning-icon-orange { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} -%with-warning-icon-grey { - @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,'); @@ -226,39 +218,7 @@ @extend %pseudo-icon; background-image: url('data:image/svg+xml;charset=UTF-8,'); } -%with-deny-icon { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); - width: 16px; - height: 16px; - background-color: $color-transparent; -} -%with-deny-icon-grey { - @extend %pseudo-icon; - background-image: url('data:image/svg+xml;charset=UTF-8,'); -} -%with-deny::before { - @extend %with-deny-icon; -} -%with-allow::before { - @extend %with-right-arrow-green; -} -%with-passing::before { - @extend %with-tick; - border-radius: 100%; -} -%with-warning::before { - @extend %with-warning-icon-orange; - background-color: $color-transparent; -} -%with-critical::before { - @extend %with-cross; - border-radius: 20%; -} -%with-no-healthchecks::before { - @extend %with-minus; - border-radius: 20%; -} +// swap this out for new icons %with-error { position: relative; padding-left: 18px; diff --git a/ui-v2/app/styles/components/modal-dialog/skin.scss b/ui-v2/app/styles/components/modal-dialog/skin.scss index a97a159dcc..ef15cac407 100644 --- a/ui-v2/app/styles/components/modal-dialog/skin.scss +++ b/ui-v2/app/styles/components/modal-dialog/skin.scss @@ -20,10 +20,6 @@ %modal-window > header { border-bottom-width: 1px; } -%modal-window.warning > header { - @extend %with-warning; - text-indent: 20px; -} %modal-window > header [for='modal_close'] { @extend %bg-icon; diff --git a/ui-v2/app/styles/components/notice.scss b/ui-v2/app/styles/components/notice.scss index 463d473f8d..6b74e61f22 100644 --- a/ui-v2/app/styles/components/notice.scss +++ b/ui-v2/app/styles/components/notice.scss @@ -2,21 +2,20 @@ %notice { margin-bottom: 1em; } -/* These need replacing with new icons */ -%notice-success { - @extend %with-passing; +%notice-success::before { + @extend %with-check-circle-fill-color-icon; } -%notice-info { - @extend %with-passing; /* needs a better info button*/ +%notice-info::before { + @extend %with-info-circle-fill-color-icon; } -%notice-highlight { - @extend %with-star; +%notice-highlight::before { + @extend %with-star-icon; } -%notice-warning { - @extend %with-warning; +%notice-warning::before { + @extend %with-alert-triangle-color-icon; } -%notice-error { - @extend %with-critical; +%notice-error::before { + @extend %with-cancel-square-fill-color-icon; } /**/ .notice.warning { diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 9a0662f9c4..298cada999 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -40,7 +40,6 @@ h3, fieldset > header, caption, %header-nav, -%healthchecked-resource header span, %healthcheck-output dt, %copy-button, %app-content div > dl > dt, @@ -56,7 +55,6 @@ main label a[rel*='help'], %pill, %tbody-th em, %form-element > strong, -%healthchecked-resource strong, %app-view h1 em { font-weight: $typo-weight-normal; } @@ -72,7 +70,6 @@ td strong, /* Styling */ %form-element > em, %tbody-th em, -%healthchecked-resource header em, %app-view h1 em { font-style: normal; } @@ -91,7 +88,6 @@ h2 { h3 { font-size: $typo-header-300; } -%healthcheck-info dt, %header-drop-nav .is-active, %app-view h1 em { font-size: $typo-size-500; @@ -110,7 +106,7 @@ caption, .type-dialog, %form-element > span, %tooltip-bubble, -%healthchecked-resource strong, +%stats-card header a span, %footer, %app-view h1 span.kind-proxy { font-size: $typo-size-700; diff --git a/ui-v2/app/styles/routes/dc/intention/index.scss b/ui-v2/app/styles/routes/dc/intention/index.scss index d10ca5debb..ee1b95dfd1 100644 --- a/ui-v2/app/styles/routes/dc/intention/index.scss +++ b/ui-v2/app/styles/routes/dc/intention/index.scss @@ -1,10 +1,12 @@ -html.template-intention.template-list td.intent-allow strong { - @extend %with-allow; +html.template-intention.template-list td strong { visibility: hidden; } -html.template-intention.template-list td.intent-deny strong { - @extend %with-deny; - visibility: hidden; +html.template-intention.template-list td.intent-allow strong::before { + @extend %with-arrow-right-color-icon, %as-pseudo; + background-size: 24px; +} +html.template-intention.template-list td.intent-deny strong::before { + @extend %with-deny-color-icon, %as-pseudo; } html.template-intention.template-list td.destination { @extend %tbody-th; diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss index d4374c0d87..a5b67ca117 100644 --- a/ui-v2/app/styles/routes/dc/nodes/index.scss +++ b/ui-v2/app/styles/routes/dc/nodes/index.scss @@ -4,10 +4,15 @@ html.template-node.template-show .sessions td:last-child { html.template-node.template-show .sessions td:first-child { @extend %tbody-th; } -html.template-node.template-list .healthy h2, html.template-node.template-list .unhealthy h2 { margin-bottom: 0.7em; } html.template-node.template-show #meta-data table tr { cursor: default; } +.healthy > div > ul > li { + padding-top: 16px; +} +.healthy h2 { + margin-bottom: 0em !important; +} diff --git a/ui-v2/app/templates/components/healthchecked-resource.hbs b/ui-v2/app/templates/components/healthchecked-resource.hbs index 48bf64901e..b3fc52b3f2 100644 --- a/ui-v2/app/templates/components/healthchecked-resource.hbs +++ b/ui-v2/app/templates/components/healthchecked-resource.hbs @@ -1,32 +1,38 @@ -
- {{address}} - - {{name}} - {{service}} - -
- {{! its important to keep this