mirror of https://github.com/hashicorp/consul
Browse Source
This commit uses docfy to isolate the individual parts and options and investigates the why you might use certain options and document how you might use certain options. Originally we used a single %icon-definition CSS component to represent this, but seeing as some of them don't have icons, it didn't seem like the best name. So this PR splits this component into various different ones and then uses the new ones to continue to provide a now deprecated %icon-definition. The component is currently a CSS only component that assumes a single (or multiple) description lists for its markup component, and provides for multiple different options (including a reversed mode which I'm still not totally sure about, but we don't use this right now anyway). - %icon-definition - %horizontal-kv-list - %csv-list - %tag-list - %badgepull/10428/head
John Cowen
3 years ago
committed by
GitHub
32 changed files with 730 additions and 66 deletions
@ -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 |
||||
<figure> |
||||
<figcaption>Can be used as part of a horizontal-kv-list</figcaption> |
||||
|
||||
<dl> |
||||
<dt class="kind-terminating-gateway">Kind</dt> |
||||
<dd> |
||||
Terminating Gateway |
||||
</dd> |
||||
<dt class="service-identity"> |
||||
Service Identity |
||||
</dt> |
||||
<dd>service-0</dd> |
||||
<dt class>Something</dt> |
||||
<dd>else, here</dd> |
||||
</dl> |
||||
|
||||
</figure> |
||||
<figure> |
||||
<figcaption>...or as a single `dl` element on its own</figcaption> |
||||
|
||||
<dl class="kind-terminating-gateway"> |
||||
<dt>Kind</dt> |
||||
<dd> |
||||
Terminating Gateway |
||||
</dd> |
||||
</dl><!-- |
||||
Collapse the whitespace whilst maintaining indentation |
||||
--><dl> |
||||
<dt |
||||
class="service-identity" |
||||
> |
||||
Service Identity |
||||
</dt> |
||||
<dd>service-0</dd> |
||||
</dl> |
||||
</figure> |
||||
``` |
||||
|
||||
|
||||
```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; |
||||
} |
||||
``` |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
@ -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 |
||||
<p> |
||||
<span>one</span> |
||||
<span>two</span> |
||||
<span>three</span> |
||||
<span>four</span> |
||||
<span>five</span> |
||||
<span>six</span> |
||||
</p> |
||||
|
||||
<ul> |
||||
<li>one</li> |
||||
<li>two</li> |
||||
<li>three</li> |
||||
<li>four</li> |
||||
<li>five</li> |
||||
<li>six</li> |
||||
</ul> |
||||
|
||||
<ol> |
||||
<li>one</li> |
||||
<li>two</li> |
||||
<li>three</li> |
||||
<li>four</li> |
||||
<li>five</li> |
||||
<li>six</li> |
||||
</ol> |
||||
``` |
||||
|
||||
|
||||
```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. | |
||||
@ -0,0 +1,12 @@
|
||||
[id^=docfy-demo-preview-csv-list] { |
||||
p, ul { |
||||
@extend %csv-list; |
||||
} |
||||
ol li { |
||||
@extend %csv; |
||||
} |
||||
ol { |
||||
list-style-type: none; |
||||
} |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
@ -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. |
||||
|
||||
`<CopyButton />` components are commonly added to the value, and can be added |
||||
to the left or right of the value. |
||||
|
||||
```hbs preview-template |
||||
<figure> |
||||
<figcaption> |
||||
All KVs can be specified in a single list |
||||
</figcaption> |
||||
|
||||
<dl> |
||||
<dt class="kind-terminating-gateway">Kind</dt> |
||||
<dd> |
||||
Terminating Gateway |
||||
</dd> |
||||
{{#if true}} |
||||
<dt |
||||
{{tooltip}} |
||||
class="lock-delay" |
||||
> |
||||
Lock Delay |
||||
</dt> |
||||
<dd>10ms</dd> |
||||
{{/if}} |
||||
<dt |
||||
{{tooltip}} |
||||
class="ttl" |
||||
> |
||||
TTL |
||||
</dt> |
||||
<dd> |
||||
<CopyButton |
||||
@value={{"1m30s10ms"}} |
||||
@name="TTL" |
||||
/> |
||||
1m30s10ms |
||||
</dd> |
||||
<dt> |
||||
Invisible title |
||||
</dt> |
||||
<dd> |
||||
local |
||||
</dd> |
||||
<dt class>Visible title</dt> |
||||
<dd> |
||||
global |
||||
</dd> |
||||
</dl> |
||||
|
||||
</figure> |
||||
<hr /> |
||||
<figure> |
||||
<figcaption>...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)</figcaption> |
||||
|
||||
<dl> |
||||
<dt |
||||
class="service-identity" |
||||
> |
||||
Service Identity |
||||
</dt> |
||||
<dd>service-0</dd> |
||||
</dl><dl> |
||||
<dt |
||||
{{tooltip}} |
||||
class="lock-delay" |
||||
> |
||||
Lock Delay |
||||
</dt> |
||||
<dd>10ms</dd> |
||||
</dl><dl> |
||||
<dt |
||||
{{tooltip}} |
||||
class="ttl" |
||||
> |
||||
TTL |
||||
</dt> |
||||
<dd> |
||||
1m30s10ms |
||||
<CopyButton |
||||
@value={{"1m30s10ms"}} |
||||
@name="TTL" |
||||
/> |
||||
</dd> |
||||
</dl><dl> |
||||
<dt> |
||||
No visible title |
||||
</dt> |
||||
<dd>local</dd> |
||||
</dl><dl> |
||||
<dt class>Visible title</dt> |
||||
<dd>global</dd> |
||||
</dl><!-- |
||||
Collapse the whitespace but keep our indentation |
||||
--><TagList @tags={{array 'one' 'two'}} /> |
||||
|
||||
</figure> |
||||
<hr /> |
||||
<figure class="reversed"> |
||||
<figcaption>When reversing, you'll probably want to use indiviudual dl's so as to not reverse the order of the KV pairs</figcaption> |
||||
<dl> |
||||
<dt class="kind-terminating-gateway">Kind</dt> |
||||
<dd> |
||||
Terminating Gateway |
||||
</dd> |
||||
</dl> |
||||
<dl> |
||||
<dt |
||||
class="service-identity" |
||||
> |
||||
Service Identity |
||||
</dt> |
||||
<dd>service-0</dd> |
||||
</dl> |
||||
<dl> |
||||
<dt |
||||
{{tooltip}} |
||||
class="lock-delay" |
||||
> |
||||
Lock Delay |
||||
</dt> |
||||
<dd>10ms</dd> |
||||
</dl><dl> |
||||
<dt |
||||
{{tooltip}} |
||||
class="ttl" |
||||
> |
||||
TTL |
||||
</dt> |
||||
<dd> |
||||
<CopyButton |
||||
@value={{"1m30s10ms"}} |
||||
@name="TTL" |
||||
/> |
||||
1m30s10ms |
||||
</dd> |
||||
</dl><dl> |
||||
<dt> |
||||
No visible title |
||||
</dt> |
||||
<dd>local</dd> |
||||
</dl><dl> |
||||
<dt class>Visible title</dt> |
||||
<dd>global</dd> |
||||
</dl> |
||||
|
||||
</figure> |
||||
``` |
||||
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 `</dl><dl>`. |
||||
2. Wrap the whitespace in comments `</dl><!-- carriage return --><dl>` |
||||
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 |
||||
<figure> |
||||
<figcaption> |
||||
Conditionally showing multiple key/values sometimes means that you insert an empty `dl` into the DOM |
||||
</figcaption> |
||||
|
||||
<dl> |
||||
{{~#if false}} |
||||
<dt>Something that might not be set</dt> |
||||
<dd>No value!</dd> |
||||
{{/if~}} |
||||
{{~#if false}} |
||||
<dt>Something that might not be set</dt> |
||||
<dd>No value!</dd> |
||||
{{/if~}} |
||||
</dl> |
||||
</figure> |
||||
``` |
||||
|
||||
|
||||
```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 | |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
@ -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; |
||||
} |
||||
@ -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); |
||||
} |
||||
@ -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 |
||||
<dl |
||||
class="lock-delay" |
||||
> |
||||
<dt |
||||
{{tooltip}} |
||||
> |
||||
Lock Delay |
||||
</dt> |
||||
<dd>10ms</dd> |
||||
</dl> |
||||
<dl> |
||||
<dt> |
||||
Scope |
||||
</dt> |
||||
<dd>local</dd> |
||||
</dl> |
||||
``` |
||||
|
||||
```css |
||||
dl { |
||||
@extend %icon-definition; |
||||
} |
||||
.lock-delay dt::before { |
||||
@extend %with-delay-mask, %as-pseudo; |
||||
} |
||||
``` |
||||
@ -0,0 +1,8 @@
|
||||
#docfy-demo-preview-icon-definition { |
||||
dl { |
||||
@extend %icon-definition; |
||||
} |
||||
.lock-delay dt::before { |
||||
@extend %with-delay-mask, %as-pseudo; |
||||
} |
||||
} |
||||
@ -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 { |
||||
@ -0,0 +1,15 @@
|
||||
.tag-list, |
||||
td.tags { |
||||
@extend %tag-list; |
||||
} |
||||
%tag-list { |
||||
@extend %horizontal-kv-list; |
||||
} |
||||
%tag-list dt::before { |
||||
@extend %with-tag-mask, %as-pseudo; |
||||
color: inherit; |
||||
color: var(--gray-500); |
||||
} |
||||
%tag-list dd { |
||||
@extend %csv-list; |
||||
} |
||||
@ -1,2 +0,0 @@
|
||||
@import './skin'; |
||||
@import './layout'; |
||||
@ -1,18 +0,0 @@
|
||||
%icon-definition { |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
%icon-definition { |
||||
display: inline-flex; |
||||
flex-wrap: nowrap; |
||||
} |
||||
%icon-definition > * { |
||||
align-self: center; |
||||
} |
||||
%icon-definition > dd { |
||||
white-space: nowrap; |
||||
margin-left: 4px; |
||||
} |
||||
%icon-definition > dt > * { |
||||
display: none; |
||||
} |
||||
@ -1,2 +0,0 @@
|
||||
%icon-definition { |
||||
} |
||||
@ -1,5 +0,0 @@
|
||||
@import './tag-list/index'; |
||||
.tag-list, |
||||
td.tags { |
||||
@extend %tag-list; |
||||
} |
||||
@ -1,2 +0,0 @@
|
||||
@import './skin'; |
||||
@import './layout'; |
||||
@ -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; |
||||
} |
||||
@ -1,3 +0,0 @@
|
||||
%tag-list::before { |
||||
background-color: $gray-500; |
||||
} |
||||
Loading…
Reference in new issue