extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-06 14:10:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve checkboxes, radios, buttons and other form UI

Browse Source
This commit is contained in:
zombieFox 2019-11-10 23:57:04 +00:00
parent 0f5fbd3b49
commit f0a5e6c0f6
10 changed files with 541 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/css/button.css
View File

@ -4,7 +4,7 @@ input[type="button"],
input[type="reset"],
input[type="submit"] {
background-color: rgb(var(--button-background));
padding: 0.125em 1em;
padding: 0.25em 1em;
margin: 0 0 1em 0;
color: rgb(var(--button-text));
font-size: 1em;
@ -12,36 +12,30 @@ input[type="submit"] {
min-height: 2.5em;
line-height: 1;
border: 0;
border-top-width: var(--layout-line-width);
border-bottom-width: var(--layout-line-width);
border-top-color: transparent;
border-bottom-color: rgb(var(--button-border));
border-style: solid;
border-radius: var(--theme-radius);
position: relative;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border var(--layout-timing-extra-fast);
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}
button:hover,
button:focus,
.button:hover,
button:hover,
.button:focus,
input[type="button"]:hover,
.button:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover {
background-color: rgb(var(--button-background-focus-hover));
border-bottom-color: rgb(var(--button-border-focus-hover));
color: rgb(var(--button-text-focus-hover));
outline: none;
text-decoration: none;
@ -53,27 +47,77 @@ input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
background-color: rgb(var(--button-background-active));
border-bottom-color: rgb(var(--button-border-active));
color: rgb(var(--button-text-active));
transition: none;
outline: none;
text-decoration: none;
transition: none;
}
button:disabled,
.button:disabled,
button:disabled:hover,
.button:disabled:hover,
button:disabled:focus,
.button:disabled:focus,
button:disabled:active,
.button:disabled,
.button:disabled:hover,
.button:disabled:focus,
.button:disabled:active {
background-color: rgb(var(--button-background-disabled));
border-bottom-color: rgb(var(--button-border-disabled));
color: rgb(var(--button-text-disabled));
cursor: default;
text-decoration: none;
}
button:after,
.button:after,
input[type="button"]:after,
input[type="reset"]:after,
input[type="submit"]:after {
content: "";
background: rgb(var(--button-border));
border-radius: var(--theme-radius);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 calc(100% - var(--layout-line-width)), 100% calc(100% - var(--layout-line-width)), 100% 100%, 0% 100%);
transition: background-color var(--layout-timing-extra-fast);
pointer-events: none;
}
button:focus:after,
button:hover:after,
.button:focus:after,
.button:hover:after,
input[type="button"]:focus:after,
input[type="button"]:hover:after,
input[type="reset"]:focus:after,
input[type="reset"]:hover:after,
input[type="submit"]:focus:after,
input[type="submit"]:hover:after {
background-color: rgb(var(--button-border-focus-hover));
}
button:active:after,
.button:active:after,
input[type="button"]:active:after,
input[type="reset"]:active:after,
input[type="submit"]:active:after {
background-color: rgb(var(--button-border-active));
transition: none;
}
button:disabled:after,
.button:disabled:after,
button:disabled:hover:after,
.button:disabled:hover:after,
button:disabled:focus:after,
.button:disabled:focus:after,
button:disabled:active:after,
.button:disabled:active:after {
background-color: rgb(var(--button-border-disabled));
}
.button-text {
pointer-events: none;
}
@ -87,10 +131,13 @@ button [class*=" icon-"],
}
.button.active {
border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-focus-active));
}
.button.active:after {
background-color: rgb(var(--theme-accent));
}
.button-small {
font-size: 0.8em;
}
@ -132,6 +179,10 @@ button [class*=" button-"]:last-child,
color: rgb(var(--button-link-text));
}
.button-link:after {
content: none;
}
.button-link:hover,
.button-link:focus {
background-color: transparent;
@ -159,4 +210,10 @@ button [class*=" button-"]:last-child,
padding: 0.5em 0;
position: relative;
width: 100%;
display: block;
}
.button-wrap-inline {
width: initial;
display: inline-block;
}

308
src/css/form.css
View File

