From a5ea78547480952f7d00075c4de70d1852b606dd Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 6 Feb 2020 16:38:24 +0000 Subject: [PATCH 1/2] Make pill items match their heights --- app/assets/stylesheets/components/pill.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 5139c9632..12c504fcc 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -14,6 +14,13 @@ See: https://www.w3.org/TR/css-flexbox-1/#flex-containers */ 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, From 4433db346ba00f56ae70c93807dfa130d7f5a38f Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 7 Feb 2020 17:42:53 +0000 Subject: [PATCH 2/2] Center pill content using more flexbox Turns each pill item (already full height) into a flex container with its content as a column. Uses this to align the content (the pill label) to the middle of the column. --- app/assets/stylesheets/components/pill.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 12c504fcc..d8dab6cdf 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -25,7 +25,9 @@ a, &-selected-item { - display: block; + display: flex; // float causes display: block in browsers without flexbox + flex-direction: column; + justify-content: center; float: left; box-sizing: border-box; width: 100%;