No notes defined.
<!-- Default -->
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Tag</span></a>
<!-- Disabled -->
<a class="tag" title="Weitere Elemente mit diesem Schlagwort anzeigen …" aria-disabled="true"><span class="tag-label">Disabled</span></a>
<!-- Inactive -->
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Inactive Tag</span></a>
<!-- Selectable -->
<label class="tag-container">
<input type="checkbox" />
<span class="tag" data-selectable="true">
Selectable Tag
</span>
</label>
<!-- Selectable Disabled -->
<label class="tag-container">
<input type="checkbox" disabled="true" />
<span class="tag" data-selectable="true" aria-disabled="true">
Selectable Tag
</span>
</label>
<!-- Removable -->
<span class="tag" data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" onclick="this.parentNode.remove();">
Entfernen
</button>
</span>
<!-- Removable Disabled -->
<span class="tag" data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" disabled="true">
Entfernen
</button>
</span>
<!-- Documentation only -->
<div class="doc-section">
<div class="doc-header">
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Large</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<a class="tag is-large " href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Tag</span></a>
<a class="tag is-large " title="Weitere Elemente mit diesem Schlagwort anzeigen …" aria-disabled="true"><span class="tag-label">Disabled</span></a>
<label class="tag-container">
<input type="checkbox" />
<span class="tag is-large " data-selectable="true">
Selectable Tag
</span>
</label>
<label class="tag-container">
<input type="checkbox" disabled="true" />
<span class="tag is-large " data-selectable="true" aria-disabled="true">
Selectable Tag
</span>
</label>
<span class="tag is-large " data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" onclick="this.parentNode.remove();">
Entfernen
</button>
</span>
<span class="tag is-large " data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" disabled="true">
Entfernen
</button>
</span>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Medium (Default)</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-large</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<a class="tag is-large " href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Tag</span></a>
<a class="tag is-large " title="Weitere Elemente mit diesem Schlagwort anzeigen …" aria-disabled="true"><span class="tag-label">Disabled</span></a>
<label class="tag-container">
<input type="checkbox" />
<span class="tag is-large " data-selectable="true">
Selectable Tag
</span>
</label>
<label class="tag-container">
<input type="checkbox" disabled="true" />
<span class="tag is-large " data-selectable="true" aria-disabled="true">
Selectable Tag
</span>
</label>
<span class="tag is-large " data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" onclick="this.parentNode.remove();">
Entfernen
</button>
</span>
<span class="tag is-large " data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" disabled="true">
Entfernen
</button>
</span>
</div>
</div>
<div class="doc-variant">
<header class="doc-variant-header">
<h3 class="doc-variant-title">Small</h3>
<div class="doc-variant-configuration">
<ul data-label="Modifier">
<li>is-small</li>
</ul>
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="doc-variant-samples" data-theme="">
<a class="tag is-small " href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Tag</span></a>
<a class="tag is-small " title="Weitere Elemente mit diesem Schlagwort anzeigen …" aria-disabled="true"><span class="tag-label">Disabled</span></a>
<label class="tag-container">
<input type="checkbox" />
<span class="tag is-small " data-selectable="true">
Selectable Tag
</span>
</label>
<label class="tag-container">
<input type="checkbox" disabled="true" />
<span class="tag is-small " data-selectable="true" aria-disabled="true">
Selectable Tag
</span>
</label>
<span class="tag is-small " data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" onclick="this.parentNode.remove();">
Entfernen
</button>
</span>
<span class="tag is-small " data-removable="true">
Removable Tag
<button class="tag-button" title="Entfernen" disabled="true">
Entfernen
</button>
</span>
</div>
</div>
</div>
<!-- Default -->
{{~#if is-selectable~}}
<label class="tag-container">
<input type="checkbox"
{{~#name}} name="{{.}}"{{/name~}}
{{~#value}} value="{{.}}"{{/value~}}
{{~#if is-disabled}} disabled="true"{{/if~}}
{{~#if onchange}} onchange="{{onchange}}"{{/if~}}
{{~#dataset~}}
{{~name~}}
{{~#if value}}="{{value}}"{{/if~}}
{{~/dataset~}}
/>
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-selectable="true"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{{label}}}
</span>
</label>
{{~else if is-removable~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-removable="true">
{{{label}}}
<button class="tag-button"
{{~#if button.label}} title="{{button.label}}"{{/if}}
{{~#if is-disabled~}} disabled="true"
{{~else~}}
{{~#button.onclick}} onclick="{{.}}"{{/button.onclick~}}
{{~/if~}}>
{{{button.label}}}
</button>
</span>
{{~else~}}
{{~#if link~}}
<a class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#unless is-disabled}} href="{{link.url}}"{{/unless~}}
{{~#if link.title}} title="{{{link.title}}}"{{/if~}}
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~else~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~/if~}}
<span class="tag-label">{{{label}}}</span>
{{~#if link~}}
</a>
{{~else~}}
</span>
{{~/if~}}
{{~/if}}
<!-- Disabled -->
{{~#if is-selectable~}}
<label class="tag-container">
<input type="checkbox"
{{~#name}} name="{{.}}"{{/name~}}
{{~#value}} value="{{.}}"{{/value~}}
{{~#if is-disabled}} disabled="true"{{/if~}}
{{~#if onchange}} onchange="{{onchange}}"{{/if~}}
{{~#dataset~}}
{{~name~}}
{{~#if value}}="{{value}}"{{/if~}}
{{~/dataset~}}
/>
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-selectable="true"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{{label}}}
</span>
</label>
{{~else if is-removable~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-removable="true">
{{{label}}}
<button class="tag-button"
{{~#if button.label}} title="{{button.label}}"{{/if}}
{{~#if is-disabled~}} disabled="true"
{{~else~}}
{{~#button.onclick}} onclick="{{.}}"{{/button.onclick~}}
{{~/if~}}>
{{{button.label}}}
</button>
</span>
{{~else~}}
{{~#if link~}}
<a class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#unless is-disabled}} href="{{link.url}}"{{/unless~}}
{{~#if link.title}} title="{{{link.title}}}"{{/if~}}
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~else~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~/if~}}
<span class="tag-label">{{{label}}}</span>
{{~#if link~}}
</a>
{{~else~}}
</span>
{{~/if~}}
{{~/if}}
<!-- Inactive -->
{{~#if is-selectable~}}
<label class="tag-container">
<input type="checkbox"
{{~#name}} name="{{.}}"{{/name~}}
{{~#value}} value="{{.}}"{{/value~}}
{{~#if is-disabled}} disabled="true"{{/if~}}
{{~#if onchange}} onchange="{{onchange}}"{{/if~}}
{{~#dataset~}}
{{~name~}}
{{~#if value}}="{{value}}"{{/if~}}
{{~/dataset~}}
/>
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-selectable="true"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{{label}}}
</span>
</label>
{{~else if is-removable~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-removable="true">
{{{label}}}
<button class="tag-button"
{{~#if button.label}} title="{{button.label}}"{{/if}}
{{~#if is-disabled~}} disabled="true"
{{~else~}}
{{~#button.onclick}} onclick="{{.}}"{{/button.onclick~}}
{{~/if~}}>
{{{button.label}}}
</button>
</span>
{{~else~}}
{{~#if link~}}
<a class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#unless is-disabled}} href="{{link.url}}"{{/unless~}}
{{~#if link.title}} title="{{{link.title}}}"{{/if~}}
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~else~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~/if~}}
<span class="tag-label">{{{label}}}</span>
{{~#if link~}}
</a>
{{~else~}}
</span>
{{~/if~}}
{{~/if}}
<!-- Selectable -->
{{~#if is-selectable~}}
<label class="tag-container">
<input type="checkbox"
{{~#name}} name="{{.}}"{{/name~}}
{{~#value}} value="{{.}}"{{/value~}}
{{~#if is-disabled}} disabled="true"{{/if~}}
{{~#if onchange}} onchange="{{onchange}}"{{/if~}}
{{~#dataset~}}
{{~name~}}
{{~#if value}}="{{value}}"{{/if~}}
{{~/dataset~}}
/>
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-selectable="true"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{{label}}}
</span>
</label>
{{~else if is-removable~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-removable="true">
{{{label}}}
<button class="tag-button"
{{~#if button.label}} title="{{button.label}}"{{/if}}
{{~#if is-disabled~}} disabled="true"
{{~else~}}
{{~#button.onclick}} onclick="{{.}}"{{/button.onclick~}}
{{~/if~}}>
{{{button.label}}}
</button>
</span>
{{~else~}}
{{~#if link~}}
<a class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#unless is-disabled}} href="{{link.url}}"{{/unless~}}
{{~#if link.title}} title="{{{link.title}}}"{{/if~}}
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~else~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~/if~}}
<span class="tag-label">{{{label}}}</span>
{{~#if link~}}
</a>
{{~else~}}
</span>
{{~/if~}}
{{~/if}}
<!-- Selectable Disabled -->
{{~#if is-selectable~}}
<label class="tag-container">
<input type="checkbox"
{{~#name}} name="{{.}}"{{/name~}}
{{~#value}} value="{{.}}"{{/value~}}
{{~#if is-disabled}} disabled="true"{{/if~}}
{{~#if onchange}} onchange="{{onchange}}"{{/if~}}
{{~#dataset~}}
{{~name~}}
{{~#if value}}="{{value}}"{{/if~}}
{{~/dataset~}}
/>
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-selectable="true"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{{label}}}
</span>
</label>
{{~else if is-removable~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-removable="true">
{{{label}}}
<button class="tag-button"
{{~#if button.label}} title="{{button.label}}"{{/if}}
{{~#if is-disabled~}} disabled="true"
{{~else~}}
{{~#button.onclick}} onclick="{{.}}"{{/button.onclick~}}
{{~/if~}}>
{{{button.label}}}
</button>
</span>
{{~else~}}
{{~#if link~}}
<a class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#unless is-disabled}} href="{{link.url}}"{{/unless~}}
{{~#if link.title}} title="{{{link.title}}}"{{/if~}}
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~else~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~/if~}}
<span class="tag-label">{{{label}}}</span>
{{~#if link~}}
</a>
{{~else~}}
</span>
{{~/if~}}
{{~/if}}
<!-- Removable -->
{{~#if is-selectable~}}
<label class="tag-container">
<input type="checkbox"
{{~#name}} name="{{.}}"{{/name~}}
{{~#value}} value="{{.}}"{{/value~}}
{{~#if is-disabled}} disabled="true"{{/if~}}
{{~#if onchange}} onchange="{{onchange}}"{{/if~}}
{{~#dataset~}}
{{~name~}}
{{~#if value}}="{{value}}"{{/if~}}
{{~/dataset~}}
/>
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-selectable="true"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{{label}}}
</span>
</label>
{{~else if is-removable~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-removable="true">
{{{label}}}
<button class="tag-button"
{{~#if button.label}} title="{{button.label}}"{{/if}}
{{~#if is-disabled~}} disabled="true"
{{~else~}}
{{~#button.onclick}} onclick="{{.}}"{{/button.onclick~}}
{{~/if~}}>
{{{button.label}}}
</button>
</span>
{{~else~}}
{{~#if link~}}
<a class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#unless is-disabled}} href="{{link.url}}"{{/unless~}}
{{~#if link.title}} title="{{{link.title}}}"{{/if~}}
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~else~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~/if~}}
<span class="tag-label">{{{label}}}</span>
{{~#if link~}}
</a>
{{~else~}}
</span>
{{~/if~}}
{{~/if}}
<!-- Removable Disabled -->
{{~#if is-selectable~}}
<label class="tag-container">
<input type="checkbox"
{{~#name}} name="{{.}}"{{/name~}}
{{~#value}} value="{{.}}"{{/value~}}
{{~#if is-disabled}} disabled="true"{{/if~}}
{{~#if onchange}} onchange="{{onchange}}"{{/if~}}
{{~#dataset~}}
{{~name~}}
{{~#if value}}="{{value}}"{{/if~}}
{{~/dataset~}}
/>
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-selectable="true"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{{label}}}
</span>
</label>
{{~else if is-removable~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}" data-removable="true">
{{{label}}}
<button class="tag-button"
{{~#if button.label}} title="{{button.label}}"{{/if}}
{{~#if is-disabled~}} disabled="true"
{{~else~}}
{{~#button.onclick}} onclick="{{.}}"{{/button.onclick~}}
{{~/if~}}>
{{{button.label}}}
</button>
</span>
{{~else~}}
{{~#if link~}}
<a class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#unless is-disabled}} href="{{link.url}}"{{/unless~}}
{{~#if link.title}} title="{{{link.title}}}"{{/if~}}
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~else~}}
<span class="tag{{#modifier}} {{.}}{{/modifier}}"
{{~#if is-disabled}} aria-disabled="true"{{/if~}}
>
{{~/if~}}
<span class="tag-label">{{{label}}}</span>
{{~#if link~}}
</a>
{{~else~}}
</span>
{{~/if~}}
{{~/if}}
<!-- Documentation only -->
{{#sections}}
<div class="doc-section">
<div class="doc-header">
{{#title}}
<h2 class="doc-header-title">{{{.}}}</h2>
{{/title}}
{{#if modifiers}}
<div class="doc-header-configuration">
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
</div>
{{/if}}
</div>
{{#variants}}
<div class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h3 class="doc-variant-title">{{{.}}}</h3>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
{{#if ../../themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
{{#../../themes}}
<option value="{{{.}}}">{{{.}}}</option>
{{/../../themes}}
</select>
</label>
{{/if}}
</div>
</header>
<div class="doc-variant-samples" data-theme="{{theme}}">
{{#samples}}
{{render '@tag' (contextData '@tag' this) merge=true}}
{{/samples}}
</div>
</div>
{{/variants}}
</div>
{{/sections}}
/* Default */
{
"label": "Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
}
}
/* Disabled */
{
"label": "Disabled",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"is-disabled": true
}
/* Inactive */
{
"label": "Inactive Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
}
}
/* Selectable */
{
"label": "Selectable Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"is-selectable": true
}
/* Selectable Disabled */
{
"label": "Selectable Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"is-selectable": true,
"is-disabled": true
}
/* Removable */
{
"label": "Removable Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"is-removable": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
}
}
/* Removable Disabled */
{
"label": "Removable Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"is-removable": true,
"is-disabled": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
}
}
/* Documentation only */
{
"label": "Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"themes": [
"default",
"dark"
],
"sections": [
{
"variants": [
{
"title": "Large",
"modifiers": "is-large",
"samples": [
{
"label": "Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"modifier": "is-large "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large "
},
{
"label": "Selectable Tag",
"is-selectable": true,
"modifier": "is-large "
},
{
"label": "Selectable Tag",
"is-selectable": true,
"is-disabled": true,
"modifier": "is-large "
},
{
"label": "Removable Tag",
"is-removable": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
},
"modifier": "is-large "
},
{
"label": "Removable Tag",
"is-removable": true,
"is-disabled": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
},
"modifier": "is-large "
}
],
"modifier": "is-large"
},
{
"title": "Medium (Default)",
"modifiers": "is-large",
"samples": [
{
"label": "Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"modifier": "is-large "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-large "
},
{
"label": "Selectable Tag",
"is-selectable": true,
"modifier": "is-large "
},
{
"label": "Selectable Tag",
"is-selectable": true,
"is-disabled": true,
"modifier": "is-large "
},
{
"label": "Removable Tag",
"is-removable": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
},
"modifier": "is-large "
},
{
"label": "Removable Tag",
"is-removable": true,
"is-disabled": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
},
"modifier": "is-large "
}
],
"modifier": "is-large"
},
{
"title": "Small",
"modifiers": "is-small",
"samples": [
{
"label": "Tag",
"link": {
"url": "#",
"title": "Weitere Elemente mit diesem Schlagwort anzeigen …"
},
"modifier": "is-small "
},
{
"label": "Disabled",
"is-disabled": true,
"modifier": "is-small "
},
{
"label": "Selectable Tag",
"is-selectable": true,
"modifier": "is-small "
},
{
"label": "Selectable Tag",
"is-selectable": true,
"is-disabled": true,
"modifier": "is-small "
},
{
"label": "Removable Tag",
"is-removable": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
},
"modifier": "is-small "
},
{
"label": "Removable Tag",
"is-removable": true,
"is-disabled": true,
"button": {
"label": "Entfernen",
"onclick": "this.parentNode.remove();"
},
"modifier": "is-small "
}
],
"modifier": "is-small"
}
]
}
]
}
$tag_padding: .32em 1.1em !default;
$tag_background-color: $_gray-200 !default;
$tag_background-color--dark: $_gray-700 !default;
$tag-styles--selectable--dark: (
background-color: transparent,
border-color: $_border-color,
transition-property: (color, background, border-color),
) !default;
$tag-states--selectable--dark: (
default: $tag-styles--selectable--dark,
checked: (
color: $_page-color,
background-color: $_action-background-color,
border-color: $_action-background-color,
),
disabled: (
color: $_action-color--disabled,
),
) !default;
$tag-styles--large: (
text-size: default,
) !default;
@import "_tag.settings";
@import "_tag.styles";
[data-theme="dark"] {
%tag {
background-color: $tag_background-color--dark;
color: $_text-color;
&[aria-disabled="true"] {
color: $_action-color--disabled;
}
}
%tag--selectable {
@include state-styles($tag-states--selectable--dark);
@include action-states($tag-states--selectable--dark);
}
%tag-container {
input {
&:checked ~ %tag {
@include state-styles($tag-states--selectable--dark, checked);
}
}
}
%tag-button {
&:not(:hover):not([disabled]) {
color: $_text-color;
}
}
}
%tag--large {
@include styles($tag-styles--large);
@if variable-exists(tag_baseline-shift--large) and $tag_baseline-shift--large != 0 {
> * {
top: (-1 * $tag_baseline-shift--large);
}
}
%tag-button {
height: 1lh;
width: 1lh;
}
}
.tag {
&.is-large {
@extend %tag--large;
}
}
$tag_padding: .5em 1.25em !default;
$tag_padding--small: $tag_padding !default;
$tag_border-width: 2px !default;
$tag_background-color: $_lightgray !default;
$tag_baseline-shift: .05em !default;
$tag_baseline-shift--small: $tag_baseline-shift !default;
$tag-styles: (
text-size: small,
padding: $tag_padding,
border-radius: 100vmax,
color: $_text-color,
background-color: $tag_background-color,
border: $tag_border-width solid transparent,
transition-property: (color, background),
transition-duration: $_transition-duration--out,
) !default;
$tag-states: (
default: $tag-styles,
hover: (
background-color: $_action-background-color--hover,
color: $_action-foreground-color--hover,
transition-duration: $_transition-duration--in,
),
focus: $_focus_styles,
active: (
background-color: $_action-background-color--active,
color: $_action-foreground-color--active,
),
disabled: (
color: $_action-color--disabled,
),
) !default;
$tag-styles--selectable: (
color: $_action-color,
background-color: transparent,
border-color: $tag_background-color,
box-shadow: none,
transition-property: (color, background, border),
transition-duration: $_transition-duration--out,
) !default;
$tag-states--selectable: (
default: $tag-styles--selectable,
hover: (
border-color: $_action-border-color__hover,
),
focus: $_focus_styles,
active: (
border-color: $_action-border-color__active,
),
checked: (
color: $_text-color,
background-color: $tag_background-color,
transition-duration: $_transition-duration--in,
),
disabled: (
color: $_action-color--disabled,
),
) !default;
$tag_button_size: 24px !default;
$tag_button_icon_stroke-width: 1.5 !default;
$tag_button_icon: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="{{color}}" stroke-width="#{$tag_button_icon_stroke-width}" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 2.5L13.5 13.5M13.5 2.5L2.5 13.5" /></svg>' !default;
$tag_button_icon_size: 16px !default;
$tag_button_styles: (
color: $_action-color,
border-radius: 100vmax,
transition-duration: $_transition-duration--out,
transition-property: (color, background-color),
) !default;
$tag_button_states: (
default: $tag_button_styles,
hover: (
color: $_action-foreground-color--hover,
background-color: $_action-background-color--hover,
transition-duration: $_transition-duration--in,
),
focus: $_focus_styles,
active: (
color: $_action-foreground-color--active,
background-color: $_action-background-color--active,
),
disabled: (
color: $_action-color--disabled,
background-color: transparent,
),
) !default;
$tag-styles--small: (
padding: $tag_padding--small,
text-size: smallest,
) !default;
%tag {
$icon_size: 20px;
@include stack-spacing();
display: inline-flex;
align-items: center;
column-gap: .4em;
white-space: nowrap;
text-overflow: ellipsis;
user-select: none;
outline: transparent;
@include state-styles($tag-states);
&[href] {
text-decoration: none;
@include action-states($tag-states);
}
&-label {
position: relative;
top: $tag_baseline-shift;
}
.icon {
width: $icon_size;
height: $icon_size;
margin-right: (-.2 * $icon_size);
}
}
a,
button {
&%tag:not([href], [data-removable="true"]) {
@include state-styles($tag-states, disabled);
}
}
%tag--selectable {
@include state-styles($tag-states--selectable);
@include action-states($tag-states--selectable);
}
%tag-container {
@include stack-spacing();
%tag {
@include stack-spacing(0);
}
input {
opacity: 0;
position: absolute;
pointer-events: none;
&:focus-visible ~ %tag:not([disabled]):not([aria-disabled="true"]) {
@include state-styles($tag-states--selectable, focus);
}
&:checked ~ %tag {
@include state-styles($tag-states--selectable, checked);
}
}
}
%tag--removable {
padding-right: nth($tag_padding, 1);
}
%tag-button {
display: inline-block;
width: $tag_button_size;
height: $tag_button_size;
margin-top: (-.5 * $tag_button_size);
margin-bottom: (-.5 * $tag_button_size);
overflow: hidden;
text-indent: 110%;
outline: transparent;
@supports (mask-image: url()) {
@include state-styles($tag_button_states);
@include action-states($tag_button_states);
& {
position: relative;
}
&::after {
content: "";
display: block;
width: $tag_button_size;
height: $tag_button_size;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: currentcolor;
mask-image: svg-url($tag_button_icon, black);
mask-repeat: no-repeat;
mask-position: center center;
pointer-events: none;
user-select: none;
}
}
}
%tag--small {
@include styles($tag-styles--small);
.icon {
width: 20px;
height: 20px;
}
@if variable-exists(tag_baseline-shift--small) and $tag_baseline-shift--small != 0 {
> *:not(.icon) {
top: (-1 * $tag_baseline-shift--small);
}
}
&[data-removable="true"] {
padding-right: nth($tag_padding--small, 1);
}
}
.tag {
@extend %tag;
&-label {
@extend %tag-label;
}
&-container {
@extend %tag-container;
}
&-button {
@extend %tag-button;
}
&[data-selectable="true"] {
@extend %tag--selectable;
}
&[data-removable="true"] {
@extend %tag--removable;
}
&.is-small {
@extend %tag--small;
}
}