CSS: link
.instui-link — Egy stilizált hiperhivatkozás méretekkel, sötét hátterekhöz inverz változattal, és soron belüli vagy stílusozatlan formákkal.
Forrás: link.css
Akadálymentesség
Jelöljön meg egy letiltott hivatkozást a aria-disabled="true"-vel.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/link.css";Példák
html
<a class="instui-link" href="#">A styled link</a>Módosítók
| Módosító | Leírás |
|---|---|
.-color-inverse | Sötét hátterűek számára. |
.-inline | Soron belüli hivatkozás, aláhúzott a szövegfolyamban. |
.-lg | Nagy soron belüli hivatkozás (használva a -inline-vel). |
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-sm | Kicsi. |
.-size-small | Kicsi. Hosszú forma alias a -size-sm. |
.-sm | Kis soron belüli hivatkozás (használva a -inline-vel). |
.-unstyled | Távolítsa el a hivatkozás stíluzást: öröklött szín, nincs aláhúzás. |
Állapotok
| Állapot | Leírás |
|---|---|
:state(disabled) | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-link-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-link-font-size-lg | <length> | 1.75rem |
--instui-component-link-font-size-md | <length> | 1rem |
--instui-component-link-font-size-sm | <length> | 0.875rem |
--instui-component-link-font-weight | <integer> | 500 |
--instui-component-link-gap-lg | <length> | 0.25rem |
--instui-component-link-gap-md | <length> | 0.25rem |
--instui-component-link-gap-sm | <length> | 0.125rem |
--instui-component-link-inline-link-large-font-size | <length> | 1.75rem |
--instui-component-link-inline-link-large-font-weight | <integer> | 600 |
--instui-component-link-inline-link-large-line-height | <length> | 1.5rem |
--instui-component-link-inline-link-medium-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-link-inline-link-medium-font-size | <length> | 1rem |
--instui-component-link-inline-link-medium-font-weight | <integer> | 600 |
--instui-component-link-inline-link-medium-line-height | <length> | 1.5rem |
--instui-component-link-inline-link-small-font-size | <length> | 0.875rem |
--instui-component-link-inline-link-small-font-weight | <integer> | 600 |
--instui-component-link-inline-link-small-line-height | <length> | 0.875rem |
--instui-component-link-line-height-lg | <length> | 1.5rem |
--instui-component-link-line-height-md | <length> | 1rem |
--instui-component-link-line-height-sm | <length> | 0.875rem |
--instui-component-link-on-color-text-color | <color> | #ffffff |
--instui-component-link-on-color-text-disabled-color | <color> | light-dark(#C7CACD, #9EA6AD)LightDark |
--instui-component-link-on-color-text-hover-color | <color> | light-dark(#DEEBFF, #ffffff)LightDark |
--instui-component-link-text-color | <color> | light-dark(#2369A4, #7FB4F1)LightDark |
--instui-component-link-text-decoration-outside-text | none | underline || overline || line-through || blink | none |
--instui-component-link-text-decoration-within-text | none | underline || overline || line-through || blink | underline |
--instui-component-link-text-disabled-color | <color> | light-dark(#8D959F, #576773)LightDark |
--instui-component-link-text-hover-color | <color> | light-dark(#1A5281, #ACCDF7)LightDark |
--instui-component-link-unstyled-text-color | <color> | light-dark(#273540, #F2F4F5)LightDark |
Kapcsolódó
- breadcrumb — A breadcrumb nyomvonal hivatkozásokból épül fel.