mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-04 04:20:19 +01:00
116 lines
4.7 KiB
HTML
116 lines
4.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" style="background-color: rgb(38, 40, 49)" class="is-theme-style-dark">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="theme-color" content="#262831">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||
|
|
<title>Style Guide</title>
|
||
|
|
<!-- css-block -->
|
||
|
|
<link rel="stylesheet" href="css/reset.css">
|
||
|
|
<link rel="stylesheet" href="css/variables.css">
|
||
|
|
<link rel="stylesheet" href="css/utilities.css">
|
||
|
|
<link rel="stylesheet" href="css/base.css">
|
||
|
|
<link rel="stylesheet" href="css/layout.css">
|
||
|
|
<link rel="stylesheet" href="css/edge.css">
|
||
|
|
<link rel="stylesheet" href="css/animation.css">
|
||
|
|
<link rel="stylesheet" href="css/fonts.css">
|
||
|
|
<link rel="stylesheet" href="css/icons.css">
|
||
|
|
<link rel="stylesheet" href="css/state.css">
|
||
|
|
<link rel="stylesheet" href="css/typography.css">
|
||
|
|
<link rel="stylesheet" href="css/spacing.css">
|
||
|
|
<link rel="stylesheet" href="css/button.css">
|
||
|
|
<link rel="stylesheet" href="css/form.css">
|
||
|
|
<link rel="stylesheet" href="css/shade.css">
|
||
|
|
<link rel="stylesheet" href="css/modal.css">
|
||
|
|
<link rel="stylesheet" href="css/tip.css">
|
||
|
|
<link rel="stylesheet" href="css/menu.css">
|
||
|
|
<link rel="stylesheet" href="css/header.css">
|
||
|
|
<link rel="stylesheet" href="css/date.css">
|
||
|
|
<link rel="stylesheet" href="css/clock.css">
|
||
|
|
<link rel="stylesheet" href="css/greeting.css">
|
||
|
|
<link rel="stylesheet" href="css/transitional.css">
|
||
|
|
<link rel="stylesheet" href="css/search.css">
|
||
|
|
<link rel="stylesheet" href="css/background.css">
|
||
|
|
<link rel="stylesheet" href="css/group.css">
|
||
|
|
<link rel="stylesheet" href="css/link.css">
|
||
|
|
<link rel="stylesheet" href="css/auto-suggest.css">
|
||
|
|
<link rel="stylesheet" href="css/fontawesome.css">
|
||
|
|
<!-- end-css-block -->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<main class="layout my-5">
|
||
|
|
<p>Buttons</p>
|
||
|
|
<div class="button-wrap">
|
||
|
|
<button class="button button-small mb-0" tabindex="1">Small</button>
|
||
|
|
</div>
|
||
|
|
<div class="button-wrap">
|
||
|
|
<button class="button mb-0" tabindex="1">Medium</button>
|
||
|
|
</div>
|
||
|
|
<div class="button-wrap">
|
||
|
|
<button class="button button-large mb-0" tabindex="1">Large</button>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<p>Form</p>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<input id="style-guide-checkbox" type="checkbox" tabindex="1">
|
||
|
|
<label for="style-guide-checkbox">Checkbox</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<input id="style-guide-radio-1" type="radio" name="style-guide-radio" tabindex="1">
|
||
|
|
<label for="style-guide-radio-1">Radio 1</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<input id="style-guide-radio-2" type="radio" name="style-guide-radio" tabindex="1">
|
||
|
|
<label for="style-guide-radio-2">Radio 2</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<input id="style-guide-radio-3" type="radio" name="style-guide-radio" tabindex="1">
|
||
|
|
<label for="style-guide-radio-3">Radio 3</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<label for="input-text">Input Text</label>
|
||
|
|
<input id="input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="placeholder" tabindex="1">
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<label for="textarea">Textarea</label>
|
||
|
|
<textarea id="textarea" class="textarea mb-0" spellcheck="false" placeholder="placeholder" tabindex="1"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<label for="input-range">Input Range</label>
|
||
|
|
<input id="input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<label for="input-colour">Input Colour</label>
|
||
|
|
<input id="input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<label for="select-1">Select</label>
|
||
|
|
<select id="select-1" class="mb-0" tabindex="1">
|
||
|
|
<option>Option 1</option>
|
||
|
|
<option>Option 2</option>
|
||
|
|
<option>Option 3</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrap">
|
||
|
|
<label for="form-group-1">Form Group</label>
|
||
|
|
<div class="form-group mb-0">
|
||
|
|
<input id="form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||
|
|
<input id="form-group-3" class="form-group-item-half mb-0" type="color" value="#000000" tabindex="1">
|
||
|
|
<button class="button mb-0" tabindex="1">Button</button>
|
||
|
|
<select id="select-2" class="mb-0" tabindex="1">
|
||
|
|
<option>Option 1</option>
|
||
|
|
<option>Option 2</option>
|
||
|
|
<option>Option 3</option>
|
||
|
|
</select>
|
||
|
|
<div class="form-group-text" tabindex="1">Form Group Text</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|