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

[design] improve colour input button

Browse Source
This commit is contained in:
zombieFox 2019-11-12 11:12:56 +00:00
parent 2fd32260d9
commit 5dfe1b941d
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/form.css
View File

@ -984,9 +984,9 @@ input[type="range"]:disabled::-moz-range-progress {
margin: 0;
position: absolute;
top: 50%;
right: 0.5em;
width: 1em;
height: 1em;
right: 1em;
width: calc(var(--form-thumb-size) * 0.8);
height: calc(var(--form-thumb-size) * 0.8);
z-index: 1;
border-radius: 50%;
transform: translateY(-50%);
@ -1010,7 +1010,7 @@ input[type="range"]:disabled::-moz-range-progress {
}
.input-color-dot input[type="color"]+label {
padding-right: 2.25em;
padding-right: calc(calc(var(--form-thumb-size) * 0.8) + 2em);
position: relative;
}

12
src/style-guide.html
View File

@ -99,9 +99,17 @@
<label for="style-guide-radio-6"><span class="label-icon"></span> Hidden Radio Button 3</label>
</div>
</div>
<div class="input-wrap input-button input-hide form-inline">
<input id="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
<label for="style-guide-input-color-1">Hidden Input Colour Button</label>
</div>
<div class="input-wrap input-button input-color-dot form-inline">
<input id="style-guide-input-button-3" type="color" tabindex="1">
<label for="style-guide-input-button-3">Input Colour Button</label>
<input id="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
<label for="style-guide-input-color-2">Input Colour Button</label>
</div>
<div class="input-wrap input-button input-color-dot input-color-dot-accent form-inline">
<input id="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
<label for="style-guide-input-color-3">Input Colour Accent Button</label>
</div>
<div class="button-wrap form-inline">
<div class="form-dropdown form-dropdown-inline">