status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: Fixup definition-table + copy-button margin (#10512)

This commit is contained in:
John Cowen 2021-07-06 16:57:20 +01:00 committed by hc-github-team-consul-core
parent c8bba8bd60
commit db4ba43398
4 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/packages/consul-ui/app/components/definition-table/README.mdx Normal file
View File

@ -0,0 +1,25 @@
---
class: css
---
# definition-table
Simple CSS component to render a `dl` similar to a table with column headers.
Contents of the `dd` are currently inline-block'ed for CopyButton reasons.
```hbs preview-template
<div class="definition-table">
<dl>
<dt>Title 1</dt>
<dd>Value</dd>
<dt>Title 2</dt>
<dd><CopyButton @name="Title 2" @value="Value"/>Value</dd>
</dl>
</div>
```
```css
.definition-table {
@extend %definition-table;
}
```

5
ui/packages/consul-ui/app/components/definition-table/debug.scss Normal file
View File

@ -0,0 +1,5 @@
[id^='docfy-demo-preview-definition-table'] {
.definition-table {
@extend %definition-table;
}
}

4
ui/packages/consul-ui/app/components/definition-table/layout.scss
View File

@ -3,6 +3,6 @@
grid-template-columns: 140px auto;
grid-gap: 0.4em 20px;
}
%definition-table .copy-button {
float: left;
%definition-table dd > * {
display: inline-block;
}

1
ui/packages/consul-ui/app/styles/debug.scss
View File

@ -8,6 +8,7 @@
@import 'consul-ui/components/horizontal-kv-list/debug';
@import 'consul-ui/components/icon-definition/debug';
@import 'consul-ui/components/inline-alert/debug';
@import 'consul-ui/components/definition-table/debug';
html.is-debug body > .brand-loader {
display: none !important;