primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-03 03:33:40 +03:00
Code Issues Projects Releases Wiki Activity

Renamve withoutBorders to borderless

Browse Source
This commit is contained in:
simurai 2020-04-14 13:34:28 +09:00
parent b302007e91
commit afd42f2244
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,7 +107,7 @@ If the `SelectMenu` should show a check icon for selected items, use the `Select
## Borderless
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.
Use the `.SelectMenu-list--borderless` 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>
@ -116,7 +116,7 @@ Use the `.SelectMenu-list--withoutBorders` modifier to remove the borders betwee
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<div class="SelectMenu-list SelectMenu-list--withoutBorders">
<div class="SelectMenu-list SelectMenu-list--borderless">
<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>
@ -265,7 +265,7 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
<div class="d-none d-sm-block" style="height: 300px"><!-- min height for > sm --></div>
```
Dividers are also supported when using the `.SelectMenu-list--withoutBorders` modifier.
Dividers are also supported when using the `.SelectMenu-list--borderless` modifier.
```html live
<details class="details-reset details-overlay" open>
@ -281,7 +281,7 @@ Dividers are also supported when using the `.SelectMenu-list--withoutBorders` mo
<svg class="octicon octicon-x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.72 3.72C3.86062 3.57955 4.05125 3.50066 4.25 3.50066C4.44875 3.50066 4.63937 3.57955 4.78 3.72L8 6.94L11.22 3.72C11.2887 3.64631 11.3715 3.58721 11.4635 3.54622C11.5555 3.50523 11.6548 3.48319 11.7555 3.48141C11.8562 3.47963 11.9562 3.49816 12.0496 3.53588C12.143 3.5736 12.2278 3.62974 12.299 3.70096C12.3703 3.77218 12.4264 3.85702 12.4641 3.9504C12.5018 4.04379 12.5204 4.14382 12.5186 4.24452C12.5168 4.34523 12.4948 4.44454 12.4538 4.53654C12.4128 4.62854 12.3537 4.71134 12.28 4.78L9.06 8L12.28 11.22C12.3537 11.2887 12.4128 11.3715 12.4538 11.4635C12.4948 11.5555 12.5168 11.6548 12.5186 11.7555C12.5204 11.8562 12.5018 11.9562 12.4641 12.0496C12.4264 12.143 12.3703 12.2278 12.299 12.299C12.2278 12.3703 12.143 12.4264 12.0496 12.4641C11.9562 12.5018 11.8562 12.5204 11.7555 12.5186C11.6548 12.5168 11.5555 12.4948 11.4635 12.4538C11.3715 12.4128 11.2887 12.3537 11.22 12.28L8 9.06L4.78 12.28C4.63782 12.4125 4.44977 12.4846 4.25547 12.4812C4.06117 12.4777 3.87579 12.399 3.73837 12.2616C3.60096 12.1242 3.52225 11.9388 3.51882 11.7445C3.51539 11.5502 3.58752 11.3622 3.72 11.22L6.94 8L3.72 4.78C3.57955 4.63938 3.50066 4.44875 3.50066 4.25C3.50066 4.05125 3.57955 3.86063 3.72 3.72Z"></path></svg>
</button>
</header>
<div class="SelectMenu-list SelectMenu-list--withoutBorders">
<div class="SelectMenu-list SelectMenu-list--borderless">
<button class="SelectMenu-item" role="menuitem">Item 1</button>
<button class="SelectMenu-item" role="menuitem">Item 2</button>
<div class="SelectMenu-divider">More options</div>

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

@ -203,7 +203,7 @@ $SelectMenu-max-height: 480px !default;
}
// Borderless
.SelectMenu-list--withoutBorders & {
.SelectMenu-list--borderless & {
border-bottom: 0;
}
}
@ -321,7 +321,7 @@ $SelectMenu-max-height: 480px !default;
border-bottom: $border-width $border-style $border-gray-light;
// Borderless
.SelectMenu-list--withoutBorders & {
.SelectMenu-list--borderless & {
border-top: $border-width $border-style $border-gray-light;
&:empty {