b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
83 lines
1.9 KiB
HTML
Executable file
83 lines
1.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Switches</title>
|
|
<meta name="description" content="Activates/Deactivates a given item. It's also used to select an element within a list">
|
|
<link rel="stylesheet" href="../switches.css">
|
|
<!--
|
|
- These <style> elements are only used for the example code;
|
|
- they are not required for the real use case.
|
|
-->
|
|
<style type="text/css">
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 10px;
|
|
background-color: #fff;
|
|
}
|
|
body {
|
|
background: none;
|
|
}
|
|
h2.bb-docs {
|
|
font-size: 1.8rem;
|
|
font-weight: 300;
|
|
color: #666;
|
|
margin: -1px 0 0;
|
|
background-color: #f5f5f5;
|
|
padding: 0.4rem;
|
|
padding-inline-start: 3rem;
|
|
border: solid 1px #e8e8e8;
|
|
}
|
|
label {
|
|
margin-inline-start: 2rem;
|
|
}
|
|
</style>
|
|
<script>
|
|
window.onload = function() {
|
|
document.getElementById('dir').checked = false;
|
|
};
|
|
</script>
|
|
</head>
|
|
<body role="application">
|
|
<p dir="ltr">
|
|
<label>
|
|
<input type="checkbox"
|
|
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
|
|
RTL mode
|
|
</label>
|
|
</p>
|
|
|
|
<h2 class="bb-docs">Checkbox, commonly used in edit mode</h2>
|
|
<label class="pack-checkbox">
|
|
<input type="checkbox" checked>
|
|
<span></span>
|
|
</label>
|
|
|
|
<label class="pack-checkbox">
|
|
<input type="checkbox">
|
|
<span></span>
|
|
</label>
|
|
|
|
<label class="pack-checkbox danger">
|
|
<input type="checkbox" checked>
|
|
<span></span>
|
|
</label>
|
|
|
|
<label class="pack-checkbox danger">
|
|
<input type="checkbox">
|
|
<span></span>
|
|
</label>
|
|
|
|
<h2 class="bb-docs">Switch, commonly used in settings</h2>
|
|
<label class="pack-switch">
|
|
<input type="checkbox" checked>
|
|
<span></span>
|
|
</label>
|
|
|
|
<label class="pack-switch">
|
|
<input type="checkbox">
|
|
<span></span>
|
|
</label>
|
|
</body>
|
|
</html>
|