diff --git a/ui/packages/consul-ui/app/components/badge/README.mdx b/ui/packages/consul-ui/app/components/badge/README.mdx new file mode 100644 index 0000000000..600923f0d0 --- /dev/null +++ b/ui/packages/consul-ui/app/components/badge/README.mdx @@ -0,0 +1,76 @@ +--- +class: css +--- +# badge + +`%badge` is a slightly rounded pill (also `%badge-with-icon` for badges that need icons), made to easily fit inside a `%horizontal-kv-list` along with other key/values, or on its own as a single badge. Colors default to grays, but can be overridden via selectors. + +```hbs preview-template +
+
Can be used as part of a horizontal-kv-list
+ +
+
Kind
+
+ Terminating Gateway +
+
+ Service Identity +
+
service-0
+
Something
+
else, here
+
+ +
+
+
...or as a single `dl` element on its own
+ +
+
Kind
+
+ Terminating Gateway +
+
+
+ Service Identity +
+
service-0
+
+
+``` + + +```css +/* part of a kv list */ +dl { + @extend %horizontal-kv-list; +} +dt.service-identity { + @extend %badge; +} +dt.kind-terminating-gateway { + @extend %badge, %badge-with-icon; +} +dt.kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; +} +/* element on its own */ +dl.service-identity, +dl.kind-terminating-gateway { + @extend %horizontal-kv-list; +} +dl.service-identity dt { + @extend %badge; +} +dl.kind-terminating-gateway dt { + @extend %badge, %badge-with-icon; +} +dl.kind-terminating-gateway dt::before { + @extend %with-gateway-mask, %as-pseudo; +} +``` diff --git a/ui/packages/consul-ui/app/components/badge/debug.scss b/ui/packages/consul-ui/app/components/badge/debug.scss new file mode 100644 index 0000000000..79931b1746 --- /dev/null +++ b/ui/packages/consul-ui/app/components/badge/debug.scss @@ -0,0 +1,29 @@ +#docfy-demo-preview-badge { + /* part of a kv list */ + dl { + @extend %horizontal-kv-list; + } + dt.service-identity { + @extend %badge; + } + dt.kind-terminating-gateway { + @extend %badge, %badge-with-icon; + } + dt.kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; + } + /* element on its own */ + dl.service-identity, + dl.kind-terminating-gateway { + @extend %horizontal-kv-list; + } + dl.service-identity dt { + @extend %badge; + } + dl.kind-terminating-gateway dt { + @extend %badge, %badge-with-icon; + } + dl.kind-terminating-gateway dt::before { + @extend %with-gateway-mask, %as-pseudo; + } +} diff --git a/ui/packages/consul-ui/app/components/badge/index.scss b/ui/packages/consul-ui/app/components/badge/index.scss new file mode 100644 index 0000000000..87b71f2f8d --- /dev/null +++ b/ui/packages/consul-ui/app/components/badge/index.scss @@ -0,0 +1,76 @@ +%badge { + @extend %horizontal-kv-list; + padding-left: 8px; + padding-right: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +%badge, +%badge + dd { + @extend %pill; + background-color: var(--gray-100); + color: var(--gray-500); +} +%badge::after, +%badge-reversed::after, +%badge-reversed::before { + display: inline; +} +%badge::after { + content: var(--horizontal-kv-list-key-separator); +} +%badge-reversed::after { + content: var(--horizontal-kv-list-key-wrapper-end); +} +%badge-reversed::before { + content: var(--horizontal-kv-list-key-wrapper-start); + margin-right: 0; + font-size: inherit; +} +%badge-radius-reset + dd { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +%badge + dd { + padding-right: 8px; + margin-left: 0 !important; +} +%badge-reversed { + margin-left: 0; + padding-left: 0; +} +%badge-reversed + dd { + padding-left: 8px; + margin-left: 0 !important; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +%badge-with-icon::after { + display: none; +} +%badge-with-icon { + position: absolute; + max-width: 0; + padding-left: 28px; +} +%badge-with-icon::before { + position: absolute; + left: 8px; +} +%badge-with-icon-reversed::before { + left: 0px; + font-size: 0.8em; +} +%badge-with-icon + dd { + margin-left: 24px !important; +} +%badge-with-icon-reversed { + @extend %horizontal-kv-list-reversed, %badge-reversed; + flex-direction: row; + padding-left: 22px; + padding-right: 0 !important; + z-index: 1; +} +%badge-with-icon-reversed + dd { + margin-right: 18px; +} diff --git a/ui/packages/consul-ui/app/components/buttons/layout.scss b/ui/packages/consul-ui/app/components/buttons/layout.scss index fcfdeb769e..baea95be22 100644 --- a/ui/packages/consul-ui/app/components/buttons/layout.scss +++ b/ui/packages/consul-ui/app/components/buttons/layout.scss @@ -35,9 +35,25 @@ padding-bottom: calc(0.4em - 1px) !important; } %copy-button:empty { - padding: 5px !important; + padding: 0px !important; margin-right: 0; - margin-top: -5px; + top: -1px; +} +%copy-button:empty::after { + content: ''; + display: none; + position: absolute; + top: -2px; + left: -3px; + width: 20px; + height: 22px; +} +%copy-button:empty:hover::after { + display: block; +} +%copy-button:empty::before { + position: relative; + z-index: 1; } %copy-button:not(:empty)::before { margin-right: 4px; diff --git a/ui/packages/consul-ui/app/components/buttons/skin.scss b/ui/packages/consul-ui/app/components/buttons/skin.scss index f3cf0309b9..cf554e372c 100644 --- a/ui/packages/consul-ui/app/components/buttons/skin.scss +++ b/ui/packages/consul-ui/app/components/buttons/skin.scss @@ -17,7 +17,10 @@ } %copy-button::before { @extend %with-copy-action-mask, %as-pseudo; - background-color: $gray-500; + background-color: var(--gray-500); +} +%copy-button::after { + background-color: var(--gray-050); } %copy-button:not(:empty)::before { margin-right: 10px; diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss index 96e16cad09..b617091657 100644 --- a/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss +++ b/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss @@ -65,7 +65,7 @@ %healthcheck-output .copy-button { position: absolute; right: 0.5em; - top: 1em; + top: .7em; } @media #{$--lt-spacious-healthcheck-output} { %healthcheck-output { diff --git a/ui/packages/consul-ui/app/components/csv-list/README.mdx b/ui/packages/consul-ui/app/components/csv-list/README.mdx new file mode 100644 index 0000000000..8ac0730617 --- /dev/null +++ b/ui/packages/consul-ui/app/components/csv-list/README.mdx @@ -0,0 +1,54 @@ +--- +class: css +--- +# csv-list + +Easily create comma separated lists via CSS. Also contains a `%csv` if you don't want to use the `%csv-list`s display and only apply the commas to specific DOM elements. + +```hbs preview-template +

