diff --git a/packages/default/scss/core/_layout.scss b/packages/default/scss/core/_layout.scss index 14e0decf5e8..d54476779c0 100644 --- 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 index 585a01b02ae..57d5007d216 100644 --- 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; +}