From 2bc6de1f5ea85e2b1e228e56c96b339dc105b1c8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 14 May 2021 14:32:24 -0700 Subject: Add hstack and vstack helpers --- scss/_helpers.scss | 1 + scss/helpers/_stacks.scss | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 scss/helpers/_stacks.scss (limited to 'scss') diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 8f566d12f..13fb1bbb5 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -2,6 +2,7 @@ @import "helpers/colored-links"; @import "helpers/ratio"; @import "helpers/position"; +@import "helpers/stacks"; @import "helpers/visually-hidden"; @import "helpers/stretched-link"; @import "helpers/text-truncation"; diff --git a/scss/helpers/_stacks.scss b/scss/helpers/_stacks.scss new file mode 100644 index 000000000..bb0d4d55a --- /dev/null +++ b/scss/helpers/_stacks.scss @@ -0,0 +1,24 @@ +// scss-docs-start stacks +.hstack { + display: flex; + flex-direction: row; + align-items: center; + align-self: stretch; +} + +.vstack { + display: flex; + flex: 1 1 auto; + flex-direction: column; + align-self: stretch; +} +// scss-docs-end stacks + +.vr { + display: inline-block; + align-self: stretch; + width: 1px; + min-height: 1em; + background-color: currentColor; + opacity: $hr-opacity; +} -- cgit v1.2.3