+ one + two + three + four + five + six +

+ + + +
    +
  1. one
    2. +
  2. two
    3. +
  3. three
    4. +
  4. four
    5. +
  5. five
    6. +
  6. six
    7. +
+``` + + +```css + p, ul { + @extend %csv-list; + } + ol li { + @extend %csv; + } + ol { + list-style-type: none; + } +``` + +## Properties + +| Property | Type | Default | Description | +| --- | --- | --- | --- | +| `--csv-list-separator` | `string` | `,` | The separator to use between the list items. | diff --git a/ui/packages/consul-ui/app/components/csv-list/debug.scss b/ui/packages/consul-ui/app/components/csv-list/debug.scss new file mode 100644 index 0000000000..eea7038e19 --- /dev/null +++ b/ui/packages/consul-ui/app/components/csv-list/debug.scss @@ -0,0 +1,12 @@ +[id^=docfy-demo-preview-csv-list] { + p, ul { + @extend %csv-list; + } + ol li { + @extend %csv; + } + ol { + list-style-type: none; + } +} + diff --git a/ui/packages/consul-ui/app/components/csv-list/index.scss b/ui/packages/consul-ui/app/components/csv-list/index.scss new file mode 100644 index 0000000000..504b252899 --- /dev/null +++ b/ui/packages/consul-ui/app/components/csv-list/index.scss @@ -0,0 +1,16 @@ +:root { + --csv-list-separator: ','; +} +%csv-list { + // mainly used for block elements, you may need to overwrite this with an + // inline-flex to keep any inline-ness + display: flex; +} +%csv-list > * { + @extend %csv; +} +%csv:not(:last-child)::after { + display: inline; + content: var(--csv-list-separator); + margin-right: 0.3em; +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx new file mode 100644 index 0000000000..f39a689d9b --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx @@ -0,0 +1,238 @@ +--- +class: css +--- +# horizontal-kv-list + +Provides a horizontally stacked list of key/value pairs, commonly used with a +definition/description list. + +The keys can be configured to be either, visible, invisible, or with an icon. + +- **Icon Configuration:** Add a `class` that describes the key/value pair and configure the icon for that class in the CSS +- **Visible Title Configuration:** Add an empty `class` attribute. A trailing `:` + will be added to the title (ensure you collapse the whitespace in the `dt`). +- **Invisible Title Configuration:** Don't add a `class` attribute at all, i.e. by default + the title is not shown. + +If you are providing an icon, you should also use the `{{tooltip}}` modifier +to provide a textual tooltip for the icon. Using the `{{tooltip}}` modifier +with no arguments will make it use the text/DOM content of the DOM element it +is attached to, see below for a full usage example. + +`` components are commonly added to the value, and can be added +to the left or right of the value. + +```hbs preview-template +
+
+ All KVs can be specified in a single list +
+ +
+
Kind
+
+ Terminating Gateway +
+{{#if true}} +
+ Lock Delay +
+
10ms
+{{/if}} +
+ TTL +
+
+ + 1m30s10ms +
+
+ Invisible title +
+
+ local +
+
Visible title
+
+ global +
+
+ +
+
+
+
...or they can all be specified as individual lists (for if you have a component that is already wrapped in a dl, such as our TagList)
+ +
+
+ Service Identity +
+
service-0
+
+
+ Lock Delay +
+
10ms
+
+
+ TTL +
+
+ 1m30s10ms + +
+
+
+ No visible title +
+
local
+
+
Visible title
+
global
+
+ +
+
+
+
When reversing, you'll probably want to use indiviudual dl's so as to not reverse the order of the KV pairs
+
+
Kind
+
+ Terminating Gateway +
+
+
+
+ Service Identity +
+
service-0
+
+
+
+ Lock Delay +
+
10ms
+
+
+ TTL +
+
+ + 1m30s10ms +
+
+
+ No visible title +
+
local
+
+
Visible title
+
global
+
+ +
+``` +When conditionally listing key/values within a single `dl`, be aware that if no key/values should be shown, then you will be left with an empty `dl`. If you collapse the whitespace using handlebars whitespace collapsing `~`, then this empty `dl` will be removed from the flow via CSS. Alternatively consider using multiple `dl`s which can be wrapped with conditionals individually and therefore leave no empty DOM. + +When using as individual `dl` lists be aware of whitespace between `dl`s. There are various ways you can counter this: + +1. remove the whitespace `
`. +2. Wrap the whitespace in comments `
` +3. Use handlebars whitespace removal `~` as above. +4. Put a `display: inline-flex` on the parent element (this can affect other layout). + +Depending on your exact usecase one of the above options may be more suited than others. + +```hbs preview-template +
+
+ Conditionally showing multiple key/values sometimes means that you insert an empty `dl` into the DOM +
+ +
+ {{~#if false}} +
Something that might not be set
+
No value!
+ {{/if~}} + {{~#if false}} +
Something that might not be set
+
No value!
+ {{/if~}} +
+
+``` + + +```css +dl { + @extend %horizontal-kv-list; +} +.lock-delay::before { + @extend %with-delay-mask, %as-pseudo; + color: var(--gray-700); +} +.ttl::before { + @extend %with-history-mask, %as-pseudo; + color: var(--blue-500); +} +.service-identity { + @extend %badge; +} +.kind-terminating-gateway { + @extend %badge, %badge-with-icon; +} +.kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; +} +.reversed > dl { + @extend %horizontal-kv-list-reversed; +} +.reversed .service-identity { + @extend %badge-reversed; +} +.reversed .kind-terminating-gateway { + @extend %badge-with-icon-reversed; +} +``` + +## Properties + +| Property | Type | Default | Description | +| --- | --- | --- | --- | +| `--horizontal-kv-list-separator-width` | `length-percentage` | `18px` | The width of the whitespace between two sets of key/value pairs | +| `--horizontal-kv-list-key-separator` | `string` | `:` | Separator used for between `Key: Value` for textual key/values | +| `--horizontal-kv-list-key-wrapper-start` | `string` | `(` | Starting wrapper used for wrapping `Value (Key)` for reversed textual key/values | +| `--horizontal-kv-list-key-wrapper-end` | `string` | `)` | Ending wrapper used for wrapping `Value (Key)` for reversed textual key/values | diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss new file mode 100644 index 0000000000..f8c365dcee --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss @@ -0,0 +1,31 @@ +[id^=docfy-demo-preview-horizontal-kv-list] { + dl { + @extend %horizontal-kv-list; + } + .lock-delay::before { + @extend %with-delay-mask, %as-pseudo; + color: var(--gray-700); + } + .ttl::before { + @extend %with-history-mask, %as-pseudo; + color: var(--blue-500); + } + .service-identity { + @extend %badge; + } + .kind-terminating-gateway { + @extend %badge, %badge-with-icon; + } + .kind-terminating-gateway::before { + @extend %with-gateway-mask, %as-pseudo; + } + .reversed > dl { + @extend %horizontal-kv-list-reversed; + } + .reversed .service-identity { + @extend %badge-reversed; + } + .reversed .kind-terminating-gateway { + @extend %badge-with-icon-reversed; + } +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss new file mode 100644 index 0000000000..338ff82c5b --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/index.scss @@ -0,0 +1,23 @@ +@import './skin'; +@import './layout'; + +:root { + --horizontal-kv-list-separator-width: 18px; + --horizontal-kv-list-key-separator: ':'; + --horizontal-kv-list-key-wrapper-start: '('; + --horizontal-kv-list-key-wrapper-end: ')'; +} +%horizontal-kv-list:not([class]) dt:not([class]) { + @extend %horizontal-kv-list-hidden-title; +} +%horizontal-kv-list[class] dt, +%horizontal-kv-list dt[class] { + @extend %horizontal-kv-list-visible-title; +} +%horizontal-kv-list-hidden-title { + @extend %visually-hidden; +} +%horizontal-kv-list-visible-title { + @extend %unvisually-hidden; + overflow: hidden; +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss new file mode 100644 index 0000000000..fab1160e97 --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/layout.scss @@ -0,0 +1,44 @@ +%horizontal-kv-list { + display: inline-flex; + flex-wrap: nowrap; +} +%horizontal-kv-list-reversed { + flex-direction: row-reverse; +} +%horizontal-kv-list:empty { + display: none; +} +%horizontal-kv-list > * > * { + display: inline-block; +} +%horizontal-kv-list > * { + // align-self: center; + white-space: nowrap; +} +%horizontal-kv-list > dd { + flex-wrap: wrap; +} +%horizontal-kv-list-visible-title { + min-width: 18px; +} +%horizontal-kv-list-reversed:not(:first-of-type), +%horizontal-kv-list dd + dt, +%horizontal-kv-list dd + %horizontal-kv-list-hidden-title + dd { + margin-left: var(--horizontal-kv-list-separator-width); +} +/* this quite possibly should be dealt with by the parent/container not this */ +/* component. It adds the same whitespace separation between multiple kv-lists */ +/* in this case, as we can make lists with dls, or dt/dd combos, multiple dls */ +/* are seens as one component and therefore this is spacing not positioning */ +%horizontal-kv-list + %horizontal-kv-list:not(:first-of-type) { + margin-left: var(--horizontal-kv-list-separator-width); +} +/**/ +%horizontal-kv-list-reversed dt, +%horizontal-kv-list-visible-title + dd { + margin-left: 4px; +} + +%horizontal-kv-list-reversed dt + dd { + margin-left: 0; +} diff --git a/ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss b/ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss new file mode 100644 index 0000000000..9cbf85d80d --- /dev/null +++ b/ui/packages/consul-ui/app/components/horizontal-kv-list/skin.scss @@ -0,0 +1,13 @@ +%horizontal-kv-list dt[class=""]::after, +%horizontal-kv-list dt[class=""]::after { + display: inline; +} +%horizontal-kv-list dt[class=""]::after { + content: var(--horizontal-kv-list-key-separator); +} +%horizontal-kv-list-reversed dt[class=""]::after { + content: var(--horizontal-kv-list-key-wrapper-end); +} +%horizontal-kv-list-reversed dt[class=""]::before { + content: var(--horizontal-kv-list-key-wrapper-start); +} diff --git a/ui/packages/consul-ui/app/components/icon-definition/README.mdx b/ui/packages/consul-ui/app/components/icon-definition/README.mdx new file mode 100644 index 0000000000..0373316819 --- /dev/null +++ b/ui/packages/consul-ui/app/components/icon-definition/README.mdx @@ -0,0 +1,34 @@ +--- +class: css +--- +# icon-definition + +This CSS component is deprecated, please use `%horizontal-kv-list` instead (which this component uses) + +```hbs preview-template +
+
+ Lock Delay +
+
10ms
+
+
+
+ Scope +
+
local
+
+``` + +```css +dl { + @extend %icon-definition; +} +.lock-delay dt::before { + @extend %with-delay-mask, %as-pseudo; +} +``` diff --git a/ui/packages/consul-ui/app/components/icon-definition/debug.scss b/ui/packages/consul-ui/app/components/icon-definition/debug.scss new file mode 100644 index 0000000000..4c3c4fb12c --- /dev/null +++ b/ui/packages/consul-ui/app/components/icon-definition/debug.scss @@ -0,0 +1,8 @@ +#docfy-demo-preview-icon-definition { + dl { + @extend %icon-definition; + } + .lock-delay dt::before { + @extend %with-delay-mask, %as-pseudo; + } +} diff --git a/ui/packages/consul-ui/app/styles/components/icon-definition.scss b/ui/packages/consul-ui/app/components/icon-definition/index.scss similarity index 94% rename from ui/packages/consul-ui/app/styles/components/icon-definition.scss rename to ui/packages/consul-ui/app/components/icon-definition/index.scss index 0afcdb2941..16c34ebbea 100644 --- a/ui/packages/consul-ui/app/styles/components/icon-definition.scss +++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss @@ -1,4 +1,9 @@ -@import './icon-definition/index'; +%icon-definition { + @extend %horizontal-kv-list; +} +%icon-definition > dt > * { + display: none; +} %icon-definition.passing dt::before, %composite-row-header .passing dd::before { diff --git a/ui/packages/consul-ui/app/components/tag-list/README.mdx b/ui/packages/consul-ui/app/components/tag-list/README.mdx index 1421cef7fa..1dcd327f45 100644 --- a/ui/packages/consul-ui/app/components/tag-list/README.mdx +++ b/ui/packages/consul-ui/app/components/tag-list/README.mdx @@ -4,6 +4,8 @@ Template only component for rendering a list of tags. You can pass either/or/and Tags are de-duplicated when rendered. +Uses `%horizontal-kv-list` for positioning/icon and `%csv-list` for tag separating + ```hbs preview-template
- This list has no tags therefore the tags _and_ red border div will **not** be rendered. + This list has no tags therefore the tags _and_ red border div will not be rendered.
* { - align-self: center; -} -%icon-definition > dd { - white-space: nowrap; - margin-left: 4px; -} -%icon-definition > dt > * { - display: none; -} diff --git a/ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss b/ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss deleted file mode 100644 index e449ba8713..0000000000 --- a/ui/packages/consul-ui/app/styles/components/icon-definition/skin.scss +++ /dev/null @@ -1,2 +0,0 @@ -%icon-definition { -} diff --git a/ui/packages/consul-ui/app/styles/components/list-row/layout.scss b/ui/packages/consul-ui/app/styles/components/list-row/layout.scss index e3b59be6fc..8440596fa9 100644 --- a/ui/packages/consul-ui/app/styles/components/list-row/layout.scss +++ b/ui/packages/consul-ui/app/styles/components/list-row/layout.scss @@ -26,7 +26,6 @@ flex-wrap: nowrap; } -%list-row-detail dl, %list-row-detail > span { margin-right: 18px; } diff --git a/ui/packages/consul-ui/app/styles/components/tag-list.scss b/ui/packages/consul-ui/app/styles/components/tag-list.scss deleted file mode 100644 index 6bc2ea8e70..0000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import './tag-list/index'; -.tag-list, -td.tags { - @extend %tag-list; -} diff --git a/ui/packages/consul-ui/app/styles/components/tag-list/index.scss b/ui/packages/consul-ui/app/styles/components/tag-list/index.scss deleted file mode 100644 index bc18252196..0000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './skin'; -@import './layout'; diff --git a/ui/packages/consul-ui/app/styles/components/tag-list/layout.scss b/ui/packages/consul-ui/app/styles/components/tag-list/layout.scss deleted file mode 100644 index d1c866afdb..0000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list/layout.scss +++ /dev/null @@ -1,24 +0,0 @@ -%tag-list { - white-space: nowrap; - display: inline-flex; -} -// TODO: Currently this is here to overwrite -// the default definition list layout used in edit pages -// ideally we'd be more specific with those to say -// only add padding to dl's in edit pages -%tag-list dt::before { - @extend %with-tag-mask, %as-pseudo; - margin-right: 4px; - margin-top: 3px; - background-color: $gray-500; -} -%tag-list dd { - display: inline-flex; - flex-wrap: wrap; - padding-left: 0px; -} -%tag-list dd > *:not(:last-child)::after { - content: ','; - margin-right: 0.3em; - display: inline; -} diff --git a/ui/packages/consul-ui/app/styles/components/tag-list/skin.scss b/ui/packages/consul-ui/app/styles/components/tag-list/skin.scss deleted file mode 100644 index ef5a8f9ea1..0000000000 --- a/ui/packages/consul-ui/app/styles/components/tag-list/skin.scss +++ /dev/null @@ -1,3 +0,0 @@ -%tag-list::before { - background-color: $gray-500; -} diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index be65420160..2b59748f33 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/ui/packages/consul-ui/app/styles/debug.scss @@ -3,6 +3,10 @@ // temporary component debugging setup @import 'consul-ui/components/main-nav-vertical/debug'; +@import 'consul-ui/components/badge/debug'; +@import 'consul-ui/components/csv-list/debug'; +@import 'consul-ui/components/horizontal-kv-list/debug'; +@import 'consul-ui/components/icon-definition/debug'; html.is-debug body > .brand-loader { display: none !important; @@ -27,6 +31,10 @@ html.is-debug body > .brand-loader { @extend %with-glimmer-logo-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; + } li.consul-components.ember-component a::before, li.components.ember-component a::before { @extend %with-ember-circle-logo-color-icon, %as-pseudo; @@ -78,6 +86,10 @@ html.is-debug body > .brand-loader { > table tr:hover { box-shadow: none; } + > ol code, + > ul code { + @extend %inline-code; + } } .docfy-demo { & { diff --git a/ui/packages/consul-ui/app/templates/debug.hbs b/ui/packages/consul-ui/app/templates/debug.hbs index 0e3b2f4461..89bb4d3ee7 100644 --- a/ui/packages/consul-ui/app/templates/debug.hbs +++ b/ui/packages/consul-ui/app/templates/debug.hbs @@ -24,6 +24,7 @@ class={{concat (slugify section.label) ' ' (if (eq child.frontmatter.class 'ember') 'ember-component') ' ' + (if (eq child.frontmatter.class 'css') 'css-component') ' ' (if (is-href (to-route child.url)) 'is-active') }} >