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

Add --dropdown-caret-*; use border instead of ascii

Browse Source
This commit is contained in:
Cory LaViska
2017-09-04 14:02:47 -04:00
parent 3669e46b3f
commit 8166cd0ebb
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
source/css/dropdowns.css
View File

@@ -4,20 +4,22 @@
position: relative;
display: inline-block;
/* Trigger */
& .dropdown-trigger::after {
content: '▼';
font-family: var(--font-system);
font-size: .6em;
vertical-align: middle;
margin-left: .5em;
content: '';
width: var(--dropdown-caret-size);
height: var(--dropdown-caret-size);
border-top: solid var(--dropdown-caret-width) var(--dropdown-caret-color);
border-right: solid var(--dropdown-caret-width) var(--dropdown-caret-color);
margin-left: var(--dropdown-caret-size);
margin-top: calc(var(--dropdown-caret-size) * -1);
transform: rotate(135deg);
display: inline-block;
transform: scaleY(.75);
margin-top: -.2em;
vertical-align: middle;
}
&.dropdown-top .dropdown-trigger::after {
transform: scaleY(.75) rotate(180deg);
transform: rotate(315deg);
margin-top: 0;
}
/* Menu */

4
source/css/variables.css
View File

@@ -286,6 +286,10 @@
--dropdown-offset-y: 1px;
--dropdown-z-index: 100;
--dropdown-caret-color: currentcolor;
--dropdown-caret-size: .5em;
--dropdown-caret-width: 2px;
--dropdown-divider-color: var(--component-border-color);
--dropdown-divider-width: var(--component-border-width);