js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added dropdown headings

Browse Source
This commit is contained in:
Cory LaViska
2017-08-31 12:23:47 -04:00
parent 9f8d10ad9a
commit 608e5bf4e2
4 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
source/css/dropdowns.css
View File

@@ -29,6 +29,8 @@
min-width: var(--dropdown-min-width);
max-width: var(--dropdown-max-width);
max-height: var(--dropdown-max-height);
font-size: var(--dropdown-font-size);
font-weight: var(--dropdown-font-weight);
background-color: var(--dropdown-bg-color);
border: solid var(--dropdown-border-width) var(--dropdown-border-color);
border-radius: var(--dropdown-border-radius);
@@ -37,6 +39,7 @@
padding: var(--dropdown-padding-y) 0;
overflow-y: auto;
transform: translateZ(0);
user-select: none;
& a {
position: relative;
@@ -79,6 +82,14 @@
border-top: solid var(--dropdown-divider-width) var(--dropdown-divider-color);
margin: var(--dropdown-padding-y) 0;
}
& .dropdown-heading {
font-size: var(--dropdown-heading-font-size);
font-weight: var(--dropdown-heading-font-weight);
color: var(--dropdown-heading-color);
padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + .5em);
cursor: default;
}
}
&.dropdown-top .dropdown-menu {

4
source/docs/dropdowns.md
View File

@@ -12,6 +12,8 @@ Note the class names used for the main container, the trigger, and the menu. Add
To disable a dropdown entirely, add the `disabled` property to the dropdown trigger if it’s a button. If it’s a link, add the `disabled` class instead. When a dropdown is activated, it will receive the `active` class and the menu will show.
Headings can be created with the `dropdown-heading` class.
```html
<div class="dropdown">
<button type="button" class="dropdown-trigger">Dropdown</button>
@@ -22,6 +24,7 @@ To disable a dropdown entirely, add the `disabled` property to the dropdown trig
<a href="#" class="checked">Checked</a>
<a href="#" class="disabled">Disabled</a>
<hr>
<div class="dropdown-heading">Heading</div>
<a href="#">More...</a>
</div>
</div>
@@ -37,6 +40,7 @@ To disable a dropdown entirely, add the `disabled` property to the dropdown trig
<a href="#" class="checked">Checked</a>
<a href="#" class="disabled">Disabled</a>
<hr>
<div class="dropdown-heading">Heading</div>
<a href="#">More...</a>
</div>
</div>