/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- layout/grid.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fixed Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { margin-left: @grid-container-fluid-gutter-width; margin-right: @grid-container-fluid-gutter-width; &:extend(.clearfix all); } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { width: auto; margin-left: @grid-container-fluid-gutter-width; margin-right: @grid-container-fluid-gutter-width; &.container-fluid-narrow { margin-left: @grid-container-fluid-narrow-gutter-width; margin-right: @grid-container-fluid-narrow-gutter-width; } &.container-fluid-wide { margin-left: @grid-container-fluid-wide-gutter-width; margin-right: @grid-container-fluid-wide-gutter-width; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { .make-row(@grid-gutter-width); &.row-flex { display: flex; flex-direction: row; &.row-flex-fit-height { align-items: stretch; } &.row-flex-align-vertical-center { align-items: center; } } &.row-fill { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Columns -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .make-grid-columns(@grid-columns-count, @grid-gutter-width); /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .make-grid(); & when (@screen-mini-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Mini (@screen-mini) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-mini) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: auto; margin-left: @grid-container-fluid-gutter-width-screen-mini; margin-right: @grid-container-fluid-gutter-width-screen-mini; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: @grid-container-fluid-gutter-width-screen-mini; margin-right: @grid-container-fluid-gutter-width-screen-mini; &.container-fluid-narrow { margin-left: @grid-container-fluid-narrow-gutter-width-screen-mini; margin-right: @grid-container-fluid-narrow-gutter-width-screen-mini; } &.container-fluid-wide { margin-left: @grid-container-fluid-wide-gutter-width-screen-mini; margin-right: @grid-container-fluid-wide-gutter-width-screen-mini; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { .make-row(@grid-gutter-width-screen-mini); &.row-flex-mini { display: flex; flex-direction: row; &.row-flex-fit-height { align-items: stretch; } &.row-flex-align-vertical-center { align-items: center; } } &.row-fill-mini { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .make-grid(mini); } } & when (@screen-small-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Small (@screen-small) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-small) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: @grid-container-width-screen-small; margin-left: auto; margin-right: auto; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: @grid-container-fluid-gutter-width-screen-small; margin-right: @grid-container-fluid-gutter-width-screen-small; &.container-fluid-narrow { margin-left: @grid-container-fluid-narrow-gutter-width-screen-small; margin-right: @grid-container-fluid-narrow-gutter-width-screen-small; } &.container-fluid-wide { margin-left: @grid-container-fluid-wide-gutter-width-screen-small; margin-right: @grid-container-fluid-wide-gutter-width-screen-small; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { .make-row(@grid-gutter-width-screen-small); &.row-flex-small { display: flex; flex-direction: row; &.row-flex-fit-height { align-items: stretch; } &.row-flex-align-vertical-center { align-items: center; } } &.row-fill-small { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .make-grid(small); } } & when (@screen-medium-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Medium (@screen-medium) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-medium) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: @grid-container-width-screen-medium; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: @grid-container-fluid-gutter-width-screen-medium; margin-right: @grid-container-fluid-gutter-width-screen-medium; &.container-fluid-narrow { margin-left: @grid-container-fluid-narrow-gutter-width-screen-medium; margin-right: @grid-container-fluid-narrow-gutter-width-screen-medium; } &.container-fluid-wide { margin-left: @grid-container-fluid-wide-gutter-width-screen-medium; margin-right: @grid-container-fluid-wide-gutter-width-screen-medium; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { .make-row(@grid-gutter-width-screen-medium); &.row-flex-medium { display: flex; flex-direction: row; &.row-flex-fit-height { align-items: stretch; } &.row-flex-align-vertical-center { align-items: center; } } &.row-fill-medium { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .make-grid(medium); } } & when (@screen-large-enabled) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Screen Size: Large (@screen-large) and above -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ @media (min-width: @screen-large) { /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container { width: @grid-container-width-screen-large; } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Fluid Container -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .container.container-fluid { margin-left: @grid-container-fluid-gutter-width-screen-large; margin-right: @grid-container-fluid-gutter-width-screen-large; &.container-fluid-narrow { margin-left: @grid-container-fluid-narrow-gutter-width-screen-large; margin-right: @grid-container-fluid-narrow-gutter-width-screen-large; } &.container-fluid-wide { margin-left: @grid-container-fluid-wide-gutter-width-screen-large; margin-right: @grid-container-fluid-wide-gutter-width-screen-large; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Row -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .row { .make-row(@grid-gutter-width-screen-large); &.row-flex-large { display: flex; flex-direction: row; &.row-flex-fit-height { align-items: stretch; } &.row-flex-align-vertical-center { align-items: center; } } &.row-fill-large { height: 100%; box-sizing: border-box; } } /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Grid -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ .make-grid(large); } }