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

Use flexbox for the items

Browse Source
This commit is contained in:
simurai 2019-08-22 15:43:15 +09:00
parent 5a05ab549d
commit 7aa838bac2
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -200,7 +200,7 @@ The list of items is arguably the most important subcomponent within the menu. B
/>
With an avatar
</button>
<button class="SelectMenu-item" role="menuitem">
<button class="SelectMenu-item flex-justify-between" role="menuitem">
With a status icon
<!-- <%= octicon "primitive-dot", class: "color-green-5 ml-2" %> -->
<svg
@ -213,13 +213,13 @@ The list of items is arguably the most important subcomponent within the menu. B
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
</svg>
</button>
<button class="SelectMenu-item" role="menuitem">
<button class="SelectMenu-item d-block" role="menuitem">
With a <span class="Label bg-blue" title="Label: label">label</span>
</button>
<button class="SelectMenu-item" role="menuitem">
With a counter <span class="Counter bg-gray-2 ml-1">16</span>
</button>
<button class="SelectMenu-item" role="menuitem">
<button class="SelectMenu-item d-block" role="menuitem">
<h5>With a heading</h5>
<span>and some longer description</span>
</button>

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

@ -174,7 +174,8 @@
// The interactive element used to make a selection
.SelectMenu-item {
display: block;
display: flex;
align-items: center;
width: 100%;
padding: $spacer-3;
overflow: hidden;
@ -200,6 +201,7 @@
// The icon shown on the left of a list item. Typically a check icon.
.SelectMenu-icon {
width: 16px; // fixed width to make sure following content aligns
margin-right: $spacer-2;
visibility: hidden;
transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;