extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-25 08:09:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form group spacing

Browse Source
This commit is contained in:
Kombie 2020-01-13 01:33:57 +00:00 committed by GitHub
parent b841a3ebdb
commit 716396fb6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 1827 additions and 1539 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/css/button.css
View File

@ -5,7 +5,7 @@ input[type="reset"],
input[type="submit"] {
background-color: rgb(var(--button-background));
padding: 0.25em 1em;
margin: 0 0 1em 0;
margin: 0;
color: rgb(var(--button-text));
font-size: 1em;
font-family: var(--theme-font-ui-name);
@ -207,11 +207,3 @@ button [class*=" button-"]:last-child,
background-color: transparent;
color: transparent;
}
.button-wrap {
padding: 0.5em 0;
position: relative;
width: 100%;
display: flex;
flex-direction: row;
}

488
src/css/form.css
View File

@ -1,3 +1,76 @@
/* form variants */
.form-wrap,
.form-helper {
position: relative;
width: 100%;
display: block;
}
.form-wrap:not(:first-child) {
margin-top: var(--form-wrap-space);
}
.form-wrap:not(:last-child) {
margin-bottom: var(--form-wrap-space);
}
.form-wrap-hide-space:not(:first-child),
.form-wrap-hide-space:not(:last-child) {
margin-top: calc(var(--form-wrap-space) * -1);
margin-bottom: 0;
}
.form-helper:not(:first-child) {
margin-top: calc(var(--form-wrap-space) / 2);
}
.form-helper:not(:last-child) {
margin-bottom: calc(var(--form-wrap-space) / 2);
}
.form-indent {
margin-left: calc(var(--form-wrap-space) * 3);
}
.form-inline {
margin: calc(calc(var(--form-wrap-space) / 2) * -1);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.form-inline>*,
.form-inline>.form-wrap:not(:first-child),
.form-inline>.form-wrap:not(:last-child) {
margin: calc(var(--form-wrap-space) / 2);
flex-grow: 0;
width: initial;
display: inline-block;
}
.form-inline-spacer>*.form-wrap:not(:last-child) {
margin-right: calc(var(--form-wrap-space) * 3);
}
.form-inline-space-between {
justify-content: space-between;
}
.form-inline-space-around {
justify-content: space-around;
}
.form-sticky {
background-color: rgb(var(--theme-color-01));
margin: -1.5em -1em 0 -1em;
padding: 1.5em 1em 1em 1em;
position: sticky;
top: 0;
z-index: 2;
}
/* label */
label {
padding: 0;
@ -5,10 +78,11 @@ label {
margin-bottom: 0;
font-size: 1em;
display: block;
transition: color var(--layout-timing-extra-fast);
}
label:not(:only-child):not(:last-child) {
padding-bottom: 0.5em;
padding-bottom: calc(var(--form-wrap-space) / 2);
}
label.disabled {
@ -29,7 +103,7 @@ select {
0.5em 0.375em;
background-repeat: no-repeat;
padding: 0 3em 0 1em;
margin: 0 0 1em 0;
margin: 0;
color: rgb(var(--form-label));
font-size: 1em;
font-family: var(--theme-font-ui-name);
@ -92,7 +166,7 @@ select:disabled:active {
textarea {
background-color: rgb(var(--form-input-background));
padding: 0.25em 1em;
margin: 0 0 1em 0;
margin: 0;
color: rgb(var(--form-input-text));
font-size: 1em;
line-height: 1.6;
@ -173,7 +247,7 @@ input[type="tel"],
input[type="text"] {
background-color: rgb(var(--form-input-background));
padding: 0 1em;
margin: 0 0 1em 0;
margin: 0;
color: rgb(var(--form-input-text));
font-size: 1em;
font-family: var(--theme-font-ui-name);
@ -539,7 +613,7 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
input[type="color"] {
background-color: transparent;
padding: 0;
margin: 0 0 1em 0;
margin: 0;
width: 100%;
min-width: 3em;
height: 2.5em;
@ -830,38 +904,26 @@ input[type="range"]:disabled::-moz-range-progress {
}
/* form helper */
.form-helper {
padding: 0.5em 0;
.form-helper-item {
font-size: 0.8em;
color: rgb(var(--form-helper));
transition: color var(--layout-timing-extra-fast);
}
.form-helper.disabled {
.form-helper-item.disabled {
color: rgb(var(--form-helper-disabled));
}
.form-helper:not(:last-child) {
margin-bottom: 0;
}
/* input variants */
.input-wrap {
padding: 0.5em 0;
/* form input button */
.form-input-button {
position: relative;
width: 100%;
display: block;
}
.input-button-inline {
width: initial;
display: inline-block;
}
/* input button */
.input-button input[type="checkbox"]+label,
.input-button input[type="radio"]+label,
.input-button input[type="color"]+label,
.input-button input[type="file"]+label {
.form-input-button input[type="checkbox"]+label,
.form-input-button input[type="radio"]+label,
.form-input-button input[type="color"]+label,
.form-input-button input[type="file"]+label {
background-color: rgb(var(--button-background));
padding: 0.25em 1em;
margin: 0;
@ -888,24 +950,24 @@ input[type="range"]:disabled::-moz-range-progress {
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}
.input-button input[type="checkbox"]:focus+label,
.input-button input[type="checkbox"]:hover+label,
.input-button input[type="radio"]:focus+label,
.input-button input[type="radio"]:hover+label,
.input-button input[type="color"]:focus+label,
.input-button input[type="color"]:hover+label,
.input-button input[type="file"]:focus+label,
.input-button input[type="file"]:hover+label {
.form-input-button input[type="checkbox"]:focus+label,
.form-input-button input[type="checkbox"]:hover+label,
.form-input-button input[type="radio"]:focus+label,
.form-input-button input[type="radio"]:hover+label,
.form-input-button input[type="color"]:focus+label,
.form-input-button input[type="color"]:hover+label,
.form-input-button input[type="file"]:focus+label,
.form-input-button input[type="file"]:hover+label {
background-color: rgb(var(--button-background-focus-hover));
color: rgb(var(--button-text-focus-hover));
outline: none;
text-decoration: none;
}
.input-button input[type="checkbox"]:active+label,
.input-button input[type="radio"]:active+label,
.input-button input[type="color"]:active+label,
.input-button input[type="file"]:active+label {
.form-input-button input[type="checkbox"]:active+label,
.form-input-button input[type="radio"]:active+label,
.form-input-button input[type="color"]:active+label,
.form-input-button input[type="file"]:active+label {
background-color: rgb(var(--button-background-active));
color: rgb(var(--button-text-active));
outline: none;
@ -913,10 +975,10 @@ input[type="range"]:disabled::-moz-range-progress {
transition: none;
}
.input-button input[type="checkbox"]:checked+label,
.input-button input[type="radio"]:checked+label,
.input-button input[type="color"]:checked+label,
.input-button input[type="file"]:checked+label {
.form-input-button input[type="checkbox"]:checked+label,
.form-input-button input[type="radio"]:checked+label,
.form-input-button input[type="color"]:checked+label,
.form-input-button input[type="file"]:checked+label {
background-color: rgb(var(--button-background-active));
color: rgb(var(--button-text-active));
outline: none;
@ -924,37 +986,37 @@ input[type="range"]:disabled::-moz-range-progress {
transition: none;
}
.input-button input[type="checkbox"]:disabled+label,
.input-button input[type="checkbox"]:disabled:hover+label,
.input-button input[type="checkbox"]:disabled:focus+label,
.input-button input[type="checkbox"]:disabled:active+label,
.input-button input[type="radio"]:disabled+label,
.input-button input[type="radio"]:disabled:hover+label,
.input-button input[type="radio"]:disabled:focus+label,
.input-button input[type="radio"]:disabled:active+label,
.input-button input[type="color"]:disabled+label,
.input-button input[type="color"]:disabled:hover+label,
.input-button input[type="color"]:disabled:focus+label,
.input-button input[type="color"]:disabled:active+label,
.input-button input[type="file"]:disabled+label,
.input-button input[type="file"]:disabled:hover+label,
.input-button input[type="file"]:disabled:focus+label,
.input-button input[type="file"]:disabled:active+label {
.form-input-button input[type="checkbox"]:disabled+label,
.form-input-button input[type="checkbox"]:disabled:hover+label,
.form-input-button input[type="checkbox"]:disabled:focus+label,
.form-input-button input[type="checkbox"]:disabled:active+label,
.form-input-button input[type="radio"]:disabled+label,
.form-input-button input[type="radio"]:disabled:hover+label,
.form-input-button input[type="radio"]:disabled:focus+label,
.form-input-button input[type="radio"]:disabled:active+label,
.form-input-button input[type="color"]:disabled+label,
.form-input-button input[type="color"]:disabled:hover+label,
.form-input-button input[type="color"]:disabled:focus+label,
.form-input-button input[type="color"]:disabled:active+label,
.form-input-button input[type="file"]:disabled+label,
.form-input-button input[type="file"]:disabled:hover+label,
.form-input-button input[type="file"]:disabled:focus+label,
.form-input-button input[type="file"]:disabled:active+label {
background-color: rgb(var(--button-background-disabled));
color: rgb(var(--button-text-disabled));
cursor: default;
text-decoration: none;
}
.input-button input[type="checkbox"]+label .label-icon,
.input-button input[type="radio"]+label .label-icon {
.form-input-button input[type="checkbox"]+label .label-icon,
.form-input-button input[type="radio"]+label .label-icon {
top: inherit;
}
.input-button input[type="checkbox"]+label:after,
.input-button input[type="radio"]+label:after,
.input-button input[type="color"]+label:after,
.input-button input[type="file"]+label:after {
.form-input-button input[type="checkbox"]+label:after,
.form-input-button input[type="radio"]+label:after,
.form-input-button input[type="color"]+label:after,
.form-input-button input[type="file"]+label:after {
background: rgb(var(--button-border));
position: absolute;
content: "";
@ -965,105 +1027,105 @@ input[type="range"]:disabled::-moz-range-progress {
transition: background-color var(--layout-timing-extra-fast);
}
.input-button input[type="checkbox"]:focus+label:after,
.input-button input[type="checkbox"]:hover+label:after,
.input-button input[type="radio"]:focus+label:after,
.input-button input[type="radio"]:hover+label:after,
.input-button input[type="color"]:focus+label:after,
.input-button input[type="color"]:hover+label:after,
.input-button input[type="file"]:focus+label:after,
.input-button input[type="file"]:hover+label:after {
.form-input-button input[type="checkbox"]:focus+label:after,
.form-input-button input[type="checkbox"]:hover+label:after,
.form-input-button input[type="radio"]:focus+label:after,
.form-input-button input[type="radio"]:hover+label:after,
.form-input-button input[type="color"]:focus+label:after,
.form-input-button input[type="color"]:hover+label:after,
.form-input-button input[type="file"]:focus+label:after,
.form-input-button input[type="file"]:hover+label:after {
background-color: rgb(var(--button-border-focus-hover));
}
.input-button input[type="checkbox"]:active+label:after,
.input-button input[type="radio"]:active+label:after,
.input-button input[type="color"]:active+label:after,
.input-button input[type="file"]:active+label:after {
.form-input-button input[type="checkbox"]:active+label:after,
.form-input-button input[type="radio"]:active+label:after,
.form-input-button input[type="color"]:active+label:after,
.form-input-button input[type="file"]:active+label:after {
background-color: rgb(var(--button-border-active));
transition: none;
}
.input-button input[type="checkbox"]:checked+label:after,
.input-button input[type="radio"]:checked+label:after,
.input-button input[type="color"]:checked+label:after,
.input-button input[type="file"]:checked+label:after {
.form-input-button input[type="checkbox"]:checked+label:after,
.form-input-button input[type="radio"]:checked+label:after,
.form-input-button input[type="color"]:checked+label:after,
.form-input-button input[type="file"]:checked+label:after {
background-color: rgb(var(--button-border-active));
transition: none;
}
.input-button input[type="checkbox"]:disabled+label:after,
.input-button input[type="checkbox"]:disabled:hover+label:after,
.input-button input[type="checkbox"]:disabled:focus+label:after,
.input-button input[type="checkbox"]:disabled:active+label:after,
.input-button input[type="radio"]:disabled+label:after,
.input-button input[type="radio"]:disabled:hover+label:after,
.input-button input[type="radio"]:disabled:focus+label:after,
.input-button input[type="radio"]:disabled:active+label:after,
.input-button input[type="color"]:disabled+label:after,
.input-button input[type="color"]:disabled:hover+label:after,
.input-button input[type="color"]:disabled:focus+label:after,
.input-button input[type="color"]:disabled:active+label:after,
.input-button input[type="file"]:disabled+label:after,
.input-button input[type="file"]:disabled:hover+label:after,
.input-button input[type="file"]:disabled:focus+label:after,
.input-button input[type="file"]:disabled:active+label:after {
.form-input-button input[type="checkbox"]:disabled+label:after,
.form-input-button input[type="checkbox"]:disabled:hover+label:after,
.form-input-button input[type="checkbox"]:disabled:focus+label:after,
.form-input-button input[type="checkbox"]:disabled:active+label:after,
.form-input-button input[type="radio"]:disabled+label:after,
.form-input-button input[type="radio"]:disabled:hover+label:after,
.form-input-button input[type="radio"]:disabled:focus+label:after,
.form-input-button input[type="radio"]:disabled:active+label:after,
.form-input-button input[type="color"]:disabled+label:after,
.form-input-button input[type="color"]:disabled:hover+label:after,
.form-input-button input[type="color"]:disabled:focus+label:after,
.form-input-button input[type="color"]:disabled:active+label:after,
.form-input-button input[type="file"]:disabled+label:after,
.form-input-button input[type="file"]:disabled:hover+label:after,
.form-input-button input[type="file"]:disabled:focus+label:after,
.form-input-button input[type="file"]:disabled:active+label:after {
background-color: rgb(var(--button-border-disabled));
}
/* input button link */
.input-button-link input[type="checkbox"]+label,
.input-button-link input[type="radio"]+label,
.input-button-link input[type="color"]+label,
.input-button-link input[type="file"]+label {
/* form input button link */
.form-input-button-link input[type="checkbox"]+label,
.form-input-button-link input[type="radio"]+label,
.form-input-button-link input[type="color"]+label,
.form-input-button-link input[type="file"]+label {
background-color: transparent;
}
.input-button-link input[type="checkbox"]:hover+label,
.input-button-link input[type="checkbox"]:focus+label,
.input-button-link input[type="checkbox"]:checked+label,
.input-button-link input[type="radio"]:hover+label,
.input-button-link input[type="radio"]:focus+label,
.input-button-link input[type="radio"]:checked+label,
.input-button-link input[type="color"]:hover+label,
.input-button-link input[type="color"]:focus+label,
.input-button-link input[type="color"]:checked+label,
.input-button-link input[type="file"]:hover+label,
.input-button-link input[type="file"]:focus+label,
.input-button-link input[type="file"]:checked+label {
.form-input-button-link input[type="checkbox"]:hover+label,
.form-input-button-link input[type="checkbox"]:focus+label,
.form-input-button-link input[type="checkbox"]:checked+label,
.form-input-button-link input[type="radio"]:hover+label,
.form-input-button-link input[type="radio"]:focus+label,
.form-input-button-link input[type="radio"]:checked+label,
.form-input-button-link input[type="color"]:hover+label,
.form-input-button-link input[type="color"]:focus+label,
.form-input-button-link input[type="color"]:checked+label,
.form-input-button-link input[type="file"]:hover+label,
.form-input-button-link input[type="file"]:focus+label,
.form-input-button-link input[type="file"]:checked+label {
background-color: transparent;
}
.input-button-link input[type="checkbox"]:active+label,
.input-button-link input[type="radio"]:active+label,
.input-button-link input[type="color"]:active+label,
.input-button-link input[type="file"]:active+label {
.form-input-button-link input[type="checkbox"]:active+label,
.form-input-button-link input[type="radio"]:active+label,
.form-input-button-link input[type="color"]:active+label,
.form-input-button-link input[type="file"]:active+label {
background-color: transparent;
}
.input-button-link input:disabled[type="checkbox"]+label,
.input-button-link input:disabled[type="radio"]+label,
.input-button-link input:disabled[type="color"]+label,
.input-button-link input:disabled[type="file"]+label {
.form-input-button-link input:disabled[type="checkbox"]+label,
.form-input-button-link input:disabled[type="radio"]+label,
.form-input-button-link input:disabled[type="color"]+label,
.form-input-button-link input:disabled[type="file"]+label {
background-color: transparent;
pointer-events: none;
}
.input-button-link input:disabled[type="checkbox"]:hover+label,
.input-button-link input:disabled[type="checkbox"]:focus+label,
.input-button-link input:disabled[type="radio"]:hover+label,
.input-button-link input:disabled[type="radio"]:focus+label,
.input-button-link input:disabled[type="color"]:hover+label,
.input-button-link input:disabled[type="color"]:focus+label,
.input-button-link input:disabled[type="file"]:hover+label,
.input-button-link input:disabled[type="file"]:focus+label {
.form-input-button-link input:disabled[type="checkbox"]:hover+label,
.form-input-button-link input:disabled[type="checkbox"]:focus+label,
.form-input-button-link input:disabled[type="radio"]:hover+label,
.form-input-button-link input:disabled[type="radio"]:focus+label,
.form-input-button-link input:disabled[type="color"]:hover+label,
.form-input-button-link input:disabled[type="color"]:focus+label,
.form-input-button-link input:disabled[type="file"]:hover+label,
.form-input-button-link input:disabled[type="file"]:focus+label {
background-color: transparent;
}
.input-button-link input[type="checkbox"]+label:after,
.input-button-link input[type="radio"]+label:after,
.input-button-link input[type="color"]+label:after,
.input-button-link input[type="file"]+label:after {
.form-input-button-link input[type="checkbox"]+label:after,
.form-input-button-link input[type="radio"]+label:after,
.form-input-button-link input[type="color"]+label:after,
.form-input-button-link input[type="file"]+label:after {
content: none;
}
@ -1108,17 +1170,17 @@ input[type="range"]:disabled::-moz-range-progress {
position: relative;
}
.input-hide input[type="checkbox"]+label .label-icon,
.input-hide input[type="checkbox"]:checked+label .label-icon,
.input-hide input[type="radio"]+label .label-icon,
.input-hide input[type="radio"]:checked+label .label-icon,
.input-hide input[type="file"]+label .label-icon,
.input-hide input[type="file"]:checked+label .label-icon {
.form-input-hide input[type="checkbox"]+label .label-icon,
.form-input-hide input[type="checkbox"]:checked+label .label-icon,
.form-input-hide input[type="radio"]+label .label-icon,
.form-input-hide input[type="radio"]:checked+label .label-icon,
.form-input-hide input[type="file"]+label .label-icon,
.form-input-hide input[type="file"]:checked+label .label-icon {
display: none;
}
.input-hide input[type="color"],
.input-hide input[type="file"] {
.form-input-hide input[type="color"],
.form-input-hide input[type="file"] {
margin: 0;
opacity: 0;
width: 1px;
@ -1131,13 +1193,7 @@ input[type="range"]:disabled::-moz-range-progress {
-webkit-appearance: none;
}
/* form variants */
.form-grid-wrap {
padding: 0.5em 0;
position: relative;
width: 100%;
}
/* form grid */
.form-grid {
background-color: rgb(var(--form-grid-background));
padding: calc(var(--form-thumb-size) / 2);
@ -1174,8 +1230,9 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: var(--theme-radius);
}
.form-grid .input-wrap {
padding: 0;
.form-grid .form-wrap {
margin-top: 0;
margin-bottom: 0;
}
.form-grid input[type="checkbox"]+label,
@ -1207,36 +1264,67 @@ input[type="range"]:disabled::-moz-range-progress {
transform: translate(-50%, -50%);
}
.form-indent {
margin-left: 2.25em;
.form-grid-3x3 {
--radiusPart: calc(var(--theme-radius) / 20);
--responsivePos: calc(var(--radiusPart) + -50%);
--responsiveNeg: calc(calc(var(--radiusPart) * -1) + -50%);
}
.form-inline {
margin-left: -0.5em;
margin-right: -0.5em;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
.form-grid-3x3 .form-wrap:nth-child(1) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(1) input[type="radio"]+label .label-icon {
transform: translate(var(--responsivePos), var(--responsivePos));
}
.form-inline>* {
padding-left: 0.5em;
padding-right: 0.5em;
width: initial;
.form-grid-3x3 .form-wrap:nth-child(2) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(2) input[type="radio"]+label .label-icon {
transform: translate(-50%, var(--responsivePos));
}
.form-grid-3x3 .form-wrap:nth-child(3) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(3) input[type="radio"]+label .label-icon {
transform: translate(var(--responsiveNeg), var(--responsivePos));
}
.form-grid-3x3 .form-wrap:nth-child(4) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(4) input[type="radio"]+label .label-icon {
transform: translate(var(--responsivePos), -50%);
}
.form-grid-3x3 .form-wrap:nth-child(6) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(6) input[type="radio"]+label .label-icon {
transform: translate(var(--responsiveNeg), -50%);
}
.form-grid-3x3 .form-wrap:nth-child(7) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(7) input[type="radio"]+label .label-icon {
transform: translate(var(--responsivePos), var(--responsiveNeg));
}
.form-grid-3x3 .form-wrap:nth-child(8) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(8) input[type="radio"]+label .label-icon {
transform: translate(-50%, var(--responsiveNeg));
}
.form-grid-3x3 .form-wrap:nth-child(9) input[type="checkbox"]+label .label-icon,
.form-grid-3x3 .form-wrap:nth-child(9) input[type="radio"]+label .label-icon {
transform: translate(var(--responsiveNeg), var(--responsiveNeg));
}
/* form group */
.form-group {
margin: 0 0 1em 0;
position: relative;
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
position: relative;
z-index: 1;
}
.form-group .form-wrap {
margin-top: 0;
margin-bottom: 0;
}
.form-group .form-group-text,
.form-group .button,
.form-group>select,
@ -1339,27 +1427,27 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: var(--theme-radius);
}
.form-group.nested-button * .button,
.form-group.nested-button *:first-child .button:after,
.form-group.nested-button * input[type="checkbox"]+label,
.form-group.nested-button * input[type="radio"]+label,
.form-group.nested-button * input[type="color"]+label {
.form-group.form-group-nested-button * .button,
.form-group.form-group-nested-button *:first-child .button:after,
.form-group.form-group-nested-button * input[type="checkbox"]+label,
.form-group.form-group-nested-button * input[type="radio"]+label,
.form-group.form-group-nested-button * input[type="color"]+label {
border-radius: 0;
}
.form-group.nested-button *:first-child .button,
.form-group.nested-button *:first-child .button:after,
.form-group.nested-button *:first-child input[type="checkbox"]+label,
.form-group.nested-button *:first-child input[type="radio"]+label,
.form-group.nested-button *:first-child input[type="color"]+label {
.form-group.form-group-nested-button *:first-child .button,
.form-group.form-group-nested-button *:first-child .button:after,
.form-group.form-group-nested-button *:first-child input[type="checkbox"]+label,
.form-group.form-group-nested-button *:first-child input[type="radio"]+label,
.form-group.form-group-nested-button *:first-child input[type="color"]+label {
border-radius: var(--theme-radius) 0 0 var(--theme-radius);
}
.form-group.nested-button *:last-child .button,
.form-group.nested-button *:last-child .button:after,
.form-group.nested-button *:last-child input[type="checkbox"]+label,
.form-group.nested-button *:last-child input[type="radio"]+label,
.form-group.nested-button *:last-child input[type="color"]+label {
.form-group.form-group-nested-button *:last-child .button,
.form-group.form-group-nested-button *:last-child .button:after,
.form-group.form-group-nested-button *:last-child input[type="checkbox"]+label,
.form-group.form-group-nested-button *:last-child input[type="radio"]+label,
.form-group.form-group-nested-button *:last-child input[type="color"]+label {
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}
@ -1406,10 +1494,6 @@ input[type="range"]:disabled::-moz-range-progress {
overflow: hidden;
}
.form-group-wrap {
padding: 0.5em 0;
}
.form-group.form-group-border .form-group-text,
.form-group.form-group-border .button,
.form-group.form-group-border .button:after,
@ -1422,11 +1506,11 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group.form-group-border>input[type="text"],
.form-group.form-group-border>input[type="color"],
.form-group.form-group-border>input[type="range"],
.form-group.form-group-border.nested-button * .button,
.form-group.form-group-border.nested-button * .button:after,
.form-group.form-group-border.nested-button * input[type="checkbox"]+label,
.form-group.form-group-border.nested-button * input[type="radio"]+label,
.form-group.form-group-border.nested-button * input[type="color"]+label {
.form-group.form-group-border.form-group-nested-button * .button,
.form-group.form-group-border.form-group-nested-button * .button:after,
.form-group.form-group-border.form-group-nested-button * input[type="checkbox"]+label,
.form-group.form-group-border.form-group-nested-button * input[type="radio"]+label,
.form-group.form-group-border.form-group-nested-button * input[type="color"]+label {
border-radius: 0;
}
@ -1588,23 +1672,18 @@ input[type="range"]:disabled::-moz-range-progress {
content: none;
}
.form-group.nested-button .form-dropdown-menu *:first-child .button,
.form-group.nested-button .form-dropdown-menu *:last-child .button,
.form-group.nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label,
.form-group.nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label,
.form-group.nested-button .form-dropdown-menu *:first-child input[type="radio"]+label,
.form-group.nested-button .form-dropdown-menu *:last-child input[type="radio"]+label,
.form-group.nested-button .form-dropdown-menu *:first-child input[type="color"]+label,
.form-group.nested-button .form-dropdown-menu *:last-child input[type="color"]+label {
.form-group.form-group-nested-button .form-dropdown-menu *:first-child .button,
.form-group.form-group-nested-button .form-dropdown-menu *:last-child .button,
.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label,
.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label,
.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="radio"]+label,
.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="radio"]+label,
.form-group.form-group-nested-button .form-dropdown-menu *:first-child input[type="color"]+label,
.form-group.form-group-nested-button .form-dropdown-menu *:last-child input[type="color"]+label {
border-radius: 0;
}
.feedback-wrap {
padding: 0.5em 0;
position: relative;
width: 100%;
}
/* form feedback */
.form-feedback {
padding: 0.5em 1.5em 0.5em 1em;
background-color: rgb(var(--form-feedback-background));
@ -1614,6 +1693,7 @@ input[type="range"]:disabled::-moz-range-progress {
border-color: rgb(var(--form-feedback-border));
border-top-right-radius: var(--theme-radius);
border-bottom-right-radius: var(--theme-radius);
width: 100%;
}
.form-feedback p {

6
src/css/link.css
View File

@ -71,9 +71,13 @@
flex-direction: row;
}
.is-link-style-list .link-item.link-empty>*:not(:only-child),
.is-link-style-block .link-item.link-empty>*:not(:last-child) {
margin-bottom: 0.5em;
}
.is-link-style-list .link-item.link-empty>*:not(:last-child) {
margin-right: 0.5em;
margin-bottom: 0;
}
.is-link-item-hoverscale-show .link-item.link-empty:hover {

9
src/css/menu.css
View File

@ -94,15 +94,6 @@
z-index: 1;
}
.menu-item-form-sticky {
background-color: rgb(var(--theme-color-01));
margin: -1.5em -1em 0 -1em;
padding: 1.5em 1em 1em 1em;
position: sticky;
top: 0;
z-index: 2;
}
.menu-nav-button {
background-color: transparent;
margin: 0;

3
src/css/theme.css
View File

@ -3,8 +3,6 @@
width: var(--theme-preview-size);
height: var(--theme-preview-size);
border-radius: var(--theme-radius);
padding: 0;
margin: 0.5em;
position: relative;
overflow: hidden;
}
@ -270,7 +268,6 @@
.theme-shadow-box {
background-color: rgb(var(--theme-color-02));
border-radius: var(--theme-radius);
margin: 0;
padding: 0.5em;
width: 5em;
height: 5em;

4
src/css/typography.css
View File

@ -64,10 +64,6 @@ p:not(:last-child) {
margin-bottom: 0.5em;
}
.p-wrap {
padding: 0.5em 0;
}
hr {
border: 0;
border-top: var(--horizontal-rule);

1
src/css/variables.css
View File

@ -211,6 +211,7 @@
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
--form-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-wrap-space: 0.75em;
/* button */
--button-background: var(--theme-color-02);
--button-background-focus-hover: var(--theme-color-03);

1201
src/index.html
View File

File diff suppressed because it is too large Load Diff

156
src/js/control.js
View File

@ -90,6 +90,75 @@ var control = (function() {
theme.render.accent.input.hex();
link.groupAndItems();
}
}, {
element: helper.e(".control-layout-size"),
path: "layout.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-layout-size-count"),
additionalEvents: [{
event: "input",
func: function() {
edge.box.open({
element: helper.e(".layout"),
});
}
}, {
event: "mousedown",
func: function() {
edge.box.open({
element: helper.e(".layout"),
});
}
}, {
event: "mouseup",
func: function() {
edge.box.close();
}
}, {
event: "touchend",
func: function() {
edge.box.close();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.box.open({
element: helper.e(".layout"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.box.close();
}
}],
func: function() {
layout.render.size();
render.range.count(this);
}
}, {
element: helper.e(".control-layout-size-default"),
type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.box.open({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() {
mod.setValue("layout.size", helper.getObject({
object: state.get.default(),
path: "layout.size"
}));
layout.render.size();
render.update();
}
}, {
element: helper.e(".control-layout-width"),
path: "layout.width",
@ -376,75 +445,6 @@ var control = (function() {
layout.render.gutter();
render.update();
}
}, {
element: helper.e(".control-layout-size"),
path: "layout.size",
type: "range",
valueMod: ["float"],
rangeCountElement: helper.e(".control-layout-size-count"),
additionalEvents: [{
event: "input",
func: function() {
edge.box.open({
element: helper.e(".layout"),
});
}
}, {
event: "mousedown",
func: function() {
edge.box.open({
element: helper.e(".layout"),
});
}
}, {
event: "mouseup",
func: function() {
edge.box.close();
}
}, {
event: "touchend",
func: function() {
edge.box.close();
}
}, {
event: "keydown",
func: function() {
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
edge.box.open({
element: helper.e(".layout"),
});
};
}
}, {
event: "keyup",
func: function() {
edge.box.close();
}
}],
func: function() {
layout.render.size();
render.range.count(this);
}
}, {
element: helper.e(".control-layout-size-default"),
type: "button",
additionalEvents: [{
event: "click",
func: function() {
edge.box.open({
element: helper.e(".layout"),
delay: 500
});
}
}],
func: function() {
mod.setValue("layout.size", helper.getObject({
object: state.get.default(),
path: "layout.size"
}));
layout.render.size();
render.update();
}
}, {
element: helper.e(".control-layout-title"),
path: "layout.title",
@ -1397,15 +1397,6 @@ var control = (function() {
element: helper.e(".control-header-search-style-auto"),
path: "header.search.style",
type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.box.open({
element: helper.e(".header-search-input"),
delay: 500
});
}
}],
func: function() {
render.class();
render.dependents();
@ -1415,15 +1406,6 @@ var control = (function() {
element: helper.e(".control-header-search-style-custom"),
path: "header.search.style",
type: "radio",
additionalEvents: [{
event: "change",
func: function() {
edge.box.open({
element: helper.e(".header-search-input"),
delay: 500
});
}
}],
func: function() {
render.class();
render.dependents();

36
src/js/header.js
View File

@ -134,17 +134,17 @@ var header = (function() {
style: function() {
var action = {
box: function() {
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.e(".control-add-toggle"), "button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
helper.removeClass(helper.e(".control-menu-open"), "button-link");
},
clear: function() {
helper.addClass(helper.getClosest(helper.e(".control-edit"), ".input-wrap"), "input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.e(".control-add-toggle"), "button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
helper.addClass(helper.e(".control-menu-open"), "button-link");
}
};
@ -152,19 +152,19 @@ var header = (function() {
},
dot: function() {
if (state.get.current().header.button.colorAccent.dot.show) {
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot-shade");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot-accent");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-hide");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
} else {
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-color-dot-shade");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-color-dot-accent");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-hide");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
};
}
};

148
src/js/link.js
View File

@ -434,16 +434,16 @@ var link = (function() {
var fieldset = helper.node("fieldset");
// group position
var groupFormPositionInputWrap = helper.node("div|class:input-wrap");
var groupFormPositionInputWrap = helper.node("div|class:form-wrap");
var groupFormPositionLabel = helper.node("label:Position|for:group-form-position");
var groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position mb-0,tabindex:1");
var groupFormRandomNameButtonWrap = helper.node("div|class:button-wrap");
var groupFormRandomNameButton = helper.node("button:Random Group name|class:button mb-0,type:button,tabindex:1");
var groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position,tabindex:1");
var groupFormRandomNameButtonWrap = helper.node("div|class:form-wrap");
var groupFormRandomNameButton = helper.node("button:Random Group name|class:button,type:button,tabindex:1");
// group name
var groupFormNameInputWrap = helper.node("div|class:input-wrap");
var groupFormNameInputWrap = helper.node("div|class:form-wrap");
var groupFormInputLabel = helper.node("label:Name|for:group-form-input-name");
var groupFormInputName = helper.node("input|type:text,class:group-form-input-name mb-0,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var groupFormInputName = helper.node("input|type:text,class:group-form-input-name,id:group-form-input-name,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
groupFormPositionInputWrap.appendChild(groupFormPositionLabel);
groupFormPositionInputWrap.appendChild(groupFormPositionSelect);
@ -685,91 +685,100 @@ var link = (function() {
var fieldset = helper.node("fieldset");
// group existing
var groupExistingRadioWrap = helper.node("div|class:input-wrap");
var groupExistingRadioWrap = helper.node("div|class:form-wrap");
var groupExistingRadio = helper.node("input|class:link-form-input-group-existing,id:link-form-input-group-existing,type:radio,name:link-form-input-group,tabindex:1,checked,value:existing");
var groupExistingLable = helper.node("label|for:link-form-input-group-existing");
var groupExistingLableText = helper.node("span:Existing Group");
var groupExistingLableIcon = helper.node("span|class:label-icon");
var groupExistingFormIndentWrap = helper.node("div|class:form-wrap");
var groupExistingFormIndent = helper.node("div|class:form-indent");
var groupExistingGroupInputWrap = helper.node("div|class:input-wrap");
var groupExistingGroup = helper.node("select|id:link-form-select-group,class:link-form-select-group mb-0,tabindex:1");
var groupExistingPositionInputWrap = helper.node("div|class:input-wrap");
var groupExistingGroupInputWrap = helper.node("div|class:form-wrap");
var groupExistingGroup = helper.node("select|id:link-form-select-group,class:link-form-select-group,tabindex:1");
var groupExistingPositionInputWrap = helper.node("div|class:form-wrap");
var groupExistingPositionLabel = helper.node("label:Position|for:link-form-position");
var groupExistingPosition = helper.node("select|id:link-form-position,class:link-form-position mb-0,tabindex:1");
var groupExistingPosition = helper.node("select|id:link-form-position,class:link-form-position,tabindex:1");
// group new
var groupNewRadioWrap = helper.node("div|class:input-wrap");
var groupNewRadioWrap = helper.node("div|class:form-wrap");
var groupNewRadio = helper.node("input|class:link-form-input-group-new,id:link-form-input-group-new,type:radio,name:link-form-input-group,tabindex:1,value:new");
var groupNewLable = helper.node("label|for:link-form-input-group-new");
var groupNewLableLableText = helper.node("span:New Group");
var groupNewLableLableIcon = helper.node("span|class:label-icon");
var groupNewFormIndentWrap = helper.node("div|class:form-wrap");
var groupNewFormIndent = helper.node("div|class:form-indent");
var groupNewInputWrap = helper.node("div|class:input-wrap");
var groupNewInput = helper.node("input|type:text,class:link-form-input-new-group mb-0,id:link-form-input-new-group,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
var groupNewRandomNameButtonWrap = helper.node("div|class:button-wrap");
var groupNewRandomNameButton = helper.node("button:Random Group name|class:button mb-0,type:button,tabindex:1,disabled");
var groupNewInputWrap = helper.node("div|class:form-wrap");
var groupNewInput = helper.node("input|type:text,class:link-form-input-new-group,id:link-form-input-new-group,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
var groupNewRandomNameButtonWrap = helper.node("div|class:form-wrap");
var groupNewRandomNameButton = helper.node("button:Random Group name|class:button,type:button,tabindex:1,disabled");
// letter
var displayLetterRadioWrap = helper.node("div|class:input-wrap");
var displayLetterRadioWrap = helper.node("div|class:form-wrap");
var displayLetterRadio = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
var displayLetterLable = helper.node("label|for:link-form-input-display-letter");
var displayLetterLableText = helper.node("span:Letters");
var displayLetterLableIcon = helper.node("span|class:label-icon");
var displayLetterFormIndentWrap = helper.node("div|class:form-wrap");
var displayLetterFormIndent = helper.node("div|class:form-indent");
var displayLetterInputWrap = helper.node("div|class:input-wrap");
var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var displayLetterInputWrap = helper.node("div|class:form-wrap");
var displayLetterInput = helper.node("input|type:text,class:link-form-input-letter,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
// icon
var displayIconRadiotWrap = helper.node("div|class:input-wrap");
var displayIconRadiotWrap = helper.node("div|class:form-wrap");
var displayIconRadio = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
var displayIconLable = helper.node("label|for:link-form-input-display-icon");
var displayIconLableText = helper.node("span:Icon");
var displayIconLableIcon = helper.node("span|class:label-icon");
var displayIconFormIndentWrap = helper.node("div|class:form-wrap");
var displayIconFormIndent = helper.node("div|class:form-indent");
var displayIconInputWrap = helper.node("div|class:input-wrap");
var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-input");
var displayIconInputWrap = helper.node("div|class:form-wrap");
var displayIconFormGroup = helper.node("div|class:form-group form-group-block auto-suggest-input");
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");
var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button,type:button,tabindex:1,disabled");
var displayIconFormGroupClearIcon = helper.node("span|class:icon-close");
var displayIconHelper = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muted disabled");
var displayIconHelper = helper.node("div|class:form-helper");
var displayIconHelperItem = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper-item disabled");
// name
var nameInputWrap = helper.node("div|class:input-wrap");
var nameInputWrap = helper.node("div|class:form-wrap");
var nameLabel = helper.node("label:Name|for:link-form-input-name");
var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var nameInput = helper.node("input|type:text,class:link-form-input-name,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
// url
var urlInputWrap = helper.node("div|class:input-wrap");
var urlInputWrap = helper.node("div|class:form-wrap");
var urlLabel = helper.node("label:URL|for:link-form-input-url");
var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var urlInputHelper = helper.makeNode({
var urlInput = helper.node("input|type:text,class:link-form-input-url,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
var urlInputHelper = helper.node("div|class:form-helper");
var urlInputHelperItem = helper.makeNode({
tag: "p",
text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
attr: [{
key: "class",
value: "form-helper small muted"
value: "form-helper-item"
}]
});
// accent
var accentLabelWrap = helper.node("div|class:form-wrap");
var accentLabel = helper.node("label:Accent colour");
var accentGlobalRadioWrap = helper.node("div|class:input-wrap");
var accentGlobalRadioWrap = helper.node("div|class:form-wrap");
var accentGlobalRadio = helper.node("input|class:link-form-input-accent-global,id:link-form-input-accent-global,type:radio,name:link-form-input-accent,tabindex:1,checked,value:global");
var accentGlobalLabel = helper.node("label|for:link-form-input-accent-global");
var accentGlobalLabelText = helper.node("span:Global");
var accentGlobalLabelIcon = helper.node("span|class:label-icon");
var accentCustomInputWrap = helper.node("div|class:input-wrap");
var accentCustomInputWrap = helper.node("div|class:form-wrap");
var accentCustomRadio = helper.node("input|class:link-form-input-accent-custom,id:link-form-input-accent-custom,type:radio,name:link-form-input-accent,tabindex:1,value:custom");
var accentCustomLabel = helper.node("label|for:link-form-input-accent-custom");
var accentCustomLabelText = helper.node("span:Custom");
var accentCustomLabelIcon = helper.node("span|class:label-icon");
var accentColorFormIndentWrap = helper.node("div|class:form-wrap");
var accentColorFormIndent = helper.node("div|class:form-indent");
var accentColorInputWrap = helper.node("div|class:input-wrap");
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");
var accentColorInputWrap = helper.node("div|class:form-wrap");
var accentColorFormGroup = helper.node("div|class:form-group form-group-block");
var accentColorPicker = helper.node("input|id:link-form-input-accent-picker,class:form-group-item-half link-form-input-accent-picker,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,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,disabled");
var accentColorInputHelper = helper.node("div|class:form-helper");
var accentColorInputHelperItem = helper.node("p:Use this colour to override the global accent colour.|class:link-form-input-accent-helper form-helper-item");
groupExistingRadioWrap.appendChild(groupExistingRadio);
groupExistingLable.appendChild(groupExistingLableIcon);
@ -780,8 +789,9 @@ var link = (function() {
groupExistingPositionInputWrap.appendChild(groupExistingPosition);
groupExistingFormIndent.appendChild(groupExistingGroupInputWrap);
groupExistingFormIndent.appendChild(groupExistingPositionInputWrap);
groupExistingFormIndentWrap.appendChild(groupExistingFormIndent);
fieldset.appendChild(groupExistingRadioWrap);
fieldset.appendChild(groupExistingFormIndent);
fieldset.appendChild(groupExistingFormIndentWrap);
groupNewRadioWrap.appendChild(groupNewRadio);
groupNewLable.appendChild(groupNewLableLableIcon);
@ -791,8 +801,9 @@ var link = (function() {
groupNewRandomNameButtonWrap.appendChild(groupNewRandomNameButton);
groupNewFormIndent.appendChild(groupNewInputWrap);
groupNewFormIndent.appendChild(groupNewRandomNameButtonWrap);
groupNewFormIndentWrap.appendChild(groupNewFormIndent);
fieldset.appendChild(groupNewRadioWrap);
fieldset.appendChild(groupNewFormIndent);
fieldset.appendChild(groupNewFormIndentWrap);
fieldset.appendChild(helper.node("hr"));
displayLetterRadioWrap.appendChild(displayLetterRadio);
@ -802,7 +813,8 @@ var link = (function() {
fieldset.appendChild(displayLetterRadioWrap);
displayLetterInputWrap.appendChild(displayLetterInput);
displayLetterFormIndent.appendChild(displayLetterInputWrap);
fieldset.appendChild(displayLetterFormIndent);
displayLetterFormIndentWrap.appendChild(displayLetterFormIndent);
fieldset.appendChild(displayLetterFormIndentWrap);
displayIconRadiotWrap.appendChild(displayIconRadio);
displayIconLable.appendChild(displayIconLableIcon);
displayIconLable.appendChild(displayIconLableText);
@ -814,8 +826,10 @@ var link = (function() {
displayIconFormGroup.appendChild(displayIconFormGroupClear);
displayIconInputWrap.appendChild(displayIconFormGroup);
displayIconFormIndent.appendChild(displayIconInputWrap);
displayIconHelper.appendChild(displayIconHelperItem);
displayIconFormIndent.appendChild(displayIconHelper);
fieldset.appendChild(displayIconFormIndent);
displayIconFormIndentWrap.appendChild(displayIconFormIndent);
fieldset.appendChild(displayIconFormIndentWrap);
fieldset.appendChild(helper.node("hr"));
nameInputWrap.appendChild(nameLabel);
nameInputWrap.appendChild(nameInput);
@ -823,9 +837,11 @@ var link = (function() {
urlInputWrap.appendChild(urlLabel);
urlInputWrap.appendChild(urlInput);
fieldset.appendChild(urlInputWrap);
urlInputHelper.appendChild(urlInputHelperItem);
fieldset.appendChild(urlInputHelper);
fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(accentLabel);
accentLabelWrap.appendChild(accentLabel);
fieldset.appendChild(accentLabelWrap);
accentGlobalRadioWrap.appendChild(accentGlobalRadio);
accentGlobalLabel.appendChild(accentGlobalLabelIcon);
accentGlobalLabel.appendChild(accentGlobalLabelText);
@ -840,8 +856,10 @@ var link = (function() {
accentColorFormGroup.appendChild(accentColorHex);
accentColorInputWrap.appendChild(accentColorFormGroup);
accentColorFormIndent.appendChild(accentColorInputWrap);
accentColorInputHelper.appendChild(accentColorInputHelperItem);
accentColorFormIndent.appendChild(accentColorInputHelper);
fieldset.appendChild(accentColorFormIndent);
accentColorFormIndentWrap.appendChild(accentColorFormIndent);
fieldset.appendChild(accentColorFormIndentWrap);
form.appendChild(fieldset);
var makeGroupOptions = function() {
@ -1182,16 +1200,10 @@ var link = (function() {
var group = helper.node("div|class:group");
var groupBody = helper.node("div|class:group-body");
var linkEmpty = helper.node("div|class:link-empty link-item");
var paraWrap = helper.node("div|class:p-wrap");
var para = helper.node("p:No Groups or Bookmarks|class:pb-0");
var formInline = helper.node("div|class:form-inline");
var buttonWrap = helper.node("div|class:button-wrap mb-0 mr-0");
var addButton = helper.node("button:Add a Bookmark|class:button mb-0,type:button,tabindex:1");
buttonWrap.appendChild(addButton);
formInline.appendChild(buttonWrap);
paraWrap.appendChild(para);
linkEmpty.appendChild(paraWrap);
linkEmpty.appendChild(formInline);
var para = helper.node("p:No Groups or Bookmarks|class:small muted");
var addButton = helper.node("button:Add a Bookmark|class:button button-small,type:button,tabindex:1");
linkEmpty.appendChild(para);
linkEmpty.appendChild(addButton);
groupBody.appendChild(linkEmpty);
group.appendChild(groupBody);
addButton.addEventListener("click", function(event) {
@ -1201,16 +1213,10 @@ var link = (function() {
},
item: function(groupIndex) {
var linkEmpty = helper.node("div|class:link-empty link-item");
var paraWrap = helper.node("div|class:p-wrap");
var para = helper.node("p:Empty Group|class:pb-0");
var formInline = helper.node("div|class:form-inline");
var buttonWrap = helper.node("div|class:button-wrap mb-0 mr-0");
var addButton = helper.node("button:Add a Bookmark|class:button mb-0,type:button,tabindex:1");
buttonWrap.appendChild(addButton);
formInline.appendChild(buttonWrap);
paraWrap.appendChild(para);
linkEmpty.appendChild(paraWrap);
linkEmpty.appendChild(formInline);
var para = helper.node("p:Empty Group|class:small muted");
var addButton = helper.node("button:Add a Bookmark|class:button button-small,type:button,tabindex:1");
linkEmpty.appendChild(para);
linkEmpty.appendChild(addButton);
addButton.addEventListener("click", function(event) {
link.add.item.open();
link.add.item.selectGroup(groupIndex);
@ -1221,21 +1227,13 @@ var link = (function() {
var group = helper.node("div|class:group");
var groupBody = helper.node("div|class:group-body");
var linkEmpty = helper.node("div|class:link-empty link-item");
var paraWrap1 = helper.node("div|class:p-wrap");
var paraWrap2 = helper.node("div|class:p-wrap");
var para1 = helper.makeNode({
tag: "p",
text: "No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found",
attr: [{
key: "class",
value: "mb-0"
}]
text: "No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found"
});
var para2 = helper.node("p:\"Enter\" to Search " + state.get.current().header.search.engine[state.get.current().header.search.engine.selected].name + ".|class:small muted mb-0");
paraWrap1.appendChild(para1);
paraWrap2.appendChild(para2);
linkEmpty.appendChild(paraWrap1);
linkEmpty.appendChild(paraWrap2);
var para2 = helper.node("p:\"Enter\" to Search " + state.get.current().header.search.engine[state.get.current().header.search.engine.selected].name + ".|class:small muted");
linkEmpty.appendChild(para1);
linkEmpty.appendChild(para2);
groupBody.appendChild(linkEmpty);
group.appendChild(groupBody);
return group;

29
src/js/theme.js
View File

@ -1385,7 +1385,7 @@ var theme = (function() {
allThemePreset.forEach(function(arrayItem, index) {
var themePresetItem = helper.node("div|class:theme-preset-item");
var themePresetTile = helper.node("div|class:theme-preset-tile");
var themePresetButton = helper.node("button|class:theme-preset-button button mb-0,tabindex:-1");
var themePresetButton = helper.node("button|class:theme-preset-button button,tabindex:-1");
var themePresetPreview = helper.node("span|class:theme-preset-preview");
var shadeSteps = 4;
var rgb = arrayItem.color.rgb;
@ -1462,12 +1462,12 @@ var theme = (function() {
allThemeCuston.forEach(function(arrayItem, index) {
var themeCustomItem = helper.node("div|class:theme-custom-item");
var themeCustomTile = helper.node("div|class:theme-custom-tile");
var themeCustomButton = helper.node("button|class:theme-custom-button button mb-0,tabindex:-1");
var themeCustomButton = helper.node("button|class:theme-custom-button button,tabindex:-1");
var themeCustomPreview = helper.node("span|class:theme-custom-preview");
var themeCustomControl = helper.node("div|class:theme-custom-control");
var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small mb-0,tabindex:-2");
var themeCustomEdit = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-2");
var themeCustomEditIcon = helper.node("spa|class:button-icon icon-edit");
var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small mb-0,tabindex:-2");
var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button button-small,tabindex:-2");
var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close");
var shadeSteps = 4;
var rgb = arrayItem.color.rgb;
@ -1566,7 +1566,7 @@ var theme = (function() {
};
var form = helper.node("form|class:group-form");
var fieldset = helper.node("fieldset");
var inputWrap = helper.node("div|class:input-wrap");
var inputWrap = helper.node("div|class:form-wrap");
var label = helper.node("label:Name|for:theme-name");
var input = helper.node("input|id:theme-name,class:theme-name mb-0,type:text,tabindex:1,placeholder:Example theme,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
inputWrap.appendChild(label);
@ -1600,6 +1600,7 @@ var theme = (function() {
stagedThemeCustom.theme.timestamp = new Date().getTime();
mod.custom.add();
data.save();
custom.check();
render.custom.clear();
render.custom.all();
shade.close();
@ -1683,8 +1684,8 @@ var theme = (function() {
};
var successAction = function() {
mod.custom.remove();
custom.check();
data.save();
custom.check();
render.custom.clear();
render.custom.all();
shade.close();
@ -1732,6 +1733,16 @@ var theme = (function() {
arrayItem.tabIndex = -2;
});
};
},
formWrap: {
open: function() {
var themeCustom = helper.e(".theme-custom");
helper.removeClass(themeCustom, "form-wrap-hide-space");
},
close: function() {
var themeCustom = helper.e(".theme-custom");
helper.addClass(themeCustom, "form-wrap-hide-space");
}
}
};
@ -1776,8 +1787,11 @@ var theme = (function() {
render.custom.tabIndex();
},
check: function() {
if (state.get.current().theme.custom.all <= 0) {
if (state.get.current().theme.custom.all.length > 0) {
render.custom.formWrap.open();
} else {
mod.custom.close();
render.custom.formWrap.close();
};
}
};
@ -1799,6 +1813,7 @@ var theme = (function() {
render.shadow();
render.preset();
render.custom.all();
custom.check();
};
// exposed methods

131
src/style-guide.html
View File

@ -43,87 +43,93 @@
<body>
<main class="layout my-5">
<div class="form-wrap">
<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>
<button class="button style-guide-control disable-on" tabindex="1">Disable</button>
<button class="button style-guide-control disable-off" tabindex="1">Enable</button>
<button class="button style-guide-control theme-dark" tabindex="1">Dark</button>
<button class="button style-guide-control theme-light" tabindex="1">Light</button>
</div>
<div class="input-wrap">
</div>
<div class="form-wrap">
<label for="style-guide-control-theme-color" class="style-guide-control">Theme Colour</label>
<input id="style-guide-control-theme-color" class="style-guide-control theme-color" class="form-group-item-half mb-0" type="color" value="#818aa0" tabindex="1">
<input id="style-guide-control-theme-color" class="style-guide-control theme-color" type="color" value="#818aa0" tabindex="1">
</div>
<div class="input-wrap">
<div class="form-wrap">
<label for="style-guide-control-theme-accent" class="style-guide-control">Accent Colour</label>
<input id="style-guide-control-theme-accent" class="style-guide-control theme-accent" class="form-group-item-half mb-0" type="color" value="#fa8200" tabindex="1">
<input id="style-guide-control-theme-accent" class="style-guide-control theme-accent" type="color" value="#fa8200" tabindex="1">
</div>
<div class="input-wrap">
<div class="form-wrap">
<label for="radius" class="style-guide-control">Radius</label>
<input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
</div>
<hr>
<div class="form-wrap">
<div class="form-inline">
<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>
<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="input-wrap input-button">
<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 class="form-group nested-button mb-0">
<div class="input-wrap input-button">
</div>
<div class="form-wrap">
<div class="form-group form-group-nested-button">
<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>
</div>
<div class="input-wrap input-button">
<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>
<div class="input-wrap input-button">
<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 class="input-wrap input-button input-hide">
</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 class="form-group nested-button input-hide mb-0">
<div class="input-wrap input-button">
</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="input-wrap input-button">
<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="input-wrap input-button">
<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>
</div>
</div>
<div class="form-wrap">
<div class="form-inline">
<div class="input-wrap input-button input-hide">
<div class="form-input-button form-input-hide">
<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>
</div>
<div class="input-wrap input-button input-color-dot">
<div class="form-input-button input-color-dot">
<input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
<label for="style-guide-input-color-2">Input Colour Button</label>
</div>
<div class="input-wrap input-button input-color-dot input-color-dot-accent">
<div class="form-input-button input-color-dot input-color-dot-accent">
<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>
</div>
<div class="button-wrap">
<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>
@ -140,108 +146,112 @@
</div>
</div>
<hr>
<div class="form-inline">
<div class="input-wrap">
<div class="form-wrap">
<div class="form-inline form-inline-spacer">
<div class="form-wrap">
<input id="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
<label for="style-guide-checkbox-1"><span class="label-icon"></span> Checkbox 1</label>
</div>
<div class="input-wrap">
<div class="form-wrap">
<input id="style-guide-checkbox-2" type="checkbox" tabindex="1">
<label for="style-guide-checkbox-2"><span class="label-icon"></span> Checkbox 2</label>
</div>
<div class="input-wrap">
<div class="form-wrap">
<input id="style-guide-checkbox-3" type="checkbox" tabindex="1">
<label for="style-guide-checkbox-3"><span class="label-icon"></span> Checkbox 3</label>
</div>
</div>
<div class="form-inline">
<div class="input-wrap">
</div>
<div class="form-wrap">
<div class="form-inline form-inline-spacer">
<div class="form-wrap">
<input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
<label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
</div>
<div class="input-wrap">
<div class="form-wrap">
<input id="style-guide-radio-8" type="radio" name="style-guide-radio-3" tabindex="1">
<label for="style-guide-radio-8"><span class="label-icon"></span> Radio 2</label>
</div>
<div class="input-wrap">
<div class="form-wrap">
<input id="style-guide-radio-9" type="radio" name="style-guide-radio-3" tabindex="1">
<label for="style-guide-radio-9"><span class="label-icon"></span> Radio 3</label>
</div>
</div>
<div class="form-grid-wrap">
</div>
<div class="form-wrap">
<div class="form-grid form-grid-3x3">
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Top left</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Top center</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Top right</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Center left</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Center center</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Center right</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Bottom left</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Bottom right</span></label>
</div>
</div>
</div>
<div class="form-grid-wrap">
<div class="form-wrap">
<div class="form-grid form-grid-3x1">
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Center left</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Center center</span></label>
</div>
<div class="input-wrap">
<div class="form-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="label-icon"></span> <span class="sr-only">Center right</span></label>
</div>
</div>
</div>
<hr>
<div class="input-wrap">
<div class="form-wrap">
<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">
<div class="form-wrap">
<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">
<div class="form-wrap">
<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">
<div class="form-wrap">
<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">
<div class="form-wrap">
<label for="style-guide-select-1">Select</label>
<select id="style-guide-select-1" class="mb-0" tabindex="1">
<option>Option 1</option>
@ -249,7 +259,7 @@
<option>Option 3</option>
</select>
</div>
<div class="input-wrap">
<div class="form-wrap">
<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" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
@ -263,7 +273,7 @@
<div class="form-group-text" tabindex="1">Form Group Text</div>
</div>
</div>
<div class="feedback-wrap">
<div class="form-wrap">
<div class="form-feedback">
<p class="muted">Form feedback.</p>
<p class="muted small">With some small text.</p>
@ -272,6 +282,7 @@
</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"];