fix: extract styles for generic separator

telerik · Jun 18, 2021 · 279e5d0 · 279e5d0
1 parent 6634eec
commit 279e5d0
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git a/packages/default/scss/core/_layout.scss b/packages/default/scss/core/_layout.scss
@@ -15,7 +15,7 @@
 
     .k-flex,
     .k-spacer {
-        flex: 1 0 0;
+        flex: 1 0 0%;
     }
 
 
@@ -34,4 +34,35 @@
         display: grid;
     }
 
+
+    // Separator
+    .k-separator {
+        width: auto;
+        height: 0;
+        border-width: 1px 0 0;
+        border-style: solid;
+        border-color: inherit;
+        display: block;
+        flex-grow: 0 !important; // sass-lint:disable-line no-important
+        flex-shrink: 0 !important; // sass-lint:disable-line no-important
+        align-self: stretch;
+    }
+    .k-separator-horizontal,
+    .k-vstack > .k-separator {
+        width: auto;
+        height: 0;
+        border-width: 1px 0 0;
+    }
+    .k-separator-vertical,
+    .k-hstack > .k-separator {
+        width: 0;
+        height: auto;
+        border-width: 0 0 0 1px;
+    }
+
+    hr.k-separator {
+        margin: 0;
+        padding: 0;
+    }
+
 }
diff --git a/packages/nouvelle/scss/core/_layout.scss b/packages/nouvelle/scss/core/_layout.scss
@@ -3,21 +3,17 @@
 .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;
+    flex: 1 0 0%;
 }
 
 
@@ -35,3 +31,34 @@
 .k-grid-layout {
     display: grid;
 }
+
+
+// Separator
+.k-separator {
+    width: auto;
+    height: 0;
+    border-width: 1px 0 0;
+    border-style: solid;
+    border-color: inherit;
+    display: block;
+    flex-grow: 0 !important; // sass-lint:disable-line no-important
+    flex-shrink: 0 !important; // sass-lint:disable-line no-important
+    align-self: stretch;
+}
+.k-separator-horizontal,
+.k-vstack > .k-separator {
+    width: auto;
+    height: 0;
+    border-width: 1px 0 0;
+}
+.k-separator-vertical,
+.k-hstack > .k-separator {
+    width: 0;
+    height: auto;
+    border-width: 0 0 0 1px;
+}
+
+hr.k-separator {
+    margin: 0;
+    padding: 0;
+}