mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-10 07:58:53 +01:00
[desing] add input button line and ring support
This commit is contained in:
zombieFox
parent
eafd4c28bd
commit
5103de7186
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.21.1",
|
||||
"version": "5.22.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nightTab",
|
||||
"version": "5.21.1",
|
||||
"version": "5.22.0",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -55,6 +55,11 @@ input[type="submit"]:active {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
button.active,
|
||||
.button.active {
|
||||
color: rgb(var(--button-text-focus-active));
|
||||
}
|
||||
|
||||
button.disabled,
|
||||
button.disabled:hover,
|
||||
button.disabled:focus,
|
||||
@ -96,7 +101,8 @@ button:disabled:active,
|
||||
background-color: rgb(var(--button-border-focus-hover));
|
||||
}
|
||||
|
||||
.button-line:active:after {
|
||||
.button-line:active:after,
|
||||
.button-line.active:after {
|
||||
background-color: rgb(var(--button-border-active));
|
||||
transition: none;
|
||||
}
|
||||
@ -112,6 +118,31 @@ button:disabled:active,
|
||||
background-color: rgb(var(--button-border-disabled));
|
||||
}
|
||||
|
||||
.button-ring {
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.button-ring:focus,
|
||||
.button-ring:hover {
|
||||
box-shadow: var(--form-ring-hover);
|
||||
}
|
||||
|
||||
.button-ring:active,
|
||||
.button-ring.active {
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
.button-ring.disabled,
|
||||
.button-ring:disabled,
|
||||
.button-ring.disabled:focus,
|
||||
.button-ring:disabled:focus,
|
||||
.button-ring.disabled:hover,
|
||||
.button-ring:disabled:hover,
|
||||
.button-ring.disabled:active,
|
||||
.button-ring:disabled:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -124,14 +155,6 @@ button [class*=" icon-"],
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.button.active {
|
||||
color: rgb(var(--button-text-focus-active));
|
||||
}
|
||||
|
||||
.button-line.active:after {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.button-small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
@ -167,19 +190,6 @@ button [class*=" button-"]:last-child,
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.button-ring {
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.button-ring:focus,
|
||||
.button-ring:hover {
|
||||
box-shadow: var(--form-ring-hover);
|
||||
}
|
||||
|
||||
.button-ring:active {
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
.button-link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
112
src/css/form.css
112
src/css/form.css
@ -113,7 +113,7 @@ select {
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
line-height: 2;
|
||||
line-height: 2.5;
|
||||
min-height: 2.5em;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@ -247,7 +247,7 @@ input[type="text"] {
|
||||
font-family: var(--theme-font-ui-name);
|
||||
font-weight: var(--theme-font-ui-weight);
|
||||
font-style: var(--theme-font-ui-style);
|
||||
line-height: 1.6em;
|
||||
line-height: 1.6;
|
||||
height: 2.5em;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@ -1037,6 +1037,57 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
top: inherit;
|
||||
}
|
||||
|
||||
.form-input-button-ring input[type="checkbox"]+label,
|
||||
.form-input-button-ring input[type="radio"]+label,
|
||||
.form-input-button-ring input[type="color"]+label,
|
||||
.form-input-button-ring input[type="file"]+label {
|
||||
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.form-input-button-ring input[type="checkbox"]:focus+label,
|
||||
.form-input-button-ring input[type="checkbox"]:hover+label,
|
||||
.form-input-button-ring input[type="radio"]:focus+label,
|
||||
.form-input-button-ring input[type="radio"]:hover+label,
|
||||
.form-input-button-ring input[type="color"]:focus+label,
|
||||
.form-input-button-ring input[type="color"]:hover+label,
|
||||
.form-input-button-ring input[type="file"]:focus+label,
|
||||
.form-input-button-ring input[type="file"]:hover+label {
|
||||
box-shadow: var(--form-ring-hover);
|
||||
}
|
||||
|
||||
.form-input-button-ring input[type="checkbox"]:active+label,
|
||||
.form-input-button-ring input[type="radio"]:active+label,
|
||||
.form-input-button-ring input[type="color"]:active+label,
|
||||
.form-input-button-ring input[type="file"]:active+label {
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
.form-input-button-ring input[type="checkbox"]:checked+label,
|
||||
.form-input-button-ring input[type="radio"]:checked+label,
|
||||
.form-input-button-ring input[type="color"]:checked+label,
|
||||
.form-input-button-ring input[type="file"]:checked+label {
|
||||
box-shadow: var(--form-ring-accent);
|
||||
}
|
||||
|
||||
.form-input-button-ring input[type="checkbox"]:disabled+label,
|
||||
.form-input-button-ring input[type="checkbox"]:disabled:hover+label,
|
||||
.form-input-button-ring input[type="checkbox"]:disabled:focus+label,
|
||||
.form-input-button-ring input[type="checkbox"]:disabled:active+label,
|
||||
.form-input-button-ring input[type="radio"]:disabled+label,
|
||||
.form-input-button-ring input[type="radio"]:disabled:hover+label,
|
||||
.form-input-button-ring input[type="radio"]:disabled:focus+label,
|
||||
.form-input-button-ring input[type="radio"]:disabled:active+label,
|
||||
.form-input-button-ring input[type="color"]:disabled+label,
|
||||
.form-input-button-ring input[type="color"]:disabled:hover+label,
|
||||
.form-input-button-ring input[type="color"]:disabled:focus+label,
|
||||
.form-input-button-ring input[type="color"]:disabled:active+label,
|
||||
.form-input-button-ring input[type="file"]:disabled+label,
|
||||
.form-input-button-ring input[type="file"]:disabled:hover+label,
|
||||
.form-input-button-ring input[type="file"]:disabled:focus+label,
|
||||
.form-input-button-ring input[type="file"]:disabled:active+label {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-input-button-line input[type="checkbox"]+label:after,
|
||||
.form-input-button-line input[type="radio"]+label:after,
|
||||
.form-input-button-line input[type="color"]+label:after,
|
||||
@ -1349,11 +1400,10 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
|
||||
.form-group .form-group-text,
|
||||
.form-group .button,
|
||||
.form-group .button-line:after,
|
||||
.form-group .form-input-button-line input[type="checkbox"]+label:after,
|
||||
.form-group .form-input-button-line input[type="radio"]+label:after,
|
||||
.form-group .form-input-button-line input[type="color"]+label:after,
|
||||
.form-group .form-input-button-line input[type="file"]+label:after,
|
||||
.form-group .form-input-button input[type="checkbox"]+label,
|
||||
.form-group .form-input-button input[type="radio"]+label,
|
||||
.form-group .form-input-button input[type="color"]+label,
|
||||
.form-group .form-input-button input[type="file"]+label,
|
||||
.form-group>select,
|
||||
.form-group>input[type="email"],
|
||||
.form-group>input[type="number"],
|
||||
@ -1373,12 +1423,24 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-group .button-line:after,
|
||||
.form-group .form-input-button-line input[type="checkbox"]+label:after,
|
||||
.form-group .form-input-button-line input[type="radio"]+label:after,
|
||||
.form-group .form-input-button-line input[type="color"]+label:after,
|
||||
.form-group .form-input-button-line input[type="file"]+label:after {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-group .form-group-text {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-group .form-group-text:focus,
|
||||
.form-group .button:focus,
|
||||
.form-group .form-input-button input[type="checkbox"]:focus+label,
|
||||
.form-group .form-input-button input[type="radio"]:focus+label,
|
||||
.form-group .form-input-button input[type="color"]:focus+label,
|
||||
.form-group .form-input-button input[type="file"]:focus+label,
|
||||
.form-group>select:focus,
|
||||
.form-group>input[type="email"]:focus,
|
||||
.form-group>input[type="number"]:focus,
|
||||
@ -1392,22 +1454,52 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
}
|
||||
|
||||
.form-group .form-group-text:hover,
|
||||
.form-group .form-group-text:active,
|
||||
.form-group .button:hover,
|
||||
.form-group .button:active,
|
||||
.form-group .form-input-button input[type="checkbox"]:hover+label,
|
||||
.form-group .form-input-button input[type="checkbox"]:active+label,
|
||||
.form-group .form-input-button input[type="radio"]:hover+label,
|
||||
.form-group .form-input-button input[type="radio"]:active+label,
|
||||
.form-group .form-input-button input[type="color"]:hover+label,
|
||||
.form-group .form-input-button input[type="color"]:active+label,
|
||||
.form-group .form-input-button input[type="file"]:hover+label,
|
||||
.form-group .form-input-button input[type="file"]:active+label,
|
||||
.form-group>select:hover,
|
||||
.form-group>select:active,
|
||||
.form-group>input[type="email"]:hover,
|
||||
.form-group>input[type="email"]:active,
|
||||
.form-group>input[type="number"]:hover,
|
||||
.form-group>input[type="number"]:active,
|
||||
.form-group>input[type="password"]:hover,
|
||||
.form-group>input[type="password"]:active,
|
||||
.form-group>input[type="search"]:hover,
|
||||
.form-group>input[type="search"]:active,
|
||||
.form-group>input[type="tel"]:hover,
|
||||
.form-group>input[type="tel"]:active,
|
||||
.form-group>input[type="text"]:hover,
|
||||
.form-group>input[type="text"]:active,
|
||||
.form-group>input[type="color"]:hover,
|
||||
.form-group>input[type="range"]:hover {
|
||||
.form-group>input[type="color"]:active,
|
||||
.form-group>input[type="range"]:hover,
|
||||
.form-group>input[type="range"]:active {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.form-group .form-input-button input[type="checkbox"]:checked+label,
|
||||
.form-group .form-input-button input[type="radio"]:checked+label,
|
||||
.form-group .form-input-button input[type="color"]:checked+label,
|
||||
.form-group .form-input-button input[type="file"]:checked+label {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.form-group .form-group-text:first-child,
|
||||
.form-group .button:first-child,
|
||||
.form-group .button-line:first-child:after,
|
||||
.form-group .form-input-button:first-child input[type="checkbox"]+label,
|
||||
.form-group .form-input-button:first-child input[type="radio"]+label,
|
||||
.form-group .form-input-button:first-child input[type="color"]+label,
|
||||
.form-group .form-input-button:first-child input[type="file"]+label,
|
||||
.form-group .form-input-button-line:first-child input[type="checkbox"]+label:after,
|
||||
.form-group .form-input-button-line:first-child input[type="radio"]+label:after,
|
||||
.form-group .form-input-button-line:first-child input[type="color"]+label:after,
|
||||
@ -1427,6 +1519,10 @@ input[type="range"]:disabled::-moz-range-progress {
|
||||
.form-group .form-group-text:last-child,
|
||||
.form-group .button:last-child,
|
||||
.form-group .button-line:last-child:after,
|
||||
.form-group .form-input-button:last-child input[type="checkbox"]+label,
|
||||
.form-group .form-input-button:last-child input[type="radio"]+label,
|
||||
.form-group .form-input-button:last-child input[type="color"]+label,
|
||||
.form-group .form-input-button:last-child input[type="file"]+label,
|
||||
.form-group .form-input-button-line:last-child input[type="checkbox"]+label:after,
|
||||
.form-group .form-input-button-line:last-child input[type="radio"]+label:after,
|
||||
.form-group .form-input-button-line:last-child input[type="color"]+label:after,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "5.21.1";
|
||||
var current = "5.22.0";
|
||||
|
||||
var name = "Zonked Tarsier";
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "5.21.1",
|
||||
"version": "5.22.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
@ -65,73 +65,138 @@
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="button button-small" tabindex="1">Button Small</button>
|
||||
<button class="button" tabindex="1">Button Medium</button>
|
||||
<button class="button button-large" tabindex="1">Button Large</button>
|
||||
<button class="button" tabindex="1">Button</button>
|
||||
<button class="button button-line" tabindex="1">Button line</button>
|
||||
<button class="button button-ring" tabindex="1">Button ring</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="button button-small" tabindex="1">Button small</button>
|
||||
<button class="button" tabindex="1">Button medium</button>
|
||||
<button class="button button-large" tabindex="1">Button large</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-input-button-1" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-input-button-1" class="mb-0"><span class="label-icon"></span>Checkbox Button</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-1" type="radio" name="style-guide-radio-1" tabindex="1">
|
||||
<label for="style-guide-radio-1"><span class="label-icon"></span> Radio Button 1</label>
|
||||
<input id="style-guide-checkbox-button-1" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-1" class="mb-0"><span class="label-icon"></span>Checkbox button</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-2" type="radio" name="style-guide-radio-1" tabindex="1">
|
||||
<label for="style-guide-radio-2"><span class="label-icon"></span> Radio Button 2</label>
|
||||
<div class="form-input-button form-input-button-line">
|
||||
<input id="style-guide-checkbox-button-2" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-2" class="mb-0"><span class="label-icon"></span>Checkbox button line</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-3" type="radio" name="style-guide-radio-1" tabindex="1">
|
||||
<label for="style-guide-radio-3"><span class="label-icon"></span> Radio Button 3</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-input-button-2" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-input-button-2" class="mb-0"><span class="label-icon"></span>Hidden Checkbox Button</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-4" type="radio" name="style-guide-radio-2" tabindex="1">
|
||||
<label for="style-guide-radio-4"><span class="label-icon"></span> Hidden Radio Button 1</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-5" type="radio" name="style-guide-radio-2" tabindex="1">
|
||||
<label for="style-guide-radio-5"><span class="label-icon"></span> Hidden Radio Button 2</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-6" type="radio" name="style-guide-radio-2" tabindex="1">
|
||||
<label for="style-guide-radio-6"><span class="label-icon"></span> Hidden Radio Button 3</label>
|
||||
<div class="form-input-button form-input-button-ring">
|
||||
<input id="style-guide-checkbox-button-3" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-3" class="mb-0"><span class="label-icon"></span>Checkbox button ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-checkbox-button-4" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-4" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-checkbox-button-5" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-5" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-checkbox-button-6" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-6" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-1" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-1"><span class="label-icon"></span> Radio button</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-2" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-2"><span class="label-icon"></span> Radio button</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-3" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-3"><span class="label-icon"></span> Radio button</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-4" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-4"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-5" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-5"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-6" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-6"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-7" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-7"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-8" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-8"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-9" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-9"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-10" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-10"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-11" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-11"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-12" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-12"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button input-color-dot form-input-button-line">
|
||||
<input id="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-1">Hidden Input Colour Button</label>
|
||||
<label for="style-guide-input-color-1">Input color button line</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot">
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-2">Input Colour Button</label>
|
||||
<label for="style-guide-input-color-2">Input color button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-accent">
|
||||
<div class="form-input-button input-color-dot input-color-dot-accent form-input-button-line">
|
||||
<input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-3">Input Colour Accent Button</label>
|
||||
<label for="style-guide-input-color-3">Input color accent button line</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-shade form-input-button-line">
|
||||
<input id="style-guide-input-color-4" type="color" tabindex="1" value="#818aa0">
|
||||
<label for="style-guide-input-color-4">Input color shade button line</label>
|
||||
</div>
|
||||
<div class="form-dropdown form-dropdown-inline">
|
||||
<button class="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
|
||||
<span class="button-text">Button Dropdown</span>
|
||||
<button class="style-guide-form-dropdown form-dropdown-toggle button button-line mb-0" tabindex="1">
|
||||
<span class="button-text">Button dropdown</span>
|
||||
</button>
|
||||
<ul class="list-unstyled form-dropdown-menu">
|
||||
<li>
|
||||
@ -263,7 +328,7 @@
|
||||
<div class="form-group form-group-block mb-0">
|
||||
<input id="style-guide-form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" 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"><span class="button-text">Button</span></button>
|
||||
<button class="button button-line mb-0" tabindex="1"><span class="button-text">Button</span></button>
|
||||
<select id="select-2" class="mb-0" tabindex="1">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user