library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
2172fa18c9
bulma/docs/library/debug/css-vars.html

426 lines
12 KiB
HTML
Raw Normal View History

Init v1
2024-03-21 16:11:54 +00:00
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="debug.css" />
<style type="text/css">
.rows {
display: flex;
flex-direction: column;
padding: 2em;
gap: 0.5em;
}
.row {
display: flex;
align-items: center;
gap: 1em;
}
.color-swatch {
background-color: var(--color);
border-radius: 0.25em;
height: 1.5em;
width: 1.5em;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="rows">
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-scheme-main)"
></div>
<div class="name">scheme-main</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-scheme-main-bis)"
></div>
<div class="name">scheme-main-bis</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-scheme-main-ter)"
></div>
<div class="name">scheme-main-ter</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-scheme-invert)"
></div>
<div class="name">scheme-invert</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-scheme-invert-bis)"
></div>
<div class="name">scheme-invert-bis</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-scheme-invert-ter)"
></div>
<div class="name">scheme-invert-ter</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-text)"></div>
<div class="name">text</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-text-invert)"
></div>
<div class="name">text-invert</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-text-light)"
></div>
<div class="name">text-light</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-text-strong)"
></div>
<div class="name">text-strong</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-background)"
></div>
<div class="name">background</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-border)"></div>
<div class="name">border</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-border-hover)"
></div>
<div class="name">border-hover</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-border-light)"
></div>
<div class="name">border-light</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-border-light-hover)"
></div>
<div class="name">border-light-hover</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-code)"></div>
<div class="name">code</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-code-background)"
></div>
<div class="name">code-background</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-pre)"></div>
<div class="name">pre</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-pre-background)"
></div>
<div class="name">pre-background</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-hover)"
></div>
<div class="name">link-hover</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-hover-border)"
></div>
<div class="name">link-hover-border</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-focus)"
></div>
<div class="name">link-focus</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-focus-border)"
></div>
<div class="name">link-focus-border</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-active)"
></div>
<div class="name">link-active</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-active-border)"
></div>
<div class="name">link-active-border</div>
</div>
</div>
<div class="rows">
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-family-sans-serif)"
></div>
<div class="name">family-sans-serif</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-family-monospace)"
></div>
<div class="name">family-monospace</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-size-1)"></div>
<div class="name">size-1</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-size-2)"></div>
<div class="name">size-2</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-size-3)"></div>
<div class="name">size-3</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-size-4)"></div>
<div class="name">size-4</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-size-5)"></div>
<div class="name">size-5</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-size-6)"></div>
<div class="name">size-6</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-size-7)"></div>
<div class="name">size-7</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-weight-light)"
></div>
<div class="name">weight-light</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-weight-normal)"
></div>
<div class="name">weight-normal</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-weight-medium)"
></div>
<div class="name">weight-medium</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-weight-semibold)"
></div>
<div class="name">weight-semibold</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-weight-bold)"
></div>
<div class="name">weight-bold</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-block-spacing)"
></div>
<div class="name">block-spacing</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-gap)"></div>
<div class="name">gap</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-easing)"></div>
<div class="name">easing</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-radius-small)"
></div>
<div class="name">radius-small</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-radius)"></div>
<div class="name">radius</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-radius-large)"
></div>
<div class="name">radius-large</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-radius-rounded)"
></div>
<div class="name">radius-rounded</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-speed)"></div>
<div class="name">speed</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-family-primary)"
></div>
<div class="name">family-primary</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-family-secondary)"
></div>
<div class="name">family-secondary</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-family-code)"
></div>
<div class="name">family-code</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-size-small)"
></div>
<div class="name">size-small</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-size-normal)"
></div>
<div class="name">size-normal</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-size-medium)"
></div>
<div class="name">size-medium</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-size-large)"
></div>
<div class="name">size-large</div>
</div>
<div class="row">
<div class="bd-color-swatch" style="--color: var(--bulma-shadow)"></div>
<div class="name">shadow</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-visited)"
></div>
<div class="name">link-visited</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-hover)"
></div>
<div class="name">link-hover</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-hover-border)"
></div>
<div class="name">link-hover-border</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-focus)"
></div>
<div class="name">link-focus</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-focus-border)"
></div>
<div class="name">link-focus-border</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-active)"
></div>
<div class="name">link-active</div>
</div>
<div class="row">
<div
class="bd-color-swatch"
style="--color: var(--bulma-link-active-border)"
></div>
<div class="name">link-active-border</div>
</div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink