Add breakpoints and spacing to flag

NebulaUI · Jul 19, 2017 · 31faef8 · 31faef8
1 parent ac3846a
commit 31faef8
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 9 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -527,7 +527,7 @@ <h2>Flag</h2>
 
  <h3>Component left</h3>
  <div class="c-demo-card u-push-bottom-md">
- <div class="o-flag">
+ <div class="o-flag o-flag--gutter-md">
  <div class="o-flag__component">
  <img src="assets/nebula.jpg" class="demo-img" alt="">
  </div>
@@ -539,7 +539,7 @@ <h3>Component left</h3>
 
  <h3>Component right</h3>
  <div class="c-demo-card u-push-bottom-md">
- <div class="o-flag o-flag--reverse">
+ <div class="o-flag o-flag--gutter-md o-flag--reverse">
  <div class="o-flag__body">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
  </div>
@@ -549,9 +549,21 @@ <h3>Component right</h3>
  </div>
  </div>
 
+ <h3>With breakpoint</h3>
+ <div class="c-demo-card u-push-bottom-md">
+ <div class="o-flag@md o-flag--gutter-md">
+ <div class="o-flag__component">
+ <img src="assets/nebula.jpg" class="demo-img" alt="">
+ </div>
+ <div class="o-flag__body">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
+ </div>
+ </div>
+ </div>
+
  <h3>Text component</h3>
  <div class="c-demo-card u-push-bottom-md">
- <div class="o-flag">
+ <div class="o-flag o-flag--gutter-md">
  <div class="o-flag__component o-flag__component--nowrap">
  <h2 class="u-flush-bottom">Nebula CSS</h2>
  </div>
@@ -563,7 +575,7 @@ <h2 class="u-flush-bottom">Nebula CSS</h2>
 
  <h3>Top aligned</h3>
  <div class="c-demo-card u-push-bottom-md">
- <div class="o-flag o-flag--top">
+ <div class="o-flag o-flag--gutter-md o-flag--top">
  <div class="o-flag__component">
  <img src="assets/nebula.jpg" class="demo-img" alt="">
  </div>
@@ -575,7 +587,7 @@ <h3>Top aligned</h3>
 
  <h3>Bottom aligned</h3>
  <div class="c-demo-card u-push-bottom-md">
- <div class="o-flag o-flag--reverse o-flag--bottom">
+ <div class="o-flag o-flag--gutter-md o-flag--reverse o-flag--bottom">
  <div class="o-flag__body">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nihil esse, corporis accusantium distinctio vero in. Provident, esse obcaecati beatae.
  </div>
@@ -587,9 +599,9 @@ <h3>Bottom aligned</h3>
 
  <h3>Nested</h3>
  <div class="c-demo-card u-push-bottom-md">
- <div class="o-flag o-flag--reverse">
+ <div class="o-flag o-flag--gutter-md o-flag--reverse">
  <div class="o-flag__body">
- <div class="o-flag">
+ <div class="o-flag o-flag--gutter-md">
  <div class="o-flag__component">
  <img src="assets/nebula.jpg" class="demo-img" alt="">
  </div>

diff --git a/nebula-css/_settings.scss b/nebula-css/_settings.scss
@@ -23,6 +23,10 @@ $nb-section-spacing: (
  md: ($nb-spacing-unit * 2)
 ) !default;
 
+$nb-flag-gutter-sizes: (
+ md: $nb-spacing-unit
+) !default;
+
 $nb-use-grid-zero-font-size: true !default;
 $nb-grid-gutter-sizes: (
  sm: ($nb-spacing-unit / 2),

diff --git a/nebula-css/objects/_flag.scss b/nebula-css/objects/_flag.scss
@@ -1,11 +1,16 @@
-.#{$nb-namespace}o-flag {
+.#{$nb-namespace}o-flag:not([class^='#{$nb-namespace}o-flag@']) {
  display: table;
  width: 100%;
 }
 
+:not([class^='#{$nb-namespace}o-flag@']) > .#{$nb-namespace}o-flag__component,
+:not([class^='#{$nb-namespace}o-flag@']) > .#{$nb-namespace}o-flag__body {
+ display: table-cell;
+ vertical-align: middle;
+}
+
 .#{$nb-namespace}o-flag__component,
 .#{$nb-namespace}o-flag__body {
- display: table-cell;
  vertical-align: middle;
 }
 
@@ -31,3 +36,49 @@
 .#{$nb-namespace}o-flag--bottom > .#{$nb-namespace}o-flag__body {
  vertical-align: bottom;
 }
+
+@each $key, $value in $nb-flag-gutter-sizes {
+ :not([class^='#{$nb-namespace}o-flag@']).#{$nb-namespace}o-flag--gutter-#{$key}.#{$nb-namespace}o-flag--reverse > .#{$nb-namespace}o-flag__component {
+ padding-left: $value;
+ }
+
+ :not([class^='#{$nb-namespace}o-flag@']).#{$nb-namespace}o-flag--gutter-#{$key}:not(.#{$nb-namespace}o-flag--reverse) > .#{$nb-namespace}o-flag__component {
+ padding-right: $value;
+ }
+
+ [class^='#{$nb-namespace}o-flag@'].#{$nb-namespace}o-flag--gutter-#{$key} {
+ margin-bottom: -$value;
+ }
+
+ [class^='#{$nb-namespace}o-flag@'].#{$nb-namespace}o-flag--gutter-#{$key} > .#{$nb-namespace}o-flag__body,
+ [class^='#{$nb-namespace}o-flag@'].#{$nb-namespace}o-flag--gutter-#{$key} > .#{$nb-namespace}o-flag__component {
+ padding-bottom: $value;
+ }
+}
+
+@each $bp-key, $bp-value in $nb-breakpoints {
+ @include nb-respond-to(#{$bp-key}) {
+ .#{$nb-namespace}o-flag\@#{$bp-key} {
+ display: table;
+ }
+
+ .#{$nb-namespace}o-flag\@#{$bp-key} > .#{$nb-namespace}o-flag__body,
+ .#{$nb-namespace}o-flag\@#{$bp-key} > .#{$nb-namespace}o-flag__component {
+ display: table-cell;
+ }
+
+
+ @each $key, $value in $nb-flag-gutter-sizes {
+ // deep nesting required
+ /* stylelint-disable max-nesting-depth */
+ .#{$nb-namespace}o-flag\@#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}.#{$nb-namespace}o-flag--reverse > .#{$nb-namespace}o-flag__component {
+ padding-left: $nb-spacing-unit;
+ }
+
+ .#{$nb-namespace}o-flag\@#{$bp-key}.#{$nb-namespace}o-flag--gutter-#{$key}:not(.#{$nb-namespace}o-flag--reverse) > .#{$nb-namespace}o-flag__component {
+ padding-right: $nb-spacing-unit;
+ }
+ /* stylelint-enable */
+ }
+ }
+}