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

2
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

3
docs/dropdowns.html
View File

@@ -57,6 +57,7 @@
<p>Dropdowns can be created using the markup below. You can use a <code>&lt;button&gt;</code> or an <code>&lt;a&gt;</code> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <code>&lt;a&gt;</code> elements. Dividers are simply <code>&lt;hr&gt;</code> elements.</p>
<p>Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the <code>disabled</code> class. Menu items can also be given a checked state using the <code>checked</code> class.</p>
<p>To disable a dropdown entirely, add the <code>disabled</code> property to the dropdown trigger if it’s a button. If it’s a link, add the <code>disabled</code> class instead. When a dropdown is activated, it will receive the <code>active</code> class and the menu will show.</p>
<p>Headings can be created with the <code>dropdown-heading</code> class.</p>
<pre><code class="lang-html">&lt;div class=&quot;dropdown&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;dropdown-trigger&quot;&gt;Dropdown&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
@@ -66,6 +67,7 @@
&lt;a href=&quot;#&quot; class=&quot;checked&quot;&gt;Checked&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
&lt;hr&gt;
&lt;div class=&quot;dropdown-heading&quot;&gt;Heading&lt;/div&gt;
&lt;a href=&quot;#&quot;&gt;More...&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
@@ -80,6 +82,7 @@
<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>

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>