X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/d20c74babf53f09597a1fcb23e7b9d3bc98666f8..refs/pull/3918/head:/resources/sass/_layout.scss diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index 14a37dd4a..4c7de600b 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -26,6 +26,9 @@ display: grid; grid-column-gap: $-l; grid-row-gap: $-l; + > * { + min-width: 0; + } &.half { grid-template-columns: 1fr 1fr; } @@ -141,6 +144,10 @@ body.flexbox { flex-direction: column; } +.flex-container-row.inline, .flex-container-column.inline { + display: inline-flex !important; +} + .flex-container-column.wrap, .flex-container-row.wrap { flex-wrap: wrap; } @@ -153,10 +160,27 @@ body.flexbox { flex-basis: auto; flex-grow: 0; } + &.fill-area { + flex-grow: 1; + flex-shrink: 0; + min-width: fit-content; + } +} + +.flex-2 { + min-height: 0; + flex: 2; + max-width: 100%; +} + +.flex-3 { + min-height: 0; + flex: 3; + max-width: 100%; } -.gap-m { - gap: $-m; +.flex-none { + flex: none; } .justify-flex-start { @@ -174,7 +198,40 @@ body.flexbox { .items-center { align-items: center; } +.items-stretch { + align-items: stretch; +} +/** + * Min width utilities + */ +.min-width-xxxxs { + min-width: 60px; +} +.min-width-xxxs { + min-width: 80px; +} +.min-width-xxs { + min-width: 100px; +} +.min-width-xs { + min-width: 120px; +} +.min-width-s { + min-width: 160px; +} +.min-width-m { + min-width: 200px; +} +.min-width-l { + min-width: 240px; +} +.min-width-xl { + min-width: 280px; +} +.min-width-xxl { + min-width: 320px; +} /** * Display and float utilities