UI states of <a> anchor element as mixins.
| Mixin | Description |
|---|---|
link |
default state |
link--disabled |
“disabled” state (e.g. no href attribute) |
link--hover |
:hover state |
link--active |
:active (click) state |
<dl>
<dt>Standard</dt>
<dd><span class="x-link">default</span></dd>
<dd><span class="x-link x-link--disabled">"disabled"</span></dd>
<dd><span class="x-link x-link--hover">:hover</span></dd>
<dd><span class="x-link x-link--active">:active</span></dd>
<dd><span class="x-link x-link--hover x-link--active">:hover and :active</span></dd>
<dt>Irregular</dt>
<dd><span class="x-link--irregular">default</span></dd>
<dd><span class="x-link x-link--irregular--disabled">"disabled"</span></dd>
<dd><span class="x-link x-link--irregular--hover">:hover</span></dd>
<dd><span class="x-link x-link--irregular--active">:active</span></dd>
<dd><span class="x-link x-link--irregular--hover x-link--irregular--active">:hover and :active</span></dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* NOTE: This code is required for demo only after
`.x-` classes are removed from Core-Styles */
/*
.x-link {
@mixin link;
}
.x-link--disabled {
@mixin link--disabled;
}
.x-link--hover {
@mixin link--hover;
}
.x-link--active {
@mixin link--active;
}
.x-link--irregular {
@mixin link--irregular;
}
.x-link--irregular--disabled {
@mixin link--irregular--disabled;
}
.x-link--irregular--hover {
@mixin link--irregular--hover;
}
.x-link--irregular--active {
@mixin link--irregular--active;
}
*/
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "tools"
}