mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-27 00:59:00 +01:00
[feature] [design] improve alignment control and UI
This commit is contained in:
Kombie
GitHub
parent
36ff6cb4a2
commit
0a31c441a4
@ -20,3 +20,52 @@ body {
|
||||
min-height: 100vh;
|
||||
transition: background-color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-layout-scroll-past-end body {
|
||||
margin-bottom: 40vh;
|
||||
}
|
||||
|
||||
.is-layout-alignment-topleft body {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-layout-alignment-topcenter body {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-alignment-topright body {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-layout-alignment-centerleft body {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-layout-alignment-centercenter body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-alignment-centerright body {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-layout-alignment-bottomleft body {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-layout-alignment-bottomcenter body {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-layout-alignment-bottomright body {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@ -12,17 +12,17 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-left .clock {
|
||||
.is-header-item-alignment-left .clock {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-center .clock {
|
||||
.is-header-item-alignment-center .clock {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-right .clock {
|
||||
.is-header-item-alignment-right .clock {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.clock-separator,
|
||||
.clock-hours,
|
||||
@ -49,17 +49,18 @@
|
||||
min-width: 1.25em;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-left .clock-item:not(:last-child) {
|
||||
.is-header-item-alignment-left .clock-item:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-center .clock-item:not(:first-child),
|
||||
.is-header-item-alignment-horizontal-center .clock-item:not(:last-child) {
|
||||
.is-header-item-alignment-center .clock-item:not(:first-child) {
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
.is-header-item-alignment-center .clock-item:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-right .clock-item:not(:first-child) {
|
||||
.is-header-item-alignment-right .clock-item:not(:first-child) {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
@ -12,15 +12,15 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-left .date {
|
||||
.is-header-item-alignment-left .date {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-center .date {
|
||||
.is-header-item-alignment-center .date {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-right .date {
|
||||
.is-header-item-alignment-right .date {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -48,17 +48,19 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-left .date-item:not(:last-child) {
|
||||
.is-header-item-alignment-left .date-item:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-center .date-item:not(:first-child),
|
||||
.is-header-item-alignment-horizontal-center .date-item:not(:last-child) {
|
||||
.is-header-item-alignment-center .date-item:not(:first-child) {
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-center .date-item:not(:last-child) {
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-right .date-item:not(:first-child) {
|
||||
.is-header-item-alignment-right .date-item:not(:first-child) {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
236
src/css/form.css
236
src/css/form.css
@ -190,9 +190,9 @@ input[type="radio"]+label:before {
|
||||
margin-right: 0.5em;
|
||||
font-size: 1.5em;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: transform 0.05s ease-in-out;
|
||||
}
|
||||
@ -224,7 +224,7 @@ input[type="radio"]:active+label:before {
|
||||
|
||||
input[type="checkbox"]:checked+label,
|
||||
input[type="radio"]:checked+label {
|
||||
color: rgb(var(--form-checkbox-radio-chcked-label));
|
||||
color: rgb(var(--form-checkbox-radio-checked-label));
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not([disabled]):hover:checked+label,
|
||||
@ -758,6 +758,238 @@ input[type="range"][disabled]~.input-helper {
|
||||
}
|
||||
|
||||
/* form variants */
|
||||
.form-grid-wrap {
|
||||
padding: 0.5em 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-grid-wrap .input-helper:not(:only-child) {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
padding: calc(var(--layout-line-width) * 2);
|
||||
display: grid;
|
||||
border-radius: calc(var(--layout-line-width) * 6);
|
||||
border-width: var(--layout-line-width);
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--form-checkbox-radio-label));
|
||||
transition: all var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.form-grid:focus,
|
||||
.form-grid:focus-within {
|
||||
outline: 0;
|
||||
border-color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.form-grid[disabled] {
|
||||
border-color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
}
|
||||
|
||||
.form-grid[disabled]+.input-helper {
|
||||
color: rgb(var(--form-input-text-disabled-helper-text));
|
||||
}
|
||||
|
||||
.form-grid[disabled]:focus,
|
||||
.form-grid[disabled]:focus-within {
|
||||
border-color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
}
|
||||
|
||||
.form-grid-3x3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.form-grid-3x1 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.form-grid-square {
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
}
|
||||
|
||||
.form-grid-rectangle {
|
||||
width: 7em;
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.form-grid-viewport {
|
||||
width: 12vw;
|
||||
height: 12vh;
|
||||
min-width: 5em;
|
||||
min-height: 5em;
|
||||
}
|
||||
|
||||
.form-grid .input-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]+label,
|
||||
.form-grid input[type="radio"]+label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-width: calc(var(--layout-line-width) / 2);
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
position: relative;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:focus+label,
|
||||
.form-grid input[type="checkbox"]:hover+label,
|
||||
.form-grid input[type="radio"]:focus+label,
|
||||
.form-grid input[type="radio"]:hover+label {
|
||||
border-color: rgb(var(--theme-style-text));
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:active+label,
|
||||
.form-grid input[type="radio"]:active+label {
|
||||
border-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:checked+label,
|
||||
.form-grid input[type="radio"]:checked+label {
|
||||
border-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"][disabled]:focus+label,
|
||||
.form-grid input[type="checkbox"][disabled]:hover+label,
|
||||
.form-grid input[type="radio"][disabled]:focus+label,
|
||||
.form-grid input[type="radio"][disabled]:hover+label {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"][disabled]:active+label,
|
||||
.form-grid input[type="radio"][disabled]:active+label {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"][disabled]:checked+label,
|
||||
.form-grid input[type="radio"][disabled]:checked+label {
|
||||
border-color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:not([disabled]):hover:checked+label,
|
||||
.form-grid input[type="checkbox"]:not([disabled]):focus:checked+label,
|
||||
.form-grid input[type="radio"]:not([disabled]):hover:checked+label,
|
||||
.form-grid input[type="radio"]:not([disabled]):focus:checked+label {
|
||||
border-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]+label:before,
|
||||
.form-grid input[type="radio"]+label:before {
|
||||
content: "";
|
||||
margin-right: 0;
|
||||
font-size: 1em;
|
||||
/* margin: var(--layout-line-width); */
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
width: calc(100% - calc(var(--layout-line-width) * 4));
|
||||
height: calc(100% - calc(var(--layout-line-width) * 4));
|
||||
position: absolute;
|
||||
top: calc(var(--layout-line-width) * 2);
|
||||
left: calc(var(--layout-line-width) * 2);
|
||||
display: block;
|
||||
transform: scale(1);
|
||||
transition: transform 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:focus+label:before,
|
||||
.form-grid input[type="checkbox"]:hover+label:before,
|
||||
.form-grid input[type="radio"]:focus+label:before,
|
||||
.form-grid input[type="radio"]:hover+label:before {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:checked+label:before,
|
||||
.form-grid input[type="radio"]:checked+label:before {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"]:checked+label:before,
|
||||
.form-grid input[type="radio"]:checked+label:before {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"][disabled]+label,
|
||||
.form-grid input[type="radio"][disabled]+label {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.form-grid input[type="checkbox"][disabled]:checked+label:before,
|
||||
.form-grid input[type="radio"][disabled]:checked+label:before {
|
||||
background-color: rgb(var(--form-checkbox-radio-disabled-label));
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label {
|
||||
border-top-left-radius: calc(var(--layout-line-width) * 3);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label:before {
|
||||
border-top-left-radius: var(--layout-line-width);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label {
|
||||
border-top-right-radius: calc(var(--layout-line-width) * 3);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label:before {
|
||||
border-top-right-radius: var(--layout-line-width);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label {
|
||||
border-bottom-left-radius: calc(var(--layout-line-width) * 3);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label:before,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label:before {
|
||||
border-bottom-left-radius: var(--layout-line-width);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label {
|
||||
border-bottom-right-radius: calc(var(--layout-line-width) * 3);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label:before,
|
||||
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label:before {
|
||||
border-bottom-right-radius: var(--layout-line-width);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label,
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label {
|
||||
border-top-left-radius: calc(var(--layout-line-width) * 3);
|
||||
border-bottom-left-radius: calc(var(--layout-line-width) * 3);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label:before {
|
||||
border-top-left-radius: var(--layout-line-width);
|
||||
border-bottom-left-radius: var(--layout-line-width);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label,
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label {
|
||||
border-top-right-radius: calc(var(--layout-line-width) * 3);
|
||||
border-bottom-right-radius: calc(var(--layout-line-width) * 3);
|
||||
}
|
||||
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
|
||||
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label:before {
|
||||
border-top-right-radius: var(--layout-line-width);
|
||||
border-bottom-right-radius: var(--layout-line-width);
|
||||
}
|
||||
|
||||
.form-indent {
|
||||
margin-left: 2.25em;
|
||||
}
|
||||
|
||||
@ -10,15 +10,15 @@
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.is-header-area-alignment-horizontal-left .header {
|
||||
.is-header-area-alignment-left .header {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-header-area-alignment-horizontal-center .header {
|
||||
.is-header-area-alignment-center .header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-header-area-alignment-horizontal-right .header {
|
||||
.is-header-area-alignment-right .header {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: background-color var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out;
|
||||
transition: background-color var(--layout-transition-speed-slow) ease-in-out, opacity var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-header-radius .header-shade {
|
||||
@ -86,15 +86,15 @@
|
||||
border-radius: calc(var(--theme-radius) * 4);
|
||||
}
|
||||
|
||||
.is-header-search-text-align-left .header-search-input {
|
||||
.is-header-search-text-alignment-left .header-search-input {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-header-search-text-align-center .header-search-input {
|
||||
.is-header-search-text-alignment-center .header-search-input {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-header-search-text-align-right .header-search-input {
|
||||
.is-header-search-text-alignment-right .header-search-input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -109,27 +109,27 @@
|
||||
}
|
||||
|
||||
.header-item-grid {
|
||||
margin: calc(-1 * calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2)));
|
||||
margin: calc(-1 * calc(var(--layout-gutter) * var(--layout-gutter-multiplier))) 0 0 calc(-1 * calc(var(--layout-gutter) * var(--layout-gutter-multiplier)));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-left .header-item-grid {
|
||||
.is-header-item-alignment-left .header-item-grid {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-center .header-item-grid {
|
||||
.is-header-item-alignment-center .header-item-grid {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-header-item-alignment-horizontal-right .header-item-grid {
|
||||
.is-header-item-alignment-right .header-item-grid {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
margin: calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2));
|
||||
margin: calc(var(--layout-gutter) * var(--layout-gutter-multiplier)) 0 0 calc(var(--layout-gutter) * var(--layout-gutter-multiplier));
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
112
src/css/link.css
112
src/css/link.css
@ -9,15 +9,15 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-link-area-alignment-horizontal-left .link {
|
||||
.is-link-area-alignment-left .link {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-link-area-alignment-horizontal-center .link {
|
||||
.is-link-area-alignment-center .link {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-link-area-alignment-horizontal-right .link {
|
||||
.is-link-area-alignment-right .link {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -130,28 +130,49 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-horizontal-left .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-topleft .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-horizontal-center .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-topcenter .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-horizontal-right .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-topright .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-vertical-top .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-vertical-center .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-centerleft .link-panel-front {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-vertical-bottom .link-panel-front {
|
||||
.is-link-style-block.is-link-display-alignment-centercenter .link-panel-front {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-centerright .link-panel-front {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-bottomleft .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-bottomcenter .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-style-block.is-link-display-alignment-bottomright .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-style-list .link-panel-front {
|
||||
@ -159,27 +180,48 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-horizontal-left .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-topleft .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-horizontal-center .link-panel-front {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-horizontal-right .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-vertical-top .link-panel-front {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-vertical-center .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-topcenter .link-panel-front {
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-topright .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-centerleft .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-vertical-bottom .link-panel-front {
|
||||
.is-link-style-list.is-link-display-alignment-centercenter .link-panel-front {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-centerright .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-bottomleft .link-panel-front {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-bottomcenter .link-panel-front {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.is-link-style-list.is-link-display-alignment-bottomright .link-panel-front {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@ -293,15 +335,21 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-horizontal-left .link-url {
|
||||
.is-link-display-alignment-topleft .link-url,
|
||||
.is-link-display-alignment-centerleft .link-url,
|
||||
.is-link-display-alignment-bottomleft .link-url {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-horizontal-center .link-url {
|
||||
.is-link-display-alignment-topcenter .link-url,
|
||||
.is-link-display-alignment-centercenter .link-url,
|
||||
.is-link-display-alignment-bottomcenter .link-url {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-horizontal-right .link-url {
|
||||
.is-link-display-alignment-topright .link-url,
|
||||
.is-link-display-alignment-centerright .link-url,
|
||||
.is-link-display-alignment-bottomright .link-url {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -396,15 +444,15 @@
|
||||
transition: color var(--layout-transition-speed-fast) ease-in-out;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-horizontal-left .link-name {
|
||||
.is-link-display-alignment-left .link-name {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-horizontal-center .link-name {
|
||||
.is-link-display-alignment-center .link-name {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-link-display-alignment-horizontal-right .link-name {
|
||||
.is-link-display-alignment-right .link-name {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
@ -38,3 +38,14 @@
|
||||
.is-pop {
|
||||
animation: pop var(--layout-transition-speed-fast) 1;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
--form-label: var(--theme-gray-12);
|
||||
--form-label-disabled: var(--theme-gray-04);
|
||||
--form-checkbox-radio-label: var(--theme-gray-12);
|
||||
--form-checkbox-radio-chcked-label: var(--theme-gray-16);
|
||||
--form-checkbox-radio-checked-label: var(--theme-gray-16);
|
||||
--form-checkbox-radio-disabled-label: var(--theme-gray-04);
|
||||
--form-range-thumb: var(--theme-gray-12);
|
||||
/* button */
|
||||
|
||||
260
src/index.html
260
src/index.html
@ -88,10 +88,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item header-button header-menu">
|
||||
<button class="control-menu button mb-0" tabindex="1">
|
||||
<span class="button-text"><span class="icon-settings"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="control-menu button mb-0" tabindex="1">
|
||||
<span class="button-text"><span class="icon-settings"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -134,35 +134,48 @@
|
||||
<input id="control-layout-width" class="control-layout-width" type="range" min="5" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-layout-alignment-horizontal-label">Horizontal Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-alignment-horizontal-left" class="control-layout-alignment-horizontal-left" type="radio" name="control-layout-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-layout-alignment-horizontal-left">Left</label>
|
||||
<label class="control-layout-alignment-label">Area Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x3 form-grid-square control-layout-alignment-grid" tabindex="-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-alignment-horizontal-center" class="control-layout-alignment-horizontal-center" type="radio" name="control-layout-alignment-horizontal" value="center" tabindex="1">
|
||||
<label for="control-layout-alignment-horizontal-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
|
||||
<label for="control-layout-alignment-horizontal-right">Right</label>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Layout Area is full width.</p>
|
||||
<hr>
|
||||
<label class="control-layout-alignment-vertical-label">Vertical Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-alignment-vertical-top" class="control-layout-alignment-vertical-top" type="radio" name="control-layout-alignment-vertical" value="top" tabindex="1">
|
||||
<label for="control-layout-alignment-vertical-top">Top</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-alignment-vertical-center" class="control-layout-alignment-vertical-center" type="radio" name="control-layout-alignment-vertical" value="center" tabindex="1">
|
||||
<label for="control-layout-alignment-vertical-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" name="control-layout-alignment-vertical" value="bottom" tabindex="1">
|
||||
<label for="control-layout-alignment-vertical-bottom">Bottom</label>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if Bookmarks fill the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -177,6 +190,7 @@
|
||||
<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>
|
||||
<p class="input-helper small muted">Only available when Bookmarks are shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -235,35 +249,43 @@
|
||||
<button class="control-header-area-width-match button mb-0" tabindex="1">Match Bookmarks Area</button>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-header-area-alignment-horizontal-label">Area Horizontal Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-area-alignment-horizontal-left" class="control-header-area-alignment-horizontal-left" type="radio" name="control-header-area-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-header-area-alignment-horizontal-left">Left</label>
|
||||
<label class="control-header-area-alignment-label">Area Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-area-alignment-grid" tabindex="-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-area-alignment-horizontal-center" class="control-header-area-alignment-horizontal-center" type="radio" name="control-header-area-alignment-horizontal" value="center" tabindex="1">
|
||||
<label for="control-header-area-alignment-horizontal-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-area-alignment-horizontal-right" class="control-header-area-alignment-horizontal-right" type="radio" name="control-header-area-alignment-horizontal" value="right" tabindex="1">
|
||||
<label for="control-header-area-alignment-horizontal-right">Right</label>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Header Area is full width.</p>
|
||||
<hr>
|
||||
<label class="control-header-item-alignment-horizontal-label">Item Horizontal Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-item-alignment-horizontal-left" class="control-header-item-alignment-horizontal-left" type="radio" name="control-header-item-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-header-item-alignment-horizontal-left">Left</label>
|
||||
<label class="control-header-item-alignment-label">Item Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-item-alignment-grid" tabindex="-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-item-alignment-horizontal-center" class="control-header-item-alignment-horizontal-center" type="radio" name="control-header-item-alignment-horizontal" value="center" tabindex="1">
|
||||
<label for="control-header-item-alignment-horizontal-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-item-alignment-horizontal-right" class="control-header-item-alignment-horizontal-right" type="radio" name="control-header-item-alignment-horizontal" value="right" tabindex="1">
|
||||
<label for="control-header-item-alignment-horizontal-right">Right</label>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Search box size is set to Auto and grows to fill available space.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@ -610,18 +632,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-header-search-text-align-label">Align Text</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-text-align-left" class="control-header-search-text-align-left" type="radio" name="control-header-search-text-align" value="left" tabindex="1">
|
||||
<label for="control-header-search-text-align-left">Left</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-text-align-center" class="control-header-search-text-align-center" type="radio" name="control-header-search-text-align" value="center" tabindex="1">
|
||||
<label for="control-header-search-text-align-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-header-search-text-align-right" class="control-header-search-text-align-right" type="radio" name="control-header-search-text-align" value="right" tabindex="1">
|
||||
<label for="control-header-search-text-align-right">Right</label>
|
||||
<label class="control-header-search-text-alignment-label">Align Text</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-header-search-text-alignment-grid" tabindex="-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="input-wrap">
|
||||
@ -735,18 +761,22 @@
|
||||
<button class="control-link-area-width-match button mb-0" tabindex="1">Match Header Area</button>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-area-alignment-horizontal-label">Horizontal Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-area-alignment-horizontal-left" class="control-link-area-alignment-horizontal-left" type="radio" name="control-link-area-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-link-area-alignment-horizontal-left">Left</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-area-alignment-horizontal-center" class="control-link-area-alignment-horizontal-center" type="radio" name="control-link-area-alignment-horizontal" value="center" tabindex="1">
|
||||
<label for="control-link-area-alignment-horizontal-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-area-alignment-horizontal-right" class="control-link-area-alignment-horizontal-right" type="radio" name="control-link-area-alignment-horizontal" value="right" tabindex="1">
|
||||
<label for="control-link-area-alignment-horizontal-right">Right</label>
|
||||
<label class="control-link-area-alignment-label">Horizontal Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x1 form-grid-rectangle control-link-area-alignment-grid" tabindex="-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<p class="input-helper small muted">Effects may not be visible if the Bookmark Area is full width.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -820,32 +850,46 @@
|
||||
<label for="control-link-item-hover-scale">Grow on hover</label>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-item-display-alignment-horizontal-label">Content Horizontal Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-alignment-horizontal-left" class="control-link-item-display-alignment-horizontal-left" type="radio" name="control-link-item-display-alignment-horizontal" value="left" tabindex="1">
|
||||
<label for="control-link-item-display-alignment-horizontal-left">Left</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-alignment-horizontal-center" class="control-link-item-display-alignment-horizontal-center" type="radio" name="control-link-item-display-alignment-horizontal" value="center" tabindex="1">
|
||||
<label for="control-link-item-display-alignment-horizontal-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-alignment-horizontal-right" class="control-link-item-display-alignment-horizontal-right" type="radio" name="control-link-item-display-alignment-horizontal" value="right" tabindex="1">
|
||||
<label for="control-link-item-display-alignment-horizontal-right">Right</label>
|
||||
</div>
|
||||
<hr>
|
||||
<label class="control-link-item-display-alignment-vertical-label">Content Vertical Alignment</label>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-alignment-vertical-top" class="control-link-item-display-alignment-vertical-top" type="radio" name="control-link-item-display-alignment-vertical" value="top" tabindex="1">
|
||||
<label for="control-link-item-display-alignment-vertical-top">Top</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-alignment-vertical-center" class="control-link-item-display-alignment-vertical-center" type="radio" name="control-link-item-display-alignment-vertical" value="center" tabindex="1">
|
||||
<label for="control-link-item-display-alignment-vertical-center">Centre</label>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input id="control-link-item-display-alignment-vertical-bottom" class="control-link-item-display-alignment-vertical-bottom" type="radio" name="control-link-item-display-alignment-vertical" value="bottom" tabindex="1">
|
||||
<label for="control-link-item-display-alignment-vertical-bottom">Bottom</label>
|
||||
<label class="control-link-item-display-alignment-label">Content Alignment</label>
|
||||
<div class="form-grid-wrap">
|
||||
<div class="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -78,98 +78,65 @@ var control = (function() {
|
||||
layout.render.width();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-horizontal-left"),
|
||||
path: "layout.alignment.horizontal",
|
||||
element: helper.e(".control-layout-alignment-topleft"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-horizontal-center"),
|
||||
path: "layout.alignment.horizontal",
|
||||
element: helper.e(".control-layout-alignment-topcenter"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-horizontal-right"),
|
||||
path: "layout.alignment.horizontal",
|
||||
element: helper.e(".control-layout-alignment-topright"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-vertical-top"),
|
||||
path: "layout.alignment.vertical",
|
||||
element: helper.e(".control-layout-alignment-centerleft"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-vertical-center"),
|
||||
path: "layout.alignment.vertical",
|
||||
element: helper.e(".control-layout-alignment-centercenter"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-vertical-bottom"),
|
||||
path: "layout.alignment.vertical",
|
||||
element: helper.e(".control-layout-alignment-centerright"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-bottomleft"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-bottomcenter"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-layout-alignment-bottomright"),
|
||||
path: "layout.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
@ -177,15 +144,6 @@ var control = (function() {
|
||||
element: helper.e(".control-layout-order-headerLink"),
|
||||
path: "layout.order",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
layout.render.order();
|
||||
header.render.shade();
|
||||
@ -195,15 +153,6 @@ var control = (function() {
|
||||
element: helper.e(".control-layout-order-linkHeader"),
|
||||
path: "layout.order",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
func: function() {
|
||||
edge.render({
|
||||
element: helper.e(".layout"),
|
||||
delay: 500
|
||||
});
|
||||
}
|
||||
}],
|
||||
func: function() {
|
||||
layout.render.order();
|
||||
header.render.shade();
|
||||
@ -388,8 +337,8 @@ var control = (function() {
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-area-alignment-horizontal-left"),
|
||||
path: "header.area.alignment.horizontal",
|
||||
element: helper.e(".control-header-area-alignment-left"),
|
||||
path: "header.area.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
@ -404,8 +353,8 @@ var control = (function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-area-alignment-horizontal-center"),
|
||||
path: "header.area.alignment.horizontal",
|
||||
element: helper.e(".control-header-area-alignment-center"),
|
||||
path: "header.area.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
@ -420,8 +369,8 @@ var control = (function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-area-alignment-horizontal-right"),
|
||||
path: "header.area.alignment.horizontal",
|
||||
element: helper.e(".control-header-area-alignment-right"),
|
||||
path: "header.area.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
@ -436,22 +385,22 @@ var control = (function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-item-alignment-horizontal-left"),
|
||||
path: "header.item.alignment.horizontal",
|
||||
element: helper.e(".control-header-item-alignment-left"),
|
||||
path: "header.item.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-item-alignment-horizontal-center"),
|
||||
path: "header.item.alignment.horizontal",
|
||||
element: helper.e(".control-header-item-alignment-center"),
|
||||
path: "header.item.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-item-alignment-horizontal-right"),
|
||||
path: "header.item.alignment.horizontal",
|
||||
element: helper.e(".control-header-item-alignment-right"),
|
||||
path: "header.item.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
@ -1368,22 +1317,22 @@ var control = (function() {
|
||||
search.render.engine();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-search-text-align-left"),
|
||||
path: "header.search.text.align",
|
||||
element: helper.e(".control-header-search-text-alignment-left"),
|
||||
path: "header.search.text.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-search-text-align-center"),
|
||||
path: "header.search.text.align",
|
||||
element: helper.e(".control-header-search-text-alignment-center"),
|
||||
path: "header.search.text.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-search-text-align-right"),
|
||||
path: "header.search.text.align",
|
||||
element: helper.e(".control-header-search-text-alignment-right"),
|
||||
path: "header.search.text.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
@ -1674,8 +1623,8 @@ var control = (function() {
|
||||
update();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-area-alignment-horizontal-left"),
|
||||
path: "link.area.alignment.horizontal",
|
||||
element: helper.e(".control-link-area-alignment-left"),
|
||||
path: "link.area.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
@ -1690,8 +1639,8 @@ var control = (function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-area-alignment-horizontal-center"),
|
||||
path: "link.area.alignment.horizontal",
|
||||
element: helper.e(".control-link-area-alignment-center"),
|
||||
path: "link.area.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
@ -1706,8 +1655,8 @@ var control = (function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-area-alignment-horizontal-right"),
|
||||
path: "link.area.alignment.horizontal",
|
||||
element: helper.e(".control-link-area-alignment-right"),
|
||||
path: "link.area.alignment",
|
||||
type: "radio",
|
||||
additionalEvents: [{
|
||||
event: "change",
|
||||
@ -1881,43 +1830,64 @@ var control = (function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-horizontal-left"),
|
||||
path: "link.item.display.alignment.horizontal",
|
||||
element: helper.e(".control-link-item-display-alignment-topleft"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-horizontal-center"),
|
||||
path: "link.item.display.alignment.horizontal",
|
||||
element: helper.e(".control-link-item-display-alignment-topcenter"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-horizontal-right"),
|
||||
path: "link.item.display.alignment.horizontal",
|
||||
element: helper.e(".control-link-item-display-alignment-topright"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-vertical-top"),
|
||||
path: "link.item.display.alignment.vertical",
|
||||
element: helper.e(".control-link-item-display-alignment-centerleft"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-vertical-center"),
|
||||
path: "link.item.display.alignment.vertical",
|
||||
element: helper.e(".control-link-item-display-alignment-centercenter"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-vertical-bottom"),
|
||||
path: "link.item.display.alignment.vertical",
|
||||
element: helper.e(".control-link-item-display-alignment-centerright"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-bottomleft"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-bottomcenter"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-link-item-display-alignment-bottomright"),
|
||||
path: "link.item.display.alignment",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
@ -2268,16 +2238,16 @@ var control = (function() {
|
||||
};
|
||||
var _header = function() {
|
||||
var _area = function() {
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-header-area-alignment-horizontal-right");
|
||||
helper.addClass(html, "is-header-area-alignment-horizontal-" + state.get().header.area.alignment.horizontal);
|
||||
helper.removeClass(html, "is-header-area-alignment-left");
|
||||
helper.removeClass(html, "is-header-area-alignment-center");
|
||||
helper.removeClass(html, "is-header-area-alignment-right");
|
||||
helper.addClass(html, "is-header-area-alignment-" + state.get().header.area.alignment);
|
||||
};
|
||||
var _item = function() {
|
||||
helper.removeClass(html, "is-header-item-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-header-item-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-header-item-alignment-horizontal-right");
|
||||
helper.addClass(html, "is-header-item-alignment-horizontal-" + state.get().header.item.alignment.horizontal);
|
||||
helper.removeClass(html, "is-header-item-alignment-left");
|
||||
helper.removeClass(html, "is-header-item-alignment-center");
|
||||
helper.removeClass(html, "is-header-item-alignment-right");
|
||||
helper.addClass(html, "is-header-item-alignment-" + state.get().header.item.alignment);
|
||||
};
|
||||
var _clock = function() {
|
||||
if (state.get().header.clock.seconds.show || state.get().header.clock.minutes.show || state.get().header.clock.hours.show) {
|
||||
@ -2297,13 +2267,13 @@ var control = (function() {
|
||||
helper.removeClass(html, "is-header-search-show");
|
||||
helper.removeClass(html, "is-header-search-style-custom");
|
||||
helper.removeClass(html, "is-header-search-style-auto");
|
||||
helper.removeClass(html, "is-header-search-text-align-left");
|
||||
helper.removeClass(html, "is-header-search-text-align-center");
|
||||
helper.removeClass(html, "is-header-search-text-align-right");
|
||||
helper.removeClass(html, "is-header-search-text-alignment-left");
|
||||
helper.removeClass(html, "is-header-search-text-alignment-center");
|
||||
helper.removeClass(html, "is-header-search-text-alignment-right");
|
||||
if (state.get().header.search.show) {
|
||||
helper.addClass(html, "is-header-search-show");
|
||||
helper.addClass(html, "is-header-search-style-" + state.get().header.search.style);
|
||||
helper.addClass(html, "is-header-search-text-align-" + state.get().header.search.text.align);
|
||||
helper.addClass(html, "is-header-search-text-alignment-" + state.get().header.search.text.alignment);
|
||||
};
|
||||
helper.e(".control-header-search-engine-custom-name").value = state.get().header.search.engine.custom.name;
|
||||
helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
|
||||
@ -2371,32 +2341,34 @@ var control = (function() {
|
||||
};
|
||||
var _link = function() {
|
||||
helper.removeClass(html, "is-link-show");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-link-area-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-link-area-alignment-left");
|
||||
helper.removeClass(html, "is-link-area-alignment-center");
|
||||
helper.removeClass(html, "is-link-area-alignment-right");
|
||||
helper.removeClass(html, "is-link-name-show");
|
||||
helper.removeClass(html, "is-link-display-show");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-link-display-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-top");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-center");
|
||||
helper.removeClass(html, "is-link-display-alignment-vertical-bottom");
|
||||
helper.removeClass(html, "is-link-display-alignment-topleft");
|
||||
helper.removeClass(html, "is-link-display-alignment-topcenter");
|
||||
helper.removeClass(html, "is-link-display-alignment-topright");
|
||||
helper.removeClass(html, "is-link-display-alignment-centerleft");
|
||||
helper.removeClass(html, "is-link-display-alignment-centercenter");
|
||||
helper.removeClass(html, "is-link-display-alignment-centerright");
|
||||
helper.removeClass(html, "is-link-display-alignment-bottomleft");
|
||||
helper.removeClass(html, "is-link-display-alignment-bottomcenter");
|
||||
helper.removeClass(html, "is-link-display-alignment-bottomright");
|
||||
helper.removeClass(html, "is-link-url-show");
|
||||
helper.removeClass(html, "is-link-item-line");
|
||||
helper.removeClass(html, "is-link-item-hover-scale");
|
||||
helper.removeClass(html, "is-link-item-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-link-item-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-link-item-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-link-item-alignment-left");
|
||||
helper.removeClass(html, "is-link-item-alignment-center");
|
||||
helper.removeClass(html, "is-link-item-alignment-right");
|
||||
helper.removeClass(html, "is-link-style-list");
|
||||
helper.removeClass(html, "is-link-style-block");
|
||||
helper.removeClass(html, "is-link-edit");
|
||||
link.render.tabIndex();
|
||||
if (state.get().link.show) {
|
||||
helper.addClass(html, "is-link-show");
|
||||
helper.addClass(html, "is-link-area-alignment-horizontal-" + state.get().link.area.alignment.horizontal);
|
||||
helper.addClass(html, "is-link-display-alignment-horizontal-" + state.get().link.item.display.alignment.horizontal);
|
||||
helper.addClass(html, "is-link-display-alignment-vertical-" + state.get().link.item.display.alignment.vertical);
|
||||
helper.addClass(html, "is-link-area-alignment-" + state.get().link.area.alignment);
|
||||
helper.addClass(html, "is-link-display-alignment-" + state.get().link.item.display.alignment);
|
||||
helper.addClass(html, "is-link-style-" + state.get().link.style);
|
||||
if (state.get().link.item.name.show) {
|
||||
helper.addClass(html, "is-link-name-show");
|
||||
@ -2421,16 +2393,18 @@ var control = (function() {
|
||||
};
|
||||
var _layout = function() {
|
||||
helper.removeClass(html, "is-layout-scroll-past-end");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-left");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-center");
|
||||
helper.removeClass(html, "is-layout-alignment-horizontal-right");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-top");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-center");
|
||||
helper.removeClass(html, "is-layout-alignment-vertical-bottom");
|
||||
helper.removeClass(html, "is-layout-alignment-topleft");
|
||||
helper.removeClass(html, "is-layout-alignment-topcenter");
|
||||
helper.removeClass(html, "is-layout-alignment-topright");
|
||||
helper.removeClass(html, "is-layout-alignment-centerleft");
|
||||
helper.removeClass(html, "is-layout-alignment-centercenter");
|
||||
helper.removeClass(html, "is-layout-alignment-centerright");
|
||||
helper.removeClass(html, "is-layout-alignment-bottomleft");
|
||||
helper.removeClass(html, "is-layout-alignment-bottomcenter");
|
||||
helper.removeClass(html, "is-layout-alignment-bottomright");
|
||||
helper.removeClass(html, "is-layout-order-headerLink");
|
||||
helper.removeClass(html, "is-layout-order-linkHeader");
|
||||
helper.addClass(html, "is-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal);
|
||||
helper.addClass(html, "is-layout-alignment-vertical-" + state.get().layout.alignment.vertical);
|
||||
helper.addClass(html, "is-layout-alignment-" + state.get().layout.alignment);
|
||||
helper.addClass(html, "is-layout-order-" + state.get().layout.order);
|
||||
if (state.get().layout.scrollPastEnd) {
|
||||
helper.addClass(html, "is-layout-scroll-past-end");
|
||||
@ -2637,10 +2611,10 @@ var control = (function() {
|
||||
helper.e(".control-header-search-engine-youtube").disabled = false;
|
||||
helper.e(".control-header-search-engine-giphy").disabled = false;
|
||||
helper.e(".control-header-search-engine-custom").disabled = false;
|
||||
helper.e(".control-header-search-text-align-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-search-text-align-left").disabled = false;
|
||||
helper.e(".control-header-search-text-align-center").disabled = false;
|
||||
helper.e(".control-header-search-text-align-right").disabled = false;
|
||||
helper.e(".control-header-search-text-alignment-label").removeAttribute("disabled");
|
||||
helper.e(".control-header-search-text-alignment-left").disabled = false;
|
||||
helper.e(".control-header-search-text-alignment-center").disabled = false;
|
||||
helper.e(".control-header-search-text-alignment-right").disabled = false;
|
||||
helper.e("[for=control-header-search-size]").removeAttribute("disabled");
|
||||
helper.e(".control-header-search-size").disabled = false;
|
||||
helper.e(".control-header-search-size-default").disabled = false;
|
||||
@ -2657,10 +2631,10 @@ var control = (function() {
|
||||
helper.e(".control-header-search-engine-youtube").disabled = true;
|
||||
helper.e(".control-header-search-engine-giphy").disabled = true;
|
||||
helper.e(".control-header-search-engine-custom").disabled = true;
|
||||
helper.e(".control-header-search-text-align-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-search-text-align-left").disabled = true;
|
||||
helper.e(".control-header-search-text-align-center").disabled = true;
|
||||
helper.e(".control-header-search-text-align-right").disabled = true;
|
||||
helper.e(".control-header-search-text-alignment-label").setAttribute("disabled", "");
|
||||
helper.e(".control-header-search-text-alignment-left").disabled = true;
|
||||
helper.e(".control-header-search-text-alignment-center").disabled = true;
|
||||
helper.e(".control-header-search-text-alignment-right").disabled = true;
|
||||
helper.e("[for=control-header-search-size]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-search-size").disabled = true;
|
||||
helper.e(".control-header-search-size-default").disabled = true;
|
||||
@ -2746,10 +2720,11 @@ var control = (function() {
|
||||
helper.e("[for=control-link-area-width]").setAttribute("disabled", "");
|
||||
helper.e(".control-link-area-width").disabled = true;
|
||||
helper.e(".control-link-area-width-match").disabled = true;
|
||||
helper.e(".control-link-area-alignment-horizontal-label").setAttribute("disabled", "");
|
||||
helper.e(".control-link-area-alignment-horizontal-left").disabled = true;
|
||||
helper.e(".control-link-area-alignment-horizontal-center").disabled = true;
|
||||
helper.e(".control-link-area-alignment-horizontal-right").disabled = true;
|
||||
helper.e(".control-link-area-alignment-grid").setAttribute("disabled", "");
|
||||
helper.e(".control-link-area-alignment-label").setAttribute("disabled", "");
|
||||
helper.e(".control-link-area-alignment-left").disabled = true;
|
||||
helper.e(".control-link-area-alignment-center").disabled = true;
|
||||
helper.e(".control-link-area-alignment-right").disabled = true;
|
||||
helper.e("[for=control-link-item-size]").setAttribute("disabled", "");
|
||||
helper.e(".control-link-item-size").disabled = true;
|
||||
helper.e(".control-link-item-size-default").disabled = true;
|
||||
@ -2767,30 +2742,36 @@ var control = (function() {
|
||||
helper.e(".control-link-item-url-show").disabled = true;
|
||||
helper.e(".control-link-item-line").disabled = true;
|
||||
helper.e(".control-link-item-hover-scale").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-horizontal-label").setAttribute("disabled", "");
|
||||
helper.e(".control-link-item-display-alignment-horizontal-left").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-horizontal-center").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-horizontal-right").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-vertical-label").setAttribute("disabled", "");
|
||||
helper.e(".control-link-item-display-alignment-vertical-top").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-vertical-center").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-vertical-bottom").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-grid").setAttribute("disabled", "");
|
||||
helper.e(".control-link-item-display-alignment-label").setAttribute("disabled", "");
|
||||
helper.e(".control-link-item-display-alignment-topleft").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-topcenter").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-topright").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-centerleft").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-centercenter").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-centerright").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-bottomleft").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-bottomcenter").disabled = true;
|
||||
helper.e(".control-link-item-display-alignment-bottomright").disabled = true;
|
||||
helper.e(".control-link-new-tab").disabled = true;
|
||||
helper.e(".control-link-style-block").disabled = true;
|
||||
helper.e(".control-link-style-list").disabled = true;
|
||||
helper.e(".control-link-sort-name").disabled = true;
|
||||
helper.e(".control-link-sort-letter").disabled = true;
|
||||
helper.e(".control-link-sort-icon").disabled = true;
|
||||
helper.e(".control-link-accent-clear").disabled = true;
|
||||
helper.e(".control-link-accent-set").disabled = true;
|
||||
if (state.get().link.show) {
|
||||
helper.e(".control-layout-order-headerLink").disabled = false;
|
||||
helper.e(".control-layout-order-linkHeader").disabled = false;
|
||||
helper.e("[for=control-link-area-width]").removeAttribute("disabled");
|
||||
helper.e(".control-link-area-width").disabled = false;
|
||||
helper.e(".control-link-area-width-match").disabled = false;
|
||||
helper.e(".control-link-area-alignment-horizontal-label").removeAttribute("disabled");
|
||||
helper.e(".control-link-area-alignment-horizontal-left").disabled = false;
|
||||
helper.e(".control-link-area-alignment-horizontal-center").disabled = false;
|
||||
helper.e(".control-link-area-alignment-horizontal-right").disabled = false;
|
||||
helper.e(".control-link-area-alignment-grid").removeAttribute("disabled");
|
||||
helper.e(".control-link-area-alignment-label").removeAttribute("disabled");
|
||||
helper.e(".control-link-area-alignment-left").disabled = false;
|
||||
helper.e(".control-link-area-alignment-center").disabled = false;
|
||||
helper.e(".control-link-area-alignment-right").disabled = false;
|
||||
helper.e("[for=control-link-item-size]").removeAttribute("disabled");
|
||||
helper.e(".control-link-item-size").disabled = false;
|
||||
helper.e(".control-link-item-size-default").disabled = false;
|
||||
@ -2805,6 +2786,8 @@ var control = (function() {
|
||||
helper.e(".control-link-sort-name").disabled = false;
|
||||
helper.e(".control-link-sort-letter").disabled = false;
|
||||
helper.e(".control-link-sort-icon").disabled = false;
|
||||
helper.e(".control-link-accent-clear").disabled = false;
|
||||
helper.e(".control-link-accent-set").disabled = false;
|
||||
if (state.get().link.item.display.show) {
|
||||
helper.e("[for=control-link-item-display-letter-size]").removeAttribute("disabled");
|
||||
helper.e(".control-link-item-display-letter-size").disabled = false;
|
||||
@ -2818,15 +2801,18 @@ var control = (function() {
|
||||
helper.e(".control-link-item-name-size").disabled = false;
|
||||
helper.e(".control-link-item-name-size-default").disabled = false;
|
||||
};
|
||||
if (state.get().link.item.display.show || state.get().link.item.name.show || state.get().link.item.url) {
|
||||
helper.e(".control-link-item-display-alignment-horizontal-label").removeAttribute("disabled");
|
||||
helper.e(".control-link-item-display-alignment-horizontal-left").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-horizontal-center").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-horizontal-right").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-vertical-label").removeAttribute("disabled");
|
||||
helper.e(".control-link-item-display-alignment-vertical-top").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-vertical-center").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-vertical-bottom").disabled = false;
|
||||
if (state.get().link.item.display.show || state.get().link.item.name.show) {
|
||||
helper.e(".control-link-item-display-alignment-grid").removeAttribute("disabled");
|
||||
helper.e(".control-link-item-display-alignment-label").removeAttribute("disabled");
|
||||
helper.e(".control-link-item-display-alignment-topleft").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-topcenter").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-topright").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-centerleft").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-centercenter").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-centerright").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-bottomleft").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-bottomcenter").disabled = false;
|
||||
helper.e(".control-link-item-display-alignment-bottomright").disabled = false;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
@ -4,14 +4,10 @@ var state = (function() {
|
||||
header: {
|
||||
area: {
|
||||
width: 100,
|
||||
alignment: {
|
||||
horizontal: "center"
|
||||
}
|
||||
alignment: "center"
|
||||
},
|
||||
item: {
|
||||
alignment: {
|
||||
horizontal: "left"
|
||||
}
|
||||
alignment: "left"
|
||||
},
|
||||
clock: {
|
||||
hours: {
|
||||
@ -94,7 +90,7 @@ var state = (function() {
|
||||
}
|
||||
},
|
||||
text: {
|
||||
align: "center"
|
||||
alignment: "center"
|
||||
},
|
||||
size: 1
|
||||
},
|
||||
@ -133,18 +129,13 @@ var state = (function() {
|
||||
link: {
|
||||
area: {
|
||||
width: 100,
|
||||
alignment: {
|
||||
horizontal: "center"
|
||||
}
|
||||
alignment: "center"
|
||||
},
|
||||
item: {
|
||||
display: {
|
||||
show: true,
|
||||
size: 2,
|
||||
alignment: {
|
||||
horizontal: "center",
|
||||
vertical: "center"
|
||||
},
|
||||
alignment: "centercenter",
|
||||
letter: {
|
||||
size: 3
|
||||
},
|
||||
@ -167,10 +158,7 @@ var state = (function() {
|
||||
style: "block"
|
||||
},
|
||||
layout: {
|
||||
alignment: {
|
||||
horizontal: "center",
|
||||
vertical: "center"
|
||||
},
|
||||
alignment: "centercenter",
|
||||
order: "headerLink",
|
||||
padding: 4,
|
||||
gutter: 2,
|
||||
|
||||
@ -572,6 +572,18 @@ var update = (function() {
|
||||
return data;
|
||||
};
|
||||
|
||||
var _update_3270 = function(data) {
|
||||
data.version = "3.27.0";
|
||||
data.state.header.area.alignment = data.state.header.area.alignment.horizontal;
|
||||
data.state.header.item.alignment = data.state.header.item.alignment.horizontal;
|
||||
data.state.header.search.text.alignment = data.state.header.search.text.align;
|
||||
delete data.state.header.search.text.align;
|
||||
data.state.link.area.alignment = data.state.link.area.alignment.horizontal;
|
||||
data.state.link.item.display.alignment = data.state.link.item.display.alignment.horizontal + data.state.link.item.display.alignment.vertical;
|
||||
data.state.layout.alignment = data.state.layout.alignment.horizontal + data.state.layout.alignment.vertical;
|
||||
return data;
|
||||
};
|
||||
|
||||
// var _update_300 = function(data) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -718,6 +730,10 @@ var update = (function() {
|
||||
console.log("\t= running update 3.21.0");
|
||||
data = _update_3210(data);
|
||||
};
|
||||
if (version.compare(data.version, "3.27.0") == -1) {
|
||||
console.log("\t= running update 3.27.0");
|
||||
data = _update_3270(data);
|
||||
};
|
||||
};
|
||||
// if no update is needed
|
||||
// version bump
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "3.26.0";
|
||||
var current = "3.27.0";
|
||||
|
||||
var compare = function(a, b) {
|
||||
var pa = a.split(".");
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "nightTab",
|
||||
"short_name": "nightTab",
|
||||
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
|
||||
"version": "3.26.0",
|
||||
"version": "3.27.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user