@ -326,10 +326,8 @@ input[type="radio"] {
input[type="checkbox"]+label,
input[type="radio"]+label {
padding: 0.5em;
margin: -0.25em -0.5em;
border-radius: var(--theme-radius);
color: rgb(var(--form-label));
padding: 0;
margin: 0;
font-size: 1em;
font-family: var(--font-regular);
cursor: pointer;
@ -337,7 +335,7 @@ input[type="radio"]+label {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}
input[type="checkbox"]:hover+label,
@ -345,13 +343,11 @@ input[type="checkbox"]:focus+label,
input[type="radio"]:hover+label,
input[type="radio"]:focus+label {
color: rgb(var(--form-label-hover));
box-shadow: var(--form-hover-ring);
}
input[type="checkbox"]:active+label,
input[type="radio"]:active+label {
color: rgb(var(--form-label-focus-active));
box-shadow: var(--form-focus-ring-accent);
}
input[type="checkbox"]:checked+label,
@ -366,67 +362,113 @@ input[type="radio"]:disabled+label,
input[type="radio"]:disabled:hover+label,
input[type="radio"]:disabled:focus+label {
color: rgb(var(--form-label-disabled));
box-shadow: none;
cursor: default;
}
input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
input[type="checkbox"]+label .label-icon,
input[type="radio"]+label .label-icon {
content: "";
margin-right: 0.5em;
color: rgb(var(--form-icon));
font-size: 1.5em;
line-height: 1;
width: 1em;
height: 1em;
margin-right: 1em;
border-style: solid;
border-width: var(--layout-line-width);
border-color: rgb(var(--form-icon));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
position: relative;
top: 0.125em;
display: block;
transform: scale(1);
font-family: "Icons" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
flex-grow: 0;
flex-shrink: 0;
transition: border-color var(--layout-timing-extra-fast), border-width var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
}
input[type="checkbox"]+label:before {
content: "\e835";
input[type="checkbox"]:focus+label .label-icon,
input[type="checkbox"]:hover+label .label-icon,
input[type="radio"]:focus+label .label-icon,
input[type="radio"]:hover+label .label-icon {
border-color: rgb(var(--form-icon-focus-hover));
box-shadow: var(--form-hover-ring);
}
input[type="checkbox"]:checked+label:before {
content: "\e834";
input[type="checkbox"]:active+label .label-icon,
input[type="radio"]:active+label .label-icon {
border-color: rgb(var(--form-icon-active));
box-shadow: var(--form-focus-ring-accent);
}
input[type="radio"]+label:before {
content: "\e836";
input[type="checkbox"]:checked+label .label-icon,
input[type="radio"]:checked+label .label-icon {
border-color: rgb(var(--form-icon-checked));
}
input[type="radio"]:checked+label:before {
content: "\e837";
input[type="checkbox"]+label .label-icon {
border-radius: 0.25em;
}
input[type="checkbox"]:focus+label:before,
input[type="checkbox"]:hover+label:before,
input[type="radio"]:focus+label:before,
input[type="radio"]:hover+label:before {
color: rgb(var(--form-icon-hover-focus));
input[type="radio"]+label .label-icon {
border-radius: 50%;
}
input[type="checkbox"]:active+label:before,
input[type="radio"]:active+label:before {
color: rgb(var(--form-icon-active));
input[type="checkbox"]:checked+label .label-icon,
input[type="radio"]:checked+label .label-icon {
border-top-width: calc(var(--form-thumb-size) / 2);
border-bottom-width: calc(var(--form-thumb-size) / 2);
border-left-width: calc(var(--form-thumb-size) / 2);
border-right-width: calc(var(--form-thumb-size) / 2);
}
input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
color: rgb(var(--form-icon-checked));
input[type="checkbox"]:disabled+label .label-icon,
input[type="checkbox"]:disabled:hover+label .label-icon,
input[type="checkbox"]:disabled:focus+label .label-icon,
input[type="radio"]:disabled+label .label-icon,
input[type="radio"]:disabled:hover+label .label-icon,
input[type="radio"]:disabled:focus+label .label-icon {
border-color: rgb(var(--form-icon-disabled));
box-shadow: none;
}
input[type="checkbox"]:disabled+label:before,
input[type="radio"]:disabled+label:before {
color: rgb(var(--form-icon-disabled));
cursor: default;
input[type="checkbox"]+label .label-icon:after,
input[type="radio"]+label .label-icon:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
opacity: 0;
transition: opacity var(--layout-timing-extra-fast), background-color var(--layout-timing-extra-fast), transform var(--layout-timing-fast);
}
input[type="checkbox"]+label .label-icon:after {
border-right: calc(var(--layout-line-width) / 2) solid rgb(var(--form-icon-symbol));
border-bottom: calc(var(--layout-line-width) / 2) solid rgb(var(--form-icon-symbol));
width: calc(var(--form-thumb-size) / 4);
height: calc(var(--form-thumb-size) / 2);
transform: translate(-50%, -50%) rotate(0deg);
}
input[type="checkbox"]:checked+label .label-icon:after {
transform: translate(-45%, -60%) rotate(45deg);
}
input[type="radio"]+label .label-icon:after {
background-color: rgb(var(--form-icon-symbol));
border-radius: 50%;
width: calc(var(--form-thumb-size) / 5);
height: calc(var(--form-thumb-size) / 5);
transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked+label .label-icon:after,
input[type="radio"]:checked+label .label-icon:after {
opacity: 1;
}
input[type="checkbox"]:disabled+label .label-icon:after {
border-color: rgb(var(--form-icon-symbol-disabled));
}
input[type="radio"]:disabled+label .label-icon:after {
background-color: rgb(var(--form-icon-symbol-disabled));
}
/* color */
@ -735,7 +777,7 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button input[type="color"]+label,
.input-button input[type="file"]+label {
background-color: rgb(var(--button-background));
padding: 0.125em 1em;
padding: 0.25em 1em;
margin: 0;
color: rgb(var(--button-text));
font-size: 1em;
@ -743,42 +785,33 @@ input[type="range"]:disabled::-moz-range-progress {
min-height: 2.5em;
line-height: 1;
border: 0;
border-top-width: var(--layout-line-width);
border-bottom-width: var(--layout-line-width);
border-style: solid;
border-color: transparent;
border-radius: var(--theme-radius);
position: relative;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border var(--layout-timing-extra-fast);
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: hidden;
box-shadow: none;
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"]+label:before,
.input-button input[type="radio"]+label:before {
font-size: 1em;
margin-right: 1em;
transform: scale(1.5);
}
.input-button input[type="checkbox"]:hover+label,
.input-button input[type="checkbox"]:focus+label,
.input-button input[type="radio"]:hover+label,
.input-button input[type="checkbox"]:hover+label,
.input-button input[type="radio"]:focus+label,
.input-button input[type="color"]:hover+label,
.input-button input[type="radio"]:hover+label,
.input-button input[type="color"]:focus+label,
.input-button input[type="file"]:hover+label,
.input-button input[type="file"]:focus+label {
.input-button input[type="color"]:hover+label,
.input-button input[type="file"]:focus+label,
.input-button input[type="file"]:hover+label {
background-color: rgb(var(--button-background-focus-hover));
border-bottom-color: rgb(var(--button-border-focus-hover));
color: rgb(var(--button-text-focus-hover));
outline: none;
text-decoration: none;
}
.input-button input[type="checkbox"]:active+label,
@ -786,8 +819,9 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button input[type="color"]:active+label,
.input-button input[type="file"]:active+label {
background-color: rgb(var(--button-background-active));
border-bottom-color: rgb(var(--button-border-active));
color: rgb(var(--button-text-focus-active));
color: rgb(var(--button-text-active));
outline: none;
text-decoration: none;
transition: none;
}
@ -796,8 +830,9 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button input[type="color"]:checked+label,
.input-button input[type="file"]:checked+label {
background-color: rgb(var(--button-background-active));
border-bottom-color: rgb(var(--theme-accent));
color: rgb(var(--button-text-focus-active));
color: rgb(var(--button-text-active));
outline: none;
text-decoration: none;
transition: none;
}
@ -818,9 +853,74 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button input[type="file"]:disabled:focus+label,
.input-button input[type="file"]:disabled:active+label {
background-color: rgb(var(--button-background-disabled));
border-bottom-color: rgb(var(--button-border-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 {
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 {
background: rgb(var(--button-border));
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: var(--layout-line-width);
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 {
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 {
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 {
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 {
background-color: rgb(var(--button-border-disabled));
}
.input-button-link input[type="checkbox"]+label,
@ -828,8 +928,6 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button-link input[type="color"]+label,
.input-button-link input[type="file"]+label {
background-color: transparent;
border: 0;
color: rgb(var(--button-link-text));
}
.input-button-link input[type="checkbox"]:hover+label,
@ -845,7 +943,6 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button-link input[type="file"]:focus+label,
.input-button-link input[type="file"]:checked+label {
background-color: transparent;
color: rgb(var(--button-link-text-focus-hover));
}
.input-button-link input[type="checkbox"]:active+label,
@ -853,7 +950,6 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button-link input[type="color"]:active+label,
.input-button-link input[type="file"]:active+label {
background-color: transparent;
color: rgb(var(--button-link-text-active));
}
.input-button-link input:disabled[type="checkbox"]+label,
@ -874,7 +970,13 @@ input[type="range"]:disabled::-moz-range-progress {
.input-button-link input:disabled[type="file"]:hover+label,
.input-button-link input:disabled[type="file"]:focus+label {
background-color: transparent;
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 {
content: none;
}
.input-color-dot input[type="color"] {
@ -911,13 +1013,13 @@ input[type="range"]:disabled::-moz-range-progress {
position: relative;
}
.input-hide input[type="checkbox"]+label:before,
.input-hide input[type="checkbox"]:checked+label:before,
.input-hide input[type="radio"]+label:before,
.input-hide input[type="radio"]:checked+label:before,
.input-hide input[type="file"]+label:before,
.input-hide input[type="file"]:checked+label:before {
content: none;
.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 {
display: none;
}
.input-hide input[type="color"],
@ -943,27 +1045,24 @@ input[type="range"]:disabled::-moz-range-progress {
padding: calc(var(--form-thumb-size) / 2);
display: inline-grid;
overflow: hidden;
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
transition: background-color var(--layout-timing-extra-fast);
}
.form-grid:hover {
outline: none;
background-color: rgb(var(--form-grid-background-hover));
box-shadow: var(--form-hover-ring);
}
.form-grid:focus,
.form-grid:focus-within {
outline: none;
background-color: rgb(var(--form-grid-background-focus));
box-shadow: var(--form-hover-ring);
}
.form-grid.disabled,
.form-grid.disabled:focus,
.form-grid.disabled:focus-within {
background-color: rgb(var(--form-grid-background-disabled));
box-shadow: none;
}
.form-grid-3x3 {
@ -1001,7 +1100,16 @@ input[type="range"]:disabled::-moz-range-progress {
box-shadow: none;
}
.form-grid input[type="checkbox"]+label:before,
.form-grid input[type="checkbox"]+label .label-icon,
.form-grid input[type="radio"]+label .label-icon {
margin-right: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* .form-grid input[type="checkbox"]+label:before,
.form-grid input[type="radio"]+label:before {
content: "";
background-color: rgb(var(--form-grid-input-background));
@ -1070,8 +1178,7 @@ input[type="range"]:disabled::-moz-range-progress {
width: var(--form-thumb-size);
height: var(--form-thumb-size);
box-shadow: none;
}
} */
.form-indent {
margin-left: 2.25em;
}
@ -1172,6 +1279,10 @@ input[type="range"]:disabled::-moz-range-progress {
z-index: 1;
}
.form-group .button:after {
border-radius: 0;
}
.form-group .form-group-text {
flex-shrink: 0;
}
@ -1204,6 +1315,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group .form-group-text:first-child,
.form-group .button:first-child,
.form-group .button:first-child:after,
.form-group>select:first-child,
.form-group>input[type="email"]:first-child,
.form-group>input[type="number"]:first-child,
@ -1217,6 +1329,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-group .form-group-text:last-child,
.form-group .button:last-child,
.form-group .button:last-child:after,
.form-group>select:last-child,
.form-group>input[type="email"]:last-child,
.form-group>input[type="number"]:last-child,
@ -1236,6 +1349,7 @@ input[type="range"]:disabled::-moz-range-progress {
}
.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 {
@ -1243,6 +1357,7 @@ input[type="range"]:disabled::-moz-range-progress {
}
.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 {
@ -1253,6 +1368,10 @@ input[type="range"]:disabled::-moz-range-progress {
position: relative;
}
.form-dropdown.form-dropdown-inline {
display: inline-block;
}
.form-dropdown-menu {
background-color: rgb(var(--form-dropdown-background));
border-radius: var(--theme-radius);
@ -1279,6 +1398,13 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: 0;
margin-bottom: 0;
justify-content: flex-start;
position: relative;
box-shadow: none;
}
.form-dropdown-menu button:after,
.form-dropdown-menu .button:after {
content: none;
}
.form-group.nested-button .form-dropdown-menu *:first-child .button,

4
src/css/link.css
View File

@ -329,6 +329,10 @@
flex-grow: 1;
}
.link-control-item:after {
content: none;
}
.is-link-style-list .link-control-item {
flex-basis: inherit;
}

11
src/css/menu.css
View File

@ -96,16 +96,21 @@
.menu-nav-button {
background-color: transparent;
border-bottom-color: transparent;
border-radius: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-radius: 0;
height: 3.25em;
line-height: 1;
flex-grow: 1;
}
.menu-nav-button:after,
.menu-nav-button:after {
background-color: transparent;
border-radius: 0;
}
.menu-nav-area-tab .menu-nav-button:first-child {
border-radius: var(--theme-radius) 0 0 0;
}
@ -190,7 +195,7 @@
@media (min-width: 1100px) {
.menu-nav-area-tab .menu-nav-button {
flex-basis: 0;
flex-basis: auto;
max-width: inherit;
}
}

5
src/css/modal.css
View File

@ -68,13 +68,16 @@
.modal-button {
background-color: transparent;
border-color: transparent;
margin: 0;
padding-top: 1.5em;
padding-bottom: 1.5em;
flex-basis: 50%;
}
.modal-button:after {
background-color: transparent;
}
.modal-controls .modal-button:first-child {
border-radius: 0 0 0 var(--theme-radius);
}

25
src/css/variables.css
View File

@ -103,10 +103,12 @@
--form-group-text-border-disabled: var(--theme-gray-01);
--form-border-disabled: var(--theme-gray-02);
--form-icon: var(--theme-gray-08);
--form-icon-hover-focus: var(--theme-gray-16);
--form-icon-focus-hover: var(--theme-gray-18);
--form-icon-active: var(--theme-style-text);
--form-icon-checked: var(--theme-style-text);
--form-icon-disabled: var(--theme-gray-04);
--form-icon-checked: var(--theme-style-text);
--form-icon-symbol: var(--theme-gray-02);
--form-icon-symbol-disabled: var(--theme-gray-01);
--form-placeholder: var(--theme-gray-06);
--form-placeholder-focus-hover: var(--theme-gray-10);
--form-placeholder-disabled: var(--theme-gray-03);
@ -123,8 +125,8 @@
--form-helper: var(--theme-gray-12);
--form-helper-disabled: var(--theme-gray-04);
--form-thumb-size: 1.25em;
--form-range-thumb-background: var(--theme-gray-14);
--form-range-thumb-background-focus-hover: var(--theme-gray-16);
--form-range-thumb-background: var(--theme-gray-16);
--form-range-thumb-background-focus-hover: var(--theme-gray-18);
--form-range-thumb-background-active: var(--theme-style-text);
--form-range-thumb-background-disabled: var(--theme-gray-03);
--form-range-track-background: var(--theme-gray-06);
@ -134,14 +136,9 @@
--form-range-progress-background: var(--theme-gray-14);
--form-range-progress-background-active: var(--theme-accent);
--form-range-progress-background-disabled: var(--theme-gray-02);
--form-grid-input-background: var(--theme-gray-03);
--form-grid-input-background-focus-hover: var(--theme-gray-16);
--form-grid-input-background-active: var(--theme-style-text);
--form-grid-input-background-checked: var(--theme-gray-14);
--form-grid-input-background-disabled: var(--theme-gray-03);
--form-grid-background: var(--theme-gray-02);
--form-grid-background-hover: var(--theme-gray-01);
--form-grid-background-focus: var(--theme-gray-01);
--form-grid-background-hover: var(--theme-gray-02);
--form-grid-background-focus: var(--theme-gray-02);
--form-grid-background-disabled: var(--theme-gray-01);
--form-grid-border: var(--theme-gray-08);
--form-grid-border-hover-focus: var(--theme-gray-20);
@ -158,12 +155,12 @@
--button-background-active: var(--theme-gray-04);
--button-background-disabled: var(--theme-gray-01);
--button-border: var(--theme-gray-02);
--button-border-focus-hover: var(--theme-gray-08);
--button-border-focus-hover: var(--theme-gray-06);
--button-border-active: var(--theme-accent);
--button-border-disabled: var(--theme-gray-01);
--button-text: var(--theme-gray-12);
--button-text-focus-hover: var(--theme-style-text);
--button-text-focus-active: var(--theme-style-text);
--button-text-focus-hover: var(--theme-gray-20);
--button-text-active: var(--theme-style-text);
--button-text-disabled: var(--theme-gray-04);
--button-link-text: var(--theme-gray-12);
--button-link-text-focus-hover: var(--theme-style-text);

260
src/index.html
View File

@ -78,10 +78,11 @@
<div class="form-group nested-button mb-0">
<div class="input-wrap input-button input-hide py-0">
<input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
<label for="control-link-edit" class="mb-0">Edit</label>
<label for="control-link-edit" class="mb-0"><span class="label-icon"></span> Edit</label>
</div>
<div class="form-dropdown">
<button class="form-dropdown-toggle button" tabindex="1">
<div class="input-wrap py-0">
<div class="form-dropdown">
<button class="control-add-toggle form-dropdown-toggle button" tabindex="1">
<span class="button-text">Add</span>
</button>
<ul class="list-unstyled form-dropdown-menu">
@ -93,6 +94,7 @@
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-item header-button header-accent">
@ -151,39 +153,39 @@
<div class="form-grid form-grid-3x3 control-layout-alignment-grid">
<div class="input-wrap">
<input id="control-layout-alignment-topleft" class="control-layout-alignment-topleft" type="radio" name="control-layout-alignment" value="topleft" tabindex="-1">
<label for="control-layout-alignment-topleft"><span class="sr-only">Top left</span></label>
<label for="control-layout-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-topcenter" class="control-layout-alignment-topcenter" type="radio" name="control-layout-alignment" value="topcenter" tabindex="-1">
<label for="control-layout-alignment-topcenter"><span class="sr-only">Top center</span></label>
<label for="control-layout-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-topright" class="control-layout-alignment-topright" type="radio" name="control-layout-alignment" value="topright" tabindex="-1">
<label for="control-layout-alignment-topright"><span class="sr-only">Top right</span></label>
<label for="control-layout-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-centerleft" class="control-layout-alignment-centerleft" type="radio" name="control-layout-alignment" value="centerleft" tabindex="-1">
<label for="control-layout-alignment-centerleft"><span class="sr-only">Center left</span></label>
<label for="control-layout-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-centercenter" class="control-layout-alignment-centercenter" type="radio" name="control-layout-alignment" value="centercenter" tabindex="-1">
<label for="control-layout-alignment-centercenter"><span class="sr-only">Center center</span></label>
<label for="control-layout-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-centerright" class="control-layout-alignment-centerright" type="radio" name="control-layout-alignment" value="centerright" tabindex="-1">
<label for="control-layout-alignment-centerright"><span class="sr-only">Center right</span></label>
<label for="control-layout-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-bottomleft" class="control-layout-alignment-bottomleft" type="radio" name="control-layout-alignment" value="bottomleft" tabindex="-1">
<label for="control-layout-alignment-bottomleft"><span class="sr-only">Bottom left</span></label>
<label for="control-layout-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-bottomcenter" class="control-layout-alignment-bottomcenter" type="radio" name="control-layout-alignment" value="bottomcenter" tabindex="-1">
<label for="control-layout-alignment-bottomcenter"><span class="sr-only">Bottom Center</span></label>
<label for="control-layout-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
</div>
<div class="input-wrap">
<input id="control-layout-alignment-bottomright" class="control-layout-alignment-bottomright" type="radio" name="control-layout-alignment" value="bottomright" tabindex="-1">
<label for="control-layout-alignment-bottomright"><span class="sr-only">Bottom right</span></label>
<label for="control-layout-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
</div>
</div>
</div>
@ -197,11 +199,11 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="-1">
<label for="control-layout-order-headerlink">Header then Bookmarks</label>
<label for="control-layout-order-headerlink"><span class="label-icon"></span> Header then Bookmarks</label>
</div>
<div class="input-wrap">
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="-1">
<label for="control-layout-order-linkheader">Bookmarks then Header</label>
<label for="control-layout-order-linkheader"><span class="label-icon"></span> Bookmarks then Header</label>
</div>
<p class="control-layout-order-helper form-helper small">Only available when Bookmarks are shown.</p>
</div>
@ -240,7 +242,7 @@
<hr>
<div class="input-wrap">
<input id="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="-1">
<label for="control-layout-scrollpastend">Scroll past end</label>
<label for="control-layout-scrollpastend"><span class="label-icon"></span> Scroll past end</label>
</div>
</div>
</div>
@ -266,15 +268,15 @@
<div class="form-grid form-grid-3x1 control-header-area-alignment-grid">
<div class="input-wrap">
<input id="control-header-area-alignment-left" class="control-header-area-alignment-left" type="radio" name="control-header-area-alignment" value="left" tabindex="-1">
<label for="control-header-area-alignment-left"><span class="sr-only">Left</span></label>
<label for="control-header-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="input-wrap">
<input id="control-header-area-alignment-center" class="control-header-area-alignment-center" type="radio" name="control-header-area-alignment" value="center" tabindex="-1">
<label for="control-header-area-alignment-center"><span class="sr-only">Center</span></label>
<label for="control-header-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div>
<div class="input-wrap">
<input id="control-header-area-alignment-right" class="control-header-area-alignment-right" type="radio" name="control-header-area-alignment" value="right" tabindex="-1">
<label for="control-header-area-alignment-right"><span class="sr-only">Right</span></label>
<label for="control-header-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
@ -285,15 +287,15 @@
<div class="form-grid form-grid-3x1 control-header-item-alignment-grid">
<div class="input-wrap">
<input id="control-header-item-alignment-left" class="control-header-item-alignment-left" type="radio" name="control-header-item-alignment" value="left" tabindex="-1">
<label for="control-header-item-alignment-left"><span class="sr-only">Left</span></label>
<label for="control-header-item-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="input-wrap">
<input id="control-header-item-alignment-center" class="control-header-item-alignment-center" type="radio" name="control-header-item-alignment" value="center" tabindex="-1">
<label for="control-header-item-alignment-center"><span class="sr-only">Center</span></label>
<label for="control-header-item-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div>
<div class="input-wrap">
<input id="control-header-item-alignment-right" class="control-header-item-alignment-right" type="radio" name="control-header-item-alignment" value="right" tabindex="-1">
<label for="control-header-item-alignment-right"><span class="sr-only">Right</span></label>
<label for="control-header-item-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
@ -307,20 +309,20 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="-1">
<label for="control-header-greeting-show">Show</label>
<label for="control-header-greeting-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="-1">
<label for="control-header-greeting-type-good">"Good morning..."</label>
<label for="control-header-greeting-type-good"><span class="label-icon"></span> "Good morning..."</label>
</div>
<div class="input-wrap">
<input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="-1">
<label for="control-header-greeting-type-hello">"Hello..."</label>
<label for="control-header-greeting-type-hello"><span class="label-icon"></span> "Hello..."</label>
</div>
<div class="input-wrap">
<input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="-1">
<label for="control-header-greeting-type-hi">"Hi..."</label>
<label for="control-header-greeting-type-hi"><span class="label-icon"></span> "Hi..."</label>
</div>
<hr>
<div class="input-wrap">
@ -345,17 +347,17 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-header-transitional-show" class="control-header-transitional-show" type="checkbox" tabindex="-1">
<label for="control-header-transitional-show">Show</label>
<label for="control-header-transitional-show"><span class="label-icon"></span> Show</label>
</div>
<p class="control-header-transitional-show-helper form-helper small">Available when Date or Time is shown.</p>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-transitional-type-timeanddate" class="control-header-transitional-type-timeanddate" type="radio" name="control-header-transitional-type" value="timeanddate" tabindex="-1">
<label for="control-header-transitional-type-timeanddate">"The time and date is"</label>
<label for="control-header-transitional-type-timeanddate"><span class="label-icon"></span> "The time and date is"</label>
</div>
<div class="input-wrap">
<input id="control-header-transitional-type-its" class="control-header-transitional-type-its" type="radio" name="control-header-transitional-type" value="its" tabindex="-1">
<label for="control-header-transitional-type-its">"It's"</label>
<label for="control-header-transitional-type-its"><span class="label-icon"></span> "It's"</label>
</div>
<hr>
<div class="input-wrap">
@ -375,61 +377,61 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-header-clock-hours-show" class="control-header-clock-hours-show" type="checkbox" tabindex="-1">
<label for="control-header-clock-hours-show">Hours</label>
<label for="control-header-clock-hours-show"><span class="label-icon"></span> Hours</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-clock-hours-display-number" class="control-header-clock-hours-display-number" type="radio" name="control-header-clock-hours" value="number" tabindex="-1">
<label for="control-header-clock-hours-display-number">As number</label>
<label for="control-header-clock-hours-display-number"><span class="label-icon"></span> As number</label>
</div>
<div class="input-wrap">
<input id="control-header-clock-hours-display-word" class="control-header-clock-hours-display-word" type="radio" name="control-header-clock-hours" value="word" tabindex="-1">
<label for="control-header-clock-hours-display-word">As word</label>
<label for="control-header-clock-hours-display-word"><span class="label-icon"></span> As word</label>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-clock-minutes-show" class="control-header-clock-minutes-show" type="checkbox" tabindex="-1">
<label for="control-header-clock-minutes-show">Minutes</label>
<label for="control-header-clock-minutes-show"><span class="label-icon"></span> Minutes</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-clock-minutes-display-number" class="control-header-clock-minutes-display-number" type="radio" name="control-header-clock-minutes" value="number" tabindex="-1">
<label for="control-header-clock-minutes-display-number">As number</label>
<label for="control-header-clock-minutes-display-number"><span class="label-icon"></span> As number</label>
</div>
<div class="input-wrap">
<input id="control-header-clock-minutes-display-word" class="control-header-clock-minutes-display-word" type="radio" name="control-header-clock-minutes" value="word" tabindex="-1">
<label for="control-header-clock-minutes-display-word">As word</label>
<label for="control-header-clock-minutes-display-word"><span class="label-icon"></span> As word</label>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-clock-seconds-show" class="control-header-clock-seconds-show" type="checkbox" tabindex="-1">
<label for="control-header-clock-seconds-show">Seconds</label>
<label for="control-header-clock-seconds-show"><span class="label-icon"></span> Seconds</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-clock-seconds-display-number" class="control-header-clock-seconds-display-number" type="radio" name="control-header-clock-seconds" value="number" tabindex="-1">
<label for="control-header-clock-seconds-display-number">As number</label>
<label for="control-header-clock-seconds-display-number"><span class="label-icon"></span> As number</label>
</div>
<div class="input-wrap">
<input id="control-header-clock-seconds-display-word" class="control-header-clock-seconds-display-word" type="radio" name="control-header-clock-seconds" value="word" tabindex="-1">
<label for="control-header-clock-seconds-display-word">As word</label>
<label for="control-header-clock-seconds-display-word"><span class="label-icon"></span> As word</label>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-clock-separator-show" class="control-header-clock-separator-show" type="checkbox" tabindex="-1">
<label for="control-header-clock-separator-show">Separators</label>
<label for="control-header-clock-separator-show"><span class="label-icon"></span> Separators</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-clock-hour24-show" class="control-header-clock-hour24-show" type="checkbox" tabindex="-1">
<label for="control-header-clock-hour24-show">24 Hours</label>
<label for="control-header-clock-hour24-show"><span class="label-icon"></span> 24 Hours</label>
</div>
<div class="input-wrap">
<input id="control-header-clock-meridiem-show" class="control-header-clock-meridiem-show" type="checkbox" tabindex="-1">
<label for="control-header-clock-meridiem-show">AM/PM</label>
<label for="control-header-clock-meridiem-show"><span class="label-icon"></span> AM/PM</label>
</div>
<hr>
<div class="input-wrap">
@ -448,123 +450,123 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-header-date-day-show" class="control-header-date-day-show" type="checkbox" tabindex="-1">
<label for="control-header-date-day-show">Day</label>
<label for="control-header-date-day-show"><span class="label-icon"></span> Day</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-date-day-display-number" class="control-header-date-day-display-number" type="radio" name="control-header-date-day-display" value="number" tabindex="-1">
<label for="control-header-date-day-display-number">As number</label>
<label for="control-header-date-day-display-number"><span class="label-icon"></span> As number</label>
</div>
<div class="form-indent">
<label class="control-header-date-day-week-start-label">Start of the week</label>
<div class="input-wrap">
<input id="control-header-date-day-week-start-monday" class="control-header-date-day-week-start-monday" type="radio" name="control-header-date-day-week-start" value="monday" tabindex="-1">
<label for="control-header-date-day-week-start-monday">Monday</label>
<label for="control-header-date-day-week-start-monday"><span class="label-icon"></span> Monday</label>
</div>
<div class="input-wrap">
<input id="control-header-date-day-week-start-sunday" class="control-header-date-day-week-start-sunday" type="radio" name="control-header-date-day-week-start" value="sunday" tabindex="-1">
<label for="control-header-date-day-week-start-sunday">Sunday</label>
<label for="control-header-date-day-week-start-sunday"><span class="label-icon"></span> Sunday</label>
</div>
<p class="control-header-date-day-week-start-helper form-helper small">Define what day "1" represents, either Monday or Sunday.</p>
</div>
<div class="input-wrap">
<input id="control-header-date-day-display-word" class="control-header-date-day-display-word" type="radio" name="control-header-date-day-display" value="word" tabindex="-1">
<label for="control-header-date-day-display-word">As word</label>
<label for="control-header-date-day-display-word"><span class="label-icon"></span> As word</label>
</div>
<div class="form-indent">
<label class="control-header-date-day-length-label">Word length</label>
<div class="input-wrap">
<input id="control-header-date-day-length-long" class="control-header-date-day-length-long" type="radio" name="control-header-date-day-length" value="long" tabindex="-1">
<label for="control-header-date-day-length-long">Long</label>
<label for="control-header-date-day-length-long"><span class="label-icon"></span> Long</label>
</div>
<div class="input-wrap">
<input id="control-header-date-day-length-short" class="control-header-date-day-length-short" type="radio" name="control-header-date-day-length" value="short" tabindex="-1">
<label for="control-header-date-day-length-short">Short</label>
<label for="control-header-date-day-length-short"><span class="label-icon"></span> Short</label>
</div>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-date-date-show" class="control-header-date-date-show" type="checkbox" tabindex="-1">
<label for="control-header-date-date-show">Date</label>
<label for="control-header-date-date-show"><span class="label-icon"></span> Date</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-date-date-display-number" class="control-header-date-date-display-number" type="radio" name="control-header-date-date-display" value="number" tabindex="-1">
<label for="control-header-date-date-display-number">As number</label>
<label for="control-header-date-date-display-number"><span class="label-icon"></span> As number</label>
</div>
<div class="input-wrap">
<input id="control-header-date-date-display-word" class="control-header-date-date-display-word" type="radio" name="control-header-date-date-display" value="word" tabindex="-1">
<label for="control-header-date-date-display-word">As word</label>
<label for="control-header-date-date-display-word"><span class="label-icon"></span> As word</label>
</div>
<div class="input-wrap">
<input id="control-header-date-date-ordinal" class="control-header-date-date-ordinal" type="checkbox" tabindex="-1">
<label for="control-header-date-date-ordinal">Ordinal numbers</label>
<label for="control-header-date-date-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
</div>
<p class="control-header-date-date-ordinal-helper form-helper small">Display Date as 1st, 2nd, 3rd, 4th etc.</p>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-date-month-show" class="control-header-date-month-show" type="checkbox" tabindex="-1">
<label for="control-header-date-month-show">Month</label>
<label for="control-header-date-month-show"><span class="label-icon"></span> Month</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-date-month-display-number" class="control-header-date-month-display-number" type="radio" name="control-header-date-month-display" value="number" tabindex="-1">
<label for="control-header-date-month-display-number">As number</label>
<label for="control-header-date-month-display-number"><span class="label-icon"></span> As number</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-date-month-ordinal" class="control-header-date-month-ordinal" type="checkbox" tabindex="-1">
<label for="control-header-date-month-ordinal">Ordinal numbers</label>
<label for="control-header-date-month-ordinal"><span class="label-icon"></span> Ordinal numbers</label>
</div>
<p class="control-header-date-month-ordinal-helper form-helper small">Display Month as 1st, 2nd, 3rd, 4th etc.</p>
</div>
<div class="input-wrap">
<input id="control-header-date-month-display-word" class="control-header-date-month-display-word" type="radio" name="control-header-date-month-display" value="word" tabindex="-1">
<label for="control-header-date-month-display-word">As word</label>
<label for="control-header-date-month-display-word"><span class="label-icon"></span> As word</label>
</div>
<div class="form-indent">
<label class="control-header-date-month-length-label">Word length</label>
<div class="input-wrap">
<input id="control-header-date-month-length-long" class="control-header-date-month-length-long" type="radio" name="control-header-date-month-length" value="long" tabindex="-1">
<label for="control-header-date-month-length-long">Long</label>
<label for="control-header-date-month-length-long"><span class="label-icon"></span> Long</label>
</div>
<div class="input-wrap">
<input id="control-header-date-month-length-short" class="control-header-date-month-length-short" type="radio" name="control-header-date-month-length" value="short" tabindex="-1">
<label for="control-header-date-month-length-short">Short</label>
<label for="control-header-date-month-length-short"><span class="label-icon"></span> Short</label>
</div>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-date-year-show" class="control-header-date-year-show" type="checkbox" tabindex="-1">
<label for="control-header-date-year-show">Year</label>
<label for="control-header-date-year-show"><span class="label-icon"></span> Year</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-date-year-display-number" class="control-header-date-year-display-number" type="radio" name="control-header-date-year-display" value="number" tabindex="-1">
<label for="control-header-date-year-display-number">As number</label>
<label for="control-header-date-year-display-number"><span class="label-icon"></span> As number</label>
</div>
<div class="input-wrap">
<input id="control-header-date-year-display-word" class="control-header-date-year-display-word" type="radio" name="control-header-date-year-display" value="word" tabindex="-1">
<label for="control-header-date-year-display-word">As word</label>
<label for="control-header-date-year-display-word"><span class="label-icon"></span> As word</label>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-date-separator-show" class="control-header-date-separator-show" type="checkbox" tabindex="-1">
<label for="control-header-date-separator-show">Separators</label>
<label for="control-header-date-separator-show"><span class="label-icon"></span> Separators</label>
</div>
<hr>
<label class="control-header-date-format-label">Format</label>
<div class="input-wrap">
<input id="control-header-date-format-datemonth" class="control-header-date-format-datemonth" type="radio" name="control-header-date-format" value="datemonth" tabindex="-1">
<label for="control-header-date-format-datemonth">Date/Month</label>
<label for="control-header-date-format-datemonth"><span class="label-icon"></span> Date/Month</label>
</div>
<div class="input-wrap">
<input id="control-header-date-format-monthdate" class="control-header-date-format-monthdate" type="radio" name="control-header-date-format" value="monthdate" tabindex="-1">
<label for="control-header-date-format-monthdate">Month/Date</label>
<label for="control-header-date-format-monthdate"><span class="label-icon"></span> Month/Date</label>
</div>
<hr>
<div class="input-wrap">
@ -583,18 +585,18 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="-1">
<label for="control-header-search-show">Show</label>
<label for="control-header-search-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-indent">
<label class="control-header-search-style-label">Search box width</label>
<div class="input-wrap">
<input id="control-header-search-style-auto" class="control-header-search-style-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
<label for="control-header-search-style-auto">Auto</label>
<label for="control-header-search-style-auto"><span class="label-icon"></span> Auto</label>
</div>
<p class="control-header-search-style-auto-helper form-helper small">Search box will grow to best fit available space.</p>
<div class="input-wrap">
<input id="control-header-search-style-custom" class="control-header-search-style-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
<label for="control-header-search-style-custom">Custom</label>
<label for="control-header-search-style-custom"><span class="label-icon"></span> Custom</label>
</div>
<p class="control-header-search-style-custom-helper form-helper small">Define how wide the Search box should be inside the Header Area.</p>
<div class="form-indent">
@ -606,34 +608,34 @@
<hr>
<div class="input-wrap">
<input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
<label for="control-header-search-focus">Focus on load/refresh</label>
<label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
</div>
<p class="control-header-search-focus-helper form-helper small">May not work in some browsers.</p>
<hr>
<label class="control-header-search-engine-label">Search engine</label>
<div class="input-wrap">
<input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="-1">
<label for="control-header-search-engine-google">Google</label>
<label for="control-header-search-engine-google"><span class="label-icon"></span> Google</label>
</div>
<div class="input-wrap">
<input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
<label for="control-header-search-engine-duckduckgo">DuckDuckGo</label>
<label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
</div>
<div class="input-wrap">
<input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
<label for="control-header-search-engine-youtube">YouTube</label>
<label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
</div>
<div class="input-wrap">
<input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
<label for="control-header-search-engine-giphy">Giphy</label>
<label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
</div>
<div class="input-wrap">
<input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
<label for="control-header-search-engine-bing">Bing</label>
<label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
</div>
<div class="input-wrap">
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
<label for="control-header-search-engine-custom">Custom</label>
<label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -654,15 +656,15 @@
<div class="form-grid form-grid-3x1 control-header-search-text-alignment-grid">
<div class="input-wrap">
<input id="control-header-search-text-alignment-left" class="control-header-search-text-alignment-left" type="radio" name="control-header-search-text-alignment" value="left" tabindex="-1">
<label for="control-header-search-text-alignment-left"><span class="sr-only">Left</span></label>
<label for="control-header-search-text-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="input-wrap">
<input id="control-header-search-text-alignment-center" class="control-header-search-text-alignment-center" type="radio" name="control-header-search-text-alignment" value="center" tabindex="-1">
<label for="control-header-search-text-alignment-center"><span class="sr-only">Center</span></label>
<label for="control-header-search-text-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div>
<div class="input-wrap">
<input id="control-header-search-text-alignment-right" class="control-header-search-text-alignment-right" type="radio" name="control-header-search-text-alignment" value="right" tabindex="-1">
<label for="control-header-search-text-alignment-right"><span class="sr-only">Right</span></label>
<label for="control-header-search-text-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
@ -686,21 +688,21 @@
<label class="control-header-button-style-label">Button style</label>
<div class="input-wrap">
<input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="-1">
<label for="control-header-button-style-box">Box</label>
<label for="control-header-button-style-box"><span class="label-icon"></span> Box</label>
</div>
<div class="input-wrap">
<input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="-1">
<label for="control-header-button-style-clear">Clear</label>
<label for="control-header-button-style-clear"><span class="label-icon"></span> Clear</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-button-editadd-show" class="control-header-button-editadd-show" type="checkbox" tabindex="-1">
<label for="control-header-button-editadd-show">Show Edit/Add</label>
<label for="control-header-button-editadd-show"><span class="label-icon"></span> Show Edit/Add</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-header-button-accent-show" class="control-header-button-accent-show" type="checkbox" tabindex="-1">
<label for="control-header-button-accent-show">Show Accent</label>
<label for="control-header-button-accent-show"><span class="label-icon"></span> Show Accent</label>
</div>
<hr>
<div class="input-wrap">
@ -736,12 +738,12 @@
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-position-sticky" class="control-header-position-sticky" type="radio" name="control-header-position" value="sticky" tabindex="-1">
<label for="control-header-position-sticky">Sticky</label>
<label for="control-header-position-sticky"><span class="label-icon"></span> Sticky</label>
</div>
<p class="control-header-position-sticky-helper form-helper small">Header sticks to the page when scrolling up or down.</p>
<div class="input-wrap">
<input id="control-header-position-inline" class="control-header-position-inline" type="radio" name="control-header-position" value="inline" tabindex="-1">
<label for="control-header-position-inline">Inline</label>
<label for="control-header-position-inline"><span class="label-icon"></span> Inline</label>
</div>
<p class="control-header-position-inline-helper form-helper small">Header moves inline with the content when scrolling up or down.</p>
</div>
@ -754,17 +756,17 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="-1">
<label for="control-header-shade-show">Show</label>
<label for="control-header-shade-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="-1">
<label for="control-header-shade-style-always">Always visible</label>
<label for="control-header-shade-style-always"><span class="label-icon"></span> Always visible</label>
</div>
<p class="control-header-shade-style-always-helper form-helper small">Useful for when a Background Image is shown.</p>
<div class="input-wrap">
<input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="-1">
<label for="control-header-shade-style-scroll">Visible on scroll</label>
<label for="control-header-shade-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
</div>
<p class="control-header-shade-style-scroll-helper form-helper small">The page will not scroll if Bookmarks are not shown.</p>
<hr>
@ -775,7 +777,7 @@
<hr>
<div class="input-wrap">
<input id="control-header-radius" class="control-header-radius" type="checkbox" tabindex="-1">
<label for="control-header-radius">Corner radius</label>
<label for="control-header-radius"><span class="label-icon"></span> Corner radius</label>
</div>
</div>
</div>
@ -790,7 +792,7 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-group-name-show" class="control-group-name-show" type="checkbox" tabindex="-1">
<label for="control-group-name-show">Show</label>
<label for="control-group-name-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -807,15 +809,15 @@
<div class="form-grid form-grid-3x1 control-group-area-alignment-grid">
<div class="input-wrap">
<input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
<label for="control-group-area-alignment-left"><span class="sr-only">Left</span></label>
<label for="control-group-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="input-wrap">
<input id="control-group-area-alignment-center" class="control-group-area-alignment-center" type="radio" name="control-group-area-alignment" value="center" tabindex="-1">
<label for="control-group-area-alignment-center"><span class="sr-only">Center</span></label>
<label for="control-group-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div>
<div class="input-wrap">
<input id="control-group-area-alignment-right" class="control-group-area-alignment-right" type="radio" name="control-group-area-alignment" value="right" tabindex="-1">
<label for="control-group-area-alignment-right"><span class="sr-only">Right</span></label>
<label for="control-group-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
@ -856,15 +858,15 @@
<div class="form-grid form-grid-3x1 control-link-area-alignment-grid">
<div class="input-wrap">
<input id="control-link-area-alignment-left" class="control-link-area-alignment-left" type="radio" name="control-link-area-alignment" value="left" tabindex="-1">
<label for="control-link-area-alignment-left"><span class="sr-only">Left</span></label>
<label for="control-link-area-alignment-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
</div>
<div class="input-wrap">
<input id="control-link-area-alignment-center" class="control-link-area-alignment-center" type="radio" name="control-link-area-alignment" value="center" tabindex="-1">
<label for="control-link-area-alignment-center"><span class="sr-only">Center</span></label>
<label for="control-link-area-alignment-center"><span class="label-icon"></span> <span class="sr-only">Center</span></label>
</div>
<div class="input-wrap">
<input id="control-link-area-alignment-right" class="control-link-area-alignment-right" type="radio" name="control-link-area-alignment" value="right" tabindex="-1">
<label for="control-link-area-alignment-right"><span class="sr-only">Right</span></label>
<label for="control-link-area-alignment-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
</div>
</div>
</div>
@ -878,7 +880,7 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-link-show" class="control-link-show" type="checkbox" tabindex="-1">
<label for="control-link-show">Show</label>
<label for="control-link-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -894,46 +896,46 @@
<div class="form-grid form-grid-3x3 control-link-item-display-alignment-grid">
<div class="input-wrap">
<input id="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="-1">
<label for="control-link-item-display-alignment-topleft"><span class="sr-only">Top left</span></label>
<label for="control-link-item-display-alignment-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="-1">
<label for="control-link-item-display-alignment-topcenter"><span class="sr-only">Top center</span></label>
<label for="control-link-item-display-alignment-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="-1">
<label for="control-link-item-display-alignment-topright"><span class="sr-only">Top right</span></label>
<label for="control-link-item-display-alignment-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="-1">
<label for="control-link-item-display-alignment-centerleft"><span class="sr-only">Center left</span></label>
<label for="control-link-item-display-alignment-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="-1">
<label for="control-link-item-display-alignment-centercenter"><span class="sr-only">Center center</span></label>
<label for="control-link-item-display-alignment-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="-1">
<label for="control-link-item-display-alignment-centerright"><span class="sr-only">Center right</span></label>
<label for="control-link-item-display-alignment-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="-1">
<label for="control-link-item-display-alignment-bottomleft"><span class="sr-only">Bottom left</span></label>
<label for="control-link-item-display-alignment-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="-1">
<label for="control-link-item-display-alignment-bottomcenter"><span class="sr-only">Bottom Center</span></label>
<label for="control-link-item-display-alignment-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
</div>
<div class="input-wrap">
<input id="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="-1">
<label for="control-link-item-display-alignment-bottomright"><span class="sr-only">Bottom right</span></label>
<label for="control-link-item-display-alignment-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
</div>
</div>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-item-display-show" class="control-link-item-display-show" type="checkbox" tabindex="-1">
<label for="control-link-item-display-show">Letter/Icon</label>
<label for="control-link-item-display-show"><span class="label-icon"></span> Letter/Icon</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -955,7 +957,7 @@
<hr>
<div class="input-wrap">
<input id="control-link-item-name-show" class="control-link-item-name-show" type="checkbox" tabindex="-1">
<label for="control-link-item-name-show">Name</label>
<label for="control-link-item-name-show"><span class="label-icon"></span> Name</label>
<div class="form-indent">
<div class="input-wrap">
<label for="control-link-item-name-size">Name size</label>
@ -969,37 +971,37 @@
<hr>
<div class="input-wrap">
<input id="control-link-item-order-displayname" class="control-link-item-order-displayname" type="radio" name="control-link-item-order" value="displayname" tabindex="-1">
<label for="control-link-item-order-displayname">Letter/Icon then Name</label>
<label for="control-link-item-order-displayname"><span class="label-icon"></span> Letter/Icon then Name</label>
</div>
<div class="input-wrap">
<input id="control-link-item-order-namedisplay" class="control-link-item-order-namedisplay" type="radio" name="control-link-item-order" value="namedisplay" tabindex="-1">
<label for="control-link-item-order-namedisplay">Name then Letter/Icon</label>
<label for="control-link-item-order-namedisplay"><span class="label-icon"></span> Name then Letter/Icon</label>
</div>
<p class="control-link-item-order-namedisplay-helper form-helper small">Only available when Letter/Icon and Name is shown.</p>
<hr>
<div class="input-wrap">
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="-1">
<label for="control-link-item-url-show">URL on tile hover</label>
<label for="control-link-item-url-show"><span class="label-icon"></span> URL on tile hover</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="-1">
<label for="control-link-item-line-show">Tile line</label>
<label for="control-link-item-line-show"><span class="label-icon"></span> Tile line</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-item-shadow-show" class="control-link-item-shadow-show" type="checkbox" tabindex="-1">
<label for="control-link-item-shadow-show">Tile shadow</label>
<label for="control-link-item-shadow-show"><span class="label-icon"></span> Tile shadow</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-item-hoverscale" class="control-link-item-hoverscale" type="checkbox" tabindex="-1">
<label for="control-link-item-hoverscale">Grow on tile hover</label>
<label for="control-link-item-hoverscale"><span class="label-icon"></span> Grow on tile hover</label>
</div>
<hr>
<div class="input-wrap">
<input id="control-link-newtab" class="control-link-newtab" type="checkbox" tabindex="-1">
<label for="control-link-newtab">Open Bookmarks in a new tab</label>
<label for="control-link-newtab"><span class="label-icon"></span> Open Bookmarks in a new tab</label>
</div>
</div>
</div>
@ -1022,12 +1024,12 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-link-style-block" class="control-link-style-block" type="radio" name="control-link-style" value="block" tabindex="-1">
<label for="control-link-style-block">Block</label>
<label for="control-link-style-block"><span class="label-icon"></span> Block</label>
</div>
<p class="control-link-style-block-helper form-helper small">Bookmark tiles more square shaped with content stacked vertically.</p>
<div class="input-wrap">
<input id="control-link-style-list" class="control-link-style-list" type="radio" name="control-link-style" value="list" tabindex="-1">
<label for="control-link-style-list">List</label>
<label for="control-link-style-list"><span class="label-icon"></span> List</label>
</div>
<p class="control-link-style-list-helper form-helper small">Bookmark tiles more short and wide with content stacked horizontally.</p>
</div>
@ -1039,11 +1041,11 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-link-orientation-top" class="control-link-orientation-top" type="radio" name="control-link-orientation" value="top" tabindex="-1">
<label for="control-link-orientation-top">Top</label>
<label for="control-link-orientation-top"><span class="label-icon"></span> Top</label>
</div>
<div class="input-wrap">
<input id="control-link-orientation-bottom" class="control-link-orientation-bottom" type="radio" name="control-link-orientation" value="bottom" tabindex="-1">
<label for="control-link-orientation-bottom">Bottom</label>
<label for="control-link-orientation-bottom"><span class="label-icon"></span> Bottom</label>
</div>
<p class="control-link-orientation-helper form-helper small">Display the URL and Controls either at the top of bottom of a Tile.</p>
</div>
@ -1097,28 +1099,28 @@
<hr>
<div class="input-wrap">
<input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
<label for="control-theme-accent-random-active">Random Accent colour on load/refresh</label>
<label for="control-theme-accent-random-active"><span class="label-icon"></span> Random Accent colour on load/refresh</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="-1">
<label for="control-theme-accent-random-style-any">Any colour</label>
<label for="control-theme-accent-random-style-any"><span class="label-icon"></span> Any colour</label>
</div>
<div class="input-wrap">
<input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="-1">
<label for="control-theme-accent-random-style-light">Light colours</label>
<label for="control-theme-accent-random-style-light"><span class="label-icon"></span> Light colours</label>
</div>
<div class="input-wrap">
<input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="-1">
<label for="control-theme-accent-random-style-dark">Dark colours</label>
<label for="control-theme-accent-random-style-dark"><span class="label-icon"></span> Dark colours</label>
</div>
<div class="input-wrap">
<input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="-1">
<label for="control-theme-accent-random-style-pastel">Pastel colours</label>
<label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span> Pastel colours</label>
</div>
<div class="input-wrap">
<input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="-1">
<label for="control-theme-accent-random-style-saturated">Saturated colours</label>
<label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span> Saturated colours</label>
</div>
<div class="button-wrap">
<button class="control-theme-accent-randomise button mb-0" tabindex="-1">Randomise now</button>
@ -1133,11 +1135,11 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
<label for="control-theme-style-dark">Dark</label>
<label for="control-theme-style-dark"><span class="label-icon"></span> Dark</label>
</div>
<div class="input-wrap">
<input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
<label for="control-theme-style-light">Light</label>
<label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
</div>
<p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
<hr>
@ -1160,12 +1162,12 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
<label for="control-background-color-by-theme">Theme background colour</label>
<label for="control-background-color-by-theme"><span class="label-icon"></span> Theme background colour</label>
</div>
<p class="control-background-color-by-theme-helper form-helper small">Background colour defined by the Dark or Light Theme.</p>
<div class="input-wrap">
<input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
<label for="control-background-color-by-custom">Custom background colour</label>
<label for="control-background-color-by-custom"><span class="label-icon"></span> Custom background colour</label>
</div>
<div class="form-indent">
<div class="input-wrap">
@ -1186,12 +1188,12 @@
<div class="menu-item-form">
<div class="input-wrap">
<input id="control-background-image-show" class="control-background-image-show" type="checkbox" tabindex="-1">
<label for="control-background-image-show">Show</label>
<label for="control-background-image-show"><span class="label-icon"></span> Show</label>
</div>
<div class="form-indent">
<div class="input-wrap">
<input id="control-background-image-from-file" class="control-background-image-from-file" type="radio" name="control-background-image-from" value="file" tabindex="-1">
<label for="control-background-image-from-file">Use local file</label>
<label for="control-background-image-from-file"><span class="label-icon"></span> Use local file</label>
</div>
<div class="form-indent">
<div class="input-wrap input-button input-hide form-inline">
@ -1209,7 +1211,7 @@
</div>
<div class="input-wrap">
<input id="control-background-image-from-url" class="control-background-image-from-url" type="radio" name="control-background-image-from" value="url" tabindex="-1">
<label for="control-background-image-from-url">Use URL</label>
<label for="control-background-image-from-url"><span class="label-icon"></span> Use URL</label>
</div>
<div class="form-indent">
<div class="input-wrap">

2
src/js/header.js
View File

@ -141,8 +141,8 @@ var header = (function() {
},
clear: function() {
helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
helper.addClass(helper.e(".control-add-toggle"), "button-link");
helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
helper.addClass(helper.e(".control-link-add"), "button-link");
helper.addClass(helper.e(".control-menu-open"), "button-link");
}
};

36
src/js/link.js
View File

@ -661,7 +661,9 @@ var link = (function() {
// group existing
var groupExistingRadioWrap = helper.node("div|class:input-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:Existing group|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 groupExistingLableIcon = helper.node("span|class:label-icon");
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");
@ -672,7 +674,9 @@ var link = (function() {
// group new
var groupNewRadioWrap = helper.node("div|class:input-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:New group|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 groupNewLableLableIcon = helper.node("span|class:label-icon");
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");
@ -680,7 +684,9 @@ var link = (function() {
// letter
var displayLetterRadioWrap = helper.node("div|class:input-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:Letters|for:link-form-input-display-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 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");
@ -688,7 +694,9 @@ var link = (function() {
// icon
var displayIconRadiotWrap = helper.node("div|class:input-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:Icon|for:link-form-input-display-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 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-wrapper");
@ -720,10 +728,14 @@ var link = (function() {
var accentLabel = helper.node("label:Accent colour");
var accentGlobalRadioWrap = helper.node("div|class:input-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:Global|for:link-form-input-accent-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 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:Custom|for:link-form-input-accent-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 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");
@ -732,6 +744,8 @@ var link = (function() {
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");
groupExistingRadioWrap.appendChild(groupExistingRadio);
groupExistingLable.appendChild(groupExistingLableIcon);
groupExistingLable.appendChild(groupExistingLableText);
groupExistingRadioWrap.appendChild(groupExistingLable);
groupExistingGroupInputWrap.appendChild(groupExistingGroup);
groupExistingPositionInputWrap.appendChild(groupExistingPositionLabel);
@ -742,6 +756,8 @@ var link = (function() {
fieldset.appendChild(groupExistingFormIndent);
groupNewRadioWrap.appendChild(groupNewRadio);
groupNewLable.appendChild(groupNewLableLableIcon);
groupNewLable.appendChild(groupNewLableLableText);
groupNewRadioWrap.appendChild(groupNewLable);
groupNewInputWrap.appendChild(groupNewInput);
groupNewFormIndent.appendChild(groupNewInputWrap);
@ -750,12 +766,16 @@ var link = (function() {
fieldset.appendChild(helper.node("hr"));
displayLetterRadioWrap.appendChild(displayLetterRadio);
displayLetterLable.appendChild(displayLetterLableIcon);
displayLetterLable.appendChild(displayLetterLableText);
displayLetterRadioWrap.appendChild(displayLetterLable);
fieldset.appendChild(displayLetterRadioWrap);
displayLetterInputWrap.appendChild(displayLetterInput);
displayLetterFormIndent.appendChild(displayLetterInputWrap);
fieldset.appendChild(displayLetterFormIndent);
displayIconRadiotWrap.appendChild(displayIconRadio);
displayIconLable.appendChild(displayIconLableIcon);
displayIconLable.appendChild(displayIconLableText);
displayIconRadiotWrap.appendChild(displayIconLable);
fieldset.appendChild(displayIconRadiotWrap);
displayIconFormGroupClear.appendChild(displayIconFormGroupClearIcon);
@ -777,9 +797,13 @@ var link = (function() {
fieldset.appendChild(helper.node("hr"));
fieldset.appendChild(accentLabel);
accentGlobalRadioWrap.appendChild(accentGlobalRadio);
accentGlobalLabel.appendChild(accentGlobalLabelIcon);
accentGlobalLabel.appendChild(accentGlobalLabelText);
accentGlobalRadioWrap.appendChild(accentGlobalLabel);
fieldset.appendChild(accentGlobalRadioWrap);
accentCustomInputWrap.appendChild(accentCustomRadio);
accentCustomLabel.appendChild(accentCustomLabelIcon);
accentCustomLabel.appendChild(accentCustomLabelText);
accentCustomInputWrap.appendChild(accentCustomLabel);
fieldset.appendChild(accentCustomInputWrap);
accentColorFormGroup.appendChild(accentColorPicker);

84
src/style-guide.html
View File

@ -63,21 +63,49 @@
<button class="button button-large mb-0" tabindex="1">Button Large</button>
</div>
<hr>
<div class="input-wrap input-button form-inline">
<div class="input-wrap input-button">
<input id="style-guide-input-button-1" type="checkbox" tabindex="1">
<label for="style-guide-input-button-1" class="mb-0">Checkbox Button</label>
<label for="style-guide-input-button-1" class="mb-0"><span class="label-icon"></span>Checkbox Button</label>
</div>
<div class="input-wrap input-button input-hide form-inline">
<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 class="input-wrap input-button input-hide">
<input id="style-guide-input-button-2" type="checkbox" tabindex="1">
<label for="style-guide-input-button-2" class="mb-0">Checkbox Hidden Button</label>
<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 form-inline input-color-dot">
<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>
</div>
<div class="input-wrap input-button input-color-dot form-inline">
<input id="style-guide-input-button-3" type="color" tabindex="1">
<label for="style-guide-input-button-3">Input Colour Button</label>
</div>
<div class="button-wrap form-inline">
<div class="style-guide-form-dropdown form-dropdown">
<button class="form-dropdown-toggle button mb-0" tabindex="1">
<div class="form-dropdown form-dropdown-inline">
<button class="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
<span class="button-text">Button Dropdown</span>
</button>
<ul class="list-unstyled form-dropdown-menu">
@ -93,57 +121,57 @@
<hr>
<div class="input-wrap">
<input id="style-guide-checkbox" type="checkbox" tabindex="1">
<label for="style-guide-checkbox">Checkbox</label>
<label for="style-guide-checkbox"><span class="label-icon"></span> Checkbox</label>
</div>
<div class="input-wrap">
<input id="style-guide-radio-1" type="radio" name="style-guide-radio" tabindex="1">
<label for="style-guide-radio-1">Radio 1</label>
<input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1">
<label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
</div>
<div class="input-wrap">
<input id="style-guide-radio-2" type="radio" name="style-guide-radio" tabindex="1">
<label for="style-guide-radio-2">Radio 2</label>
<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-3" type="radio" name="style-guide-radio" tabindex="1">
<label for="style-guide-radio-3">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 class="form-grid-wrap">
<div class="form-grid form-grid-3x3">
<div class="input-wrap">
<input id="style-guide-form-grid-topleft" class="style-guide-form-grid-topleft" type="radio" name="style-guide-form-grid-3x3" value="topleft" tabindex="1" checked>
<label for="style-guide-form-grid-topleft"><span class="sr-only">Top left</span></label>
<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">
<input id="style-guide-form-grid-topcenter" class="style-guide-form-grid-topcenter" type="radio" name="style-guide-form-grid-3x3" value="topcenter" tabindex="1">
<label for="style-guide-form-grid-topcenter"><span class="sr-only">Top center</span></label>
<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">
<input id="style-guide-form-grid-topright" class="style-guide-form-grid-topright" type="radio" name="style-guide-form-grid-3x3" value="topright" tabindex="1">
<label for="style-guide-form-grid-topright"><span class="sr-only">Top right</span></label>
<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">
<input id="style-guide-form-grid-centerleft" class="style-guide-form-grid-centerleft" type="radio" name="style-guide-form-grid-3x3" value="centerleft" tabindex="1">
<label for="style-guide-form-grid-centerleft"><span class="sr-only">Center left</span></label>
<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">
<input id="style-guide-form-grid-centercenter" class="style-guide-form-grid-centercenter" type="radio" name="style-guide-form-grid-3x3" value="centercenter" tabindex="1">
<label for="style-guide-form-grid-centercenter"><span class="sr-only">Center center</span></label>
<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">
<input id="style-guide-form-grid-centerright" class="style-guide-form-grid-centerright" type="radio" name="style-guide-form-grid-3x3" value="centerright" tabindex="1">
<label for="style-guide-form-grid-centerright"><span class="sr-only">Center right</span></label>
<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">
<input id="style-guide-form-grid-bottomleft" class="style-guide-form-grid-bottomleft" type="radio" name="style-guide-form-grid-3x3" value="bottomleft" tabindex="1">
<label for="style-guide-form-grid-bottomleft"><span class="sr-only">Bottom left</span></label>
<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">
<input id="style-guide-form-grid-bottomcenter" class="style-guide-form-grid-bottomcenter" type="radio" name="style-guide-form-grid-3x3" value="bottomcenter" tabindex="1">
<label for="style-guide-form-grid-bottomcenter"><span class="sr-only">Bottom Center</span></label>
<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">
<input id="style-guide-form-grid-bottomright" class="style-guide-form-grid-bottomright" type="radio" name="style-guide-form-grid-3x3" value="bottomright" tabindex="1">
<label for="style-guide-form-grid-bottomright"><span class="sr-only">Bottom right</span></label>
<label for="style-guide-form-grid-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
</div>
</div>
</div>
@ -151,15 +179,15 @@
<div class="form-grid form-grid-3x1">
<div class="input-wrap">
<input id="style-guide-form-grid-left" class="style-guide-form-grid-left" type="radio" name="style-guide-form-grid-3x1" value="centerleft" tabindex="1" checked>
<label for="style-guide-form-grid-left"><span class="sr-only">Center left</span></label>
<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">
<input id="style-guide-form-grid-center" class="style-guide-form-grid-center" type="radio" name="style-guide-form-grid-3x1" value="centercenter" tabindex="1">
<label for="style-guide-form-grid-center"><span class="sr-only">Center center</span></label>
<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">
<input id="style-guide-form-grid-right" class="style-guide-form-grid-right" type="radio" name="style-guide-form-grid-3x1" value="centerright" tabindex="1">
<label for="style-guide-form-grid-right"><span class="sr-only">Center right</span></label>
<label for="style-guide-form-grid-right"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
</div>
</div>
</div>
@ -193,7 +221,7 @@
<div class="form-group form-group-block mb-0">
<input id="style-guide-form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="form-group-3" class="form-group-item-half mb-0" type="color" value="#000000" tabindex="1">
<button class="button mb-0" tabindex="1">Button</button>
<button class="button mb-0" tabindex="1"><span class="button-text">Button</span></button>
<select id="select-2" class="mb-0" tabindex="1">
<option>Option 1</option>
<option>Option 2</option>
@ -275,7 +303,7 @@
html.style.setProperty("--theme-radius", (parseInt(this.value, 10) / 100) + "rem");
}, false);
helper.e(".style-guide-form-dropdown").addEventListener("click", function() {
helper.toggleClass(this, "form-dropdown-open");
helper.toggleClass(helper.e(".form-dropdown"), "form-dropdown-open");
}, false);
</script>