update demo

NebulaUI · Jun 14, 2017 · 908fe3d · 908fe3d
1 parent bdebd26
commit 908fe3d
Show file tree

Hide file tree

Showing 4 changed files with 2,408 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -452,6 +452,50 @@ <h3>Push / Pull</h3>
  </div>
  </div>
 
+ <div class="o-section-md">
+ <h3>Nested grid with equal heights, horizontal reversal</h3>
+ <div class="o-grid o-grid--gutter-md o-grid--equal-height o-grid--matrix">
+ <div class="o-grid__item u-3/4@xs">
+ <div class="o-grid o-grid--gutter-md o-grid--matrix">
+ <div class="o-grid__item u-1/2@xs">
+ <div class="c-demo-card">
+ 1
+ </div>
+ </div>
+ <div class="o-grid__item u-1/2@xs">
+ <div class="c-demo-card">
+ 2
+ </div>
+ </div>
+ <div class="o-grid__item u-1/1@xs">
+ <div class="o-grid o-grid--gutter-md o-grid--equal-height o-grid--matrix o-grid--reverse">
+ <div class="o-grid__item u-1/3@xs">
+ <div class="c-demo-card">
+ 3
+ </div>
+ </div>
+ <div class="o-grid__item u-2/3@xs">
+ <div class="c-demo-card">
+ 4<br>Hello Nebula!<br>I'm<br>Reversed with 3
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="o-grid__item u-1/4@xs">
+ <div class="c-demo-card">
+ 5
+ </div>
+ </div>
+ <div class="o-grid__item">
+ <div class="c-demo-card">
+ 6
+ </div>
+ </div>
+ </div>
+ </div>
+
  </div>
 
  <section class="o-section-md" id="section">
@@ -559,6 +603,31 @@ <h3>Nested</h3>
  </div>
  </div>
  </div>
+
+ <h3>The flag can even contain a nested grid (or vice versa ) - 🎉Infinite Composition!🎉</h3>
+ <div class="o-flag o-flag--top">
+ <div class="o-flag__body u-soft-right-md">
+ Flag Body
+ <div class="o-grid o-grid--matrix o-grid--gutter-md">
+ <div class="o-grid__item u-3/4">
+ <div class="c-demo-card">
+ 1
+ </div>
+ </div>
+ <div class="o-grid__item u-1/4">
+ <div class="c-demo-card">
+ 2
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="o-flag__component">
+ Flag Component
+ <div class="c-demo-card" style="width: 200px">
+ 3
+ </div>
+ </div>
+ </div>
  </section>
 
  <section class="o-section-md" id="lists">

diff --git a/nebula-css/_settings.scss b/nebula-css/_settings.scss
@@ -4,6 +4,7 @@ $nb-spacing-unit: 1rem !default;
 $nb-base-font-size: 1rem !default;
 
 $nb-breakpoints: (
+ xs: 480px,
  sm: 720px,
  md: 960px,
  lg: 1200px

diff --git a/nebula-css/tools/_gutters.scss b/nebula-css/tools/_gutters.scss
@@ -20,6 +20,10 @@
  padding-#{$side}: $size-value;
  }
 
+ .#{$nb-namespace}o-grid__item > #{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key} {
+ width: calc(100% + #{$size-value});
+ }
+
  @each $bp-key, $bp-value in $nb-breakpoints {
  @include nb-respond-to($bp-key) {
  #{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}\@#{$bp-key} {
@@ -29,6 +33,10 @@
  #{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}\@#{$bp-key} > .#{$nb-namespace}o-grid__item {
  padding-#{$side}: $size-value;
  }
+
+ .#{$nb-namespace}o-grid__item > #{$matrix-class}.#{$nb-namespace}o-grid--gutter#{$size-key}\@#{$bp-key} {
+ width: calc(100% + #{$size-value});
+ }
  }
  }
 }