feat(core): add styles for stack and grid layout

packages/bootstrap/scss/core/_index.scss

@@ -5,4 +5,5 @@
 @import "_asp-fallback.scss";
 @import "_normalize.scss";
 @import "_extra.scss";
+@import "_layout.scss";
 @import "_color-system.scss";

packages/bootstrap/scss/core/_layout.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/core/_layout.scss";

packages/classic/scss/core/_index.scss

@@ -5,4 +5,5 @@
 @import "_asp-fallback.scss";
 @import "_normalize.scss";
 @import "_extra.scss";
+@import "_layout.scss";
 @import "_color-system.scss";

packages/classic/scss/core/_layout.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/core/_layout.scss";

packages/default/scss/core/_index.scss

@@ -5,4 +5,5 @@
 @import "_asp-fallback.scss";
 @import "_normalize.scss";
 @import "_extra.scss";
+@import "_layout.scss";
 @import "_color-system.scss";

packages/default/scss/core/_layout.scss

@@ -0,0 +1,37 @@
+@include exports( "core/layout" ) {
+
+    // Basic layout
+    .k-hbox,
+    .k-hstack {
+        display: flex;
+        flex-flow: row nowrap;
+    }
+
+    .k-vbox,
+    .k-vstack {
+        display: flex;
+        flex-flow: column nowrap;
+    }
+
+    .k-flex,
+    .k-spacer {
+        flex: 1 0 0;
+    }
+
+
+    // Stack layout
+    .k-stack-layout {}
+
+
+    // Flex layout
+    .k-flex-layout {
+        display: flex;
+    }
+
+
+    // Grid layout
+    .k-grid-layout {
+        display: grid;
+    }
+
+}

packages/default/scss/utils/_flex.scss

@@ -121,7 +121,7 @@
     .k-align-self-baseline      { align-self: baseline; }
 
 
-    // Flex justify
+    // Justify content
     .k-justify-content-start    { justify-content: flex-start; }
     .k-justify-content-end      { justify-content: flex-end; }
     .k-justify-content-center   { justify-content: center; }
@@ -130,21 +130,10 @@
     .k-justify-content-evenly   { justify-content: space-evenly; }
 
 
-    // Columns
-    .k-column {
-        flex-grow: 1;
-        flex-basis: 0;
-    }
-
-
-    // Aliases
-    .k-flex                     { @extend .k-flex-1; }
-    .k-no-flex                  { @extend .k-flex-none; }
-    .k-no-flex-grow             { @extend .k-flex-grow-0; }
-    .k-no-flex-shrink           { @extend .k-flex-shrink-0; }
-    .k-hbox                     { @extend .k-d-flex-row; }
-    .k-vbox                     { @extend .k-d-flex-col; }
-    .k-columnset                { @extend .k-d-flex-row; }
-    .k-rowset                   { @extend .k-d-flex-col; }
+    // Justify items
+    .k-justify-items-start      { justify-items: flex-start; }
+    .k-justify-items-end        { justify-items: flex-end; }
+    .k-justify-items-center     { justify-items: center; }
+    .k-justify-items-stretch    { justify-items: stretch; }
 
 }

packages/material/scss/core/_index.scss

@@ -5,4 +5,5 @@
 @import "_asp-fallback.scss";
 @import "_normalize.scss";
 @import "_extra.scss";
+@import "_layout.scss";
 @import "_color-system.scss";

packages/material/scss/core/_layout.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/core/_layout.scss";

packages/nouvelle/scss/core/_layout.scss

@@ -0,0 +1,37 @@
+// Basic layout
+.k-hbox,
+.k-hstack {
+    display: flex;
+    flex-flow: row nowrap;
+
+    > * { flex-shrink: 0; }
+}
+
+.k-vbox,
+.k-vstack {
+    display: flex;
+    flex-flow: column nowrap;
+
+    > * { flex-shrink: 0; }
+}
+
+.k-flex,
+.k-spacer {
+    flex: 1 0 auto;
+}
+
+
+// Stack layout
+.k-stack-layout {}
+
+
+// Flex layout
+.k-flex-layout {
+    display: flex;
+}
+
+
+// Grid layout
+.k-grid-layout {
+    display: grid;
+}

packages/nouvelle/scss/core/index.scss

@@ -1,4 +1,5 @@
 @import "_asp-fallback.scss";
 @import "_normalize.scss";
 @import "_extra.scss";
+@import "_layout.scss";
 @import "_color-system.scss";