From f0a5e6c0f611b06cf0bd1f6558f250cf7605361c Mon Sep 17 00:00:00 2001 From: zombieFox Date: Sun, 10 Nov 2019 23:57:04 +0000 Subject: [PATCH] [design] improve checkboxes, radios, buttons and other form UI --- src/css/button.css | 101 +++++++++++--- src/css/form.css | 308 +++++++++++++++++++++++++++++------------- src/css/link.css | 4 + src/css/menu.css | 11 +- src/css/modal.css | 5 +- src/css/variables.css | 25 ++-- src/index.html | 260 +++++++++++++++++------------------ src/js/header.js | 2 +- src/js/link.js | 36 ++++- src/style-guide.html | 84 ++++++++---- 10 files changed, 541 insertions(+), 295 deletions(-) diff --git a/src/css/button.css b/src/css/button.css index 1897840f..b6cd92da 100755 --- a/src/css/button.css +++ b/src/css/button.css @@ -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; } diff --git a/src/css/form.css b/src/css/form.css index 2b3a5f37..ce3efaf3 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -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, diff --git a/src/css/link.css b/src/css/link.css index 072d2a73..e2e7e46d 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -329,6 +329,10 @@ flex-grow: 1; } +.link-control-item:after { + content: none; +} + .is-link-style-list .link-control-item { flex-basis: inherit; } diff --git a/src/css/menu.css b/src/css/menu.css index b5087130..41da31c3 100755 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -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; } } diff --git a/src/css/modal.css b/src/css/modal.css index 4e09e47a..4f1f8012 100755 --- a/src/css/modal.css +++ b/src/css/modal.css @@ -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); } diff --git a/src/css/variables.css b/src/css/variables.css index a26e5033..08c7c54d 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -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); diff --git a/src/index.html b/src/index.html index 5e876b6e..b6a9ffb9 100644 --- a/src/index.html +++ b/src/index.html @@ -78,10 +78,11 @@
- +
-
-
    @@ -93,6 +94,7 @@
+
@@ -151,39 +153,39 @@
- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -197,11 +199,11 @@
- +
- +

Only available when Bookmarks are shown.

@@ -240,7 +242,7 @@
- +
@@ -266,15 +268,15 @@
- +
- +
- +
@@ -285,15 +287,15 @@
- +
- +
- +
@@ -307,20 +309,20 @@
- +
- +
- +
- +
@@ -345,17 +347,17 @@
- +

Available when Date or Time is shown.

- +
- +
@@ -375,61 +377,61 @@
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -448,123 +450,123 @@
- +
- +
- +
- +

Define what day "1" represents, either Monday or Sunday.

- +
- +
- +
- +
- +
- +
- +

Display Date as 1st, 2nd, 3rd, 4th etc.

- +
- +
- +

Display Month as 1st, 2nd, 3rd, 4th etc.

- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -583,18 +585,18 @@
- +
- +

Search box will grow to best fit available space.

- +

Define how wide the Search box should be inside the Header Area.

@@ -606,34 +608,34 @@
- +

May not work in some browsers.

- +
- +
- +
- +
- +
- +
@@ -654,15 +656,15 @@
- +
- +
- +
@@ -686,21 +688,21 @@
- +
- +
- +
- +
@@ -736,12 +738,12 @@
- +

Header sticks to the page when scrolling up or down.

- +

Header moves inline with the content when scrolling up or down.

@@ -754,17 +756,17 @@
- +
- +

Useful for when a Background Image is shown.

- +

The page will not scroll if Bookmarks are not shown.

@@ -775,7 +777,7 @@
- +
@@ -790,7 +792,7 @@
- +
@@ -807,15 +809,15 @@
- +
- +
- +
@@ -856,15 +858,15 @@
- +
- +
- +
@@ -878,7 +880,7 @@
- +
@@ -894,46 +896,46 @@
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
@@ -955,7 +957,7 @@
- +
@@ -969,37 +971,37 @@
- +
- +

Only available when Letter/Icon and Name is shown.

- +
- +
- +
- +
- +
@@ -1022,12 +1024,12 @@
- +

Bookmark tiles more square shaped with content stacked vertically.

- +

Bookmark tiles more short and wide with content stacked horizontally.

@@ -1039,11 +1041,11 @@
- +
- +

Display the URL and Controls either at the top of bottom of a Tile.

@@ -1097,28 +1099,28 @@
- +
- +
- +
- +
- +
- +
@@ -1133,11 +1135,11 @@
- +
- +

Accent Colour and Background Image may need to be changed to best fit the Theme Style.

@@ -1160,12 +1162,12 @@
- +

Background colour defined by the Dark or Light Theme.

- +
@@ -1186,12 +1188,12 @@
- +
- +
@@ -1209,7 +1211,7 @@
- +
diff --git a/src/js/header.js b/src/js/header.js index ec61d6c3..1185d08f 100644 --- a/src/js/header.js +++ b/src/js/header.js @@ -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"); } }; diff --git a/src/js/link.js b/src/js/link.js index 324367db..fee3a46f 100644 --- a/src/js/link.js +++ b/src/js/link.js @@ -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); diff --git a/src/style-guide.html b/src/style-guide.html index 7a028d5b..2c3fe98b 100644 --- a/src/style-guide.html +++ b/src/style-guide.html @@ -63,21 +63,49 @@
-
+
- +
-
+
+
+ + +
+
+ + +
+
+ + +
+
+
- +
-
+
+
+ + +
+
+ + +
+
+ + +
+
+
-
-
    @@ -93,57 +121,57 @@
    - +
    - - + +
    - - + +
    - - + +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    - +
    @@ -151,15 +179,15 @@
    - +
    - +
    - +
@@ -193,7 +221,7 @@
- +