diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss index 0f9b645a91..ed7276f839 100644 --- a/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss @@ -27,13 +27,16 @@ margin-left: 0.5em; } %healthcheck-output.passing::before { - @extend %with-check-circle-fill-color-icon; + @extend %with-check-circle-fill-mask; + color: $green-500; } %healthcheck-output.warning::before { - @extend %with-alert-triangle-color-icon; + @extend %with-alert-triangle-mask; + color: $orange-500; } %healthcheck-output.critical::before { - @extend %with-cancel-square-fill-color-icon; + @extend %with-cancel-square-fill-mask; + color: $red-500; } %healthcheck-output, %healthcheck-output pre { diff --git a/ui/packages/consul-ui/app/components/consul/intention/components.scss b/ui/packages/consul-ui/app/components/consul/intention/components.scss index 51c5755f9d..b4e7856064 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/components.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/components.scss @@ -24,7 +24,7 @@ @extend %frame-gray-900; } %pill-allow::before { - @extend %with-arrow-right-color-mask; + @extend %with-arrow-right-mask; } %pill-deny::before { @extend %with-deny-color-mask; diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss index 048f79fa86..9a6f1a8d6e 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss @@ -11,12 +11,6 @@ .radio-card header > * { display: inline; } - .value-allow > :last-child::before { - @extend %with-arrow-right-color-icon, %as-pseudo; - } - .value-deny > :last-child::before { - @extend %with-deny-color-icon, %as-pseudo; - } .permissions > button { @extend %anchor, %p2; float: right; diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss index 86584d2714..bbf8ef09ce 100644 --- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss @@ -1,6 +1,7 @@ .consul-intention-fieldsets { .value-allow > :last-child::before { - @extend %with-arrow-right-color-icon, %as-pseudo; + @extend %with-arrow-right-mask, %as-pseudo; + color: $green-500; } .value-deny > :last-child::before { @extend %with-deny-color-icon, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/flash-message/README.mdx b/ui/packages/consul-ui/app/components/flash-message/README.mdx new file mode 100644 index 0000000000..c230938764 --- /dev/null +++ b/ui/packages/consul-ui/app/components/flash-message/README.mdx @@ -0,0 +1,35 @@ +--- +class: css +state: needs-love +--- +# flash-message + +CSS component for styling our flash messages + +```hbs preview-template +
+ +
+ +
+
Provide a widget to change the class
+ + + +
+``` + diff --git a/ui/packages/consul-ui/app/styles/components/flash-message.scss b/ui/packages/consul-ui/app/components/flash-message/index.scss similarity index 81% rename from ui/packages/consul-ui/app/styles/components/flash-message.scss rename to ui/packages/consul-ui/app/components/flash-message/index.scss index d9101a2989..19b827cb7f 100644 --- a/ui/packages/consul-ui/app/styles/components/flash-message.scss +++ b/ui/packages/consul-ui/app/components/flash-message/index.scss @@ -1,4 +1,5 @@ -@import './flash-message/index'; +@import './skin'; +@import './layout'; .flash-message { @extend %flash-message; } @@ -10,7 +11,8 @@ /* once we have refactored app-view with data-source with nicer */ /* flash message usage we should be able to remove this */ %flash-message p.exists strong::before { - @extend %with-cancel-square-fill-color-icon; + @extend %with-cancel-square-fill-mask; + color: $red-500; } %flash-message p.exists { @extend %frame-red-500; diff --git a/ui/packages/consul-ui/app/styles/components/flash-message/layout.scss b/ui/packages/consul-ui/app/components/flash-message/layout.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/components/flash-message/layout.scss rename to ui/packages/consul-ui/app/components/flash-message/layout.scss diff --git a/ui/packages/consul-ui/app/styles/components/flash-message/skin.scss b/ui/packages/consul-ui/app/components/flash-message/skin.scss similarity index 70% rename from ui/packages/consul-ui/app/styles/components/flash-message/skin.scss rename to ui/packages/consul-ui/app/components/flash-message/skin.scss index 3888776bd8..9503f62d57 100644 --- a/ui/packages/consul-ui/app/styles/components/flash-message/skin.scss +++ b/ui/packages/consul-ui/app/components/flash-message/skin.scss @@ -6,13 +6,16 @@ @extend %as-pseudo; } %flash-message p.success strong::before { - @extend %with-check-circle-fill-color-icon; + @extend %with-check-circle-fill-mask; + color: $green-500; } %flash-message p.warning strong::before { - @extend %with-alert-triangle-color-icon; + @extend %with-alert-triangle-mask; + color: $orange-500; } %flash-message p.error strong::before { - @extend %with-cancel-square-fill-color-icon; + @extend %with-cancel-square-fill-mask; + color: $red-500; } %flash-message p.success { @extend %frame-green-500; diff --git a/ui/packages/consul-ui/app/components/inline-alert/README.mdx b/ui/packages/consul-ui/app/components/inline-alert/README.mdx new file mode 100644 index 0000000000..6b99dc0b95 --- /dev/null +++ b/ui/packages/consul-ui/app/components/inline-alert/README.mdx @@ -0,0 +1,46 @@ +--- +class: css +--- +# inline-alert + +CSS component for giving inline feedback to the user, generally used for form +element feedback like errors and suchlike. + +```hbs preview-template + + +
+
Provide a widget to change the class
+ + + +
+``` + + +```css +strong.info { + @extend %inline-alert-info; +} +strong.success { + @extend %inline-alert-success; +} +strong.warning { + @extend %inline-alert-warning; +} +strong.error { + @extend %inline-alert-error; +} +``` + diff --git a/ui/packages/consul-ui/app/components/inline-alert/debug.scss b/ui/packages/consul-ui/app/components/inline-alert/debug.scss new file mode 100644 index 0000000000..e314a50df0 --- /dev/null +++ b/ui/packages/consul-ui/app/components/inline-alert/debug.scss @@ -0,0 +1,14 @@ +[id^='docfy-demo-preview-inline-alert'] { + strong.info { + @extend %inline-alert-info; + } + strong.success { + @extend %inline-alert-success; + } + strong.warning { + @extend %inline-alert-warning; + } + strong.error { + @extend %inline-alert-error; + } +} diff --git a/ui/packages/consul-ui/app/components/inline-alert/skin.scss b/ui/packages/consul-ui/app/components/inline-alert/skin.scss index 198e8ab6e9..dee30ebc76 100644 --- a/ui/packages/consul-ui/app/components/inline-alert/skin.scss +++ b/ui/packages/consul-ui/app/components/inline-alert/skin.scss @@ -17,23 +17,26 @@ %inline-alert::before { font-size: 14px; } -%inline-alert-success::before { - @extend %with-check-circle-fill-color-icon; +%inline-alert::before { @extend %as-pseudo; } +%inline-alert-success::before { + @extend %with-check-circle-fill-mask; + color: $green-500; +} %inline-alert-error::before { - @extend %with-cancel-square-fill-color-icon; - @extend %as-pseudo; + @extend %with-cancel-square-fill-mask; + color: $red-500; } %inline-alert-warning::before { - @extend %with-alert-triangle-color-icon; - @extend %as-pseudo; + @extend %with-alert-triangle-mask; + color: $orange-500; /* 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; + @extend %with-info-circle-fill-mask; + color: $blue-500; } diff --git a/ui/packages/consul-ui/app/components/notice/README.mdx b/ui/packages/consul-ui/app/components/notice/README.mdx index 934f49c251..ed05cb8a21 100644 --- a/ui/packages/consul-ui/app/components/notice/README.mdx +++ b/ui/packages/consul-ui/app/components/notice/README.mdx @@ -29,6 +29,7 @@ as |notice|> onchange={{action (mut this.type) value="target.value"}} > + diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss index 514b721e91..d1f2c6229c 100644 --- a/ui/packages/consul-ui/app/components/notice/skin.scss +++ b/ui/packages/consul-ui/app/components/notice/skin.scss @@ -50,11 +50,11 @@ border-color: $red-500; } %notice-success::before { - @extend %with-check-circle-fill-color-mask; + @extend %with-check-circle-fill-mask; color: $green-500; } %notice-info::before { - @extend %with-info-circle-fill-color-mask; + @extend %with-info-circle-fill-mask; color: $blue-500; } %notice-highlight::before { @@ -62,10 +62,10 @@ color: $yellow-500; } %notice-warning::before { - @extend %with-alert-triangle-color-mask; + @extend %with-alert-triangle-mask; color: $orange-500; } %notice-error::before { - @extend %with-cancel-square-fill-color-mask; + @extend %with-cancel-square-fill-mask; color: $red-500; } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss index d16a2eb5ab..06eaf9ff3a 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss @@ -56,15 +56,15 @@ background-color: $gray-500; } .passing::before { - @extend %with-check-circle-fill-color-mask, %as-pseudo; + @extend %with-check-circle-fill-mask, %as-pseudo; background-color: $green-500; } .warning::before { - @extend %with-alert-triangle-color-mask, %as-pseudo; + @extend %with-alert-triangle-mask, %as-pseudo; background-color: $orange-500; } .critical::before { - @extend %with-cancel-square-fill-color-mask, %as-pseudo; + @extend %with-cancel-square-fill-mask, %as-pseudo; background-color: $red-500; } .empty::before { diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss index f35429a194..07813c19da 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss @@ -20,7 +20,7 @@ } &.deny > button::before, &.deny .tippy-arrow::after { - @extend %with-cancel-square-fill-color-mask, %as-pseudo; + @extend %with-cancel-square-fill-mask, %as-pseudo; background-color: $red-500; } &.l7 > button::before, diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss index a8ef79183b..6286d952d0 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss @@ -6,10 +6,6 @@ --alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%alert-triangle-color-svg-prop { - --alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %alert-triangle-svg-prop { --alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -22,10 +18,6 @@ --arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%arrow-right-color-svg-prop { - --arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %arrow-right-svg-prop { --arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -34,10 +26,6 @@ --arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%aws-logo-color-svg-prop { - --aws-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %bolt-svg-prop { --bolt-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -50,12 +38,16 @@ --box-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%broadcast-svg-prop { + --broadcast-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %bug-svg-prop { --bug-svg: url('data:image/svg+xml;charset=UTF-8,'); } %calendar-svg-prop { - --calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); + --calendar-svg: url('data:image/svg+xml;charset=UTF-8,'); } %cancel-circle-fill-svg-prop { @@ -70,10 +62,6 @@ --cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%cancel-square-fill-color-svg-prop { - --cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %cancel-square-fill-svg-prop { --cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -90,10 +78,6 @@ --caret-up-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%check-circle-fill-color-svg-prop { - --check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %check-circle-fill-svg-prop { --check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -106,10 +90,6 @@ --check-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%chevron-down-2-svg-prop { - --chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %chevron-down-svg-prop { --chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -126,10 +106,6 @@ --chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%chevron-svg-prop { - --chevron-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %clock-fill-svg-prop { --clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -146,8 +122,8 @@ --code-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%consul-logo-color-svg-prop { - --consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +%console-svg-prop { + --console-svg: url('data:image/svg+xml;charset=UTF-8,'); } %copy-action-svg-prop { @@ -167,7 +143,7 @@ } %deny-alt-svg-prop { - --deny-alt-svg: url('data:image/svg+xml;charset=UTF-8,'); + --deny-alt-svg: url('data:image/svg+xml;charset=UTF-8,'); } %deny-color-svg-prop { @@ -178,16 +154,12 @@ --deny-default-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%deny-svg-prop { - --deny-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %disabled-svg-prop { --disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); } %docs-svg-prop { - --docs-svg: url('data:image/svg+xml;charset=UTF-8,'); + --docs-svg: url('data:image/svg+xml;charset=UTF-8,'); } %download-svg-prop { @@ -195,15 +167,11 @@ } %edit-svg-prop { - --edit-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - -%ember-circle-logo-color-svg-prop { - --ember-circle-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); + --edit-svg: url('data:image/svg+xml;charset=UTF-8,'); } %envelope-sealed-fill-svg-prop { - --envelope-sealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); + --envelope-sealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } %envelope-sealed-outline-svg-prop { @@ -215,7 +183,7 @@ } %envelope-unsealed-fill-svg-prop { - --envelope-unsealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); + --envelope-unsealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } %exit-svg-prop { @@ -250,10 +218,6 @@ --folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%folder-outline-color-svg-prop { - --folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %folder-outline-svg-prop { --folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -263,7 +227,7 @@ } %gift-fill-svg-prop { - --gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); + --gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } %gift-outline-svg-prop { @@ -286,12 +250,8 @@ --git-repository-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%glimmer-logo-color-svg-prop { - --glimmer-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - -%hashicorp-logo-svg-prop { - --hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); +%guide-svg-prop { + --guide-svg: url('data:image/svg+xml;charset=UTF-8,'); } %health-svg-prop { @@ -310,10 +270,6 @@ --history-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%info-circle-fill-color-svg-prop { - --info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %info-circle-fill-svg-prop { --info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -322,24 +278,16 @@ --info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%jwt-logo-svg-prop { - --jwt-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %key-svg-prop { --key-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%kubernetes-logo-color-svg-prop { - --kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %layers-svg-prop { --layers-svg: url('data:image/svg+xml;charset=UTF-8,'); } %learn-svg-prop { - --learn-svg: url('data:image/svg+xml;charset=UTF-8,'); + --learn-svg: url('data:image/svg+xml;charset=UTF-8,'); } %link-svg-prop { @@ -350,8 +298,16 @@ --loading-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%lock-closed-fill-svg-prop { + --lock-closed-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%lock-closed-outline-svg-prop { + --lock-closed-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %lock-closed-svg-prop { - --lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); + --lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,'); } %lock-disabled-svg-prop { @@ -359,7 +315,7 @@ } %lock-open-svg-prop { - --lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); + --lock-open-svg: url('data:image/svg+xml;charset=UTF-8,'); } %logo-alicloud-color-svg-prop { @@ -386,6 +342,14 @@ --logo-azure-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%logo-azure-dev-ops-color-svg-prop { + --logo-azure-dev-ops-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-azure-dev-ops-monochrome-svg-prop { + --logo-azure-dev-ops-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %logo-azure-monochrome-svg-prop { --logo-azure-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -402,6 +366,10 @@ --logo-consul-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%logo-ember-circle-color-svg-prop { + --logo-ember-circle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %logo-gcp-color-svg-prop { --logo-gcp-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -426,16 +394,32 @@ --logo-gitlab-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%logo-glimmer-color-svg-prop { + --logo-glimmer-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %logo-google-color-svg-prop { - --logo-google-color-svg: url('data:image/svg+xml;charset=UTF-8,'); + --logo-google-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-google-monochrome-svg-prop { + --logo-google-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-hashicorp-color-svg-prop { + --logo-hashicorp-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%logo-jwt-color-svg-prop { + --logo-jwt-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } %logo-kubernetes-color-svg-prop { - --logo-kubernetes-color-svg: url('data:image/svg+xml;charset=UTF-8,'); + --logo-kubernetes-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } %logo-kubernetes-monochrome-svg-prop { - --logo-kubernetes-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); + --logo-kubernetes-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); } %logo-microsoft-color-svg-prop { @@ -446,6 +430,10 @@ --logo-nomad-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%logo-oidc-color-svg-prop { + --logo-oidc-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %logo-okta-color-svg-prop { --logo-okta-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -502,20 +490,12 @@ --minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%minus-square-fill-color-svg-prop { - --minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %minus-square-fill-svg-prop { --minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%minus-svg-prop { - --minus-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %module-svg-prop { - --module-svg: url('data:image/svg+xml;charset=UTF-8,'); + --module-svg: url('data:image/svg+xml;charset=UTF-8,'); } %more-horizontal-svg-prop { @@ -526,12 +506,8 @@ --more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%nomad-logo-color-svg-prop { - --nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %notification-disabled-svg-prop { - --notification-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); + --notification-disabled-svg: url('data:image/svg+xml;charset=UTF-8,'); } %notification-fill-svg-prop { @@ -542,26 +518,34 @@ --notification-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%oidc-logo-svg-prop { - --oidc-logo-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %outline-svg-prop { - --outline-svg: url('data:image/svg+xml;charset=UTF-8,'); + --outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } %page-outline-svg-prop { - --page-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); + --page-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } %partner-svg-prop { - --partner-svg: url('data:image/svg+xml;charset=UTF-8,'); + --partner-svg: url('data:image/svg+xml;charset=UTF-8,'); } %path-svg-prop { --path-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%play-fill-svg-prop { + --play-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%play-outline-svg-prop { + --play-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + +%play-plain-svg-prop { + --play-plain-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %plus-circle-fill-svg-prop { --plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -646,10 +630,6 @@ --search-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%service-identity-svg-prop { - --service-identity-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %settings-svg-prop { --settings-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -670,10 +650,6 @@ --star-outline-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%star-svg-prop { - --star-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %sub-left-svg-prop { --sub-left-svg: url('data:image/svg+xml;charset=UTF-8,'); } @@ -683,7 +659,7 @@ } %support-svg-prop { - --support-svg: url('data:image/svg+xml;charset=UTF-8,'); + --support-svg: url('data:image/svg+xml;charset=UTF-8,'); } %swap-horizontal-svg-prop { @@ -698,12 +674,8 @@ --tag-svg: url('data:image/svg+xml;charset=UTF-8,'); } -%terraform-logo-color-svg-prop { - --terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -} - %trash-svg-prop { - --trash-svg: url('data:image/svg+xml;charset=UTF-8,'); + --trash-svg: url('data:image/svg+xml;charset=UTF-8,'); } %tune-svg-prop { @@ -747,7 +719,7 @@ } %visibility-hide-svg-prop { - --visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); + --visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,'); } %visibility-show-svg-prop { diff --git a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss index 2da19892f2..823463419c 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss @@ -18,16 +18,6 @@ mask-image: var(--alert-circle-outline-svg); } -%with-alert-triangle-color-icon { - @extend %with-icon, %alert-triangle-color-svg-prop; - background-image: var(--alert-triangle-color-svg); -} -%with-alert-triangle-color-mask { - @extend %with-mask, %alert-triangle-color-svg-prop; - -webkit-mask-image: var(--alert-triangle-color-svg); - mask-image: var(--alert-triangle-color-svg); -} - %with-alert-triangle-icon { @extend %with-icon, %alert-triangle-svg-prop; background-image: var(--alert-triangle-svg); @@ -58,16 +48,6 @@ mask-image: var(--arrow-left-svg); } -%with-arrow-right-color-icon { - @extend %with-icon, %arrow-right-color-svg-prop; - background-image: var(--arrow-right-color-svg); -} -%with-arrow-right-color-mask { - @extend %with-mask, %arrow-right-color-svg-prop; - -webkit-mask-image: var(--arrow-right-color-svg); - mask-image: var(--arrow-right-color-svg); -} - %with-arrow-right-icon { @extend %with-icon, %arrow-right-svg-prop; background-image: var(--arrow-right-svg); @@ -88,16 +68,6 @@ mask-image: var(--arrow-up-svg); } -%with-aws-logo-color-icon { - @extend %with-icon, %aws-logo-color-svg-prop; - background-image: var(--aws-logo-color-svg); -} -%with-aws-logo-color-mask { - @extend %with-mask, %aws-logo-color-svg-prop; - -webkit-mask-image: var(--aws-logo-color-svg); - mask-image: var(--aws-logo-color-svg); -} - %with-bolt-icon { @extend %with-icon, %bolt-svg-prop; background-image: var(--bolt-svg); @@ -128,6 +98,16 @@ mask-image: var(--box-outline-svg); } +%with-broadcast-icon { + @extend %with-icon, %broadcast-svg-prop; + background-image: var(--broadcast-svg); +} +%with-broadcast-mask { + @extend %with-mask, %broadcast-svg-prop; + -webkit-mask-image: var(--broadcast-svg); + mask-image: var(--broadcast-svg); +} + %with-bug-icon { @extend %with-icon, %bug-svg-prop; background-image: var(--bug-svg); @@ -178,16 +158,6 @@ mask-image: var(--cancel-plain-svg); } -%with-cancel-square-fill-color-icon { - @extend %with-icon, %cancel-square-fill-color-svg-prop; - background-image: var(--cancel-square-fill-color-svg); -} -%with-cancel-square-fill-color-mask { - @extend %with-mask, %cancel-square-fill-color-svg-prop; - -webkit-mask-image: var(--cancel-square-fill-color-svg); - mask-image: var(--cancel-square-fill-color-svg); -} - %with-cancel-square-fill-icon { @extend %with-icon, %cancel-square-fill-svg-prop; background-image: var(--cancel-square-fill-svg); @@ -228,16 +198,6 @@ mask-image: var(--caret-up-svg); } -%with-check-circle-fill-color-icon { - @extend %with-icon, %check-circle-fill-color-svg-prop; - background-image: var(--check-circle-fill-color-svg); -} -%with-check-circle-fill-color-mask { - @extend %with-mask, %check-circle-fill-color-svg-prop; - -webkit-mask-image: var(--check-circle-fill-color-svg); - mask-image: var(--check-circle-fill-color-svg); -} - %with-check-circle-fill-icon { @extend %with-icon, %check-circle-fill-svg-prop; background-image: var(--check-circle-fill-svg); @@ -268,16 +228,6 @@ mask-image: var(--check-plain-svg); } -%with-chevron-down-2-icon { - @extend %with-icon, %chevron-down-2-svg-prop; - background-image: var(--chevron-down-2-svg); -} -%with-chevron-down-2-mask { - @extend %with-mask, %chevron-down-2-svg-prop; - -webkit-mask-image: var(--chevron-down-2-svg); - mask-image: var(--chevron-down-2-svg); -} - %with-chevron-down-icon { @extend %with-icon, %chevron-down-svg-prop; background-image: var(--chevron-down-svg); @@ -318,16 +268,6 @@ mask-image: var(--chevron-up-svg); } -%with-chevron-icon { - @extend %with-icon, %chevron-svg-prop; - background-image: var(--chevron-svg); -} -%with-chevron-mask { - @extend %with-mask, %chevron-svg-prop; - -webkit-mask-image: var(--chevron-svg); - mask-image: var(--chevron-svg); -} - %with-clock-fill-icon { @extend %with-icon, %clock-fill-svg-prop; background-image: var(--clock-fill-svg); @@ -368,14 +308,14 @@ mask-image: var(--code-svg); } -%with-consul-logo-color-icon { - @extend %with-icon, %consul-logo-color-svg-prop; - background-image: var(--consul-logo-color-svg); +%with-console-icon { + @extend %with-icon, %console-svg-prop; + background-image: var(--console-svg); } -%with-consul-logo-color-mask { - @extend %with-mask, %consul-logo-color-svg-prop; - -webkit-mask-image: var(--consul-logo-color-svg); - mask-image: var(--consul-logo-color-svg); +%with-console-mask { + @extend %with-mask, %console-svg-prop; + -webkit-mask-image: var(--console-svg); + mask-image: var(--console-svg); } %with-copy-action-icon { @@ -448,16 +388,6 @@ mask-image: var(--deny-default-svg); } -%with-deny-icon { - @extend %with-icon, %deny-svg-prop; - background-image: var(--deny-svg); -} -%with-deny-mask { - @extend %with-mask, %deny-svg-prop; - -webkit-mask-image: var(--deny-svg); - mask-image: var(--deny-svg); -} - %with-disabled-icon { @extend %with-icon, %disabled-svg-prop; background-image: var(--disabled-svg); @@ -498,16 +428,6 @@ mask-image: var(--edit-svg); } -%with-ember-circle-logo-color-icon { - @extend %with-icon, %ember-circle-logo-color-svg-prop; - background-image: var(--ember-circle-logo-color-svg); -} -%with-ember-circle-logo-color-mask { - @extend %with-mask, %ember-circle-logo-color-svg-prop; - -webkit-mask-image: var(--ember-circle-logo-color-svg); - mask-image: var(--ember-circle-logo-color-svg); -} - %with-envelope-sealed-fill-icon { @extend %with-icon, %envelope-sealed-fill-svg-prop; background-image: var(--envelope-sealed-fill-svg); @@ -628,16 +548,6 @@ mask-image: var(--folder-fill-svg); } -%with-folder-outline-color-icon { - @extend %with-icon, %folder-outline-color-svg-prop; - background-image: var(--folder-outline-color-svg); -} -%with-folder-outline-color-mask { - @extend %with-mask, %folder-outline-color-svg-prop; - -webkit-mask-image: var(--folder-outline-color-svg); - mask-image: var(--folder-outline-color-svg); -} - %with-folder-outline-icon { @extend %with-icon, %folder-outline-svg-prop; background-image: var(--folder-outline-svg); @@ -718,24 +628,14 @@ mask-image: var(--git-repository-svg); } -%with-glimmer-logo-color-icon { - @extend %with-icon, %glimmer-logo-color-svg-prop; - background-image: var(--glimmer-logo-color-svg); +%with-guide-icon { + @extend %with-icon, %guide-svg-prop; + background-image: var(--guide-svg); } -%with-glimmer-logo-color-mask { - @extend %with-mask, %glimmer-logo-color-svg-prop; - -webkit-mask-image: var(--glimmer-logo-color-svg); - mask-image: var(--glimmer-logo-color-svg); -} - -%with-hashicorp-logo-icon { - @extend %with-icon, %hashicorp-logo-svg-prop; - background-image: var(--hashicorp-logo-svg); -} -%with-hashicorp-logo-mask { - @extend %with-mask, %hashicorp-logo-svg-prop; - -webkit-mask-image: var(--hashicorp-logo-svg); - mask-image: var(--hashicorp-logo-svg); +%with-guide-mask { + @extend %with-mask, %guide-svg-prop; + -webkit-mask-image: var(--guide-svg); + mask-image: var(--guide-svg); } %with-health-icon { @@ -778,16 +678,6 @@ mask-image: var(--history-svg); } -%with-info-circle-fill-color-icon { - @extend %with-icon, %info-circle-fill-color-svg-prop; - background-image: var(--info-circle-fill-color-svg); -} -%with-info-circle-fill-color-mask { - @extend %with-mask, %info-circle-fill-color-svg-prop; - -webkit-mask-image: var(--info-circle-fill-color-svg); - mask-image: var(--info-circle-fill-color-svg); -} - %with-info-circle-fill-icon { @extend %with-icon, %info-circle-fill-svg-prop; background-image: var(--info-circle-fill-svg); @@ -808,16 +698,6 @@ mask-image: var(--info-circle-outline-svg); } -%with-jwt-logo-icon { - @extend %with-icon, %jwt-logo-svg-prop; - background-image: var(--jwt-logo-svg); -} -%with-jwt-logo-mask { - @extend %with-mask, %jwt-logo-svg-prop; - -webkit-mask-image: var(--jwt-logo-svg); - mask-image: var(--jwt-logo-svg); -} - %with-key-icon { @extend %with-icon, %key-svg-prop; background-image: var(--key-svg); @@ -828,16 +708,6 @@ mask-image: var(--key-svg); } -%with-kubernetes-logo-color-icon { - @extend %with-icon, %kubernetes-logo-color-svg-prop; - background-image: var(--kubernetes-logo-color-svg); -} -%with-kubernetes-logo-color-mask { - @extend %with-mask, %kubernetes-logo-color-svg-prop; - -webkit-mask-image: var(--kubernetes-logo-color-svg); - mask-image: var(--kubernetes-logo-color-svg); -} - %with-layers-icon { @extend %with-icon, %layers-svg-prop; background-image: var(--layers-svg); @@ -878,6 +748,26 @@ mask-image: var(--loading-svg); } +%with-lock-closed-fill-icon { + @extend %with-icon, %lock-closed-fill-svg-prop; + background-image: var(--lock-closed-fill-svg); +} +%with-lock-closed-fill-mask { + @extend %with-mask, %lock-closed-fill-svg-prop; + -webkit-mask-image: var(--lock-closed-fill-svg); + mask-image: var(--lock-closed-fill-svg); +} + +%with-lock-closed-outline-icon { + @extend %with-icon, %lock-closed-outline-svg-prop; + background-image: var(--lock-closed-outline-svg); +} +%with-lock-closed-outline-mask { + @extend %with-mask, %lock-closed-outline-svg-prop; + -webkit-mask-image: var(--lock-closed-outline-svg); + mask-image: var(--lock-closed-outline-svg); +} + %with-lock-closed-icon { @extend %with-icon, %lock-closed-svg-prop; background-image: var(--lock-closed-svg); @@ -968,6 +858,26 @@ mask-image: var(--logo-azure-color-svg); } +%with-logo-azure-dev-ops-color-icon { + @extend %with-icon, %logo-azure-dev-ops-color-svg-prop; + background-image: var(--logo-azure-dev-ops-color-svg); +} +%with-logo-azure-dev-ops-color-mask { + @extend %with-mask, %logo-azure-dev-ops-color-svg-prop; + -webkit-mask-image: var(--logo-azure-dev-ops-color-svg); + mask-image: var(--logo-azure-dev-ops-color-svg); +} + +%with-logo-azure-dev-ops-monochrome-icon { + @extend %with-icon, %logo-azure-dev-ops-monochrome-svg-prop; + background-image: var(--logo-azure-dev-ops-monochrome-svg); +} +%with-logo-azure-dev-ops-monochrome-mask { + @extend %with-mask, %logo-azure-dev-ops-monochrome-svg-prop; + -webkit-mask-image: var(--logo-azure-dev-ops-monochrome-svg); + mask-image: var(--logo-azure-dev-ops-monochrome-svg); +} + %with-logo-azure-monochrome-icon { @extend %with-icon, %logo-azure-monochrome-svg-prop; background-image: var(--logo-azure-monochrome-svg); @@ -1008,6 +918,16 @@ mask-image: var(--logo-consul-color-svg); } +%with-logo-ember-circle-color-icon { + @extend %with-icon, %logo-ember-circle-color-svg-prop; + background-image: var(--logo-ember-circle-color-svg); +} +%with-logo-ember-circle-color-mask { + @extend %with-mask, %logo-ember-circle-color-svg-prop; + -webkit-mask-image: var(--logo-ember-circle-color-svg); + mask-image: var(--logo-ember-circle-color-svg); +} + %with-logo-gcp-color-icon { @extend %with-icon, %logo-gcp-color-svg-prop; background-image: var(--logo-gcp-color-svg); @@ -1068,6 +988,16 @@ mask-image: var(--logo-gitlab-monochrome-svg); } +%with-logo-glimmer-color-icon { + @extend %with-icon, %logo-glimmer-color-svg-prop; + background-image: var(--logo-glimmer-color-svg); +} +%with-logo-glimmer-color-mask { + @extend %with-mask, %logo-glimmer-color-svg-prop; + -webkit-mask-image: var(--logo-glimmer-color-svg); + mask-image: var(--logo-glimmer-color-svg); +} + %with-logo-google-color-icon { @extend %with-icon, %logo-google-color-svg-prop; background-image: var(--logo-google-color-svg); @@ -1078,6 +1008,36 @@ mask-image: var(--logo-google-color-svg); } +%with-logo-google-monochrome-icon { + @extend %with-icon, %logo-google-monochrome-svg-prop; + background-image: var(--logo-google-monochrome-svg); +} +%with-logo-google-monochrome-mask { + @extend %with-mask, %logo-google-monochrome-svg-prop; + -webkit-mask-image: var(--logo-google-monochrome-svg); + mask-image: var(--logo-google-monochrome-svg); +} + +%with-logo-hashicorp-color-icon { + @extend %with-icon, %logo-hashicorp-color-svg-prop; + background-image: var(--logo-hashicorp-color-svg); +} +%with-logo-hashicorp-color-mask { + @extend %with-mask, %logo-hashicorp-color-svg-prop; + -webkit-mask-image: var(--logo-hashicorp-color-svg); + mask-image: var(--logo-hashicorp-color-svg); +} + +%with-logo-jwt-color-icon { + @extend %with-icon, %logo-jwt-color-svg-prop; + background-image: var(--logo-jwt-color-svg); +} +%with-logo-jwt-color-mask { + @extend %with-mask, %logo-jwt-color-svg-prop; + -webkit-mask-image: var(--logo-jwt-color-svg); + mask-image: var(--logo-jwt-color-svg); +} + %with-logo-kubernetes-color-icon { @extend %with-icon, %logo-kubernetes-color-svg-prop; background-image: var(--logo-kubernetes-color-svg); @@ -1118,6 +1078,16 @@ mask-image: var(--logo-nomad-color-svg); } +%with-logo-oidc-color-icon { + @extend %with-icon, %logo-oidc-color-svg-prop; + background-image: var(--logo-oidc-color-svg); +} +%with-logo-oidc-color-mask { + @extend %with-mask, %logo-oidc-color-svg-prop; + -webkit-mask-image: var(--logo-oidc-color-svg); + mask-image: var(--logo-oidc-color-svg); +} + %with-logo-okta-color-icon { @extend %with-icon, %logo-okta-color-svg-prop; background-image: var(--logo-okta-color-svg); @@ -1258,16 +1228,6 @@ mask-image: var(--minus-plain-svg); } -%with-minus-square-fill-color-icon { - @extend %with-icon, %minus-square-fill-color-svg-prop; - background-image: var(--minus-square-fill-color-svg); -} -%with-minus-square-fill-color-mask { - @extend %with-mask, %minus-square-fill-color-svg-prop; - -webkit-mask-image: var(--minus-square-fill-color-svg); - mask-image: var(--minus-square-fill-color-svg); -} - %with-minus-square-fill-icon { @extend %with-icon, %minus-square-fill-svg-prop; background-image: var(--minus-square-fill-svg); @@ -1278,16 +1238,6 @@ mask-image: var(--minus-square-fill-svg); } -%with-minus-icon { - @extend %with-icon, %minus-svg-prop; - background-image: var(--minus-svg); -} -%with-minus-mask { - @extend %with-mask, %minus-svg-prop; - -webkit-mask-image: var(--minus-svg); - mask-image: var(--minus-svg); -} - %with-module-icon { @extend %with-icon, %module-svg-prop; background-image: var(--module-svg); @@ -1318,16 +1268,6 @@ mask-image: var(--more-vertical-svg); } -%with-nomad-logo-color-icon { - @extend %with-icon, %nomad-logo-color-svg-prop; - background-image: var(--nomad-logo-color-svg); -} -%with-nomad-logo-color-mask { - @extend %with-mask, %nomad-logo-color-svg-prop; - -webkit-mask-image: var(--nomad-logo-color-svg); - mask-image: var(--nomad-logo-color-svg); -} - %with-notification-disabled-icon { @extend %with-icon, %notification-disabled-svg-prop; background-image: var(--notification-disabled-svg); @@ -1358,16 +1298,6 @@ mask-image: var(--notification-outline-svg); } -%with-oidc-logo-icon { - @extend %with-icon, %oidc-logo-svg-prop; - background-image: var(--oidc-logo-svg); -} -%with-oidc-logo-mask { - @extend %with-mask, %oidc-logo-svg-prop; - -webkit-mask-image: var(--oidc-logo-svg); - mask-image: var(--oidc-logo-svg); -} - %with-outline-icon { @extend %with-icon, %outline-svg-prop; background-image: var(--outline-svg); @@ -1408,6 +1338,36 @@ mask-image: var(--path-svg); } +%with-play-fill-icon { + @extend %with-icon, %play-fill-svg-prop; + background-image: var(--play-fill-svg); +} +%with-play-fill-mask { + @extend %with-mask, %play-fill-svg-prop; + -webkit-mask-image: var(--play-fill-svg); + mask-image: var(--play-fill-svg); +} + +%with-play-outline-icon { + @extend %with-icon, %play-outline-svg-prop; + background-image: var(--play-outline-svg); +} +%with-play-outline-mask { + @extend %with-mask, %play-outline-svg-prop; + -webkit-mask-image: var(--play-outline-svg); + mask-image: var(--play-outline-svg); +} + +%with-play-plain-icon { + @extend %with-icon, %play-plain-svg-prop; + background-image: var(--play-plain-svg); +} +%with-play-plain-mask { + @extend %with-mask, %play-plain-svg-prop; + -webkit-mask-image: var(--play-plain-svg); + mask-image: var(--play-plain-svg); +} + %with-plus-circle-fill-icon { @extend %with-icon, %plus-circle-fill-svg-prop; background-image: var(--plus-circle-fill-svg); @@ -1618,16 +1578,6 @@ mask-image: var(--search-svg); } -%with-service-identity-icon { - @extend %with-icon, %service-identity-svg-prop; - background-image: var(--service-identity-svg); -} -%with-service-identity-mask { - @extend %with-mask, %service-identity-svg-prop; - -webkit-mask-image: var(--service-identity-svg); - mask-image: var(--service-identity-svg); -} - %with-settings-icon { @extend %with-icon, %settings-svg-prop; background-image: var(--settings-svg); @@ -1678,16 +1628,6 @@ mask-image: var(--star-outline-svg); } -%with-star-icon { - @extend %with-icon, %star-svg-prop; - background-image: var(--star-svg); -} -%with-star-mask { - @extend %with-mask, %star-svg-prop; - -webkit-mask-image: var(--star-svg); - mask-image: var(--star-svg); -} - %with-sub-left-icon { @extend %with-icon, %sub-left-svg-prop; background-image: var(--sub-left-svg); @@ -1748,16 +1688,6 @@ mask-image: var(--tag-svg); } -%with-terraform-logo-color-icon { - @extend %with-icon, %terraform-logo-color-svg-prop; - background-image: var(--terraform-logo-color-svg); -} -%with-terraform-logo-color-mask { - @extend %with-mask, %terraform-logo-color-svg-prop; - -webkit-mask-image: var(--terraform-logo-color-svg); - mask-image: var(--terraform-logo-color-svg); -} - %with-trash-icon { @extend %with-icon, %trash-svg-prop; background-image: var(--trash-svg); @@ -1897,9 +1827,3 @@ -webkit-mask-image: var(--webhook-svg); mask-image: var(--webhook-svg); } - -%without-mask { - -webkit-mask-image: none; - mask-image: none; - background-color: var(--transparent) !important; -} diff --git a/ui/packages/consul-ui/app/styles/base/icons/index.scss b/ui/packages/consul-ui/app/styles/base/icons/index.scss index 17b18ac3c6..02429af2ee 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/index.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/index.scss @@ -1,3 +1,4 @@ @import './base-variables'; @import './base-placeholders'; @import './icon-placeholders'; +@import './overrides'; diff --git a/ui/packages/consul-ui/app/styles/base/icons/overrides.scss b/ui/packages/consul-ui/app/styles/base/icons/overrides.scss new file mode 100644 index 0000000000..9047bbfd73 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/icons/overrides.scss @@ -0,0 +1,5 @@ +%without-mask { + -webkit-mask-image: none; + mask-image: none; + background-color: $transparent !important; +} diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index a65e972d03..be4a6caa75 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -12,6 +12,7 @@ @import 'consul-ui/components/sliding-toggle/index'; @import 'consul-ui/components/table/index'; @import 'consul-ui/components/toggle-button/index'; +@import 'consul-ui/components/flash-message'; /**/ @@ -28,7 +29,6 @@ @import './components/secret-button'; @import './components/pill'; @import './components/table'; -@import './components/flash-message'; @import './components/code-editor'; @import './components/confirmation-dialog'; @import './components/auth-form'; diff --git a/ui/packages/consul-ui/app/styles/components/flash-message/index.scss b/ui/packages/consul-ui/app/styles/components/flash-message/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui/packages/consul-ui/app/styles/components/flash-message/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui/packages/consul-ui/app/styles/components/pill.scss b/ui/packages/consul-ui/app/styles/components/pill.scss index 20c6988b7d..b779640c5c 100644 --- a/ui/packages/consul-ui/app/styles/components/pill.scss +++ b/ui/packages/consul-ui/app/styles/components/pill.scss @@ -19,16 +19,16 @@ span.policy-service-identity::before { content: 'Service Identity: '; } %pill.kubernetes::before { - @extend %with-kubernetes-logo-color-icon, %as-pseudo; + @extend %with-logo-kubernetes-color-icon, %as-pseudo; } %pill.terraform::before { - @extend %with-terraform-logo-color-icon, %as-pseudo; + @extend %with-logo-terraform-color-icon, %as-pseudo; } %pill.nomad::before { - @extend %with-nomad-logo-color-icon, %as-pseudo; + @extend %with-logo-nomad-color-icon, %as-pseudo; } %pill.consul::before { - @extend %with-consul-logo-color-icon, %as-pseudo; + @extend %with-logo-consul-color-icon, %as-pseudo; } %pill.aws::before { @extend %with-logo-aws-color-icon, %as-pseudo; @@ -37,8 +37,8 @@ span.policy-service-identity::before { @extend %with-star-outline-mask, %as-pseudo; } %pill.jwt::before { - @extend %with-jwt-logo-icon, %as-pseudo; + @extend %with-logo-jwt-color-icon, %as-pseudo; } %pill.oidc::before { - @extend %with-oidc-logo-icon, %as-pseudo; + @extend %with-logo-oidc-color-icon, %as-pseudo; } diff --git a/ui/packages/consul-ui/app/styles/components/popover-select.scss b/ui/packages/consul-ui/app/styles/components/popover-select.scss index 6f7653da83..a7212c2aef 100644 --- a/ui/packages/consul-ui/app/styles/components/popover-select.scss +++ b/ui/packages/consul-ui/app/styles/components/popover-select.scss @@ -50,10 +50,10 @@ @extend %with-logo-kubernetes-color-icon, %as-pseudo; } %popover-select .jwt button::before { - @extend %with-jwt-logo-icon, %as-pseudo; + @extend %with-logo-jwt-color-icon, %as-pseudo; } %popover-select .oidc button::before { - @extend %with-oidc-logo-icon, %as-pseudo; + @extend %with-logo-oidc-color-icon, %as-pseudo; } %popover-select .consul button::before { @extend %with-logo-consul-color-icon, %as-pseudo; diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index 2b59748f33..457bdd211c 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/ui/packages/consul-ui/app/styles/debug.scss @@ -7,6 +7,7 @@ @import 'consul-ui/components/csv-list/debug'; @import 'consul-ui/components/horizontal-kv-list/debug'; @import 'consul-ui/components/icon-definition/debug'; +@import 'consul-ui/components/inline-alert/debug'; html.is-debug body > .brand-loader { display: none !important; @@ -28,16 +29,16 @@ html.is-debug body > .brand-loader { } li.consul-components a::before, li.components a::before { - @extend %with-glimmer-logo-color-icon, %as-pseudo; + @extend %with-logo-glimmer-color-icon, %as-pseudo; margin-right: 5px; } li.consul-components.css-component a::before, li.components.css-component a::before { - @extend %with-glimmer-logo-color-icon, %as-pseudo; + @extend %with-logo-glimmer-color-icon, %as-pseudo; } li.consul-components.ember-component a::before, li.components.ember-component a::before { - @extend %with-ember-circle-logo-color-icon, %as-pseudo; + @extend %with-logo-ember-circle-color-icon, %as-pseudo; } } main {