extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-04 13:09:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve style guide accent colour

Browse Source
This commit is contained in:
zombieFox 2019-11-15 14:25:36 +00:00
parent ab9ea26934
commit 5a8be81835
2 changed files with 22 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/css/form.css
View File

@ -439,7 +439,7 @@ input[type="radio"]+label .label-icon:after {
transform: scale(0.7); transform: scale(0.7);
transform-origin: center; transform-origin: center;
z-index: 3; z-index: 3;
transition: background-color var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast); transition: background-color var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
/* transition: background-color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast); */ /* transition: background-color var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast), clip-path var(--layout-timing-extra-fast); */
} }
@ -503,6 +503,7 @@ input[type="color"] {
padding: 0; padding: 0;
margin: 0 0 1em 0; margin: 0 0 1em 0;
width: 100%; width: 100%;
min-width: 3em;
height: 2.5em; height: 2.5em;
display: block; display: block;
border: 0; border: 0;
@ -1012,6 +1013,7 @@ input[type="range"]:disabled::-moz-range-progress {
right: 1em; right: 1em;
width: calc(var(--form-thumb-size) * 0.8); width: calc(var(--form-thumb-size) * 0.8);
height: calc(var(--form-thumb-size) * 0.8); height: calc(var(--form-thumb-size) * 0.8);
min-width: inherit;
z-index: 1; z-index: 1;
border-radius: 50%; border-radius: 50%;
transform: translateY(-50%); transform: translateY(-50%);
@ -1135,76 +1137,6 @@ input[type="range"]:disabled::-moz-range-progress {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
/* .form-grid input[type="checkbox"]+label:before,
.form-grid input[type="radio"]+label:before {
content: "";
background-color: rgb(var(--form-grid-input-background));
margin: 0;
font-size: 1em;
display: block;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--form-thumb-size) / 2);
height: calc(var(--form-thumb-size) / 2);
transform: scale(1) translate(-50%, -50%);
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), width var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
}
.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 {
background-color: rgb(var(--form-grid-input-background-focus-hover));
box-shadow: var(--form-hover-ring);
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:active+label:before,
.form-grid input[type="radio"]:active+label:before {
background-color: rgb(var(--form-grid-input-background-active));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
box-shadow: var(--form-focus-ring-accent);
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:checked+label:before,
.form-grid input[type="radio"]:checked+label:before {
background-color: rgb(var(--form-grid-input-background-checked));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:checked:active+label:before,
.form-grid input[type="radio"]:checked:active+label:before {
background-color: rgb(var(--form-grid-input-background-active));
transform: scale(1) translate(-50%, -50%);
}
.form-grid input[type="checkbox"]:disabled+label:before,
.form-grid input[type="checkbox"]:disabled:focus+label:before,
.form-grid input[type="checkbox"]:disabled:hover+label:before,
.form-grid input[type="checkbox"]:disabled:active+label:before,
.form-grid input[type="radio"]:disabled+label:before,
.form-grid input[type="radio"]:disabled:focus+label:before,
.form-grid input[type="radio"]:disabled:hover+label:before,
.form-grid input[type="radio"]:disabled:active+label:before {
background-color: rgb(var(--form-grid-input-background-disabled));
width: calc(var(--form-thumb-size) / 2);
height: calc(var(--form-thumb-size) / 2);
box-shadow: none;
}
.form-grid input[type="checkbox"]:disabled:checked+label:before,
.form-grid input[type="radio"]:disabled:checked+label:before {
background-color: rgb(var(--form-grid-input-background-disabled));
width: var(--form-thumb-size);
height: var(--form-thumb-size);
box-shadow: none;
} */
.form-indent { .form-indent {
margin-left: 2.25em; margin-left: 2.25em;
} }

22
src/style-guide.html
View File

@ -48,6 +48,10 @@
<button class="button mb-0 style-guide-control theme-dark" tabindex="1">Dark</button> <button class="button mb-0 style-guide-control theme-dark" tabindex="1">Dark</button>
<button class="button mb-0 style-guide-control theme-light" tabindex="1">Light</button> <button class="button mb-0 style-guide-control theme-light" tabindex="1">Light</button>
</div> </div>
<div class="input-wrap">
<label for="style-guide-control-theme-color">Accent Colour</label>
<input id="style-guide-control-theme-color" class="style-guide-control theme-color" class="form-group-item-half mb-0" type="color" value="#fa8200" tabindex="1">
</div>
<div class="input-wrap"> <div class="input-wrap">
<label for="radius" class="style-guide-control">Radius</label> <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 radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
@ -128,11 +132,19 @@
</div> </div>
<hr> <hr>
<div class="input-wrap"> <div class="input-wrap">
<input id="style-guide-checkbox" type="checkbox" tabindex="1"> <input id="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
<label for="style-guide-checkbox"><span class="label-icon"></span> Checkbox</label> <label for="style-guide-checkbox-1"><span class="label-icon"></span> Checkbox 1</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
<input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1"> <input id="style-guide-checkbox-2" type="checkbox" tabindex="1">
<label for="style-guide-checkbox-2"><span class="label-icon"></span> Checkbox 2</label>
</div>
<div class="input-wrap">
<input id="style-guide-checkbox-3" type="checkbox" tabindex="1">
<label for="style-guide-checkbox-3"><span class="label-icon"></span> Checkbox 3</label>
</div>
<div class="input-wrap">
<input id="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
<label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label> <label for="style-guide-radio-7"><span class="label-icon"></span> Radio 1</label>
</div> </div>
<div class="input-wrap"> <div class="input-wrap">
@ -313,6 +325,10 @@
helper.e(".style-guide-form-dropdown").addEventListener("click", function() { helper.e(".style-guide-form-dropdown").addEventListener("click", function() {
helper.toggleClass(helper.e(".form-dropdown"), "form-dropdown-open"); helper.toggleClass(helper.e(".form-dropdown"), "form-dropdown-open");
}, false); }, false);
helper.e(".theme-color").addEventListener("change", function() {
var color = helper.hexToRgb(this.value);
helper.e("html").style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
}, false);
</script> </script>
</body> </body>