mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-25 08:09:05 +01:00
[design] improve form group spacing
This commit is contained in:
parent
b841a3ebdb
commit
716396fb6e
@ -5,7 +5,7 @@ input[type="reset"],
|
|||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
background-color: rgb(var(--button-background));
|
background-color: rgb(var(--button-background));
|
||||||
padding: 0.25em 1em;
|
padding: 0.25em 1em;
|
||||||
margin: 0 0 1em 0;
|
margin: 0;
|
||||||
color: rgb(var(--button-text));
|
color: rgb(var(--button-text));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-family: var(--theme-font-ui-name);
|
font-family: var(--theme-font-ui-name);
|
||||||
@ -207,11 +207,3 @@ button [class*=" button-"]:last-child,
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-wrap {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
488
src/css/form.css
488
src/css/form.css
@ -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 */
|
||||||
label {
|
label {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -5,10 +78,11 @@ label {
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
display: block;
|
display: block;
|
||||||
|
transition: color var(--layout-timing-extra-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
label:not(:only-child):not(:last-child) {
|
label:not(:only-child):not(:last-child) {
|
||||||
padding-bottom: 0.5em;
|
padding-bottom: calc(var(--form-wrap-space) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
label.disabled {
|
label.disabled {
|
||||||
@ -29,7 +103,7 @@ select {
|
|||||||
0.5em 0.375em;
|
0.5em 0.375em;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
padding: 0 3em 0 1em;
|
padding: 0 3em 0 1em;
|
||||||
margin: 0 0 1em 0;
|
margin: 0;
|
||||||
color: rgb(var(--form-label));
|
color: rgb(var(--form-label));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-family: var(--theme-font-ui-name);
|
font-family: var(--theme-font-ui-name);
|
||||||
@ -92,7 +166,7 @@ select:disabled:active {
|
|||||||
textarea {
|
textarea {
|
||||||
background-color: rgb(var(--form-input-background));
|
background-color: rgb(var(--form-input-background));
|
||||||
padding: 0.25em 1em;
|
padding: 0.25em 1em;
|
||||||
margin: 0 0 1em 0;
|
margin: 0;
|
||||||
color: rgb(var(--form-input-text));
|
color: rgb(var(--form-input-text));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@ -173,7 +247,7 @@ input[type="tel"],
|
|||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
background-color: rgb(var(--form-input-background));
|
background-color: rgb(var(--form-input-background));
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
margin: 0 0 1em 0;
|
margin: 0;
|
||||||
color: rgb(var(--form-input-text));
|
color: rgb(var(--form-input-text));
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-family: var(--theme-font-ui-name);
|
font-family: var(--theme-font-ui-name);
|
||||||
@ -539,7 +613,7 @@ input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
|
|||||||
input[type="color"] {
|
input[type="color"] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 0 1em 0;
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
@ -830,38 +904,26 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* form helper */
|
/* form helper */
|
||||||
.form-helper {
|
.form-helper-item {
|
||||||
padding: 0.5em 0;
|
font-size: 0.8em;
|
||||||
color: rgb(var(--form-helper));
|
color: rgb(var(--form-helper));
|
||||||
transition: color var(--layout-timing-extra-fast);
|
transition: color var(--layout-timing-extra-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-helper.disabled {
|
.form-helper-item.disabled {
|
||||||
color: rgb(var(--form-helper-disabled));
|
color: rgb(var(--form-helper-disabled));
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-helper:not(:last-child) {
|
/* form input button */
|
||||||
margin-bottom: 0;
|
.form-input-button {
|
||||||
}
|
|
||||||
|
|
||||||
/* input variants */
|
|
||||||
.input-wrap {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-button-inline {
|
|
||||||
width: initial;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* input button */
|
.form-input-button input[type="checkbox"]+label,
|
||||||
.input-button input[type="checkbox"]+label,
|
.form-input-button input[type="radio"]+label,
|
||||||
.input-button input[type="radio"]+label,
|
.form-input-button input[type="color"]+label,
|
||||||
.input-button input[type="color"]+label,
|
.form-input-button input[type="file"]+label {
|
||||||
.input-button input[type="file"]+label {
|
|
||||||
background-color: rgb(var(--button-background));
|
background-color: rgb(var(--button-background));
|
||||||
padding: 0.25em 1em;
|
padding: 0.25em 1em;
|
||||||
margin: 0;
|
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);
|
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,
|
.form-input-button input[type="checkbox"]:focus+label,
|
||||||
.input-button input[type="checkbox"]:hover+label,
|
.form-input-button input[type="checkbox"]:hover+label,
|
||||||
.input-button input[type="radio"]:focus+label,
|
.form-input-button input[type="radio"]:focus+label,
|
||||||
.input-button input[type="radio"]:hover+label,
|
.form-input-button input[type="radio"]:hover+label,
|
||||||
.input-button input[type="color"]:focus+label,
|
.form-input-button input[type="color"]:focus+label,
|
||||||
.input-button input[type="color"]:hover+label,
|
.form-input-button input[type="color"]:hover+label,
|
||||||
.input-button input[type="file"]:focus+label,
|
.form-input-button input[type="file"]:focus+label,
|
||||||
.input-button input[type="file"]:hover+label {
|
.form-input-button input[type="file"]:hover+label {
|
||||||
background-color: rgb(var(--button-background-focus-hover));
|
background-color: rgb(var(--button-background-focus-hover));
|
||||||
color: rgb(var(--button-text-focus-hover));
|
color: rgb(var(--button-text-focus-hover));
|
||||||
outline: none;
|
outline: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]:active+label,
|
.form-input-button input[type="checkbox"]:active+label,
|
||||||
.input-button input[type="radio"]:active+label,
|
.form-input-button input[type="radio"]:active+label,
|
||||||
.input-button input[type="color"]:active+label,
|
.form-input-button input[type="color"]:active+label,
|
||||||
.input-button input[type="file"]:active+label {
|
.form-input-button input[type="file"]:active+label {
|
||||||
background-color: rgb(var(--button-background-active));
|
background-color: rgb(var(--button-background-active));
|
||||||
color: rgb(var(--button-text-active));
|
color: rgb(var(--button-text-active));
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -913,10 +975,10 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]:checked+label,
|
.form-input-button input[type="checkbox"]:checked+label,
|
||||||
.input-button input[type="radio"]:checked+label,
|
.form-input-button input[type="radio"]:checked+label,
|
||||||
.input-button input[type="color"]:checked+label,
|
.form-input-button input[type="color"]:checked+label,
|
||||||
.input-button input[type="file"]:checked+label {
|
.form-input-button input[type="file"]:checked+label {
|
||||||
background-color: rgb(var(--button-background-active));
|
background-color: rgb(var(--button-background-active));
|
||||||
color: rgb(var(--button-text-active));
|
color: rgb(var(--button-text-active));
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -924,37 +986,37 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]:disabled+label,
|
.form-input-button input[type="checkbox"]:disabled+label,
|
||||||
.input-button input[type="checkbox"]:disabled:hover+label,
|
.form-input-button input[type="checkbox"]:disabled:hover+label,
|
||||||
.input-button input[type="checkbox"]:disabled:focus+label,
|
.form-input-button input[type="checkbox"]:disabled:focus+label,
|
||||||
.input-button input[type="checkbox"]:disabled:active+label,
|
.form-input-button input[type="checkbox"]:disabled:active+label,
|
||||||
.input-button input[type="radio"]:disabled+label,
|
.form-input-button input[type="radio"]:disabled+label,
|
||||||
.input-button input[type="radio"]:disabled:hover+label,
|
.form-input-button input[type="radio"]:disabled:hover+label,
|
||||||
.input-button input[type="radio"]:disabled:focus+label,
|
.form-input-button input[type="radio"]:disabled:focus+label,
|
||||||
.input-button input[type="radio"]:disabled:active+label,
|
.form-input-button input[type="radio"]:disabled:active+label,
|
||||||
.input-button input[type="color"]:disabled+label,
|
.form-input-button input[type="color"]:disabled+label,
|
||||||
.input-button input[type="color"]:disabled:hover+label,
|
.form-input-button input[type="color"]:disabled:hover+label,
|
||||||
.input-button input[type="color"]:disabled:focus+label,
|
.form-input-button input[type="color"]:disabled:focus+label,
|
||||||
.input-button input[type="color"]:disabled:active+label,
|
.form-input-button input[type="color"]:disabled:active+label,
|
||||||
.input-button input[type="file"]:disabled+label,
|
.form-input-button input[type="file"]:disabled+label,
|
||||||
.input-button input[type="file"]:disabled:hover+label,
|
.form-input-button input[type="file"]:disabled:hover+label,
|
||||||
.input-button input[type="file"]:disabled:focus+label,
|
.form-input-button input[type="file"]:disabled:focus+label,
|
||||||
.input-button input[type="file"]:disabled:active+label {
|
.form-input-button input[type="file"]:disabled:active+label {
|
||||||
background-color: rgb(var(--button-background-disabled));
|
background-color: rgb(var(--button-background-disabled));
|
||||||
color: rgb(var(--button-text-disabled));
|
color: rgb(var(--button-text-disabled));
|
||||||
cursor: default;
|
cursor: default;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]+label .label-icon,
|
.form-input-button input[type="checkbox"]+label .label-icon,
|
||||||
.input-button input[type="radio"]+label .label-icon {
|
.form-input-button input[type="radio"]+label .label-icon {
|
||||||
top: inherit;
|
top: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]+label:after,
|
.form-input-button input[type="checkbox"]+label:after,
|
||||||
.input-button input[type="radio"]+label:after,
|
.form-input-button input[type="radio"]+label:after,
|
||||||
.input-button input[type="color"]+label:after,
|
.form-input-button input[type="color"]+label:after,
|
||||||
.input-button input[type="file"]+label:after {
|
.form-input-button input[type="file"]+label:after {
|
||||||
background: rgb(var(--button-border));
|
background: rgb(var(--button-border));
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
@ -965,105 +1027,105 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
transition: background-color var(--layout-timing-extra-fast);
|
transition: background-color var(--layout-timing-extra-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]:focus+label:after,
|
.form-input-button input[type="checkbox"]:focus+label:after,
|
||||||
.input-button input[type="checkbox"]:hover+label:after,
|
.form-input-button input[type="checkbox"]:hover+label:after,
|
||||||
.input-button input[type="radio"]:focus+label:after,
|
.form-input-button input[type="radio"]:focus+label:after,
|
||||||
.input-button input[type="radio"]:hover+label:after,
|
.form-input-button input[type="radio"]:hover+label:after,
|
||||||
.input-button input[type="color"]:focus+label:after,
|
.form-input-button input[type="color"]:focus+label:after,
|
||||||
.input-button input[type="color"]:hover+label:after,
|
.form-input-button input[type="color"]:hover+label:after,
|
||||||
.input-button input[type="file"]:focus+label:after,
|
.form-input-button input[type="file"]:focus+label:after,
|
||||||
.input-button input[type="file"]:hover+label:after {
|
.form-input-button input[type="file"]:hover+label:after {
|
||||||
background-color: rgb(var(--button-border-focus-hover));
|
background-color: rgb(var(--button-border-focus-hover));
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]:active+label:after,
|
.form-input-button input[type="checkbox"]:active+label:after,
|
||||||
.input-button input[type="radio"]:active+label:after,
|
.form-input-button input[type="radio"]:active+label:after,
|
||||||
.input-button input[type="color"]:active+label:after,
|
.form-input-button input[type="color"]:active+label:after,
|
||||||
.input-button input[type="file"]:active+label:after {
|
.form-input-button input[type="file"]:active+label:after {
|
||||||
background-color: rgb(var(--button-border-active));
|
background-color: rgb(var(--button-border-active));
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]:checked+label:after,
|
.form-input-button input[type="checkbox"]:checked+label:after,
|
||||||
.input-button input[type="radio"]:checked+label:after,
|
.form-input-button input[type="radio"]:checked+label:after,
|
||||||
.input-button input[type="color"]:checked+label:after,
|
.form-input-button input[type="color"]:checked+label:after,
|
||||||
.input-button input[type="file"]:checked+label:after {
|
.form-input-button input[type="file"]:checked+label:after {
|
||||||
background-color: rgb(var(--button-border-active));
|
background-color: rgb(var(--button-border-active));
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button input[type="checkbox"]:disabled+label:after,
|
.form-input-button input[type="checkbox"]:disabled+label:after,
|
||||||
.input-button input[type="checkbox"]:disabled:hover+label:after,
|
.form-input-button input[type="checkbox"]:disabled:hover+label:after,
|
||||||
.input-button input[type="checkbox"]:disabled:focus+label:after,
|
.form-input-button input[type="checkbox"]:disabled:focus+label:after,
|
||||||
.input-button input[type="checkbox"]:disabled:active+label:after,
|
.form-input-button input[type="checkbox"]:disabled:active+label:after,
|
||||||
.input-button input[type="radio"]:disabled+label:after,
|
.form-input-button input[type="radio"]:disabled+label:after,
|
||||||
.input-button input[type="radio"]:disabled:hover+label:after,
|
.form-input-button input[type="radio"]:disabled:hover+label:after,
|
||||||
.input-button input[type="radio"]:disabled:focus+label:after,
|
.form-input-button input[type="radio"]:disabled:focus+label:after,
|
||||||
.input-button input[type="radio"]:disabled:active+label:after,
|
.form-input-button input[type="radio"]:disabled:active+label:after,
|
||||||
.input-button input[type="color"]:disabled+label:after,
|
.form-input-button input[type="color"]:disabled+label:after,
|
||||||
.input-button input[type="color"]:disabled:hover+label:after,
|
.form-input-button input[type="color"]:disabled:hover+label:after,
|
||||||
.input-button input[type="color"]:disabled:focus+label:after,
|
.form-input-button input[type="color"]:disabled:focus+label:after,
|
||||||
.input-button input[type="color"]:disabled:active+label:after,
|
.form-input-button input[type="color"]:disabled:active+label:after,
|
||||||
.input-button input[type="file"]:disabled+label:after,
|
.form-input-button input[type="file"]:disabled+label:after,
|
||||||
.input-button input[type="file"]:disabled:hover+label:after,
|
.form-input-button input[type="file"]:disabled:hover+label:after,
|
||||||
.input-button input[type="file"]:disabled:focus+label:after,
|
.form-input-button input[type="file"]:disabled:focus+label:after,
|
||||||
.input-button input[type="file"]:disabled:active+label:after {
|
.form-input-button input[type="file"]:disabled:active+label:after {
|
||||||
background-color: rgb(var(--button-border-disabled));
|
background-color: rgb(var(--button-border-disabled));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* input button link */
|
/* form input button link */
|
||||||
.input-button-link input[type="checkbox"]+label,
|
.form-input-button-link input[type="checkbox"]+label,
|
||||||
.input-button-link input[type="radio"]+label,
|
.form-input-button-link input[type="radio"]+label,
|
||||||
.input-button-link input[type="color"]+label,
|
.form-input-button-link input[type="color"]+label,
|
||||||
.input-button-link input[type="file"]+label {
|
.form-input-button-link input[type="file"]+label {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button-link input[type="checkbox"]:hover+label,
|
.form-input-button-link input[type="checkbox"]:hover+label,
|
||||||
.input-button-link input[type="checkbox"]:focus+label,
|
.form-input-button-link input[type="checkbox"]:focus+label,
|
||||||
.input-button-link input[type="checkbox"]:checked+label,
|
.form-input-button-link input[type="checkbox"]:checked+label,
|
||||||
.input-button-link input[type="radio"]:hover+label,
|
.form-input-button-link input[type="radio"]:hover+label,
|
||||||
.input-button-link input[type="radio"]:focus+label,
|
.form-input-button-link input[type="radio"]:focus+label,
|
||||||
.input-button-link input[type="radio"]:checked+label,
|
.form-input-button-link input[type="radio"]:checked+label,
|
||||||
.input-button-link input[type="color"]:hover+label,
|
.form-input-button-link input[type="color"]:hover+label,
|
||||||
.input-button-link input[type="color"]:focus+label,
|
.form-input-button-link input[type="color"]:focus+label,
|
||||||
.input-button-link input[type="color"]:checked+label,
|
.form-input-button-link input[type="color"]:checked+label,
|
||||||
.input-button-link input[type="file"]:hover+label,
|
.form-input-button-link input[type="file"]:hover+label,
|
||||||
.input-button-link input[type="file"]:focus+label,
|
.form-input-button-link input[type="file"]:focus+label,
|
||||||
.input-button-link input[type="file"]:checked+label {
|
.form-input-button-link input[type="file"]:checked+label {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button-link input[type="checkbox"]:active+label,
|
.form-input-button-link input[type="checkbox"]:active+label,
|
||||||
.input-button-link input[type="radio"]:active+label,
|
.form-input-button-link input[type="radio"]:active+label,
|
||||||
.input-button-link input[type="color"]:active+label,
|
.form-input-button-link input[type="color"]:active+label,
|
||||||
.input-button-link input[type="file"]:active+label {
|
.form-input-button-link input[type="file"]:active+label {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button-link input:disabled[type="checkbox"]+label,
|
.form-input-button-link input:disabled[type="checkbox"]+label,
|
||||||
.input-button-link input:disabled[type="radio"]+label,
|
.form-input-button-link input:disabled[type="radio"]+label,
|
||||||
.input-button-link input:disabled[type="color"]+label,
|
.form-input-button-link input:disabled[type="color"]+label,
|
||||||
.input-button-link input:disabled[type="file"]+label {
|
.form-input-button-link input:disabled[type="file"]+label {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button-link input:disabled[type="checkbox"]:hover+label,
|
.form-input-button-link input:disabled[type="checkbox"]:hover+label,
|
||||||
.input-button-link input:disabled[type="checkbox"]:focus+label,
|
.form-input-button-link input:disabled[type="checkbox"]:focus+label,
|
||||||
.input-button-link input:disabled[type="radio"]:hover+label,
|
.form-input-button-link input:disabled[type="radio"]:hover+label,
|
||||||
.input-button-link input:disabled[type="radio"]:focus+label,
|
.form-input-button-link input:disabled[type="radio"]:focus+label,
|
||||||
.input-button-link input:disabled[type="color"]:hover+label,
|
.form-input-button-link input:disabled[type="color"]:hover+label,
|
||||||
.input-button-link input:disabled[type="color"]:focus+label,
|
.form-input-button-link input:disabled[type="color"]:focus+label,
|
||||||
.input-button-link input:disabled[type="file"]:hover+label,
|
.form-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="file"]:focus+label {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-button-link input[type="checkbox"]+label:after,
|
.form-input-button-link input[type="checkbox"]+label:after,
|
||||||
.input-button-link input[type="radio"]+label:after,
|
.form-input-button-link input[type="radio"]+label:after,
|
||||||
.input-button-link input[type="color"]+label:after,
|
.form-input-button-link input[type="color"]+label:after,
|
||||||
.input-button-link input[type="file"]+label:after {
|
.form-input-button-link input[type="file"]+label:after {
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1108,17 +1170,17 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-hide input[type="checkbox"]+label .label-icon,
|
.form-input-hide input[type="checkbox"]+label .label-icon,
|
||||||
.input-hide input[type="checkbox"]:checked+label .label-icon,
|
.form-input-hide input[type="checkbox"]:checked+label .label-icon,
|
||||||
.input-hide input[type="radio"]+label .label-icon,
|
.form-input-hide input[type="radio"]+label .label-icon,
|
||||||
.input-hide input[type="radio"]:checked+label .label-icon,
|
.form-input-hide input[type="radio"]:checked+label .label-icon,
|
||||||
.input-hide input[type="file"]+label .label-icon,
|
.form-input-hide input[type="file"]+label .label-icon,
|
||||||
.input-hide input[type="file"]:checked+label .label-icon {
|
.form-input-hide input[type="file"]:checked+label .label-icon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-hide input[type="color"],
|
.form-input-hide input[type="color"],
|
||||||
.input-hide input[type="file"] {
|
.form-input-hide input[type="file"] {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
@ -1131,13 +1193,7 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* form variants */
|
/* form grid */
|
||||||
.form-grid-wrap {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-grid {
|
.form-grid {
|
||||||
background-color: rgb(var(--form-grid-background));
|
background-color: rgb(var(--form-grid-background));
|
||||||
padding: calc(var(--form-thumb-size) / 2);
|
padding: calc(var(--form-thumb-size) / 2);
|
||||||
@ -1174,8 +1230,9 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
border-radius: var(--theme-radius);
|
border-radius: var(--theme-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-grid .input-wrap {
|
.form-grid .form-wrap {
|
||||||
padding: 0;
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-grid input[type="checkbox"]+label,
|
.form-grid input[type="checkbox"]+label,
|
||||||
@ -1207,36 +1264,67 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-indent {
|
.form-grid-3x3 {
|
||||||
margin-left: 2.25em;
|
--radiusPart: calc(var(--theme-radius) / 20);
|
||||||
|
--responsivePos: calc(var(--radiusPart) + -50%);
|
||||||
|
--responsiveNeg: calc(calc(var(--radiusPart) * -1) + -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-inline {
|
.form-grid-3x3 .form-wrap:nth-child(1) input[type="checkbox"]+label .label-icon,
|
||||||
margin-left: -0.5em;
|
.form-grid-3x3 .form-wrap:nth-child(1) input[type="radio"]+label .label-icon {
|
||||||
margin-right: -0.5em;
|
transform: translate(var(--responsivePos), var(--responsivePos));
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-inline>* {
|
.form-grid-3x3 .form-wrap:nth-child(2) input[type="checkbox"]+label .label-icon,
|
||||||
padding-left: 0.5em;
|
.form-grid-3x3 .form-wrap:nth-child(2) input[type="radio"]+label .label-icon {
|
||||||
padding-right: 0.5em;
|
transform: translate(-50%, var(--responsivePos));
|
||||||
width: initial;
|
}
|
||||||
|
|
||||||
|
.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 */
|
||||||
.form-group {
|
.form-group {
|
||||||
margin: 0 0 1em 0;
|
position: relative;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-group .form-wrap {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.form-group .form-group-text,
|
.form-group .form-group-text,
|
||||||
.form-group .button,
|
.form-group .button,
|
||||||
.form-group>select,
|
.form-group>select,
|
||||||
@ -1339,27 +1427,27 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
border-radius: var(--theme-radius);
|
border-radius: var(--theme-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group.nested-button * .button,
|
.form-group.form-group-nested-button * .button,
|
||||||
.form-group.nested-button *:first-child .button:after,
|
.form-group.form-group-nested-button *:first-child .button:after,
|
||||||
.form-group.nested-button * input[type="checkbox"]+label,
|
.form-group.form-group-nested-button * input[type="checkbox"]+label,
|
||||||
.form-group.nested-button * input[type="radio"]+label,
|
.form-group.form-group-nested-button * input[type="radio"]+label,
|
||||||
.form-group.nested-button * input[type="color"]+label {
|
.form-group.form-group-nested-button * input[type="color"]+label {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group.nested-button *:first-child .button,
|
.form-group.form-group-nested-button *:first-child .button,
|
||||||
.form-group.nested-button *:first-child .button:after,
|
.form-group.form-group-nested-button *:first-child .button:after,
|
||||||
.form-group.nested-button *:first-child input[type="checkbox"]+label,
|
.form-group.form-group-nested-button *:first-child input[type="checkbox"]+label,
|
||||||
.form-group.nested-button *:first-child input[type="radio"]+label,
|
.form-group.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 input[type="color"]+label {
|
||||||
border-radius: var(--theme-radius) 0 0 var(--theme-radius);
|
border-radius: var(--theme-radius) 0 0 var(--theme-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group.nested-button *:last-child .button,
|
.form-group.form-group-nested-button *:last-child .button,
|
||||||
.form-group.nested-button *:last-child .button:after,
|
.form-group.form-group-nested-button *:last-child .button:after,
|
||||||
.form-group.nested-button *:last-child input[type="checkbox"]+label,
|
.form-group.form-group-nested-button *:last-child input[type="checkbox"]+label,
|
||||||
.form-group.nested-button *:last-child input[type="radio"]+label,
|
.form-group.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 input[type="color"]+label {
|
||||||
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
|
border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1406,10 +1494,6 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group-wrap {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.form-group-border .form-group-text,
|
.form-group.form-group-border .form-group-text,
|
||||||
.form-group.form-group-border .button,
|
.form-group.form-group-border .button,
|
||||||
.form-group.form-group-border .button:after,
|
.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="text"],
|
||||||
.form-group.form-group-border>input[type="color"],
|
.form-group.form-group-border>input[type="color"],
|
||||||
.form-group.form-group-border>input[type="range"],
|
.form-group.form-group-border>input[type="range"],
|
||||||
.form-group.form-group-border.nested-button * .button,
|
.form-group.form-group-border.form-group-nested-button * .button,
|
||||||
.form-group.form-group-border.nested-button * .button:after,
|
.form-group.form-group-border.form-group-nested-button * .button:after,
|
||||||
.form-group.form-group-border.nested-button * input[type="checkbox"]+label,
|
.form-group.form-group-border.form-group-nested-button * input[type="checkbox"]+label,
|
||||||
.form-group.form-group-border.nested-button * input[type="radio"]+label,
|
.form-group.form-group-border.form-group-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 * input[type="color"]+label {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1588,23 +1672,18 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group.nested-button .form-dropdown-menu *:first-child .button,
|
.form-group.form-group-nested-button .form-dropdown-menu *:first-child .button,
|
||||||
.form-group.nested-button .form-dropdown-menu *:last-child .button,
|
.form-group.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.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.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.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.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.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 *:last-child input[type="color"]+label {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feedback-wrap {
|
/* form feedback */
|
||||||
padding: 0.5em 0;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-feedback {
|
.form-feedback {
|
||||||
padding: 0.5em 1.5em 0.5em 1em;
|
padding: 0.5em 1.5em 0.5em 1em;
|
||||||
background-color: rgb(var(--form-feedback-background));
|
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-color: rgb(var(--form-feedback-border));
|
||||||
border-top-right-radius: var(--theme-radius);
|
border-top-right-radius: var(--theme-radius);
|
||||||
border-bottom-right-radius: var(--theme-radius);
|
border-bottom-right-radius: var(--theme-radius);
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-feedback p {
|
.form-feedback p {
|
||||||
|
@ -71,9 +71,13 @@
|
|||||||
flex-direction: row;
|
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) {
|
.is-link-style-list .link-item.link-empty>*:not(:last-child) {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-link-item-hoverscale-show .link-item.link-empty:hover {
|
.is-link-item-hoverscale-show .link-item.link-empty:hover {
|
||||||
|
@ -94,15 +94,6 @@
|
|||||||
z-index: 1;
|
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 {
|
.menu-nav-button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -3,8 +3,6 @@
|
|||||||
width: var(--theme-preview-size);
|
width: var(--theme-preview-size);
|
||||||
height: var(--theme-preview-size);
|
height: var(--theme-preview-size);
|
||||||
border-radius: var(--theme-radius);
|
border-radius: var(--theme-radius);
|
||||||
padding: 0;
|
|
||||||
margin: 0.5em;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@ -270,7 +268,6 @@
|
|||||||
.theme-shadow-box {
|
.theme-shadow-box {
|
||||||
background-color: rgb(var(--theme-color-02));
|
background-color: rgb(var(--theme-color-02));
|
||||||
border-radius: var(--theme-radius);
|
border-radius: var(--theme-radius);
|
||||||
margin: 0;
|
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
width: 5em;
|
width: 5em;
|
||||||
height: 5em;
|
height: 5em;
|
||||||
|
@ -64,10 +64,6 @@ p:not(:last-child) {
|
|||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-wrap {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: var(--horizontal-rule);
|
border-top: var(--horizontal-rule);
|
||||||
|
@ -211,6 +211,7 @@
|
|||||||
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
|
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)),
|
--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);
|
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
|
||||||
|
--form-wrap-space: 0.75em;
|
||||||
/* button */
|
/* button */
|
||||||
--button-background: var(--theme-color-02);
|
--button-background: var(--theme-color-02);
|
||||||
--button-background-focus-hover: var(--theme-color-03);
|
--button-background-focus-hover: var(--theme-color-03);
|
||||||
|
2249
src/index.html
2249
src/index.html
File diff suppressed because it is too large
Load Diff
@ -90,6 +90,75 @@ var control = (function() {
|
|||||||
theme.render.accent.input.hex();
|
theme.render.accent.input.hex();
|
||||||
link.groupAndItems();
|
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"),
|
element: helper.e(".control-layout-width"),
|
||||||
path: "layout.width",
|
path: "layout.width",
|
||||||
@ -376,75 +445,6 @@ var control = (function() {
|
|||||||
layout.render.gutter();
|
layout.render.gutter();
|
||||||
render.update();
|
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"),
|
element: helper.e(".control-layout-title"),
|
||||||
path: "layout.title",
|
path: "layout.title",
|
||||||
@ -1397,15 +1397,6 @@ var control = (function() {
|
|||||||
element: helper.e(".control-header-search-style-auto"),
|
element: helper.e(".control-header-search-style-auto"),
|
||||||
path: "header.search.style",
|
path: "header.search.style",
|
||||||
type: "radio",
|
type: "radio",
|
||||||
additionalEvents: [{
|
|
||||||
event: "change",
|
|
||||||
func: function() {
|
|
||||||
edge.box.open({
|
|
||||||
element: helper.e(".header-search-input"),
|
|
||||||
delay: 500
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
func: function() {
|
func: function() {
|
||||||
render.class();
|
render.class();
|
||||||
render.dependents();
|
render.dependents();
|
||||||
@ -1415,15 +1406,6 @@ var control = (function() {
|
|||||||
element: helper.e(".control-header-search-style-custom"),
|
element: helper.e(".control-header-search-style-custom"),
|
||||||
path: "header.search.style",
|
path: "header.search.style",
|
||||||
type: "radio",
|
type: "radio",
|
||||||
additionalEvents: [{
|
|
||||||
event: "change",
|
|
||||||
func: function() {
|
|
||||||
edge.box.open({
|
|
||||||
element: helper.e(".header-search-input"),
|
|
||||||
delay: 500
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
func: function() {
|
func: function() {
|
||||||
render.class();
|
render.class();
|
||||||
render.dependents();
|
render.dependents();
|
||||||
|
@ -134,17 +134,17 @@ var header = (function() {
|
|||||||
style: function() {
|
style: function() {
|
||||||
var action = {
|
var action = {
|
||||||
box: function() {
|
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.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-color-rgb-quick"), ".form-input-button"), "form-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-accent-current-quick"), ".form-input-button"), "form-input-button-link");
|
||||||
helper.removeClass(helper.e(".control-menu-open"), "button-link");
|
helper.removeClass(helper.e(".control-menu-open"), "button-link");
|
||||||
},
|
},
|
||||||
clear: function() {
|
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.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-color-rgb-quick"), ".form-input-button"), "form-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-accent-current-quick"), ".form-input-button"), "form-input-button-link");
|
||||||
helper.addClass(helper.e(".control-menu-open"), "button-link");
|
helper.addClass(helper.e(".control-menu-open"), "button-link");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -152,19 +152,19 @@ var header = (function() {
|
|||||||
},
|
},
|
||||||
dot: function() {
|
dot: function() {
|
||||||
if (state.get.current().header.button.colorAccent.dot.show) {
|
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"), ".form-input-button"), "input-color-dot");
|
||||||
helper.addClass(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"), ".form-input-button"), "input-color-dot-shade");
|
||||||
helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
|
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"), ".input-wrap"), "input-color-dot");
|
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"), ".input-wrap"), "input-color-dot-accent");
|
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"), ".input-wrap"), "input-hide");
|
helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
|
||||||
} else {
|
} 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"), ".form-input-button"), "input-color-dot");
|
||||||
helper.removeClass(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"), ".form-input-button"), "input-color-dot-shade");
|
||||||
helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".input-wrap"), "input-hide");
|
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"), ".input-wrap"), "input-color-dot");
|
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"), ".input-wrap"), "input-color-dot-accent");
|
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"), ".input-wrap"), "input-hide");
|
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
148
src/js/link.js
148
src/js/link.js
@ -434,16 +434,16 @@ var link = (function() {
|
|||||||
var fieldset = helper.node("fieldset");
|
var fieldset = helper.node("fieldset");
|
||||||
|
|
||||||
// group position
|
// 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 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 groupFormPositionSelect = helper.node("select|id:group-form-position,class:group-form-position,tabindex:1");
|
||||||
var groupFormRandomNameButtonWrap = helper.node("div|class:button-wrap");
|
var groupFormRandomNameButtonWrap = helper.node("div|class:form-wrap");
|
||||||
var groupFormRandomNameButton = helper.node("button:Random Group name|class:button mb-0,type:button,tabindex:1");
|
var groupFormRandomNameButton = helper.node("button:Random Group name|class:button,type:button,tabindex:1");
|
||||||
|
|
||||||
// group name
|
// 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 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(groupFormPositionLabel);
|
||||||
groupFormPositionInputWrap.appendChild(groupFormPositionSelect);
|
groupFormPositionInputWrap.appendChild(groupFormPositionSelect);
|
||||||
@ -685,91 +685,100 @@ var link = (function() {
|
|||||||
var fieldset = helper.node("fieldset");
|
var fieldset = helper.node("fieldset");
|
||||||
|
|
||||||
// group existing
|
// 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 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 groupExistingLable = helper.node("label|for:link-form-input-group-existing");
|
||||||
var groupExistingLableText = helper.node("span:Existing Group");
|
var groupExistingLableText = helper.node("span:Existing Group");
|
||||||
var groupExistingLableIcon = helper.node("span|class:label-icon");
|
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 groupExistingFormIndent = helper.node("div|class:form-indent");
|
||||||
var groupExistingGroupInputWrap = 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 mb-0,tabindex:1");
|
var groupExistingGroup = helper.node("select|id:link-form-select-group,class:link-form-select-group,tabindex:1");
|
||||||
var groupExistingPositionInputWrap = helper.node("div|class:input-wrap");
|
var groupExistingPositionInputWrap = helper.node("div|class:form-wrap");
|
||||||
var groupExistingPositionLabel = helper.node("label:Position|for:link-form-position");
|
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
|
// 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 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 groupNewLable = helper.node("label|for:link-form-input-group-new");
|
||||||
var groupNewLableLableText = helper.node("span:New Group");
|
var groupNewLableLableText = helper.node("span:New Group");
|
||||||
var groupNewLableLableIcon = helper.node("span|class:label-icon");
|
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 groupNewFormIndent = helper.node("div|class:form-indent");
|
||||||
var groupNewInputWrap = helper.node("div|class:input-wrap");
|
var groupNewInputWrap = helper.node("div|class:form-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 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:button-wrap");
|
var groupNewRandomNameButtonWrap = helper.node("div|class:form-wrap");
|
||||||
var groupNewRandomNameButton = helper.node("button:Random Group name|class:button mb-0,type:button,tabindex:1,disabled");
|
var groupNewRandomNameButton = helper.node("button:Random Group name|class:button,type:button,tabindex:1,disabled");
|
||||||
|
|
||||||
// letter
|
// 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 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 displayLetterLable = helper.node("label|for:link-form-input-display-letter");
|
||||||
var displayLetterLableText = helper.node("span:Letters");
|
var displayLetterLableText = helper.node("span:Letters");
|
||||||
var displayLetterLableIcon = helper.node("span|class:label-icon");
|
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 displayLetterFormIndent = helper.node("div|class:form-indent");
|
||||||
var displayLetterInputWrap = helper.node("div|class:input-wrap");
|
var displayLetterInputWrap = helper.node("div|class:form-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 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
|
// 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 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 displayIconLable = helper.node("label|for:link-form-input-display-icon");
|
||||||
var displayIconLableText = helper.node("span:Icon");
|
var displayIconLableText = helper.node("span:Icon");
|
||||||
var displayIconLableIcon = helper.node("span|class:label-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 displayIconFormIndent = helper.node("div|class:form-indent");
|
||||||
var displayIconInputWrap = helper.node("div|class:input-wrap");
|
var displayIconInputWrap = helper.node("div|class:form-wrap");
|
||||||
var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-input");
|
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 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 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 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
|
// 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 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
|
// 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 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 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.makeNode({
|
var urlInputHelper = helper.node("div|class:form-helper");
|
||||||
|
var urlInputHelperItem = helper.makeNode({
|
||||||
tag: "p",
|
tag: "p",
|
||||||
text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
|
text: "Be sure to use the full URL and include \"http://\" or \"https://\".",
|
||||||
attr: [{
|
attr: [{
|
||||||
key: "class",
|
key: "class",
|
||||||
value: "form-helper small muted"
|
value: "form-helper-item"
|
||||||
}]
|
}]
|
||||||
});
|
});
|
||||||
|
|
||||||
// accent
|
// accent
|
||||||
|
var accentLabelWrap = helper.node("div|class:form-wrap");
|
||||||
var accentLabel = helper.node("label:Accent colour");
|
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 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 accentGlobalLabel = helper.node("label|for:link-form-input-accent-global");
|
||||||
var accentGlobalLabelText = helper.node("span:Global");
|
var accentGlobalLabelText = helper.node("span:Global");
|
||||||
var accentGlobalLabelIcon = helper.node("span|class:label-icon");
|
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 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 accentCustomLabel = helper.node("label|for:link-form-input-accent-custom");
|
||||||
var accentCustomLabelText = helper.node("span:Custom");
|
var accentCustomLabelText = helper.node("span:Custom");
|
||||||
var accentCustomLabelIcon = helper.node("span|class:label-icon");
|
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 accentColorFormIndent = helper.node("div|class:form-indent");
|
||||||
var accentColorInputWrap = helper.node("div|class:input-wrap");
|
var accentColorInputWrap = helper.node("div|class:form-wrap");
|
||||||
var accentColorFormGroup = helper.node("div|class:form-group form-group-block mb-0");
|
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 mb-0,type:color,value:#000000,tabindex:1,disabled");
|
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 mb-0,type:text,placeholder:Hex code,value:#000000,tabindex:1,maxlength:7,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("p:Use this colour to override the global accent colour.|class:link-form-input-accent-helper form-helper small muted 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);
|
groupExistingRadioWrap.appendChild(groupExistingRadio);
|
||||||
groupExistingLable.appendChild(groupExistingLableIcon);
|
groupExistingLable.appendChild(groupExistingLableIcon);
|
||||||
@ -780,8 +789,9 @@ var link = (function() {
|
|||||||
groupExistingPositionInputWrap.appendChild(groupExistingPosition);
|
groupExistingPositionInputWrap.appendChild(groupExistingPosition);
|
||||||
groupExistingFormIndent.appendChild(groupExistingGroupInputWrap);
|
groupExistingFormIndent.appendChild(groupExistingGroupInputWrap);
|
||||||
groupExistingFormIndent.appendChild(groupExistingPositionInputWrap);
|
groupExistingFormIndent.appendChild(groupExistingPositionInputWrap);
|
||||||
|
groupExistingFormIndentWrap.appendChild(groupExistingFormIndent);
|
||||||
fieldset.appendChild(groupExistingRadioWrap);
|
fieldset.appendChild(groupExistingRadioWrap);
|
||||||
fieldset.appendChild(groupExistingFormIndent);
|
fieldset.appendChild(groupExistingFormIndentWrap);
|
||||||
|
|
||||||
groupNewRadioWrap.appendChild(groupNewRadio);
|
groupNewRadioWrap.appendChild(groupNewRadio);
|
||||||
groupNewLable.appendChild(groupNewLableLableIcon);
|
groupNewLable.appendChild(groupNewLableLableIcon);
|
||||||
@ -791,8 +801,9 @@ var link = (function() {
|
|||||||
groupNewRandomNameButtonWrap.appendChild(groupNewRandomNameButton);
|
groupNewRandomNameButtonWrap.appendChild(groupNewRandomNameButton);
|
||||||
groupNewFormIndent.appendChild(groupNewInputWrap);
|
groupNewFormIndent.appendChild(groupNewInputWrap);
|
||||||
groupNewFormIndent.appendChild(groupNewRandomNameButtonWrap);
|
groupNewFormIndent.appendChild(groupNewRandomNameButtonWrap);
|
||||||
|
groupNewFormIndentWrap.appendChild(groupNewFormIndent);
|
||||||
fieldset.appendChild(groupNewRadioWrap);
|
fieldset.appendChild(groupNewRadioWrap);
|
||||||
fieldset.appendChild(groupNewFormIndent);
|
fieldset.appendChild(groupNewFormIndentWrap);
|
||||||
fieldset.appendChild(helper.node("hr"));
|
fieldset.appendChild(helper.node("hr"));
|
||||||
|
|
||||||
displayLetterRadioWrap.appendChild(displayLetterRadio);
|
displayLetterRadioWrap.appendChild(displayLetterRadio);
|
||||||
@ -802,7 +813,8 @@ var link = (function() {
|
|||||||
fieldset.appendChild(displayLetterRadioWrap);
|
fieldset.appendChild(displayLetterRadioWrap);
|
||||||
displayLetterInputWrap.appendChild(displayLetterInput);
|
displayLetterInputWrap.appendChild(displayLetterInput);
|
||||||
displayLetterFormIndent.appendChild(displayLetterInputWrap);
|
displayLetterFormIndent.appendChild(displayLetterInputWrap);
|
||||||
fieldset.appendChild(displayLetterFormIndent);
|
displayLetterFormIndentWrap.appendChild(displayLetterFormIndent);
|
||||||
|
fieldset.appendChild(displayLetterFormIndentWrap);
|
||||||
displayIconRadiotWrap.appendChild(displayIconRadio);
|
displayIconRadiotWrap.appendChild(displayIconRadio);
|
||||||
displayIconLable.appendChild(displayIconLableIcon);
|
displayIconLable.appendChild(displayIconLableIcon);
|
||||||
displayIconLable.appendChild(displayIconLableText);
|
displayIconLable.appendChild(displayIconLableText);
|
||||||
@ -814,8 +826,10 @@ var link = (function() {
|
|||||||
displayIconFormGroup.appendChild(displayIconFormGroupClear);
|
displayIconFormGroup.appendChild(displayIconFormGroupClear);
|
||||||
displayIconInputWrap.appendChild(displayIconFormGroup);
|
displayIconInputWrap.appendChild(displayIconFormGroup);
|
||||||
displayIconFormIndent.appendChild(displayIconInputWrap);
|
displayIconFormIndent.appendChild(displayIconInputWrap);
|
||||||
|
displayIconHelper.appendChild(displayIconHelperItem);
|
||||||
displayIconFormIndent.appendChild(displayIconHelper);
|
displayIconFormIndent.appendChild(displayIconHelper);
|
||||||
fieldset.appendChild(displayIconFormIndent);
|
displayIconFormIndentWrap.appendChild(displayIconFormIndent);
|
||||||
|
fieldset.appendChild(displayIconFormIndentWrap);
|
||||||
fieldset.appendChild(helper.node("hr"));
|
fieldset.appendChild(helper.node("hr"));
|
||||||
nameInputWrap.appendChild(nameLabel);
|
nameInputWrap.appendChild(nameLabel);
|
||||||
nameInputWrap.appendChild(nameInput);
|
nameInputWrap.appendChild(nameInput);
|
||||||
@ -823,9 +837,11 @@ var link = (function() {
|
|||||||
urlInputWrap.appendChild(urlLabel);
|
urlInputWrap.appendChild(urlLabel);
|
||||||
urlInputWrap.appendChild(urlInput);
|
urlInputWrap.appendChild(urlInput);
|
||||||
fieldset.appendChild(urlInputWrap);
|
fieldset.appendChild(urlInputWrap);
|
||||||
|
urlInputHelper.appendChild(urlInputHelperItem);
|
||||||
fieldset.appendChild(urlInputHelper);
|
fieldset.appendChild(urlInputHelper);
|
||||||
fieldset.appendChild(helper.node("hr"));
|
fieldset.appendChild(helper.node("hr"));
|
||||||
fieldset.appendChild(accentLabel);
|
accentLabelWrap.appendChild(accentLabel);
|
||||||
|
fieldset.appendChild(accentLabelWrap);
|
||||||
accentGlobalRadioWrap.appendChild(accentGlobalRadio);
|
accentGlobalRadioWrap.appendChild(accentGlobalRadio);
|
||||||
accentGlobalLabel.appendChild(accentGlobalLabelIcon);
|
accentGlobalLabel.appendChild(accentGlobalLabelIcon);
|
||||||
accentGlobalLabel.appendChild(accentGlobalLabelText);
|
accentGlobalLabel.appendChild(accentGlobalLabelText);
|
||||||
@ -840,8 +856,10 @@ var link = (function() {
|
|||||||
accentColorFormGroup.appendChild(accentColorHex);
|
accentColorFormGroup.appendChild(accentColorHex);
|
||||||
accentColorInputWrap.appendChild(accentColorFormGroup);
|
accentColorInputWrap.appendChild(accentColorFormGroup);
|
||||||
accentColorFormIndent.appendChild(accentColorInputWrap);
|
accentColorFormIndent.appendChild(accentColorInputWrap);
|
||||||
|
accentColorInputHelper.appendChild(accentColorInputHelperItem);
|
||||||
accentColorFormIndent.appendChild(accentColorInputHelper);
|
accentColorFormIndent.appendChild(accentColorInputHelper);
|
||||||
fieldset.appendChild(accentColorFormIndent);
|
accentColorFormIndentWrap.appendChild(accentColorFormIndent);
|
||||||
|
fieldset.appendChild(accentColorFormIndentWrap);
|
||||||
form.appendChild(fieldset);
|
form.appendChild(fieldset);
|
||||||
|
|
||||||
var makeGroupOptions = function() {
|
var makeGroupOptions = function() {
|
||||||
@ -1182,16 +1200,10 @@ var link = (function() {
|
|||||||
var group = helper.node("div|class:group");
|
var group = helper.node("div|class:group");
|
||||||
var groupBody = helper.node("div|class:group-body");
|
var groupBody = helper.node("div|class:group-body");
|
||||||
var linkEmpty = helper.node("div|class:link-empty link-item");
|
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:small muted");
|
||||||
var para = helper.node("p:No Groups or Bookmarks|class:pb-0");
|
var addButton = helper.node("button:Add a Bookmark|class:button button-small,type:button,tabindex:1");
|
||||||
var formInline = helper.node("div|class:form-inline");
|
linkEmpty.appendChild(para);
|
||||||
var buttonWrap = helper.node("div|class:button-wrap mb-0 mr-0");
|
linkEmpty.appendChild(addButton);
|
||||||
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);
|
|
||||||
groupBody.appendChild(linkEmpty);
|
groupBody.appendChild(linkEmpty);
|
||||||
group.appendChild(groupBody);
|
group.appendChild(groupBody);
|
||||||
addButton.addEventListener("click", function(event) {
|
addButton.addEventListener("click", function(event) {
|
||||||
@ -1201,16 +1213,10 @@ var link = (function() {
|
|||||||
},
|
},
|
||||||
item: function(groupIndex) {
|
item: function(groupIndex) {
|
||||||
var linkEmpty = helper.node("div|class:link-empty link-item");
|
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:small muted");
|
||||||
var para = helper.node("p:Empty Group|class:pb-0");
|
var addButton = helper.node("button:Add a Bookmark|class:button button-small,type:button,tabindex:1");
|
||||||
var formInline = helper.node("div|class:form-inline");
|
linkEmpty.appendChild(para);
|
||||||
var buttonWrap = helper.node("div|class:button-wrap mb-0 mr-0");
|
linkEmpty.appendChild(addButton);
|
||||||
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);
|
|
||||||
addButton.addEventListener("click", function(event) {
|
addButton.addEventListener("click", function(event) {
|
||||||
link.add.item.open();
|
link.add.item.open();
|
||||||
link.add.item.selectGroup(groupIndex);
|
link.add.item.selectGroup(groupIndex);
|
||||||
@ -1221,21 +1227,13 @@ var link = (function() {
|
|||||||
var group = helper.node("div|class:group");
|
var group = helper.node("div|class:group");
|
||||||
var groupBody = helper.node("div|class:group-body");
|
var groupBody = helper.node("div|class:group-body");
|
||||||
var linkEmpty = helper.node("div|class:link-empty link-item");
|
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({
|
var para1 = helper.makeNode({
|
||||||
tag: "p",
|
tag: "p",
|
||||||
text: "No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found",
|
text: "No bookmarks matching \"" + helper.e(".header-search-input").value + "\" found"
|
||||||
attr: [{
|
|
||||||
key: "class",
|
|
||||||
value: "mb-0"
|
|
||||||
}]
|
|
||||||
});
|
});
|
||||||
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");
|
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");
|
||||||
paraWrap1.appendChild(para1);
|
linkEmpty.appendChild(para1);
|
||||||
paraWrap2.appendChild(para2);
|
linkEmpty.appendChild(para2);
|
||||||
linkEmpty.appendChild(paraWrap1);
|
|
||||||
linkEmpty.appendChild(paraWrap2);
|
|
||||||
groupBody.appendChild(linkEmpty);
|
groupBody.appendChild(linkEmpty);
|
||||||
group.appendChild(groupBody);
|
group.appendChild(groupBody);
|
||||||
return group;
|
return group;
|
||||||
|
@ -1385,7 +1385,7 @@ var theme = (function() {
|
|||||||
allThemePreset.forEach(function(arrayItem, index) {
|
allThemePreset.forEach(function(arrayItem, index) {
|
||||||
var themePresetItem = helper.node("div|class:theme-preset-item");
|
var themePresetItem = helper.node("div|class:theme-preset-item");
|
||||||
var themePresetTile = helper.node("div|class:theme-preset-tile");
|
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 themePresetPreview = helper.node("span|class:theme-preset-preview");
|
||||||
var shadeSteps = 4;
|
var shadeSteps = 4;
|
||||||
var rgb = arrayItem.color.rgb;
|
var rgb = arrayItem.color.rgb;
|
||||||
@ -1462,12 +1462,12 @@ var theme = (function() {
|
|||||||
allThemeCuston.forEach(function(arrayItem, index) {
|
allThemeCuston.forEach(function(arrayItem, index) {
|
||||||
var themeCustomItem = helper.node("div|class:theme-custom-item");
|
var themeCustomItem = helper.node("div|class:theme-custom-item");
|
||||||
var themeCustomTile = helper.node("div|class:theme-custom-tile");
|
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 themeCustomPreview = helper.node("span|class:theme-custom-preview");
|
||||||
var themeCustomControl = helper.node("div|class:theme-custom-control");
|
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 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 themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close");
|
||||||
var shadeSteps = 4;
|
var shadeSteps = 4;
|
||||||
var rgb = arrayItem.color.rgb;
|
var rgb = arrayItem.color.rgb;
|
||||||
@ -1566,7 +1566,7 @@ var theme = (function() {
|
|||||||
};
|
};
|
||||||
var form = helper.node("form|class:group-form");
|
var form = helper.node("form|class:group-form");
|
||||||
var fieldset = helper.node("fieldset");
|
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 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");
|
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);
|
inputWrap.appendChild(label);
|
||||||
@ -1600,6 +1600,7 @@ var theme = (function() {
|
|||||||
stagedThemeCustom.theme.timestamp = new Date().getTime();
|
stagedThemeCustom.theme.timestamp = new Date().getTime();
|
||||||
mod.custom.add();
|
mod.custom.add();
|
||||||
data.save();
|
data.save();
|
||||||
|
custom.check();
|
||||||
render.custom.clear();
|
render.custom.clear();
|
||||||
render.custom.all();
|
render.custom.all();
|
||||||
shade.close();
|
shade.close();
|
||||||
@ -1683,8 +1684,8 @@ var theme = (function() {
|
|||||||
};
|
};
|
||||||
var successAction = function() {
|
var successAction = function() {
|
||||||
mod.custom.remove();
|
mod.custom.remove();
|
||||||
custom.check();
|
|
||||||
data.save();
|
data.save();
|
||||||
|
custom.check();
|
||||||
render.custom.clear();
|
render.custom.clear();
|
||||||
render.custom.all();
|
render.custom.all();
|
||||||
shade.close();
|
shade.close();
|
||||||
@ -1732,6 +1733,16 @@ var theme = (function() {
|
|||||||
arrayItem.tabIndex = -2;
|
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();
|
render.custom.tabIndex();
|
||||||
},
|
},
|
||||||
check: function() {
|
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();
|
mod.custom.close();
|
||||||
|
render.custom.formWrap.close();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -1799,6 +1813,7 @@ var theme = (function() {
|
|||||||
render.shadow();
|
render.shadow();
|
||||||
render.preset();
|
render.preset();
|
||||||
render.custom.all();
|
render.custom.all();
|
||||||
|
custom.check();
|
||||||
};
|
};
|
||||||
|
|
||||||
// exposed methods
|
// exposed methods
|
||||||
|
@ -43,87 +43,93 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main class="layout my-5">
|
<main class="layout my-5">
|
||||||
<div class="form-group">
|
<div class="form-wrap">
|
||||||
<button class="button mb-0 style-guide-control disable-on" tabindex="1">Disable</button>
|
<div class="form-group">
|
||||||
<button class="button mb-0 style-guide-control disable-off" tabindex="1">Enable</button>
|
<button class="button style-guide-control disable-on" tabindex="1">Disable</button>
|
||||||
<button class="button mb-0 style-guide-control theme-dark" tabindex="1">Dark</button>
|
<button class="button style-guide-control disable-off" tabindex="1">Enable</button>
|
||||||
<button class="button mb-0 style-guide-control theme-light" tabindex="1">Light</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>
|
</div>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-control-theme-color" class="style-guide-control">Theme Colour</label>
|
<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>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-control-theme-accent" class="style-guide-control">Accent Colour</label>
|
<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>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="radius" class="style-guide-control">Radius</label>
|
<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">
|
<input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="form-inline">
|
<div class="form-wrap">
|
||||||
<div class="button-wrap">
|
<div class="form-inline">
|
||||||
<button class="button button-small mb-0" tabindex="1">Button Small</button>
|
<button class="button button-small" tabindex="1">Button Small</button>
|
||||||
</div>
|
<button class="button" tabindex="1">Button Medium</button>
|
||||||
<div class="button-wrap">
|
<button class="button button-large" tabindex="1">Button Large</button>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="input-wrap input-button">
|
<div class="form-wrap">
|
||||||
<input id="style-guide-input-button-1" type="checkbox" tabindex="1">
|
<div class="form-input-button">
|
||||||
<label for="style-guide-input-button-1" class="mb-0"><span class="label-icon"></span>Checkbox Button</label>
|
<input id="style-guide-input-button-1" type="checkbox" tabindex="1">
|
||||||
</div>
|
<label for="style-guide-input-button-1" class="mb-0"><span class="label-icon"></span>Checkbox Button</label>
|
||||||
<div class="form-group nested-button mb-0">
|
|
||||||
<div class="input-wrap 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">
|
|
||||||
<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">
|
|
||||||
<input id="style-guide-radio-3" type="radio" name="style-guide-radio-1" tabindex="1">
|
|
||||||
<label for="style-guide-radio-3"><span class="label-icon"></span> Radio Button 3</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrap input-button input-hide">
|
<div class="form-wrap">
|
||||||
<input id="style-guide-input-button-2" type="checkbox" tabindex="1">
|
<div class="form-group form-group-nested-button">
|
||||||
<label for="style-guide-input-button-2" class="mb-0"><span class="label-icon"></span>Hidden Checkbox Button</label>
|
<div class="form-input-button">
|
||||||
</div>
|
<input id="style-guide-radio-1" type="radio" name="style-guide-radio-1" tabindex="1">
|
||||||
<div class="form-group nested-button input-hide mb-0">
|
<label for="style-guide-radio-1"><span class="label-icon"></span> Radio Button 1</label>
|
||||||
<div class="input-wrap input-button">
|
</div>
|
||||||
<input id="style-guide-radio-4" type="radio" name="style-guide-radio-2" tabindex="1">
|
<div class="form-input-button">
|
||||||
<label for="style-guide-radio-4"><span class="label-icon"></span> Hidden Radio Button 1</label>
|
<input id="style-guide-radio-2" type="radio" name="style-guide-radio-1" tabindex="1">
|
||||||
</div>
|
<label for="style-guide-radio-2"><span class="label-icon"></span> Radio Button 2</label>
|
||||||
<div class="input-wrap input-button">
|
</div>
|
||||||
<input id="style-guide-radio-5" type="radio" name="style-guide-radio-2" tabindex="1">
|
<div class="form-input-button">
|
||||||
<label for="style-guide-radio-5"><span class="label-icon"></span> Hidden Radio Button 2</label>
|
<input id="style-guide-radio-3" type="radio" name="style-guide-radio-1" tabindex="1">
|
||||||
</div>
|
<label for="style-guide-radio-3"><span class="label-icon"></span> Radio Button 3</label>
|
||||||
<div class="input-wrap input-button">
|
</div>
|
||||||
<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>
|
||||||
<div class="form-inline">
|
<div class="form-wrap">
|
||||||
<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">
|
<input id="style-guide-input-button-2" type="checkbox" tabindex="1">
|
||||||
<label for="style-guide-input-color-1">Hidden Input Colour Button</label>
|
<label for="style-guide-input-button-2" class="mb-0"><span class="label-icon"></span>Hidden Checkbox Button</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrap input-button input-color-dot">
|
</div>
|
||||||
<input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-input-color-2">Input Colour Button</label>
|
<div class="form-group form-group-nested-button">
|
||||||
|
<div class="form-input-button form-input-hide">
|
||||||
|
<input id="style-guide-radio-4" type="radio" name="style-guide-radio-2" tabindex="1">
|
||||||
|
<label for="style-guide-radio-4"><span class="label-icon"></span> Hidden Radio Button 1</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-input-button form-input-hide">
|
||||||
|
<input id="style-guide-radio-5" type="radio" name="style-guide-radio-2" tabindex="1">
|
||||||
|
<label for="style-guide-radio-5"><span class="label-icon"></span> Hidden Radio Button 2</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-input-button form-input-hide">
|
||||||
|
<input id="style-guide-radio-6" type="radio" name="style-guide-radio-2" tabindex="1">
|
||||||
|
<label for="style-guide-radio-6"><span class="label-icon"></span> Hidden Radio Button 3</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrap input-button input-color-dot input-color-dot-accent">
|
</div>
|
||||||
<input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-input-color-3">Input Colour Accent Button</label>
|
<div class="form-inline">
|
||||||
</div>
|
<div class="form-input-button form-input-hide">
|
||||||
<div class="button-wrap">
|
<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="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="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="form-dropdown form-dropdown-inline">
|
<div class="form-dropdown form-dropdown-inline">
|
||||||
<button class="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
|
<button class="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
|
||||||
<span class="button-text">Button Dropdown</span>
|
<span class="button-text">Button Dropdown</span>
|
||||||
@ -140,108 +146,112 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="form-inline">
|
<div class="form-wrap">
|
||||||
<div class="input-wrap">
|
<div class="form-inline form-inline-spacer">
|
||||||
<input id="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
|
<div class="form-wrap">
|
||||||
<label for="style-guide-checkbox-1"><span class="label-icon"></span> Checkbox 1</label>
|
<input id="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
|
||||||
</div>
|
<label for="style-guide-checkbox-1"><span class="label-icon"></span> Checkbox 1</label>
|
||||||
<div class="input-wrap">
|
</div>
|
||||||
<input id="style-guide-checkbox-2" type="checkbox" tabindex="1">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-checkbox-2"><span class="label-icon"></span> Checkbox 2</label>
|
<input id="style-guide-checkbox-2" type="checkbox" tabindex="1">
|
||||||
</div>
|
<label for="style-guide-checkbox-2"><span class="label-icon"></span> Checkbox 2</label>
|
||||||
<div class="input-wrap">
|
</div>
|
||||||
<input id="style-guide-checkbox-3" type="checkbox" tabindex="1">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-checkbox-3"><span class="label-icon"></span> Checkbox 3</label>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-inline">
|
<div class="form-wrap">
|
||||||
<div class="input-wrap">
|
<div class="form-inline form-inline-spacer">
|
||||||
<input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
|
<div class="form-wrap">
|
||||||
<label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
|
<input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
|
||||||
</div>
|
<label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
|
||||||
<div class="input-wrap">
|
</div>
|
||||||
<input id="style-guide-radio-8" type="radio" name="style-guide-radio-3" tabindex="1">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-radio-8"><span class="label-icon"></span> Radio 2</label>
|
<input id="style-guide-radio-8" type="radio" name="style-guide-radio-3" tabindex="1">
|
||||||
</div>
|
<label for="style-guide-radio-8"><span class="label-icon"></span> Radio 2</label>
|
||||||
<div class="input-wrap">
|
</div>
|
||||||
<input id="style-guide-radio-9" type="radio" name="style-guide-radio-3" tabindex="1">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-radio-9"><span class="label-icon"></span> Radio 3</label>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-grid-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-grid form-grid-3x3">
|
<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>
|
<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>
|
<label for="style-guide-form-grid-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-grid-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-grid form-grid-3x1">
|
<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>
|
<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>
|
<label for="style-guide-form-grid-left"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-center"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||||
</div>
|
</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">
|
<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>
|
<label for="style-guide-form-grid-right"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-input-text">Input Text</label>
|
<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">
|
<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>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-textarea">Textarea</label>
|
<label for="style-guide-textarea">Textarea</label>
|
||||||
<textarea id="style-guide-textarea" class="textarea mb-0" spellcheck="false" placeholder="Placeholder" tabindex="1"></textarea>
|
<textarea id="style-guide-textarea" class="textarea mb-0" spellcheck="false" placeholder="Placeholder" tabindex="1"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-input-range">Input Range</label>
|
<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">
|
<input id="style-guide-input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-input-colour">Input Colour</label>
|
<label for="style-guide-input-colour">Input Colour</label>
|
||||||
<input id="style-guide-input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
|
<input id="style-guide-input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-select-1">Select</label>
|
<label for="style-guide-select-1">Select</label>
|
||||||
<select id="style-guide-select-1" class="mb-0" tabindex="1">
|
<select id="style-guide-select-1" class="mb-0" tabindex="1">
|
||||||
<option>Option 1</option>
|
<option>Option 1</option>
|
||||||
@ -249,7 +259,7 @@
|
|||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-wrap">
|
<div class="form-wrap">
|
||||||
<label for="style-guide-form-group-1">Form Group</label>
|
<label for="style-guide-form-group-1">Form Group</label>
|
||||||
<div class="form-group form-group-block mb-0">
|
<div class="form-group form-group-block mb-0">
|
||||||
<input id="style-guide-form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
<input id="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 class="form-group-text" tabindex="1">Form Group Text</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="feedback-wrap">
|
<div class="form-wrap">
|
||||||
<div class="form-feedback">
|
<div class="form-feedback">
|
||||||
<p class="muted">Form feedback.</p>
|
<p class="muted">Form feedback.</p>
|
||||||
<p class="muted small">With some small text.</p>
|
<p class="muted small">With some small text.</p>
|
||||||
@ -272,6 +282,7 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="js/helper.js"></script>
|
<script src="js/helper.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var formElements = ["button", "input", "textarea", "select"];
|
var formElements = ["button", "input", "textarea", "select"];
|
||||||
var textElements = ["label", ".form-group-text", ".form-grid", ".form-feedback"];
|
var textElements = ["label", ".form-group-text", ".form-grid", ".form-feedback"];
|
||||||
|
Loading…
Reference in New Issue
Block a user