From 5464f4ab7e1ea5e6ef841609dbeb04d0436655db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 11:48:03 -0800 Subject: Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time. --- scss/utilities/_flex.scss | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) (limited to 'scss') diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 4d13e9f8c..c9783c2c8 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -27,5 +27,47 @@ .flex-items#{$infix}-right { justify-content: flex-end; } .flex-items#{$infix}-around { justify-content: space-around; } .flex-items#{$infix}-between { justify-content: space-between; } + + // + // New flex utils to replace and extend the ones above + // + + .flex#{$infix}-fill { flex: 1 1 auto; } + .flex#{$infix}-justify { flex: 1 1 100%; } + + .flex#{$infix}-row { flex-direction: row !important; } + .flex#{$infix}-column { flex-direction: column !important; } + + .flex#{$infix}-wrap { flex-wrap: wrap !important; } + .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } + + .justify-content#{$infix}-start { justify-content: flex-start !important; } + .justify-content#{$infix}-end { justify-content: flex-end !important; } + .justify-content#{$infix}-center { justify-content: center !important; } + .justify-content#{$infix}-between { justify-content: space-between !important; } + .justify-content#{$infix}-around { justify-content: space-around !important; } + + .align-items#{$infix}-start { align-items: flex-start !important; } + .align-items#{$infix}-end { align-items: flex-end !important; } + .align-items#{$infix}-center { align-items: center !important; } + .align-items#{$infix}-baseline { align-items: baseline !important; } + .align-items#{$infix}-stretch { align-items: stretch !important; } + + .align-content#{$infix}-start { align-content: flex-start !important; } + .align-content#{$infix}-end { align-content: flex-end !important; } + .align-content#{$infix}-center { align-content: center !important; } + .align-content#{$infix}-between { align-content: space-between !important; } + .align-content#{$infix}-around { align-content: space-around !important; } + .align-content#{$infix}-stretch { align-content: stretch !important; } + + // Item + .flex#{$infix}-auto { flex: 1 1 auto !important; } + + .align-self#{$infix}-auto { align-self: auto !important; } + .align-self#{$infix}-start { align-self: flex-start !important; } + .align-self#{$infix}-end { align-self: flex-end !important; } + .align-self#{$infix}-center { align-self: center !important; } + .align-self#{$infix}-baseline { align-self: baseline !important; } + .align-self#{$infix}-stretch { align-self: stretch !important; } } } -- cgit v1.2.3