mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-02-03 20:09:47 +01:00
[design] improve form theme styles
This commit is contained in:
Kombie
GitHub
parent
523ffd6339
commit
6105b378cb
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "3.75.1",
|
||||
"version": "4.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -56,15 +56,15 @@
|
||||
color: rgb(var(--form-input-text-hover));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
|
||||
box-shadow: var(--form-hover-ring);
|
||||
}
|
||||
|
||||
.auto-suggest-link:focus {
|
||||
background-color: rgb(var(--theme-gray-01));
|
||||
color: rgb(var(--form-input-text-focus));
|
||||
color: rgb(var(--form-input-text-focus-active));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
box-shadow: var(--form-focus-ring-accent);
|
||||
}
|
||||
|
||||
.auto-suggest-link:active {
|
||||
|
||||
@ -3,7 +3,7 @@ button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
background-color: rgb(var(--button-background));
|
||||
padding: 0.125em 1em;
|
||||
margin: 0 0 1em 0;
|
||||
color: rgb(var(--button-text));
|
||||
@ -15,7 +15,8 @@ input[type="submit"] {
|
||||
border-top-width: var(--layout-line-width);
|
||||
border-bottom-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: rgb(var(--button-border));
|
||||
border-radius: var(--theme-radius);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
@ -39,9 +40,9 @@ input[type="reset"]:hover,
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:hover,
|
||||
input[type="submit"]:focus {
|
||||
background-color: rgb(var(--theme-gray-03));
|
||||
border-bottom-color: rgb(var(--theme-gray-08));
|
||||
color: rgb(var(--button-text-hover-focus));
|
||||
background-color: rgb(var(--button-background-focus-hover));
|
||||
border-bottom-color: rgb(var(--button-border-focus-hover));
|
||||
color: rgb(var(--button-text-focus-hover));
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -51,8 +52,8 @@ button:active,
|
||||
input[type="button"]:active,
|
||||
input[type="reset"]:active,
|
||||
input[type="submit"]:active {
|
||||
background-color: rgb(var(--theme-gray-04));
|
||||
border-bottom-color: rgb(var(--theme-accent));
|
||||
background-color: rgb(var(--button-background-active));
|
||||
border-bottom-color: rgb(var(--button-border-active));
|
||||
color: rgb(var(--button-text-active));
|
||||
transition: none;
|
||||
text-decoration: none;
|
||||
@ -66,7 +67,7 @@ button:disabled:focus,
|
||||
.button:disabled:focus,
|
||||
button:disabled:active,
|
||||
.button:disabled:active {
|
||||
background-color: rgb(var(--theme-gray-02));
|
||||
background-color: rgb(var(--button-background-disabled));
|
||||
border-color: transparent;
|
||||
color: rgb(var(--button-text-disabled));
|
||||
cursor: default;
|
||||
@ -87,7 +88,7 @@ button [class*=" icon-"],
|
||||
|
||||
.button.active {
|
||||
border-bottom-color: rgb(var(--theme-accent));
|
||||
color: rgb(var(--button-text-active));
|
||||
color: rgb(var(--button-text-focus-active));
|
||||
}
|
||||
|
||||
.button-small {
|
||||
@ -134,7 +135,7 @@ button [class*=" button-"]:last-child,
|
||||
.button-link:hover,
|
||||
.button-link:focus {
|
||||
background-color: transparent;
|
||||
color: rgb(var(--button-link-text-hover-focus));
|
||||
color: rgb(var(--button-link-text-focus-hover));
|
||||
}
|
||||
|
||||
.button-link:active {
|
||||
|
||||
717
src/css/form.css
717
src/css/form.css
File diff suppressed because it is too large
Load Diff
@ -26,30 +26,17 @@
|
||||
.group-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
transition: margin var(--layout-timing-extra-fast) var(--layout-duration-04);
|
||||
}
|
||||
|
||||
.is-group-area-alignment-left .group-header {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-group-area-alignment-center .group-header {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-group-area-alignment-right .group-header {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-start;
|
||||
transition: padding var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-group-name-show .group-header,
|
||||
.is-link-edit .group-header {
|
||||
margin-bottom: calc(var(--layout-space) * var(--layout-gutter));
|
||||
transition: margin var(--layout-timing-extra-fast);
|
||||
padding-bottom: calc(var(--layout-space) * var(--layout-gutter));
|
||||
transition: padding var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.group-name {
|
||||
@ -60,6 +47,7 @@
|
||||
overflow: hidden;
|
||||
font-size: var(--group-name-size);
|
||||
transition: height var(--layout-timing-extra-fast);
|
||||
transition: height var(--layout-timing-extra-fast);
|
||||
}
|
||||
|
||||
.is-group-name-show .group-name {
|
||||
@ -89,6 +77,7 @@
|
||||
}
|
||||
|
||||
.is-link-edit .group-control {
|
||||
margin-right: 1em;
|
||||
height: 2.5em;
|
||||
width: 16em;
|
||||
transition:
|
||||
@ -97,25 +86,11 @@
|
||||
margin var(--layout-timing-extra-fast) var(--layout-duration-04);
|
||||
}
|
||||
|
||||
.is-group-area-alignment-left.is-link-edit .group-control,
|
||||
.is-group-area-alignment-center.is-link-edit .group-control {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.is-group-area-alignment-right.is-link-edit .group-control {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.group-control-item {
|
||||
width: 4em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-control-item .button-icon {
|
||||
padding-left: 0.175em;
|
||||
padding-right: 0.175em;
|
||||
}
|
||||
|
||||
.group-body {
|
||||
font-size: calc(var(--link-item-size) * 1);
|
||||
background-color: transparent;
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
.is-edge .menu-area {
|
||||
opacity: 0.2;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.menu-nav {
|
||||
@ -96,6 +96,7 @@
|
||||
|
||||
.menu-nav-button {
|
||||
background-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
.modal-button {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border-color: transparent;
|
||||
margin: 0;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
|
||||
@ -77,32 +77,93 @@
|
||||
--background-blur: 0;
|
||||
/* form */
|
||||
--form-input-text: var(--theme-gray-16);
|
||||
--form-input-border: 2;
|
||||
--form-input-text-hover: var(--theme-style-text);
|
||||
--form-input-text-focus: var(--theme-style-text);
|
||||
--form-input-text-disabled: var(--theme-gray-02);
|
||||
--form-input-placeholder: var(--theme-gray-06);
|
||||
--form-input-placeholder-hover-focus: var(--theme-gray-10);
|
||||
--form-input-placeholder-disabled: var(--theme-gray-04);
|
||||
--form-label: var(--theme-gray-12);
|
||||
--form-input-text-hover: var(--theme-gray-18);
|
||||
--form-input-text-focus-active: var(--theme-style-text);
|
||||
--form-input-text-disabled: var(--theme-gray-04);
|
||||
--form-input-background: var(--theme-gray-02);
|
||||
--form-input-background-hover: var(--theme-gray-02);
|
||||
--form-input-background-focus-active: var(--theme-gray-01);
|
||||
--form-input-background-disabled: var(--theme-gray-02);
|
||||
--form-input-border: var(--theme-gray-02);
|
||||
--form-input-border-hover: var(--theme-gray-02);
|
||||
--form-input-border-focus-active: var(--theme-gray-01);
|
||||
--form-input-border-disabled: var(--theme-gray-01);
|
||||
--form-group-text-background: var(--theme-gray-02);
|
||||
--form-group-text-background-focus-hover: var(--theme-gray-02);
|
||||
--form-group-text-background-active: var(--theme-gray-02);
|
||||
--form-group-text-background-disabled: var(--theme-gray-02);
|
||||
--form-input-border-disabled: var(--theme-gray-02);
|
||||
--form-border-disabled: var(--theme-gray-02);
|
||||
--form-label: var(--theme-gray-16);
|
||||
--form-label-hover: var(--theme-gray-20);
|
||||
--form-label-focus-active: var(--theme-style-text);
|
||||
--form-label-checked: var(--theme-style-text);
|
||||
--form-label-disabled: var(--theme-gray-04);
|
||||
--form-icon: var(--theme-gray-08);
|
||||
--form-icon-hover-focus: var(--theme-gray-20);
|
||||
--form-icon-active: var(--theme-accent);
|
||||
--form-icon-checked: var(--theme-style-text);
|
||||
--form-icon-disabled: var(--theme-gray-04);
|
||||
--form-placeholder: var(--theme-gray-06);
|
||||
--form-placeholder-focus-hover: var(--theme-gray-10);
|
||||
--form-placeholder-disabled: var(--theme-gray-03);
|
||||
--form-checkbox-radio-label: var(--theme-gray-12);
|
||||
--form-checkbox-radio-checked-label: var(--theme-gray-16);
|
||||
--form-checkbox-radio-disabled-label: var(--theme-gray-04);
|
||||
--form-range-thumb: var(--theme-gray-12);
|
||||
--form-feedback-text: var(--theme-gray-16);
|
||||
--form-feedback-text-muted: var(--theme-gray-12);
|
||||
--form-feedback-text-disabled: var(--theme-gray-04);
|
||||
--form-feedback-background: var(--theme-gray-02);
|
||||
--form-feedback-background-disabled: var(--theme-gray-02);
|
||||
--form-feedback-border: var(--theme-gray-04);
|
||||
--form-feedback-border-disabled: var(--theme-gray-02);
|
||||
--form-helper: var(--theme-gray-12);
|
||||
--form-helper-disabled: var(--theme-gray-06);
|
||||
--form-helper-disabled: var(--theme-gray-04);
|
||||
--form-range-thumb-background: var(--theme-gray-14);
|
||||
--form-range-thumb-background-focus-hover: var(--theme-gray-16);
|
||||
--form-range-thumb-background-active: var(--theme-style-text);
|
||||
--form-range-thumb-background-disabled: var(--theme-gray-04);
|
||||
--form-range-track-background: var(--theme-gray-06);
|
||||
--form-range-track-background-focus-hover: var(--theme-gray-04);
|
||||
--form-range-track-background-active: var(--theme-gray-03);
|
||||
--form-range-track-background-disabled: var(--theme-gray-02);
|
||||
--form-range-progress-background: var(--theme-accent);
|
||||
--form-range-progress-background-focus-hover: var(--theme-accent);
|
||||
--form-range-progress-background-active: var(--theme-accent);
|
||||
--form-range-progress-background-disabled: var(--theme-gray-04);
|
||||
--form-hover-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
|
||||
--form-focus-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25);
|
||||
--form-focus-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||
--form-grid-input-background: var(--theme-gray-12);
|
||||
--form-grid-input-background-focus-hover: var(--theme-gray-16);
|
||||
--form-grid-input-background-active: var(--theme-style-text);
|
||||
--form-grid-input-background-checked: var(--theme-gray-14);
|
||||
--form-grid-input-background-disabled: var(--theme-gray-04);
|
||||
--form-grid-background: var(--theme-gray-02);
|
||||
--form-grid-background-hover: var(--theme-gray-02);
|
||||
--form-grid-background-focus: var(--theme-gray-02);
|
||||
--form-grid-background-disabled: var(--theme-gray-02);
|
||||
--form-grid-border: var(--theme-gray-08);
|
||||
--form-grid-border-hover-focus: var(--theme-gray-20);
|
||||
--form-grid-border-active: var(--theme-accent);
|
||||
--form-grid-border-checked: var(--theme-accent);
|
||||
--form-grid-border-disabled: var(--theme-gray-04);
|
||||
--form-dropdown-background: var(--theme-gray-02);
|
||||
--form-arrow-size: 5px;
|
||||
/* button */
|
||||
--button-background: var(--theme-gray-02);
|
||||
--button-background-focus-hover: var(--theme-gray-03);
|
||||
--button-background-active: var(--theme-gray-04);
|
||||
--button-background-disabled: var(--theme-gray-02);
|
||||
--button-border: var(--theme-gray-02);
|
||||
--button-border-focus-hover: var(--theme-gray-08);
|
||||
--button-border-active: var(--theme-accent);
|
||||
--button-text: var(--theme-gray-12);
|
||||
--button-text-hover-focus: var(--theme-style-text);
|
||||
--button-text-active: var(--theme-style-text);
|
||||
--button-text-focus-hover: var(--theme-style-text);
|
||||
--button-text-focus-active: var(--theme-style-text);
|
||||
--button-text-disabled: var(--theme-gray-04);
|
||||
--button-link-text: var(--theme-gray-12);
|
||||
--button-link-text-hover-focus: var(--theme-style-text);
|
||||
--button-link-text-focus-hover: var(--theme-style-text);
|
||||
--button-link-text-active: var(--theme-style-text);
|
||||
--button-link-text-disabled: var(--theme-gray-04);
|
||||
/* font */
|
||||
|
||||
@ -148,7 +148,7 @@
|
||||
<hr>
|
||||
<label class="control-layout-alignment-label">Area Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x3 form-grid-square control-layout-alignment-grid" tabindex="-1">
|
||||
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-layout-alignment-topleft"><span class="sr-only">Top left</span></label>
|
||||
@ -263,7 +263,7 @@
|
||||
<hr>
|
||||
<label class="control-header-area-alignment-label">Area Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-area-alignment-grid" tabindex="-1">
|
||||
<div class="form-grid form-grid-3x1 control-header-area-alignment-grid">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1">
|
||||
<label for="control-header-area-alignment-left"><span class="sr-only">Left</span></label>
|
||||
@ -282,7 +282,7 @@
|
||||
<hr>
|
||||
<label class="control-header-item-alignment-label">Item Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-item-alignment-grid" tabindex="-1">
|
||||
<div class="form-grid form-grid-3x1 control-header-item-alignment-grid">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1">
|
||||
<label for="control-header-item-alignment-left"><span class="sr-only">Left</span></label>
|
||||
@ -651,7 +651,7 @@
|
||||
<hr>
|
||||
<label class="control-header-search-text-alignment-label">Align Text</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-search-text-alignment-grid" tabindex="-1">
|
||||
<div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid">
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1">
|
||||
<label for="control-header-search-text-alignment-left"><span class="sr-only">Left</span></label>
|
||||
@ -785,7 +785,7 @@
|
||||
<hr>
|
||||
<label class="control-group-area-alignment-label">Group Name Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-group-area-alignment-grid" tabindex="-1">
|
||||
<div class="form-grid form-grid-3x1 control-group-area-alignment-grid">
|
||||
<div class="input-wrap">
|
||||
<input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
|
||||
<label for="control-group-area-alignment-left"><span class="sr-only">Left</span></label>
|
||||
@ -834,7 +834,7 @@
|
||||
<hr>
|
||||
<label class="control-link-area-alignment-label">Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-link-area-alignment-grid" tabindex="-1">
|
||||
<div class="form-grid form-grid-3x1 control-link-area-alignment-grid">
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="-1">
|
||||
<label for="control-link-area-alignment-left"><span class="sr-only">Left</span></label>
|
||||
@ -872,7 +872,7 @@
|
||||
<hr>
|
||||
<label class="control-link-item-display-alignment-label">Content Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
|
||||
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
|
||||
<label for="control-link-item-display-alignment-topleft"><span class="sr-only">Top left</span></label>
|
||||
@ -1068,7 +1068,7 @@
|
||||
<div class="menu-item-form">
|
||||
<div class="input-wrap">
|
||||
<label for="control-theme-accent-current-picker">Colour</label>
|
||||
<div class="form-group mb-0">
|
||||
<div class="form-group form-group-block mb-0">
|
||||
<input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off"
|
||||
autocapitalize="off" spellcheck="false">
|
||||
@ -1150,7 +1150,7 @@
|
||||
</div>
|
||||
<div class="form-indent">
|
||||
<div class="input-wrap">
|
||||
<div class="form-group mb-0">
|
||||
<div class="form-group form-group-block mb-0">
|
||||
<input id="control-background-color-custom-current-picker" class="form-group-item-half control-background-color-custom-current-picker mb-0" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off"
|
||||
autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
|
||||
@ -691,7 +691,7 @@ var link = (function() {
|
||||
var displayIconLable = helper.node("label:Icon|for:link-form-input-display-icon");
|
||||
var displayIconFormIndent = helper.node("div|class:form-indent");
|
||||
var displayIconInputWrap = helper.node("div|class:input-wrap");
|
||||
var displayIconFormGroup = helper.node("div|class:form-group mb-0 auto-suggest-wrapper");
|
||||
var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-wrapper");
|
||||
var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
|
||||
var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1");
|
||||
var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
|
||||
@ -726,7 +726,7 @@ var link = (function() {
|
||||
var accentCustomLabel = helper.node("label:Custom|for:link-form-input-accent-custom");
|
||||
var accentColorFormIndent = helper.node("div|class:form-indent");
|
||||
var accentColorInputWrap = helper.node("div|class:input-wrap");
|
||||
var accentColorFormGroup = helper.node("div|class:form-group mb-0");
|
||||
var accentColorFormGroup = helper.node("div|class:form-group form-group-block mb-0");
|
||||
var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker mb-0,type:color,value:#000000,tabindex:1,disabled");
|
||||
var accentColorHex = helper.node("input|id:link-form-input-accent-hex,class:form-group-item-half link-form-input-accent-hex mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
|
||||
var accentColorInputHelper = helper.node("p:Use this colour to override the global Accent colour.|class:link-form-input-accent-helper form-helper small muted disabled");
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="background-color: rgb(38, 40, 49)" class="is-theme-style-dark">
|
||||
<html lang="en" class="is-background-color-by-theme is-theme-style-dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -42,18 +42,40 @@
|
||||
<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 class="form-group">
|
||||
<button class="button mb-0 style-guide-control disable-on" tabindex="1">Disable</button>
|
||||
<button class="button mb-0 style-guide-control disable-off" tabindex="1">Enable</button>
|
||||
<button class="button mb-0 style-guide-control theme-dark" tabindex="1">Dark</button>
|
||||
<button class="button mb-0 style-guide-control theme-light" tabindex="1">Light</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 class="input-wrap">
|
||||
<label for="radius" class="style-guide-control">Radius</label>
|
||||
<input id="radius" class="style-guide-control radius" type="range" min="0" max="500" value="0" step="20" tabindex="-1">
|
||||
</div>
|
||||
<hr>
|
||||
<div class="button-wrap">
|
||||
<button class="button button-small mb-0" tabindex="1">Button Small</button>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="button mb-0" tabindex="1">Button Medium</button>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<button class="button button-large mb-0" tabindex="1">Button Large</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap input-button">
|
||||
<input id="style-guide-input-button-1" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-input-button-1" class="mb-0">Checkbox Button</label>
|
||||
</div>
|
||||
<div class="input-wrap input-button input-hide">
|
||||
<input id="style-guide-input-button-2" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-input-button-2" class="mb-0">Checkbox Hidden Button</label>
|
||||
</div>
|
||||
<div class="input-wrap input-button input-button-inline input-color-dot">
|
||||
<input id="style-guide-input-button-3" type="color" tabindex="1">
|
||||
<label for="style-guide-input-button-3">Input Colour Button</label>
|
||||
</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>
|
||||
@ -70,34 +92,91 @@
|
||||
<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="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x3">
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-topleft" class="style-guide-form-grid-topleft" type="radio" name="style-guide-form-grid-3x3" value="topleft" tabindex="1" checked>
|
||||
<label for="style-guide-form-grid-topleft"><span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-topcenter" class="style-guide-form-grid-topcenter" type="radio" name="style-guide-form-grid-3x3" value="topcenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-topcenter"><span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-topright" class="style-guide-form-grid-topright" type="radio" name="style-guide-form-grid-3x3" value="topright" tabindex="1">
|
||||
<label for="style-guide-form-grid-topright"><span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-centerleft" class="style-guide-form-grid-centerleft" type="radio" name="style-guide-form-grid-3x3" value="centerleft" tabindex="1">
|
||||
<label for="style-guide-form-grid-centerleft"><span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-centercenter" class="style-guide-form-grid-centercenter" type="radio" name="style-guide-form-grid-3x3" value="centercenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-centercenter"><span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-centerright" class="style-guide-form-grid-centerright" type="radio" name="style-guide-form-grid-3x3" value="centerright" tabindex="1">
|
||||
<label for="style-guide-form-grid-centerright"><span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-bottomleft" class="style-guide-form-grid-bottomleft" type="radio" name="style-guide-form-grid-3x3" value="bottomleft" tabindex="1">
|
||||
<label for="style-guide-form-grid-bottomleft"><span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-bottomcenter" class="style-guide-form-grid-bottomcenter" type="radio" name="style-guide-form-grid-3x3" value="bottomcenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-bottomcenter"><span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-bottomright" class="style-guide-form-grid-bottomright" type="radio" name="style-guide-form-grid-3x3" value="bottomright" tabindex="1">
|
||||
<label for="style-guide-form-grid-bottomright"><span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1">
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-left" class="style-guide-form-grid-left" type="radio" name="style-guide-form-grid-3x1" value="centerleft" tabindex="1" checked>
|
||||
<label for="style-guide-form-grid-left"><span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-center" class="style-guide-form-grid-center" type="radio" name="style-guide-form-grid-3x1" value="centercenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-center"><span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="style-guide-form-grid-right" class="style-guide-form-grid-right" type="radio" name="style-guide-form-grid-3x1" value="centerright" tabindex="1">
|
||||
<label for="style-guide-form-grid-right"><span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<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">
|
||||
<label for="style-guide-input-text">Input Text</label>
|
||||
<input id="style-guide-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>
|
||||
<label for="style-guide-textarea">Textarea</label>
|
||||
<textarea id="style-guide-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">
|
||||
<label for="style-guide-input-range">Input Range</label>
|
||||
<input id="style-guide-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">
|
||||
<label for="style-guide-input-colour">Input Colour</label>
|
||||
<input id="style-guide-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">
|
||||
<label for="style-guide-select-1">Select</label>
|
||||
<select id="style-guide-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">
|
||||
<label for="style-guide-form-group-1">Form Group</label>
|
||||
<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" 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">
|
||||
@ -108,8 +187,80 @@
|
||||
<div class="form-group-text" tabindex="1">Form Group Text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feedback-wrap">
|
||||
<div class="form-feedback">
|
||||
<p class="muted">Form feedback.</p>
|
||||
<p class="muted small">With some small text.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="js/helper.js"></script>
|
||||
<script type="text/javascript">
|
||||
var formElements = ["button", "input", "textarea", "select"];
|
||||
var textElements = ["label", ".form-group-text", ".form-grid", ".form-feedback"];
|
||||
var disable = {
|
||||
on: function() {
|
||||
formElements.forEach(function(arrayItem, index) {
|
||||
helper.eA(arrayItem).forEach(function(arrayItem, index) {
|
||||
if (!arrayItem.classList.contains("style-guide-control")) {
|
||||
arrayItem.setAttribute("disabled", "");
|
||||
};
|
||||
});
|
||||
});
|
||||
textElements.forEach(function(arrayItem, index) {
|
||||
helper.eA(arrayItem).forEach(function(arrayItem, index) {
|
||||
if (!arrayItem.classList.contains("style-guide-control")) {
|
||||
helper.addClass(arrayItem, "disabled");
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
off: function() {
|
||||
formElements.forEach(function(arrayItem, index) {
|
||||
helper.eA(arrayItem).forEach(function(arrayItem, index) {
|
||||
if (!arrayItem.classList.contains("style-guide-control")) {
|
||||
arrayItem.removeAttribute("disabled");
|
||||
};
|
||||
});
|
||||
});
|
||||
textElements.forEach(function(arrayItem, index) {
|
||||
helper.eA(arrayItem).forEach(function(arrayItem, index) {
|
||||
if (!arrayItem.classList.contains("style-guide-control")) {
|
||||
helper.removeClass(arrayItem, "disabled");
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
var theme = {
|
||||
dark: function() {
|
||||
helper.removeClass(helper.e("html"), "is-theme-style-light");
|
||||
helper.addClass(helper.e("html"), "is-theme-style-dark");
|
||||
},
|
||||
light: function() {
|
||||
helper.addClass(helper.e("html"), "is-theme-style-light");
|
||||
helper.removeClass(helper.e("html"), "is-theme-style-dark");
|
||||
},
|
||||
};
|
||||
helper.e(".disable-on").addEventListener("click", function() {
|
||||
disable.on();
|
||||
}, false);
|
||||
helper.e(".disable-off").addEventListener("click", function() {
|
||||
disable.off();
|
||||
}, false);
|
||||
helper.e(".theme-dark").addEventListener("click", function() {
|
||||
theme.dark();
|
||||
}, false);
|
||||
helper.e(".theme-light").addEventListener("click", function() {
|
||||
theme.light();
|
||||
}, false);
|
||||
helper.e(".radius").addEventListener("input", function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--theme-radius", (parseInt(this.value, 10) / 100) + "rem");
|
||||
}, false);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user