mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
426 lines
12 KiB
HTML
426 lines
12 KiB
HTML
<!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>
|