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