primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-01 18:53:34 +03:00
Code Issues Projects Releases Wiki Activity

Switch to bottom-border

Browse Source
This commit is contained in:
simurai 2019-09-16 21:44:49 +09:00
parent a95c6e1bc3
commit fb3a10aa9a
2 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 border-bottom border-top bg-red-0 text-red p-2">Message goes here</div>
<div class="SelectMenu-message bg-red-0 text-red p-2">Message goes here</div>
<button class="SelectMenu-item" role="menuitem">Item 3</button>
</div>
</div>

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

@ -3,6 +3,8 @@
// 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%);
// Select Menu
//
// A more advanced menu with support for navigation, filtering, and more.
@ -161,6 +163,7 @@
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;
@ -184,11 +187,7 @@
cursor: pointer;
background-color: $bg-white;
border: 0;
& + & {
// Add a top border only if the above element also is a list item
border-top: $border-width $border-style lighten($gray-200, 3%);
}
border-bottom: $SelectMenu-border;
@include breakpoint(sm) {
padding-top: $spacer-2;
@ -269,6 +268,10 @@
//
// 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 {
@ -288,16 +291,7 @@
font-weight: $font-weight-bold;
color: $text-gray-light;
background-color: $gray-100;
border-top: $border;
border-bottom: $border;
&:first-child {
border-top: 0;
}
&:last-child {
border-bottom: 0;
}
border-bottom: $SelectMenu-border;
}
// Footer
@ -310,6 +304,7 @@
color: $text-gray-light;
text-align: center;
border-top: $border;
z-index: 0; // Avoid top border from getting covered by the negative margin of the list
@include breakpoint(sm) {
padding: $spacer-1 $spacer-2;
@ -332,11 +327,6 @@
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