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

Merge pull request #921 from primer/revert-900-more-select-menu-improvements

Browse Source 
Revert "More SelectMenu improvements"
This commit is contained in:
simurai 2019-10-01 11:55:35 +09:00 committed by GitHub
commit fec7b5239f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -350,7 +350,7 @@ Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for ad
</details>
<div class="d-sm-none" style="height: 600px"> <!-- min height for < sm --> </div>
<div class="d-none d-sm-block" style="height: 500px"> <!-- min height for > sm --> </div>
<div class="d-none d-sm-block" style="height: 380px"> <!-- min height for > sm --> </div>
```
## Tabs
@ -430,7 +430,7 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
<div class="SelectMenu-list">
<button class="SelectMenu-item" role="menuitem">Item 1</button>
<button class="SelectMenu-item" role="menuitem">Item 2</button>
<div class="SelectMenu-message bg-red-0 text-red p-2">Message goes here</div>
<div class="SelectMenu-message border-bottom border-top bg-red-0 text-red p-2">Message goes here</div>
<button class="SelectMenu-item" role="menuitem">Item 3</button>
</div>
</div>

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

@ -3,9 +3,6 @@
// selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles.
// TODO: Introduce an additional .intent-keyboard class
$SelectMenu-border: $border-width $border-style lighten($gray-200, 3%);
$SelectMenu-max-height: 480px;
// Select Menu
//
// A more advanced menu with support for navigation, filtering, and more.
@ -86,7 +83,7 @@ $SelectMenu-max-height: 480px;
@include breakpoint(sm) {
width: 300px;
height: auto;
max-height: $SelectMenu-max-height;
max-height: 350px;
margin: $spacer-1 0 $spacer-3 0;
font-size: $font-size-small;
border: $border-width $border-style $border-gray-dark;
@ -164,7 +161,6 @@ $SelectMenu-max-height: 480px;
position: relative;
padding: 0;
margin: 0;
margin-bottom: -$border-width; // Hides the last border in the list
flex: auto;
overflow-x: hidden;
overflow-y: auto;
@ -188,7 +184,11 @@ $SelectMenu-max-height: 480px;
cursor: pointer;
background-color: $bg-white;
border: 0;
border-bottom: $SelectMenu-border;
& + & {
// Add a top border only if the above element also is a list item
border-top: $border-width $border-style lighten($gray-200, 3%);
}
@include breakpoint(sm) {
padding-top: $spacer-2;
@ -269,10 +269,6 @@ $SelectMenu-max-height: 480px;
//
// A container used to show different kinds of content. Like a message, a blankslate or the loading animation.
.SelectMenu-message {
border-bottom: $SelectMenu-border;
}
.SelectMenu-message,
.SelectMenu-blankslate,
.SelectMenu-loading {
@ -292,7 +288,16 @@ $SelectMenu-max-height: 480px;
font-weight: $font-weight-bold;
color: $text-gray-light;
background-color: $gray-100;
border-bottom: $SelectMenu-border;
border-top: $border;
border-bottom: $border;
&:first-child {
border-top: 0;
}
&:last-child {
border-bottom: 0;
}
}
// Footer
@ -300,7 +305,6 @@ $SelectMenu-max-height: 480px;
// A container at the bottom.
.SelectMenu-footer {
z-index: 0; // Avoid top border from getting covered by the negative margin of the list
padding: $spacer-2 $spacer-3;
font-size: $font-size-small;
color: $text-gray-light;
@ -324,10 +328,15 @@ $SelectMenu-max-height: 480px;
@include breakpoint(sm) {
height: auto;
max-height: $SelectMenu-max-height;
max-height: 350px;
margin-top: $spacer-1;
}
}
// Show bottom "border" for the last item when the list doesn't take up the whole height
.SelectMenu-item:last-child {
box-shadow: 0 $border-width 0 lighten($gray-200, 3%);
}
}
// States