Merge pull request #807 from sparkdesignsystem/staging

staging into master, ready  publish

Author: RCopeland

packages/spark-core/objects/_stack.scss

@@ -28,6 +28,12 @@
 // Aligns items to end of container when in flex-direction row
 // at specific breakpoints
 ///
+.sprk-o-Stack--end-row\@xxs {
+  @media all and (min-width: $split-breakpoint-xxs) {
+    justify-content: flex-end;
+  }
+}
+
 .sprk-o-Stack--end-row\@xs {
   @media all and (min-width: $split-breakpoint-xs) {
     justify-content: flex-end;
@@ -67,6 +73,12 @@
 // Aligns items to end of container when in flex-direction column
 // at specific breakpoints
 ///
+.sprk-o-Stack--end-column\@xxs {
+  @media all and (min-width: $split-breakpoint-xxs) {
+    align-items: flex-end;
+  }
+}
+
 .sprk-o-Stack--end-column\@xs {
   @media all and (min-width: $split-breakpoint-xs) {
     align-items: flex-end;
@@ -138,15 +150,167 @@
   margin-bottom: 0;
 }
 
-[class*='sprk-o-Stack__item--sixth\@'],
-[class*='sprk-o-Stack__item--fifth\@'],
-[class*='sprk-o-Stack__item--fourth\@'],
-[class*='sprk-o-Stack__item--third\@'],
-[class*='sprk-o-Stack__item--half\@'],
-[class*='sprk-o-Stack__item--three-fifths\@'],
-[class*='sprk-o-Stack__item--three-fourths\@'],
-[class*='sprk-o-Stack__item--two-fifths\@'] {
-  margin: 0 !important;
+[class*='sprk-o-Stack__item--sixth\@xxs'],
+[class*='sprk-o-Stack__item--fifth\@xxs'],
+[class*='sprk-o-Stack__item--fourth\@xxs'],
+[class*='sprk-o-Stack__item--third\@xxs'],
+[class*='sprk-o-Stack__item--half\@xxs'],
+[class*='sprk-o-Stack__item--three-fifths\@xxs'],
+[class*='sprk-o-Stack__item--three-fourths\@xxs'],
+[class*='sprk-o-Stack__item--two-fifths\@xxs'] {
+  @media all and (min-width: $split-breakpoint-xxs) {
+    margin: 0 !important;
+  }
+}
+
+[class*='sprk-o-Stack__item--sixth\@xs'],
+[class*='sprk-o-Stack__item--fifth\@xs'],
+[class*='sprk-o-Stack__item--fourth\@xs'],
+[class*='sprk-o-Stack__item--third\@xs'],
+[class*='sprk-o-Stack__item--half\@xs'],
+[class*='sprk-o-Stack__item--three-fifths\@xs'],
+[class*='sprk-o-Stack__item--three-fourths\@xs'],
+[class*='sprk-o-Stack__item--two-fifths\@xs'] {
+  @media all and (min-width: $split-breakpoint-xs) {
+    margin: 0 !important;
+  }
+}
+
+[class*='sprk-o-Stack__item--sixth\@s'],
+[class*='sprk-o-Stack__item--fifth\@s'],
+[class*='sprk-o-Stack__item--fourth\@s'],
+[class*='sprk-o-Stack__item--third\@s'],
+[class*='sprk-o-Stack__item--half\@s'],
+[class*='sprk-o-Stack__item--three-fifths\@s'],
+[class*='sprk-o-Stack__item--three-fourths\@s'],
+[class*='sprk-o-Stack__item--two-fifths\@s'] {
+  @media all and (min-width: $split-breakpoint-s) {
+    margin: 0 !important;
+  }
+}
+
+[class*='sprk-o-Stack__item--sixth\@m'],
+[class*='sprk-o-Stack__item--fifth\@m'],
+[class*='sprk-o-Stack__item--fourth\@m'],
+[class*='sprk-o-Stack__item--third\@m'],
+[class*='sprk-o-Stack__item--half\@m'],
+[class*='sprk-o-Stack__item--three-fifths\@m'],
+[class*='sprk-o-Stack__item--three-fourths\@m'],
+[class*='sprk-o-Stack__item--two-fifths\@m'] {
+  @media all and (min-width: $split-breakpoint-m) {
+    margin: 0 !important;
+  }
+}
+
+[class*='sprk-o-Stack__item--sixth\@l'],
+[class*='sprk-o-Stack__item--fifth\@l'],
+[class*='sprk-o-Stack__item--fourth\@l'],
+[class*='sprk-o-Stack__item--third\@l'],
+[class*='sprk-o-Stack__item--half\@l'],
+[class*='sprk-o-Stack__item--three-fifths\@l'],
+[class*='sprk-o-Stack__item--three-fourths\@l'],
+[class*='sprk-o-Stack__item--two-fifths\@l'] {
+  @media all and (min-width: $split-breakpoint-l) {
+    margin: 0 !important;
+  }
+}
+
+[class*='sprk-o-Stack__item--sixth\@xl'],
+[class*='sprk-o-Stack__item--fifth\@xl'],
+[class*='sprk-o-Stack__item--fourth\@xl'],
+[class*='sprk-o-Stack__item--third\@xl'],
+[class*='sprk-o-Stack__item--half\@xl'],
+[class*='sprk-o-Stack__item--three-fifths\@xl'],
+[class*='sprk-o-Stack__item--three-fourths\@xl'],
+[class*='sprk-o-Stack__item--two-fifths\@xl'] {
+  @media all and (min-width: $split-breakpoint-xl) {
+    margin: 0 !important;
+  }
+}
+
+//
+// Split at extra extra small breakpoint
+///
+.sprk-o-Stack--split\@xxs {
+  @media all and (min-width: $split-breakpoint-xxs) {
+    // At extra small breakpoint we switch from column to row
+    flex-direction: row;
+
+    // Remove bottom margin in new row formation
+    > .sprk-o-Stack__item {
+      margin-bottom: 0;
+    }
+
+    // Add spacing between items based on spacing size class
+    &.sprk-o-Stack--tiny > .sprk-o-Stack__item {
+      margin-right: $stack-spacing-tiny;
+    }
+
+    &.sprk-o-Stack--small > .sprk-o-Stack__item {
+      margin-right: $stack-spacing-small;
+    }
+
+    &.sprk-o-Stack--medium > .sprk-o-Stack__item {
+      margin-right: $stack-spacing-medium;
+    }
+
+    &.sprk-o-Stack--large > .sprk-o-Stack__item {
+      margin-right: $stack-spacing-large;
+    }
+
+    &.sprk-o-Stack--huge > .sprk-o-Stack__item {
+      margin-right: $stack-spacing-huge;
+    }
+
+    > .sprk-o-Stack__item--sixth\@xxs {
+      flex: 0 0 16.666666667%;
+      max-width: 16.666666667%;
+    }
+
+    > .sprk-o-Stack__item--fifth\@xxs {
+      flex: 0 0 20%;
+      max-width: 20%;
+    }
+
+    > .sprk-o-Stack__item--fourth\@xxs {
+      flex: 0 0 25%;
+      max-width: 25%;
+    }
+
+    > .sprk-o-Stack__item--third\@xxs {
+      flex: 0 0 33.333333333%;
+      max-width: 33.333333333%;
+    }
+
+    > .sprk-o-Stack__item--half\@xxs {
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+
+    > .sprk-o-Stack__item--three-fourths\@xxs {
+      flex: 0 0 75%;
+      max-width: 75%;
+    }
+
+    > .sprk-o-Stack__item--three-fifths\@xxs {
+      flex: 0 0 60%;
+      max-width: 60%;
+    }
+
+    > .sprk-o-Stack__item--two-fifths\@xxs {
+      flex: 0 0 40%;
+      max-width: 40%;
+    }
+
+    // We want the last item to have zero margin on the right
+    &.sprk-o-Stack--tiny > .sprk-o-Stack__item:last-child,
+    &.sprk-o-Stack--small > .sprk-o-Stack__item:last-child,
+    &.sprk-o-Stack--medium > .sprk-o-Stack__item:last-child,
+    &.sprk-o-Stack--large > .sprk-o-Stack__item:last-child,
+    &.sprk-o-Stack--huge > .sprk-o-Stack__item:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 //
@@ -577,6 +741,12 @@
 //
 // Stack items take up leftover space at specific breakpoints
 ///
+.sprk-o-Stack__item--flex\@xxs {
+  @media all and (min-width: $split-breakpoint-xxs) {
+    flex: 1;
+  }
+}
+
 .sprk-o-Stack__item--flex\@xs {
   @media all and (min-width: $split-breakpoint-xs) {
     flex: 1;
@@ -612,6 +782,12 @@
   align-self: flex-end;
 }
 
+.sprk-o-Stack__item--end-column\@xxs {
+  @media all and (min-width: $split-breakpoint-xs) {
+    align-self: flex-end;
+  }
+}
+
 .sprk-o-Stack__item--end-column\@xs {
   @media all and (min-width: $split-breakpoint-xs) {
     align-self: flex-end;
@@ -647,6 +823,12 @@
   align-self: flex-start;
 }
 
+.sprk-o-Stack__item--start-column\@xxs {
+  @media all and (min-width: $split-breakpoint-xxs) {
+    align-self: flex-start;
+  }
+}
+
 .sprk-o-Stack__item--start-column\@xs {
   @media all and (min-width: $split-breakpoint-xs) {
     align-self: flex-start;
@@ -682,6 +864,12 @@
   align-self: center;
 }
 
+.sprk-o-Stack__item--center-column\@xxs {
+  @media all and (min-width: $split-breakpoint-xxs) {
+    align-self: center;
+  }
+}
+
 .sprk-o-Stack__item--center-column\@xs {
   @media all and (min-width: $split-breakpoint-xs) {
     align-self: center;

packages/spark-core/package-lock.json

@@ -428,6 +428,7 @@ $stack-spacing-small: $space-s !default;
 $stack-spacing-medium: $space-m !default;
 $stack-spacing-large: $space-l !default;
 $stack-spacing-huge: $space-xl !default;
+$split-breakpoint-xxs: 20rem !default;
 $split-breakpoint-xs: 30rem !default;
 $split-breakpoint-s: 42.5rem !default;
 $split-breakpoint-m: 55rem !default;