darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-07 19:28:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3291 from alphagov/fix-pill-heights

Browse Source 
Make pill items match their heights
This commit is contained in:
Tom Byers
2020-02-11 14:28:14 +00:00
committed by GitHub
parent 6b703614b9 4433db346b
commit 1d0c2070db
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/stylesheets/components/pill.scss
View File

@@ -14,11 +14,20 @@
See: https://www.w3.org/TR/css-flexbox-1/#flex-containers See: https://www.w3.org/TR/css-flexbox-1/#flex-containers
*/ */
float: left; float: left;
/*
Setting this as a flex container means the contents (1 item)
will fill the vertical space due to `align-items` defaulting
to `stretch`.
See: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#prop-align-items
*/
display: flex;
} }
a, a,
&-selected-item { &-selected-item {
display: block; display: flex; // float causes display: block in browsers without flexbox
flex-direction: column;
justify-content: center;
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;