mirror of
https://github.com/tabler/tabler.git
synced 2026-10-13 21:57:00 +04:00
52 lines
2.2 KiB
HTML
52 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Tabler 1.5 project</title>
|
|
<link rel="stylesheet" href="/dist/css/tabler.css" />
|
|
<link rel="stylesheet" href="/dist/css/tabler-vendors.css" />
|
|
<style>
|
|
.my-highlight {
|
|
background-color: rgba(var(--tblr-primary-rgb), 0.5);
|
|
}
|
|
.my-button {
|
|
--tblr-btn-focus-box-shadow: 0 0 0 4px rgb(255, 0, 0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div id="highlight" class="my-highlight">rgba() from the RGB triplet</div>
|
|
<span id="legend" class="legend bg-primary"></span>
|
|
<label class="form-label" for="email">Email</label>
|
|
<input id="email" class="form-control" />
|
|
<small id="hint" class="form-hint">We'll never share your email.</small>
|
|
<button id="button" class="btn my-button" type="button">Focus me</button>
|
|
<textarea id="message" class="form-control" data-bs-toggle="autosize" rows="1"></textarea>
|
|
<h1 id="total" data-countup='{"duration":"0.2","enableScrollSpy":false}'>1500</h1>
|
|
<input id="api-key" value="secret" />
|
|
<button id="copy" class="btn" type="button" data-clipboard-target="#api-key">Copy</button>
|
|
<input id="date" class="form-control" />
|
|
<button id="open-modal" class="btn" type="button" data-bs-toggle="modal" data-bs-target="#modal">Open</button>
|
|
<div class="modal" id="modal" tabindex="-1">
|
|
<div class="modal-dialog"><div class="modal-content"><div class="modal-body">Hello</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/dist/libs/autosize/dist/autosize.min.js"></script>
|
|
<script src="/dist/libs/countup.js/dist/countUp.umd.js"></script>
|
|
<script src="/dist/libs/clipboard/dist/clipboard.min.js"></script>
|
|
<script src="/dist/libs/litepicker/dist/litepicker.js"></script>
|
|
<script src="/dist/js/tabler.js"></script>
|
|
<script>
|
|
window.fixture = {
|
|
clipboard: new ClipboardJS('#copy'),
|
|
picker: new Litepicker({ element: document.getElementById('date'), inlineMode: true }),
|
|
color: tabler.tabler.getColor('primary'),
|
|
colorHalf: tabler.tabler.getColor('primary', 0.5),
|
|
prefix: tabler.tabler.prefix,
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|