extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-27 10:34:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve dropdown menu

Browse Source
This commit is contained in:
zombieFox 2019-11-07 16:52:11 +00:00
parent d669589545
commit 5c4a0492ea
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/form.css
View File

@ -1243,7 +1243,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-dropdown-menu {
background-color: rgb(var(--form-dropdown-background));
border-radius: var(--theme-radius);
padding: var(--theme-radius) 0;
padding: 0.5em 0;
position: absolute;
top: calc(100% + calc(var(--layout-line-width) * 2));
left: 0;
@ -1251,6 +1251,7 @@ input[type="range"]:disabled::-moz-range-progress {
min-width: 12em;
box-shadow: var(--layout-shadow-large);
z-index: var(--z-index-dropdown);
overflow: hidden;
display: none;
}

30
src/style-guide.html
View File

@ -53,28 +53,43 @@
<input id="radius" class="style-guide-control radius" type="range" min="0" max="500" value="0" step="20" tabindex="-1">
</div>
<hr>
<div class="button-wrap">
<div class="button-wrap form-inline">
<button class="button button-small mb-0" tabindex="1">Button Small</button>
</div>
<div class="button-wrap">
<div class="button-wrap form-inline">
<button class="button mb-0" tabindex="1">Button Medium</button>
</div>
<div class="button-wrap">
<div class="button-wrap form-inline">
<button class="button button-large mb-0" tabindex="1">Button Large</button>
</div>
<hr>
<div class="input-wrap input-button">
<div class="input-wrap input-button form-inline">
<input id="style-guide-input-button-1" type="checkbox" tabindex="1">
<label for="style-guide-input-button-1" class="mb-0">Checkbox Button</label>
</div>
<div class="input-wrap input-button input-hide">
<div class="input-wrap input-button input-hide form-inline">
<input id="style-guide-input-button-2" type="checkbox" tabindex="1">
<label for="style-guide-input-button-2" class="mb-0">Checkbox Hidden Button</label>
</div>
<div class="input-wrap input-button input-button-inline input-color-dot">
<div class="input-wrap input-button form-inline input-color-dot">
<input id="style-guide-input-button-3" type="color" tabindex="1">
<label for="style-guide-input-button-3">Input Colour Button</label>
</div>
<div class="button-wrap form-inline">
<div class="style-guide-form-dropdown form-dropdown">
<button class="form-dropdown-toggle button 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>
<hr>
<div class="input-wrap">
<input id="style-guide-checkbox" type="checkbox" tabindex="1">
@ -259,6 +274,9 @@
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(this, "form-dropdown-open");
}, false);
</script>
</body>