From 8ad9c6e38af7fff81c2527c3d0bad74c741c4ebc Mon Sep 17 00:00:00 2001 From: John Ashenden Date: Sat, 3 Feb 2018 14:45:20 -0800 Subject: [PATCH] Update pod-flush-* behavior --- styles/layout/pod/styles.less | 300 ++++++++++++++++++++++++++++++++-- 1 file changed, 283 insertions(+), 17 deletions(-) diff --git a/styles/layout/pod/styles.less b/styles/layout/pod/styles.less index 425259fb..612bbb72 100644 --- a/styles/layout/pod/styles.less +++ b/styles/layout/pod/styles.less @@ -168,52 +168,52 @@ .property-variant(pod, margin-right, wider, null); .property-variant(pod, padding-right, wider, null); } - } - - [class^='pod'], - [class*=' pod'] { - &.flush { + &-flush { + margin-bottom: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; + margin-top: 0; + padding-bottom: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; + padding-top: 0; } - &.flush-vertical { + &-flush-vertical { margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-top: 0; } - &.flush-horizontal { - margin-left: 0; - margin-right: 0; - padding-left: 0; - padding-right: 0; - } - - &.flush-top { + &-flush-top { margin-top: 0; padding-top: 0; } - &.flush-bottom { + &-flush-bottom { margin-bottom: 0; padding-bottom: 0; } - &.flush-left { + &-flush-horizontal { margin-left: 0; + margin-right: 0; padding-left: 0; + padding-right: 0; } - &.flush-right { + &-flush-left { + margin-left: 0; + padding-left: 0; + } + + &-flush-right { margin-right: 0; padding-right: 0; } @@ -422,6 +422,62 @@ .property-variant(pod, margin-right, wider, screen-small); .property-variant(pod, padding-right, wider, screen-small); } + + &-flush, + &-flush-screen-small { + margin-bottom: 0; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + margin-top: 0; + margin-top: 0; + padding-bottom: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + padding-top: 0; + } + + &-flush-vertical, + &-flush-vertical-screen-small { + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + padding-top: 0; + } + + &-flush-top, + &-flush-top-screen-small { + margin-top: 0; + padding-top: 0; + } + + &-flush-bottom, + &-flush-bottom-screen-small { + margin-bottom: 0; + padding-bottom: 0; + } + + &-flush-horizontal, + &-flush-horizontal-screen-small { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } + + &-flush-left, + &-flush-left-screen-small { + margin-left: 0; + padding-left: 0; + } + + &-flush-right, + &-flush-right-screen-small { + margin-right: 0; + padding-right: 0; + } } } } @@ -657,6 +713,69 @@ .property-variant(pod, margin-right, wider, screen-medium); .property-variant(pod, padding-right, wider, screen-medium); } + + &-flush, + &-flush-screen-small, + &-flush-screen-medium { + margin-bottom: 0; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + margin-top: 0; + margin-top: 0; + padding-bottom: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + padding-top: 0; + } + + &-flush-vertical, + &-flush-vertical-screen-small, + &-flush-vertical-screen-medium { + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + padding-top: 0; + } + + &-flush-top, + &-flush-top-screen-small, + &-flush-top-screen-medium { + margin-top: 0; + padding-top: 0; + } + + &-flush-bottom, + &-flush-bottom-screen-small, + &-flush-bottom-screen-medium { + margin-bottom: 0; + padding-bottom: 0; + } + + &-flush-horizontal, + &-flush-horizontal-screen-small, + &-flush-horizontal-screen-medium { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } + + &-flush-left, + &-flush-left-screen-small, + &-flush-left-screen-medium { + margin-left: 0; + padding-left: 0; + } + + &-flush-right, + &-flush-right-screen-small, + &-flush-right-screen-medium { + margin-right: 0; + padding-right: 0; + } } } } @@ -920,6 +1039,76 @@ .property-variant(pod, margin-right, wider, screen-large); .property-variant(pod, padding-right, wider, screen-large); } + + &-flush, + &-flush-screen-small, + &-flush-screen-medium, + &-flush-screen-large { + margin-bottom: 0; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + margin-top: 0; + margin-top: 0; + padding-bottom: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + padding-top: 0; + } + + &-flush-vertical, + &-flush-vertical-screen-small, + &-flush-vertical-screen-medium, + &-flush-vertical-screen-large { + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + padding-top: 0; + } + + &-flush-top, + &-flush-top-screen-small, + &-flush-top-screen-medium, + &-flush-top-screen-large { + margin-top: 0; + padding-top: 0; + } + + &-flush-bottom, + &-flush-bottom-screen-small, + &-flush-bottom-screen-medium, + &-flush-bottom-screen-large { + margin-bottom: 0; + padding-bottom: 0; + } + + &-flush-horizontal, + &-flush-horizontal-screen-small, + &-flush-horizontal-screen-medium, + &-flush-horizontal-screen-large { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } + + &-flush-left, + &-flush-left-screen-small, + &-flush-left-screen-medium, + &-flush-left-screen-large { + margin-left: 0; + padding-left: 0; + } + + &-flush-right, + &-flush-right-screen-small, + &-flush-right-screen-medium, + &-flush-right-screen-large { + margin-right: 0; + padding-right: 0; + } } } } @@ -1211,6 +1400,83 @@ .property-variant(pod, margin-right, wider, screen-jumbo); .property-variant(pod, padding-right, wider, screen-jumbo); } + + &-flush, + &-flush-screen-small, + &-flush-screen-medium, + &-flush-screen-large, + &-flush-screen-jumbo { + margin-bottom: 0; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; + margin-top: 0; + margin-top: 0; + padding-bottom: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; + padding-top: 0; + padding-top: 0; + } + + &-flush-vertical, + &-flush-vertical-screen-small, + &-flush-vertical-screen-medium, + &-flush-vertical-screen-large, + &-flush-vertical-screen-jumbo { + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + padding-top: 0; + } + + &-flush-top, + &-flush-top-screen-small, + &-flush-top-screen-medium, + &-flush-top-screen-large, + &-flush-top-screen-jumbo { + margin-top: 0; + padding-top: 0; + } + + &-flush-bottom, + &-flush-bottom-screen-small, + &-flush-bottom-screen-medium, + &-flush-bottom-screen-large, + &-flush-bottom-screen-jumbo { + margin-bottom: 0; + padding-bottom: 0; + } + + &-flush-horizontal, + &-flush-horizontal-screen-small, + &-flush-horizontal-screen-medium, + &-flush-horizontal-screen-large, + &-flush-horizontal-screen-jumbo { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } + + &-flush-left, + &-flush-left-screen-small, + &-flush-left-screen-medium, + &-flush-left-screen-large, + &-flush-left-screen-jumbo { + margin-left: 0; + padding-left: 0; + } + + &-flush-right, + &-flush-right-screen-small, + &-flush-right-screen-medium, + &-flush-right-screen-large, + &-flush-right-screen-jumbo { + margin-right: 0; + padding-right: 0; + } } } }