primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity

Add borderless option

Browse Source
This commit is contained in:
simurai 2020-04-13 22:58:27 +09:00
parent 0a3c622a9e
commit 0f32f73cb1
2 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/content/components/select-menu.md
View File

@ -167,6 +167,28 @@ The list of items is arguably the most important subcomponent within the menu. B
<div class="d-none d-sm-block" style="height: 320px"><!-- min height for > sm --></div>
```
Use the `.SelectMenu-list--withoutBorders` modifier to remove the borders between list items. Note: It's better to keep the borders if a list contains items with multiple lines of text. It will make it easier to see where the items start and end.
```html live
<details class="details-reset details-overlay" open>
<summary class="btn" aria-haspopup="true">
Choose an item
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<div class="SelectMenu-list SelectMenu-list--withoutBorders">
<button class="SelectMenu-item" role="menuitem">Item 1</button>
<button class="SelectMenu-item" role="menuitem">Item 2</button>
<button class="SelectMenu-item" role="menuitem">Item 3</button>
</div>
</div>
</div>
</details>
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
<div class="d-none d-sm-block" style="height: 120px"><!-- min height for > sm --></div>
```
## Header
Add a `.SelectMenu-header` at the top to house a clear title and a close button.

10
src/select-menu/select-menu.scss
View File

@ -201,6 +201,11 @@ $SelectMenu-max-height: 480px !default;
// stylelint-disable-next-line primer/spacing
padding-bottom: 7px;
}
// Borderless
.SelectMenu-list--withoutBorders & {
border-bottom: 0;
}
}
// Icon
@ -314,6 +319,11 @@ $SelectMenu-max-height: 480px !default;
color: $text-gray-light;
background-color: $bg-gray;
border-bottom: $border-width $border-style $border-gray-light;
// Borderless
.SelectMenu-list--withoutBorders & {
border-top: $border-width $border-style $border-gray-light;
}
}
// Footer