[design] improve style guide
This commit is contained in:
zombieFox
parent
216e24f6dc
commit
727770e34a
|
|
@ -1410,6 +1410,11 @@ input[type="range"]:disabled::-moz-range-progress {
|
|||
border-radius: var(--theme-radius);
|
||||
}
|
||||
|
||||
.form-grid-1x3 {
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
border-radius: var(--theme-radius);
|
||||
}
|
||||
|
||||
.form-grid .form-wrap {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -39,27 +39,53 @@
|
|||
<!-- end-css-block -->
|
||||
<style>
|
||||
:root {
|
||||
--layout-width: 90%;
|
||||
--layout-spacer: 10em;
|
||||
--layout-width: 95%;
|
||||
--layout-spacer: 4em;
|
||||
}
|
||||
|
||||
.style-guide {
|
||||
margin: var(--layout-spacer) 0;
|
||||
display: grid;
|
||||
grid-gap: calc(var(--layout-spacer) / 2);
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-gap: var(--layout-spacer);
|
||||
grid-template-columns: 1fr 4fr;
|
||||
}
|
||||
|
||||
.style-guide-right {
|
||||
display: grid;
|
||||
column-gap: calc(var(--layout-spacer) / 2);
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.style-guide-right-column-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.style-guide-right-column-3 {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.style-guide-controls {
|
||||
position: sticky;
|
||||
top: calc(var(--layout-spacer) / 2);
|
||||
top: var(--layout-spacer);
|
||||
}
|
||||
|
||||
.style-guide-icon {
|
||||
padding: 1em;
|
||||
font-size: 1.5em;
|
||||
padding: 0.5em;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.style-guide-left fieldset,
|
||||
.style-guide-left .fieldset,
|
||||
.style-guide-right fieldset:not(:only-child):not(:last-child),
|
||||
.style-guide-right .fieldset:not(:only-child):not(:last-child),
|
||||
.style-guide-right fieldset:not(:first-child),
|
||||
.style-guide-right .fieldset:not(:first-child),
|
||||
.style-guide-right fieldset:not(:last-child),
|
||||
.style-guide-right .fieldset:not(:last-child) {
|
||||
padding-top: calc(var(--form-wrap-space) * 3);
|
||||
padding-bottom: calc(var(--form-wrap-space) * 3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -70,25 +96,108 @@
|
|||
<div class="style-guide-left">
|
||||
|
||||
<fieldset class="style-guide-controls">
|
||||
|
||||
<div class="form-wrap">
|
||||
<div class="form-group">
|
||||
<div class="form-group form-group-block">
|
||||
<button class="button style-guide-control disable-on" tabindex="1">Disable</button>
|
||||
<button class="button style-guide-control disable-off" tabindex="1">Enable</button>
|
||||
<button class="button style-guide-control theme-dark" tabindex="1">Dark</button>
|
||||
<button class="button style-guide-control theme-light" tabindex="1">Light</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-wrap">
|
||||
<label class="style-guide-control">Theme Shades</label>
|
||||
<div class="form-group form-group-block form-group-border form-group-border-theme-color">
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-10"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-negative-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless form-group-item-small">
|
||||
<div class="theme-color-box theme-color"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-01"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-02"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-03"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-04"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-05"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-06"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-07"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-08"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-09"></div>
|
||||
</div>
|
||||
<div class="form-group-text form-group-text-borderless">
|
||||
<div class="theme-color-box theme-color-positive-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-control-theme-contrast-light" class="style-guide-control">Light shade contrast</label>
|
||||
<input id="style-guide-control-theme-contrast-light" class="style-guide-control input-theme-contrast-light" type="range" value="400" min="100" max="800" step="10" tabindex="1">
|
||||
</div>
|
||||
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-control-theme-contrast-dark" class="style-guide-control">Dark shade contrast</label>
|
||||
<input id="style-guide-control-theme-contrast-dark" class="style-guide-control input-theme-contrast-dark" type="range" value="400" min="100" max="800" step="10" tabindex="1">
|
||||
</div>
|
||||
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-control-theme-color" class="style-guide-control">Theme Colour</label>
|
||||
<input id="style-guide-control-theme-color" class="style-guide-control theme-color" type="color" value="#818aa0" tabindex="1">
|
||||
<input id="style-guide-control-theme-color" class="style-guide-control input-theme-color" type="color" value="#818aa0" tabindex="1">
|
||||
</div>
|
||||
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-control-theme-accent" class="style-guide-control">Accent Colour</label>
|
||||
<input id="style-guide-control-theme-accent" class="style-guide-control theme-accent" type="color" value="#fa8200" tabindex="1">
|
||||
<input id="style-guide-control-theme-accent" class="style-guide-control input-theme-accent" type="color" value="#fa8200" tabindex="1">
|
||||
</div>
|
||||
|
||||
<div class="form-wrap">
|
||||
<label for="radius" class="style-guide-control">Radius</label>
|
||||
<input id="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
|
||||
<input id="radius" class="style-guide-control input-theme-radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
|
@ -97,35 +206,39 @@
|
|||
<div class="style-guide-right">
|
||||
|
||||
<fieldset>
|
||||
<span class="style-guide-icon icon-add"></span>
|
||||
<span class="style-guide-icon icon-arrow-back"></span>
|
||||
<span class="style-guide-icon icon-arrow-downward"></span>
|
||||
<span class="style-guide-icon icon-arrow-forward"></span>
|
||||
<span class="style-guide-icon icon-arrow-upward"></span>
|
||||
<span class="style-guide-icon icon-check"></span>
|
||||
<span class="style-guide-icon icon-check-box-checked"></span>
|
||||
<span class="style-guide-icon icon-check-box-unchecked"></span>
|
||||
<span class="style-guide-icon icon-check-box-indeterminate"></span>
|
||||
<span class="style-guide-icon icon-close"></span>
|
||||
<span class="style-guide-icon icon-edit"></span>
|
||||
<span class="style-guide-icon icon-done"></span>
|
||||
<span class="style-guide-icon icon-arrow-down"></span>
|
||||
<span class="style-guide-icon icon-arrow-left"></span>
|
||||
<span class="style-guide-icon icon-arrow-right"></span>
|
||||
<span class="style-guide-icon icon-arrow-up"></span>
|
||||
<span class="style-guide-icon icon-more-horiz"></span>
|
||||
<span class="style-guide-icon icon-more-vert"></span>
|
||||
<span class="style-guide-icon icon-radio-unchecked"></span>
|
||||
<span class="style-guide-icon icon-radio-checked"></span>
|
||||
<span class="style-guide-icon icon-remove"></span>
|
||||
<span class="style-guide-icon icon-settings"></span>
|
||||
<span class="style-guide-icon icon-unfold-less"></span>
|
||||
<span class="style-guide-icon icon-unfold-more"></span>
|
||||
<span class="style-guide-icon icon-refresh"></span>
|
||||
<span class="style-guide-icon icon-reorder"></span>
|
||||
<span class="style-guide-icon icon-undo"></span>
|
||||
<span class="style-guide-icon icon-redo"></span>
|
||||
<span class="style-guide-icon icon-replay"></span>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<span class="style-guide-icon icon-add"></span>
|
||||
<span class="style-guide-icon icon-arrow-back"></span>
|
||||
<span class="style-guide-icon icon-arrow-downward"></span>
|
||||
<span class="style-guide-icon icon-arrow-forward"></span>
|
||||
<span class="style-guide-icon icon-arrow-upward"></span>
|
||||
<span class="style-guide-icon icon-check"></span>
|
||||
<span class="style-guide-icon icon-check-box-checked"></span>
|
||||
<span class="style-guide-icon icon-check-box-unchecked"></span>
|
||||
<span class="style-guide-icon icon-check-box-indeterminate"></span>
|
||||
<span class="style-guide-icon icon-close"></span>
|
||||
<span class="style-guide-icon icon-edit"></span>
|
||||
<span class="style-guide-icon icon-done"></span>
|
||||
<span class="style-guide-icon icon-arrow-down"></span>
|
||||
<span class="style-guide-icon icon-arrow-left"></span>
|
||||
<span class="style-guide-icon icon-arrow-right"></span>
|
||||
<span class="style-guide-icon icon-arrow-up"></span>
|
||||
<span class="style-guide-icon icon-more-horiz"></span>
|
||||
<span class="style-guide-icon icon-more-vert"></span>
|
||||
<span class="style-guide-icon icon-radio-unchecked"></span>
|
||||
<span class="style-guide-icon icon-radio-checked"></span>
|
||||
<span class="style-guide-icon icon-remove"></span>
|
||||
<span class="style-guide-icon icon-settings"></span>
|
||||
<span class="style-guide-icon icon-unfold-less"></span>
|
||||
<span class="style-guide-icon icon-unfold-more"></span>
|
||||
<span class="style-guide-icon icon-refresh"></span>
|
||||
<span class="style-guide-icon icon-reorder"></span>
|
||||
<span class="style-guide-icon icon-undo"></span>
|
||||
<span class="style-guide-icon icon-redo"></span>
|
||||
<span class="style-guide-icon icon-replay"></span>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
|
|
@ -138,147 +251,9 @@
|
|||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<button class="button button-small" tabindex="1">Button small</button>
|
||||
<button class="button" tabindex="1">Button medium</button>
|
||||
<button class="button button-large" tabindex="1">Button large</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-checkbox-button-1" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-1" class="mb-0"><span class="label-icon"></span>Checkbox button</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-button-line">
|
||||
<input id="style-guide-checkbox-button-2" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-2" class="mb-0"><span class="label-icon"></span>Checkbox button line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-button-ring">
|
||||
<input id="style-guide-checkbox-button-3" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-3" class="mb-0"><span class="label-icon"></span>Checkbox button ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-checkbox-button-4" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-4" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-checkbox-button-5" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-5" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-checkbox-button-6" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-6" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-1" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-1"><span class="label-icon"></span> Radio button</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-2" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-2"><span class="label-icon"></span> Radio button</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-3" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-3"><span class="label-icon"></span> Radio button</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-4" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-4"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-5" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-5"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-6" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-6"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-7" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-7"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-8" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-8"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-9" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-9"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-10" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-10"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-11" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-11"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-12" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-12"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button input-color-dot form-input-button-line">
|
||||
<input id="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-1">Input color button line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-2">Input color button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-accent form-input-button-line">
|
||||
<input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-3">Input color accent button line</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-shade form-input-button-line">
|
||||
<input id="style-guide-input-color-4" type="color" tabindex="1" value="#818aa0">
|
||||
<label for="style-guide-input-color-4">Input color shade button line</label>
|
||||
</div>
|
||||
<div class="form-dropdown form-dropdown-inline">
|
||||
<button class="style-guide-form-dropdown form-dropdown-toggle button button-line mb-0" tabindex="1">
|
||||
<span class="button-text">Button dropdown</span>
|
||||
</button>
|
||||
<ul class="list-unstyled form-dropdown-menu">
|
||||
<li>
|
||||
<button class="button button-block text-left form-dropdown-menu-item" tabindex="1"><span class="button-text">Option 1</span></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="button button-block text-left form-dropdown-menu-item" tabindex="1"><span class="button-text">Option 2</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="button button-small" tabindex="1">Small</button>
|
||||
<button class="button" tabindex="1">Medium</button>
|
||||
<button class="button button-large" tabindex="1">Large</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -316,59 +291,214 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x3">
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-topleft" class="style-guide-form-grid-topleft" type="radio" name="style-guide-form-grid-3x3" value="topleft" tabindex="1" checked>
|
||||
<label for="style-guide-form-grid-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-checkbox-button-1" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-1" class="mb-0"><span class="label-icon"></span>Checkbox</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-topcenter" class="style-guide-form-grid-topcenter" type="radio" name="style-guide-form-grid-3x3" value="topcenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
<div class="form-input-button form-input-button-line is-hidden">
|
||||
<input id="style-guide-checkbox-button-2" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-2" class="mb-0"><span class="label-icon"></span>Checkbox button line</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-topright" class="style-guide-form-grid-topright" type="radio" name="style-guide-form-grid-3x3" value="topright" tabindex="1">
|
||||
<label for="style-guide-form-grid-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
<div class="form-input-button form-input-button-ring is-hidden">
|
||||
<input id="style-guide-checkbox-button-3" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-3" class="mb-0"><span class="label-icon"></span>Checkbox button ring</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-centerleft" class="style-guide-form-grid-centerleft" type="radio" name="style-guide-form-grid-3x3" value="centerleft" tabindex="1">
|
||||
<label for="style-guide-form-grid-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap is-hidden">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-checkbox-button-4" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-4" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-centercenter" class="style-guide-form-grid-centercenter" type="radio" name="style-guide-form-grid-3x3" value="centercenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-checkbox-button-5" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-5" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-centerright" class="style-guide-form-grid-centerright" type="radio" name="style-guide-form-grid-3x3" value="centerright" tabindex="1">
|
||||
<label for="style-guide-form-grid-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-bottomleft" class="style-guide-form-grid-bottomleft" type="radio" name="style-guide-form-grid-3x3" value="bottomleft" tabindex="1">
|
||||
<label for="style-guide-form-grid-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-bottomcenter" class="style-guide-form-grid-bottomcenter" type="radio" name="style-guide-form-grid-3x3" value="bottomcenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-bottomright" class="style-guide-form-grid-bottomright" type="radio" name="style-guide-form-grid-3x3" value="bottomright" tabindex="1">
|
||||
<label for="style-guide-form-grid-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-checkbox-button-6" type="checkbox" tabindex="1">
|
||||
<label for="style-guide-checkbox-button-6" class="mb-0"><span class="label-icon"></span>Checkbox button input hidden ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-grid form-grid-3x1">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-1" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-1"><span class="label-icon"></span> Radio</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-2" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-2"><span class="label-icon"></span> Radio</label>
|
||||
</div>
|
||||
<div class="form-input-button">
|
||||
<input id="style-guide-radio-button-3" type="radio" name="style-guide-radio-button-1" tabindex="1">
|
||||
<label for="style-guide-radio-button-3"><span class="label-icon"></span> Radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap is-hidden">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-4" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-4"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-5" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-5"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide">
|
||||
<input id="style-guide-radio-button-6" type="radio" name="style-guide-radio-button-2" tabindex="1">
|
||||
<label for="style-guide-radio-button-6"><span class="label-icon"></span> Radio button input hidden</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap is-hidden">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-7" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-7"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-8" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-8"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line">
|
||||
<input id="style-guide-radio-button-9" type="radio" name="style-guide-radio-button-3" tabindex="1">
|
||||
<label for="style-guide-radio-button-9"><span class="label-icon"></span> Radio button input hidden line</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap is-hidden">
|
||||
<div class="form-group form-group-nested-button">
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-10" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-10"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-11" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-11"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-ring">
|
||||
<input id="style-guide-radio-button-12" type="radio" name="style-guide-radio-button-4" tabindex="1">
|
||||
<label for="style-guide-radio-button-12"><span class="label-icon"></span> Radio button input hidden ring</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-left" class="style-guide-form-grid-left" type="radio" name="style-guide-form-grid-3x1" value="centerleft" tabindex="1" checked>
|
||||
<label for="style-guide-form-grid-left"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
<div class="form-grid form-grid-3x3">
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-topleft" class="style-guide-form-grid-3x3-topleft" type="radio" name="style-guide-form-grid-3x3" value="topleft" tabindex="1" checked>
|
||||
<label for="style-guide-form-grid-3x3-topleft"><span class="label-icon"></span> <span class="sr-only">Top left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-topcenter" class="style-guide-form-grid-3x3-topcenter" type="radio" name="style-guide-form-grid-3x3" value="topcenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-topcenter"><span class="label-icon"></span> <span class="sr-only">Top center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-topright" class="style-guide-form-grid-3x3-topright" type="radio" name="style-guide-form-grid-3x3" value="topright" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-topright"><span class="label-icon"></span> <span class="sr-only">Top right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-centerleft" class="style-guide-form-grid-3x3-centerleft" type="radio" name="style-guide-form-grid-3x3" value="centerleft" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-centerleft"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-centercenter" class="style-guide-form-grid-3x3-centercenter" type="radio" name="style-guide-form-grid-3x3" value="centercenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-centercenter"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-centerright" class="style-guide-form-grid-3x3-centerright" type="radio" name="style-guide-form-grid-3x3" value="centerright" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-centerright"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-bottomleft" class="style-guide-form-grid-3x3-bottomleft" type="radio" name="style-guide-form-grid-3x3" value="bottomleft" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-bottomleft"><span class="label-icon"></span> <span class="sr-only">Bottom left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-bottomcenter" class="style-guide-form-grid-3x3-bottomcenter" type="radio" name="style-guide-form-grid-3x3" value="bottomcenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-bottomcenter"><span class="label-icon"></span> <span class="sr-only">Bottom Center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x3-bottomright" class="style-guide-form-grid-3x3-bottomright" type="radio" name="style-guide-form-grid-3x3" value="bottomright" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x3-bottomright"><span class="label-icon"></span> <span class="sr-only">Bottom right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-center" class="style-guide-form-grid-center" type="radio" name="style-guide-form-grid-3x1" value="centercenter" tabindex="1">
|
||||
<label for="style-guide-form-grid-center"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
<div class="form-grid form-grid-1x3">
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-1x3-top" class="style-guide-form-grid-1x3-top" type="radio" name="style-guide-form-grid-1x3" value="top" tabindex="1" checked>
|
||||
<label for="style-guide-form-grid-1x3-top"><span class="label-icon"></span> <span class="sr-only">Center top</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-1x3-center" class="style-guide-form-grid-1x3-center" type="radio" name="style-guide-form-grid-1x3" value="center" tabindex="1">
|
||||
<label for="style-guide-form-grid-1x3-center"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-1x3-bottom" class="style-guide-form-grid-1x3-bottom" type="radio" name="style-guide-form-grid-1x3" value="bottom" tabindex="1">
|
||||
<label for="style-guide-form-grid-1x3-bottom"><span class="label-icon"></span> <span class="sr-only">Center bottom</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-right" class="style-guide-form-grid-right" type="radio" name="style-guide-form-grid-3x1" value="centerright" tabindex="1">
|
||||
<label for="style-guide-form-grid-right"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
<div class="form-grid form-grid-3x1">
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x1-left" class="style-guide-form-grid-3x1-left" type="radio" name="style-guide-form-grid-3x1" value="left" tabindex="1" checked>
|
||||
<label for="style-guide-form-grid-3x1-left"><span class="label-icon"></span> <span class="sr-only">Center left</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x1-center" class="style-guide-form-grid-3x1-center" type="radio" name="style-guide-form-grid-3x1" value="center" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x1-center"><span class="label-icon"></span> <span class="sr-only">Center center</span></label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="style-guide-form-grid-3x1-right" class="style-guide-form-grid-3x1-right" type="radio" name="style-guide-form-grid-3x1" value="right" tabindex="1">
|
||||
<label for="style-guide-form-grid-3x1-right"><span class="label-icon"></span> <span class="sr-only">Center right</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<div class="form-inline">
|
||||
<div class="form-input-button input-color-dot form-input-button-line">
|
||||
<input id="style-guide-input-color-1" type="color" tabindex="1" value="#000000">
|
||||
<label for="style-guide-input-color-1">Input color button line</label>
|
||||
</div>
|
||||
<div class="form-input-button form-input-hide form-input-button-line is-hidden">
|
||||
<input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-2">Input color button input hidden line</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-accent form-input-button-line is-hidden">
|
||||
<input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
|
||||
<label for="style-guide-input-color-3">Input color accent button line</label>
|
||||
</div>
|
||||
<div class="form-input-button input-color-dot input-color-dot-shade form-input-button-line is-hidden">
|
||||
<input id="style-guide-input-color-4" type="color" tabindex="1" value="#818aa0">
|
||||
<label for="style-guide-input-color-4">Input color shade button line</label>
|
||||
</div>
|
||||
<div class="form-dropdown form-dropdown-inline">
|
||||
<button class="style-guide-form-dropdown form-dropdown-toggle button button-line mb-0" tabindex="1">
|
||||
<span class="button-text">Button dropdown</span>
|
||||
</button>
|
||||
<ul class="list-unstyled form-dropdown-menu">
|
||||
<li>
|
||||
<button class="button button-block text-left form-dropdown-menu-item" tabindex="1"><span class="button-text">Option 1</span></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="button button-block text-left form-dropdown-menu-item" tabindex="1"><span class="button-text">Option 2</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -383,25 +513,9 @@
|
|||
<label for="style-guide-textarea">Textarea</label>
|
||||
<textarea id="style-guide-textarea" class="textarea mb-0" spellcheck="false" placeholder="Placeholder" tabindex="1"></textarea>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-input-range">Input Range</label>
|
||||
<input id="style-guide-input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-input-colour">Input Colour</label>
|
||||
<input id="style-guide-input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-select-1">Select</label>
|
||||
<select id="style-guide-select-1" class="mb-0" tabindex="1">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<fieldset class="style-guide-right-column-3">
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-form-group-1">Form Group</label>
|
||||
<div class="form-group form-group-block mb-0">
|
||||
|
|
@ -419,6 +533,31 @@
|
|||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-input-range">Input Range</label>
|
||||
<input id="style-guide-input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-input-colour">Input Colour</label>
|
||||
<input id="style-guide-input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<div class="form-wrap">
|
||||
<label for="style-guide-select-1">Select</label>
|
||||
<select id="style-guide-select-1" class="mb-0" tabindex="1">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="style-guide-right-column-2">
|
||||
<div class="form-wrap">
|
||||
<div class="form-feedback">
|
||||
<p class="muted">Form feedback.</p>
|
||||
|
|
@ -429,8 +568,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<script src="js/helper.js"></script>
|
||||
|
|
@ -490,10 +627,14 @@
|
|||
var shadeSteps = 10;
|
||||
var saturationShift = 0;
|
||||
var lightShift = 4;
|
||||
var contrastNegative = parseInt(helper.e(".input-theme-contrast-dark").value, 10) / 100;
|
||||
var contrastPositive = parseInt(helper.e(".input-theme-contrast-light").value, 10) / 100;
|
||||
var html = helper.e("html");
|
||||
var rgb = helper.convertColor.hex.rgb(helper.e(".theme-color").value);
|
||||
var rgb = helper.convertColor.hex.rgb(helper.e(".input-theme-color").value);
|
||||
var hsl = helper.convertColor.rgb.hsl(rgb);
|
||||
|
||||
html.style.setProperty("--theme-shade", rgb.r + ", " + rgb.g + ", " + rgb.b);
|
||||
|
||||
var renderShade = function(name, index, rgb) {
|
||||
for (var key in rgb) {
|
||||
if (rgb[key] < 0) {
|
||||
|
|
@ -513,54 +654,71 @@
|
|||
for (var i = 1; i <= shadeSteps; i++) {
|
||||
var rgb = helper.convertColor.hsl.rgb({
|
||||
h: hsl.h,
|
||||
s: hsl.s - (saturationShift * i),
|
||||
l: hsl.l - (lightShift * i)
|
||||
s: hsl.s,
|
||||
l: hsl.l - (contrastNegative * i)
|
||||
});
|
||||
renderShade("--theme-shade-negative-", i, rgb);
|
||||
};
|
||||
for (var i = 1; i <= shadeSteps; i++) {
|
||||
var rgb = helper.convertColor.hsl.rgb({
|
||||
h: hsl.h,
|
||||
s: hsl.s + (saturationShift * i),
|
||||
l: hsl.l + (lightShift * i)
|
||||
s: hsl.s,
|
||||
l: hsl.l + (contrastPositive * i)
|
||||
});
|
||||
renderShade("--theme-shade-positive-", i, rgb);
|
||||
};
|
||||
}
|
||||
},
|
||||
accent: function() {
|
||||
var color = helper.convertColor.hex.rgb(helper.e(".theme-accent").value);
|
||||
var color = helper.convertColor.hex.rgb(helper.e(".input-theme-accent").value);
|
||||
helper.e("html").style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
helper.e(".disable-on").addEventListener("click", function() {
|
||||
disable.on();
|
||||
}, false);
|
||||
|
||||
helper.e(".disable-off").addEventListener("click", function() {
|
||||
disable.off();
|
||||
}, false);
|
||||
|
||||
helper.e(".theme-dark").addEventListener("click", function() {
|
||||
theme.dark();
|
||||
}, false);
|
||||
|
||||
helper.e(".theme-light").addEventListener("click", function() {
|
||||
theme.light();
|
||||
}, false);
|
||||
helper.e(".radius").addEventListener("input", function() {
|
||||
|
||||
helper.e(".input-theme-radius").addEventListener("input", function() {
|
||||
var html = helper.e("html");
|
||||
html.style.setProperty("--theme-radius", (parseInt(this.value, 10) / 100) + "rem");
|
||||
}, false);
|
||||
|
||||
helper.e(".style-guide-form-dropdown").addEventListener("click", function() {
|
||||
helper.toggleClass(helper.e(".form-dropdown"), "form-dropdown-open");
|
||||
helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-right");
|
||||
helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-bottom");
|
||||
}, false);
|
||||
helper.e(".theme-accent").addEventListener("change", function() {
|
||||
|
||||
helper.e(".input-theme-accent").addEventListener("change", function() {
|
||||
theme.render.accent();
|
||||
}, false);
|
||||
helper.e(".theme-color").addEventListener("change", function() {
|
||||
|
||||
helper.e(".input-theme-color").addEventListener("change", function() {
|
||||
theme.render.color.shade();
|
||||
}, false);
|
||||
|
||||
helper.e(".input-theme-contrast-light").addEventListener("input", function() {
|
||||
theme.render.color.shade();
|
||||
}, false);
|
||||
|
||||
helper.e(".input-theme-contrast-dark").addEventListener("input", function() {
|
||||
theme.render.color.shade();
|
||||
}, false);
|
||||
|
||||
theme.render.color.shade();
|
||||
theme.render.accent();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue