ng2-qgrid
Version:
Angular Grid
1 lines • 228 kB
JSON
{"__symbolic":"module","version":4,"exports":[{"export":[{"name":"GridService","as":"GridService"}],"from":"ng2-qgrid/core/services/grid"},{"export":[{"name":"Model","as":"GridModel"},{"name":"ModelEventArg","as":"GridEventArg"},{"name":"ModelEvent","as":"GridEvent"}],"from":"ng2-qgrid/core/infrastructure/model"},{"export":[{"name":"Table","as":"DomTable"}],"from":"ng2-qgrid/core/dom/table"},{"export":[{"name":"Action","as":"Action"}],"from":"ng2-qgrid/core/action/action"},{"export":[{"name":"Command","as":"Command"}],"from":"ng2-qgrid/core/command/command"},{"export":[{"name":"Pipe","as":"Pipe"}],"from":"ng2-qgrid/core/pipe/pipe"},{"export":[{"name":"PipeUnit","as":"PipeUnit"}],"from":"ng2-qgrid/core/pipe/pipe.unit"},{"export":[{"name":"Node","as":"Node"}],"from":"ng2-qgrid/core/node/node"},{"export":[{"name":"RowDetailsStatus","as":"RowDetailsStatus"}],"from":"ng2-qgrid/core/row-details/row.details.status"},{"export":[{"name":"FetchContext","as":"FetchContext"}],"from":"ng2-qgrid/core/fetch/fetch.context"},{"export":[{"name":"EditorOptions","as":"EditorOptions"}],"from":"ng2-qgrid/core/column-type/editor.options"},{"export":[{"name":"Shortcut","as":"Shortcut"}],"from":"ng2-qgrid/core/shortcut/shortcut"},{"export":[{"name":"ShortcutDispatcher","as":"ShortcutDispatcher"}],"from":"ng2-qgrid/core/shortcut/shortcut.dispatcher"},{"export":[{"name":"CommandManager","as":"CommandManager"}],"from":"ng2-qgrid/core/command/command.manager"},{"export":[{"name":"AppError","as":"GridError"}],"from":"ng2-qgrid/core/infrastructure/error"},{"export":[{"name":"ArrayColumnModel","as":"ArrayColumn"}],"from":"ng2-qgrid/core/column-type/array.column"},{"export":[{"name":"BoolColumnModel","as":"BoolColumn"}],"from":"ng2-qgrid/core/column-type/bool.column"},{"export":[{"name":"CohortColumnModel","as":"CohortColumn"}],"from":"ng2-qgrid/core/column-type/cohort.column"},{"export":[{"name":"ColumnModel","as":"Column"}],"from":"ng2-qgrid/core/column-type/column.model"},{"export":[{"name":"CurrencyColumnModel","as":"CurrencyColumn"}],"from":"ng2-qgrid/core/column-type/currency.column"},{"export":[{"name":"DataColumnModel","as":"DataColumn"}],"from":"ng2-qgrid/core/column-type/data.column.model"},{"export":[{"name":"DateColumnModel","as":"DateColumn"}],"from":"ng2-qgrid/core/column-type/date.column"},{"export":[{"name":"EmailColumnModel","as":"EmailColumn"}],"from":"ng2-qgrid/core/column-type/email.column"},{"export":[{"name":"FileColumnModel","as":"FileColumn"}],"from":"ng2-qgrid/core/column-type/file.column"},{"export":[{"name":"FilterRowColumnModel","as":"FilterRowColumn"}],"from":"ng2-qgrid/core/column-type/filter.row.column"},{"export":[{"name":"GroupColumnModel","as":"GroupColumn"}],"from":"ng2-qgrid/core/column-type/group.column"},{"export":[{"name":"GroupSummaryColumnModel","as":"GroupSummaryColumn"}],"from":"ng2-qgrid/core/column-type/group.summary.column"},{"export":[{"name":"IdColumnModel","as":"IdColumn"}],"from":"ng2-qgrid/core/column-type/id.column"},{"export":[{"name":"ImageColumnModel","as":"ImageColumn"}],"from":"ng2-qgrid/core/column-type/image.column"},{"export":[{"name":"NumberColumnModel","as":"NumberColumn"}],"from":"ng2-qgrid/core/column-type/number.column"},{"export":[{"name":"PadColumnModel","as":"PadColumn"}],"from":"ng2-qgrid/core/column-type/pad.column"},{"export":[{"name":"PasswordColumnModel","as":"PasswordColumn"}],"from":"ng2-qgrid/core/column-type/password.column"},{"export":[{"name":"PivotColumnModel","as":"PivotColumn"}],"from":"ng2-qgrid/core/column-type/pivot.column"},{"export":[{"name":"ReferenceColumnModel","as":"ReferenceColumn"}],"from":"ng2-qgrid/core/column-type/reference.column"},{"export":[{"name":"RowDetailsColumnModel","as":"RowDetailsColumn"}],"from":"ng2-qgrid/core/column-type/row.details.column"},{"export":[{"name":"RowExpandColumnModel","as":"RowExpandColumn"}],"from":"ng2-qgrid/core/column-type/row.expand.column"},{"export":[{"name":"RowIndicatorColumnModel","as":"RowIndicatorColumn"}],"from":"ng2-qgrid/core/column-type/row.indicator.column"},{"export":[{"name":"RowNumberColumnModel","as":"RowNumberColumn"}],"from":"ng2-qgrid/core/column-type/row.number.column"},{"export":[{"name":"RowOptionsColumnModel","as":"RowOptionsColumn"}],"from":"ng2-qgrid/core/column-type/row.options.column"},{"export":[{"name":"SelectColumnModel","as":"SelectColumn"}],"from":"ng2-qgrid/core/column-type/select.column"},{"export":[{"name":"TextColumnModel","as":"TextColumn"}],"from":"ng2-qgrid/core/column-type/text.column"},{"export":[{"name":"TimeColumnModel","as":"TimeColumn"}],"from":"ng2-qgrid/core/column-type/time.column"},{"export":[{"name":"UrlColumnModel","as":"UrlColumn"}],"from":"ng2-qgrid/core/column-type/url.column"},{"export":[{"name":"StyleCellContext","as":"StyleCellContext"},{"name":"StyleRowContext","as":"StyleRowContext"}],"from":"ng2-qgrid/core/style/style.context"},{"export":[{"name":"PipeContext","as":"PipeContext"},{"name":"PipeMemo","as":"PipeMemo"}],"from":"ng2-qgrid/core/pipe/pipe.item"},{"export":[{"name":"Tr","as":"DomTr"}],"from":"ng2-qgrid/core/dom/tr"},{"export":[{"name":"Td","as":"DomTd"}],"from":"ng2-qgrid/core/dom/td"},{"export":[{"name":"Box","as":"DomBox"}],"from":"ng2-qgrid/core/dom/box"},{"export":[{"name":"Cell","as":"DomCell"}],"from":"ng2-qgrid/core/dom/cell"},{"export":[{"name":"Row","as":"DomRow"}],"from":"ng2-qgrid/core/dom/row"},{"export":[{"name":"Data","as":"DomData"}],"from":"ng2-qgrid/core/dom/data"},{"export":[{"name":"View","as":"DomView"}],"from":"ng2-qgrid/core/dom/view"},{"export":[{"name":"ColumnView","as":"ColumnView"}],"from":"ng2-qgrid/core/scene/view/column.view"}],"metadata":{"GridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"declarations":[],"exports":[{"__symbolic":"reference","name":"GridComponent"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"PluginModule"},{"__symbolic":"reference","name":"ɵdp"},{"__symbolic":"reference","name":"TemplateModule"},{"__symbolic":"reference","name":"ɵdy"},{"__symbolic":"reference","name":"ɵds"}],"imports":[{"__symbolic":"reference","name":"ɵdp"},{"__symbolic":"reference","name":"TemplateModule"}],"providers":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":38,"character":2},{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":39,"character":2},{"__symbolic":"reference","module":"@angular/common","name":"CurrencyPipe","line":40,"character":2},{"__symbolic":"reference","name":"ThemeService"},{"__symbolic":"reference","name":"ɵba"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":46,"character":19},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":46,"character":37},{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":46,"character":59},{"__symbolic":"reference","module":"@angular/common","name":"CurrencyPipe","line":46,"character":86}]}]}},"GridComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵa"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"q-grid","providers":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"TemplateService"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"Grid"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵh"}],"styles":["/* * * Responsive attributes * * References: * 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex * 2) https://css-tricks.com/almanac/properties/f/flex/ * 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/ * 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items * 5) http://godban.com.ua/projects/flexgrid * * */ /* IE10-IE11 column-flex bug fix (set proper default value) */ /* Apply Mixins to create Layout/Flexbox styles */ .flex-order { order: 0; } .flex-order--20 { order: -20; } .flex-order--19 { order: -19; } .flex-order--18 { order: -18; } .flex-order--17 { order: -17; } .flex-order--16 { order: -16; } .flex-order--15 { order: -15; } .flex-order--14 { order: -14; } .flex-order--13 { order: -13; } .flex-order--12 { order: -12; } .flex-order--11 { order: -11; } .flex-order--10 { order: -10; } .flex-order--9 { order: -9; } .flex-order--8 { order: -8; } .flex-order--7 { order: -7; } .flex-order--6 { order: -6; } .flex-order--5 { order: -5; } .flex-order--4 { order: -4; } .flex-order--3 { order: -3; } .flex-order--2 { order: -2; } .flex-order--1 { order: -1; } .flex-order-0 { order: 0; } .flex-order-1 { order: 1; } .flex-order-2 { order: 2; } .flex-order-3 { order: 3; } .flex-order-4 { order: 4; } .flex-order-5 { order: 5; } .flex-order-6 { order: 6; } .flex-order-7 { order: 7; } .flex-order-8 { order: 8; } .flex-order-9 { order: 9; } .flex-order-10 { order: 10; } .flex-order-11 { order: 11; } .flex-order-12 { order: 12; } .flex-order-13 { order: 13; } .flex-order-14 { order: 14; } .flex-order-15 { order: 15; } .flex-order-16 { order: 16; } .flex-order-17 { order: 17; } .flex-order-18 { order: 18; } .flex-order-19 { order: 19; } .flex-order-20 { order: 20; } .offset-0, .flex-offset-0 { margin-left: 0; } [dir=rtl] .offset-0, [dir=rtl] .flex-offset-0 { margin-left: auto; margin-right: 0; } .offset-5, .flex-offset-5 { margin-left: 5%; } [dir=rtl] .offset-5, [dir=rtl] .flex-offset-5 { margin-left: auto; margin-right: 5%; } .offset-10, .flex-offset-10 { margin-left: 10%; } [dir=rtl] .offset-10, [dir=rtl] .flex-offset-10 { margin-left: auto; margin-right: 10%; } .offset-15, .flex-offset-15 { margin-left: 15%; } [dir=rtl] .offset-15, [dir=rtl] .flex-offset-15 { margin-left: auto; margin-right: 15%; } .offset-20, .flex-offset-20 { margin-left: 20%; } [dir=rtl] .offset-20, [dir=rtl] .flex-offset-20 { margin-left: auto; margin-right: 20%; } .offset-25, .flex-offset-25 { margin-left: 25%; } [dir=rtl] .offset-25, [dir=rtl] .flex-offset-25 { margin-left: auto; margin-right: 25%; } .offset-30, .flex-offset-30 { margin-left: 30%; } [dir=rtl] .offset-30, [dir=rtl] .flex-offset-30 { margin-left: auto; margin-right: 30%; } .offset-35, .flex-offset-35 { margin-left: 35%; } [dir=rtl] .offset-35, [dir=rtl] .flex-offset-35 { margin-left: auto; margin-right: 35%; } .offset-40, .flex-offset-40 { margin-left: 40%; } [dir=rtl] .offset-40, [dir=rtl] .flex-offset-40 { margin-left: auto; margin-right: 40%; } .offset-45, .flex-offset-45 { margin-left: 45%; } [dir=rtl] .offset-45, [dir=rtl] .flex-offset-45 { margin-left: auto; margin-right: 45%; } .offset-50, .flex-offset-50 { margin-left: 50%; } [dir=rtl] .offset-50, [dir=rtl] .flex-offset-50 { margin-left: auto; margin-right: 50%; } .offset-55, .flex-offset-55 { margin-left: 55%; } [dir=rtl] .offset-55, [dir=rtl] .flex-offset-55 { margin-left: auto; margin-right: 55%; } .offset-60, .flex-offset-60 { margin-left: 60%; } [dir=rtl] .offset-60, [dir=rtl] .flex-offset-60 { margin-left: auto; margin-right: 60%; } .offset-65, .flex-offset-65 { margin-left: 65%; } [dir=rtl] .offset-65, [dir=rtl] .flex-offset-65 { margin-left: auto; margin-right: 65%; } .offset-70, .flex-offset-70 { margin-left: 70%; } [dir=rtl] .offset-70, [dir=rtl] .flex-offset-70 { margin-left: auto; margin-right: 70%; } .offset-75, .flex-offset-75 { margin-left: 75%; } [dir=rtl] .offset-75, [dir=rtl] .flex-offset-75 { margin-left: auto; margin-right: 75%; } .offset-80, .flex-offset-80 { margin-left: 80%; } [dir=rtl] .offset-80, [dir=rtl] .flex-offset-80 { margin-left: auto; margin-right: 80%; } .offset-85, .flex-offset-85 { margin-left: 85%; } [dir=rtl] .offset-85, [dir=rtl] .flex-offset-85 { margin-left: auto; margin-right: 85%; } .offset-90, .flex-offset-90 { margin-left: 90%; } [dir=rtl] .offset-90, [dir=rtl] .flex-offset-90 { margin-left: auto; margin-right: 90%; } .offset-95, .flex-offset-95 { margin-left: 95%; } [dir=rtl] .offset-95, [dir=rtl] .flex-offset-95 { margin-left: auto; margin-right: 95%; } .offset-33, .flex-offset-33 { margin-left: calc(100% / 3); } .offset-66, .flex-offset-66 { margin-left: calc(200% / 3); } [dir=rtl] .offset-66, [dir=rtl] .flex-offset-66 { margin-left: auto; margin-right: calc(200% / 3); } .layout-align, .layout-align-start-stretch { justify-content: flex-start; align-content: stretch; align-items: stretch; } .layout-align-start, .layout-align-start-start, .layout-align-start-center, .layout-align-start-end, .layout-align-start-stretch { justify-content: flex-start; } .layout-align-center, .layout-align-center-start, .layout-align-center-center, .layout-align-center-end, .layout-align-center-stretch { justify-content: center; } .layout-align-end, .layout-align-end-start, .layout-align-end-center, .layout-align-end-end, .layout-align-end-stretch { justify-content: flex-end; } .layout-align-space-around, .layout-align-space-around-center, .layout-align-space-around-start, .layout-align-space-around-end, .layout-align-space-around-stretch { justify-content: space-around; } .layout-align-space-between, .layout-align-space-between-center, .layout-align-space-between-start, .layout-align-space-between-end, .layout-align-space-between-stretch { justify-content: space-between; } .layout-align-start-start, .layout-align-center-start, .layout-align-end-start, .layout-align-space-between-start, .layout-align-space-around-start { align-items: flex-start; align-content: flex-start; } .layout-align-start-center, .layout-align-center-center, .layout-align-end-center, .layout-align-space-between-center, .layout-align-space-around-center { align-items: center; align-content: center; max-width: 100%; } .layout-align-start-center > *, .layout-align-center-center > *, .layout-align-end-center > *, .layout-align-space-between-center > *, .layout-align-space-around-center > * { max-width: 100%; box-sizing: border-box; } .layout-align-start-end, .layout-align-center-end, .layout-align-end-end, .layout-align-space-between-end, .layout-align-space-around-end { align-items: flex-end; align-content: flex-end; } .layout-align-start-stretch, .layout-align-center-stretch, .layout-align-end-stretch, .layout-align-space-between-stretch, .layout-align-space-around-stretch { align-items: stretch; align-content: stretch; } .flex { flex: 1; box-sizing: border-box; } .flex-grow { flex: 1 1 100%; box-sizing: border-box; } .flex-initial { flex: 0 1 auto; box-sizing: border-box; } .flex-auto { flex: 1 1 auto; box-sizing: border-box; } .flex-none { flex: 0 0 auto; box-sizing: border-box; } .flex-noshrink { flex: 1 0 auto; box-sizing: border-box; } .flex-nogrow { flex: 0 1 auto; box-sizing: border-box; } .flex-0 { flex: 1 1 0%; max-width: 0%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-0 { flex: 1 1 0%; max-width: 0%; max-height: 100%; box-sizing: border-box; min-width: 0; } .layout-column > .flex-0 { flex: 1 1 0%; max-width: 100%; max-height: 0%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-0 { flex: 1 1 0%; max-width: 0%; max-height: 100%; box-sizing: border-box; min-width: 0; } .layout-column > .flex-0 { flex: 1 1 0%; max-width: 100%; max-height: 0%; box-sizing: border-box; min-height: 0; } .flex-5 { flex: 1 1 5%; max-width: 5%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-5 { flex: 1 1 5%; max-width: 5%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-5 { flex: 1 1 5%; max-width: 100%; max-height: 5%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-5 { flex: 1 1 5%; max-width: 5%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-5 { flex: 1 1 5%; max-width: 100%; max-height: 5%; box-sizing: border-box; } .flex-10 { flex: 1 1 10%; max-width: 10%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-10 { flex: 1 1 10%; max-width: 10%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-10 { flex: 1 1 10%; max-width: 100%; max-height: 10%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-10 { flex: 1 1 10%; max-width: 10%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-10 { flex: 1 1 10%; max-width: 100%; max-height: 10%; box-sizing: border-box; } .flex-15 { flex: 1 1 15%; max-width: 15%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-15 { flex: 1 1 15%; max-width: 15%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-15 { flex: 1 1 15%; max-width: 100%; max-height: 15%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-15 { flex: 1 1 15%; max-width: 15%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-15 { flex: 1 1 15%; max-width: 100%; max-height: 15%; box-sizing: border-box; } .flex-20 { flex: 1 1 20%; max-width: 20%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-20 { flex: 1 1 20%; max-width: 20%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-20 { flex: 1 1 20%; max-width: 100%; max-height: 20%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-20 { flex: 1 1 20%; max-width: 20%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-20 { flex: 1 1 20%; max-width: 100%; max-height: 20%; box-sizing: border-box; } .flex-25 { flex: 1 1 25%; max-width: 25%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-25 { flex: 1 1 25%; max-width: 25%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-25 { flex: 1 1 25%; max-width: 100%; max-height: 25%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-25 { flex: 1 1 25%; max-width: 25%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-25 { flex: 1 1 25%; max-width: 100%; max-height: 25%; box-sizing: border-box; } .flex-30 { flex: 1 1 30%; max-width: 30%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-30 { flex: 1 1 30%; max-width: 30%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-30 { flex: 1 1 30%; max-width: 100%; max-height: 30%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-30 { flex: 1 1 30%; max-width: 30%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-30 { flex: 1 1 30%; max-width: 100%; max-height: 30%; box-sizing: border-box; } .flex-35 { flex: 1 1 35%; max-width: 35%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-35 { flex: 1 1 35%; max-width: 35%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-35 { flex: 1 1 35%; max-width: 100%; max-height: 35%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-35 { flex: 1 1 35%; max-width: 35%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-35 { flex: 1 1 35%; max-width: 100%; max-height: 35%; box-sizing: border-box; } .flex-40 { flex: 1 1 40%; max-width: 40%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-40 { flex: 1 1 40%; max-width: 40%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-40 { flex: 1 1 40%; max-width: 100%; max-height: 40%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-40 { flex: 1 1 40%; max-width: 40%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-40 { flex: 1 1 40%; max-width: 100%; max-height: 40%; box-sizing: border-box; } .flex-45 { flex: 1 1 45%; max-width: 45%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-45 { flex: 1 1 45%; max-width: 45%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-45 { flex: 1 1 45%; max-width: 100%; max-height: 45%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-45 { flex: 1 1 45%; max-width: 45%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-45 { flex: 1 1 45%; max-width: 100%; max-height: 45%; box-sizing: border-box; } .flex-50 { flex: 1 1 50%; max-width: 50%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-50 { flex: 1 1 50%; max-width: 50%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-50 { flex: 1 1 50%; max-width: 100%; max-height: 50%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-50 { flex: 1 1 50%; max-width: 50%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-50 { flex: 1 1 50%; max-width: 100%; max-height: 50%; box-sizing: border-box; } .flex-55 { flex: 1 1 55%; max-width: 55%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-55 { flex: 1 1 55%; max-width: 55%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-55 { flex: 1 1 55%; max-width: 100%; max-height: 55%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-55 { flex: 1 1 55%; max-width: 55%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-55 { flex: 1 1 55%; max-width: 100%; max-height: 55%; box-sizing: border-box; } .flex-60 { flex: 1 1 60%; max-width: 60%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-60 { flex: 1 1 60%; max-width: 60%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-60 { flex: 1 1 60%; max-width: 100%; max-height: 60%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-60 { flex: 1 1 60%; max-width: 60%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-60 { flex: 1 1 60%; max-width: 100%; max-height: 60%; box-sizing: border-box; } .flex-65 { flex: 1 1 65%; max-width: 65%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-65 { flex: 1 1 65%; max-width: 65%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-65 { flex: 1 1 65%; max-width: 100%; max-height: 65%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-65 { flex: 1 1 65%; max-width: 65%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-65 { flex: 1 1 65%; max-width: 100%; max-height: 65%; box-sizing: border-box; } .flex-70 { flex: 1 1 70%; max-width: 70%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-70 { flex: 1 1 70%; max-width: 70%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-70 { flex: 1 1 70%; max-width: 100%; max-height: 70%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-70 { flex: 1 1 70%; max-width: 70%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-70 { flex: 1 1 70%; max-width: 100%; max-height: 70%; box-sizing: border-box; } .flex-75 { flex: 1 1 75%; max-width: 75%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-75 { flex: 1 1 75%; max-width: 75%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-75 { flex: 1 1 75%; max-width: 100%; max-height: 75%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-75 { flex: 1 1 75%; max-width: 75%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-75 { flex: 1 1 75%; max-width: 100%; max-height: 75%; box-sizing: border-box; } .flex-80 { flex: 1 1 80%; max-width: 80%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-80 { flex: 1 1 80%; max-width: 80%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-80 { flex: 1 1 80%; max-width: 100%; max-height: 80%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-80 { flex: 1 1 80%; max-width: 80%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-80 { flex: 1 1 80%; max-width: 100%; max-height: 80%; box-sizing: border-box; } .flex-85 { flex: 1 1 85%; max-width: 85%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-85 { flex: 1 1 85%; max-width: 85%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-85 { flex: 1 1 85%; max-width: 100%; max-height: 85%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-85 { flex: 1 1 85%; max-width: 85%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-85 { flex: 1 1 85%; max-width: 100%; max-height: 85%; box-sizing: border-box; } .flex-90 { flex: 1 1 90%; max-width: 90%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-90 { flex: 1 1 90%; max-width: 90%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-90 { flex: 1 1 90%; max-width: 100%; max-height: 90%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-90 { flex: 1 1 90%; max-width: 90%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-90 { flex: 1 1 90%; max-width: 100%; max-height: 90%; box-sizing: border-box; } .flex-95 { flex: 1 1 95%; max-width: 95%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-95 { flex: 1 1 95%; max-width: 95%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-95 { flex: 1 1 95%; max-width: 100%; max-height: 95%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-95 { flex: 1 1 95%; max-width: 95%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-95 { flex: 1 1 95%; max-width: 100%; max-height: 95%; box-sizing: border-box; } .flex-100 { flex: 1 1 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-100 { flex: 1 1 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-100 { flex: 1 1 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-100 { flex: 1 1 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-100 { flex: 1 1 100%; max-width: 100%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex { min-width: 0; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-column > .flex { min-height: 0; } .layout, .layout-column, .layout-row { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .layout-column { flex-direction: column; } .layout-row { flex-direction: row; } .layout-padding-sm > *, .layout-padding > .flex-sm { padding: 4px; } .layout-padding, .layout-padding-gt-sm, .layout-padding-md, .layout-padding > *, .layout-padding-gt-sm > *, .layout-padding-md > *, .layout-padding > .flex, .layout-padding > .flex-gt-sm, .layout-padding > .flex-md { padding: 8px; } .layout-padding-gt-md > *, .layout-padding-lg > *, .layout-padding-gt-lg > *, .layout-padding > .flex-gt-md, .layout-padding > .flex-lg, .layout-padding > .flex-lg, .layout-padding > .flex-gt-lg { padding: 16px; } .layout-margin-sm > *, .layout-margin > .flex-sm { margin: 4px; } .layout-margin, .layout-margin-gt-sm, .layout-margin-md, .layout-margin > *, .layout-margin-gt-sm > *, .layout-margin-md > *, .layout-margin > .flex, .layout-margin > .flex-gt-sm, .layout-margin > .flex-md { margin: 8px; } .layout-margin-gt-md > *, .layout-margin-lg > *, .layout-margin-gt-lg > *, .layout-margin > .flex-gt-md, .layout-margin > .flex-lg, .layout-margin > .flex-gt-lg { margin: 16px; } .layout-wrap { flex-wrap: wrap; } .layout-nowrap { flex-wrap: nowrap; } .layout-fill { margin: 0; width: 100%; min-height: 100%; height: 100%; } /* Apply Mixins to create Layout/Flexbox styles */ .flex-order { order: 0; } .flex-order--20 { order: -20; } .flex-order--19 { order: -19; } .flex-order--18 { order: -18; } .flex-order--17 { order: -17; } .flex-order--16 { order: -16; } .flex-order--15 { order: -15; } .flex-order--14 { order: -14; } .flex-order--13 { order: -13; } .flex-order--12 { order: -12; } .flex-order--11 { order: -11; } .flex-order--10 { order: -10; } .flex-order--9 { order: -9; } .flex-order--8 { order: -8; } .flex-order--7 { order: -7; } .flex-order--6 { order: -6; } .flex-order--5 { order: -5; } .flex-order--4 { order: -4; } .flex-order--3 { order: -3; } .flex-order--2 { order: -2; } .flex-order--1 { order: -1; } .flex-order-0 { order: 0; } .flex-order-1 { order: 1; } .flex-order-2 { order: 2; } .flex-order-3 { order: 3; } .flex-order-4 { order: 4; } .flex-order-5 { order: 5; } .flex-order-6 { order: 6; } .flex-order-7 { order: 7; } .flex-order-8 { order: 8; } .flex-order-9 { order: 9; } .flex-order-10 { order: 10; } .flex-order-11 { order: 11; } .flex-order-12 { order: 12; } .flex-order-13 { order: 13; } .flex-order-14 { order: 14; } .flex-order-15 { order: 15; } .flex-order-16 { order: 16; } .flex-order-17 { order: 17; } .flex-order-18 { order: 18; } .flex-order-19 { order: 19; } .flex-order-20 { order: 20; } .offset-0, .flex-offset-0 { margin-left: 0; } [dir=rtl] .offset-0, [dir=rtl] .flex-offset-0 { margin-left: auto; margin-right: 0; } .offset-5, .flex-offset-5 { margin-left: 5%; } [dir=rtl] .offset-5, [dir=rtl] .flex-offset-5 { margin-left: auto; margin-right: 5%; } .offset-10, .flex-offset-10 { margin-left: 10%; } [dir=rtl] .offset-10, [dir=rtl] .flex-offset-10 { margin-left: auto; margin-right: 10%; } .offset-15, .flex-offset-15 { margin-left: 15%; } [dir=rtl] .offset-15, [dir=rtl] .flex-offset-15 { margin-left: auto; margin-right: 15%; } .offset-20, .flex-offset-20 { margin-left: 20%; } [dir=rtl] .offset-20, [dir=rtl] .flex-offset-20 { margin-left: auto; margin-right: 20%; } .offset-25, .flex-offset-25 { margin-left: 25%; } [dir=rtl] .offset-25, [dir=rtl] .flex-offset-25 { margin-left: auto; margin-right: 25%; } .offset-30, .flex-offset-30 { margin-left: 30%; } [dir=rtl] .offset-30, [dir=rtl] .flex-offset-30 { margin-left: auto; margin-right: 30%; } .offset-35, .flex-offset-35 { margin-left: 35%; } [dir=rtl] .offset-35, [dir=rtl] .flex-offset-35 { margin-left: auto; margin-right: 35%; } .offset-40, .flex-offset-40 { margin-left: 40%; } [dir=rtl] .offset-40, [dir=rtl] .flex-offset-40 { margin-left: auto; margin-right: 40%; } .offset-45, .flex-offset-45 { margin-left: 45%; } [dir=rtl] .offset-45, [dir=rtl] .flex-offset-45 { margin-left: auto; margin-right: 45%; } .offset-50, .flex-offset-50 { margin-left: 50%; } [dir=rtl] .offset-50, [dir=rtl] .flex-offset-50 { margin-left: auto; margin-right: 50%; } .offset-55, .flex-offset-55 { margin-left: 55%; } [dir=rtl] .offset-55, [dir=rtl] .flex-offset-55 { margin-left: auto; margin-right: 55%; } .offset-60, .flex-offset-60 { margin-left: 60%; } [dir=rtl] .offset-60, [dir=rtl] .flex-offset-60 { margin-left: auto; margin-right: 60%; } .offset-65, .flex-offset-65 { margin-left: 65%; } [dir=rtl] .offset-65, [dir=rtl] .flex-offset-65 { margin-left: auto; margin-right: 65%; } .offset-70, .flex-offset-70 { margin-left: 70%; } [dir=rtl] .offset-70, [dir=rtl] .flex-offset-70 { margin-left: auto; margin-right: 70%; } .offset-75, .flex-offset-75 { margin-left: 75%; } [dir=rtl] .offset-75, [dir=rtl] .flex-offset-75 { margin-left: auto; margin-right: 75%; } .offset-80, .flex-offset-80 { margin-left: 80%; } [dir=rtl] .offset-80, [dir=rtl] .flex-offset-80 { margin-left: auto; margin-right: 80%; } .offset-85, .flex-offset-85 { margin-left: 85%; } [dir=rtl] .offset-85, [dir=rtl] .flex-offset-85 { margin-left: auto; margin-right: 85%; } .offset-90, .flex-offset-90 { margin-left: 90%; } [dir=rtl] .offset-90, [dir=rtl] .flex-offset-90 { margin-left: auto; margin-right: 90%; } .offset-95, .flex-offset-95 { margin-left: 95%; } [dir=rtl] .offset-95, [dir=rtl] .flex-offset-95 { margin-left: auto; margin-right: 95%; } .offset-33, .flex-offset-33 { margin-left: calc(100% / 3); } .offset-66, .flex-offset-66 { margin-left: calc(200% / 3); } [dir=rtl] .offset-66, [dir=rtl] .flex-offset-66 { margin-left: auto; margin-right: calc(200% / 3); } .layout-align, .layout-align-start-stretch { justify-content: flex-start; align-content: stretch; align-items: stretch; } .layout-align-start, .layout-align-start-start, .layout-align-start-center, .layout-align-start-end, .layout-align-start-stretch { justify-content: flex-start; } .layout-align-center, .layout-align-center-start, .layout-align-center-center, .layout-align-center-end, .layout-align-center-stretch { justify-content: center; } .layout-align-end, .layout-align-end-start, .layout-align-end-center, .layout-align-end-end, .layout-align-end-stretch { justify-content: flex-end; } .layout-align-space-around, .layout-align-space-around-center, .layout-align-space-around-start, .layout-align-space-around-end, .layout-align-space-around-stretch { justify-content: space-around; } .layout-align-space-between, .layout-align-space-between-center, .layout-align-space-between-start, .layout-align-space-between-end, .layout-align-space-between-stretch { justify-content: space-between; } .layout-align-start-start, .layout-align-center-start, .layout-align-end-start, .layout-align-space-between-start, .layout-align-space-around-start { align-items: flex-start; align-content: flex-start; } .layout-align-start-center, .layout-align-center-center, .layout-align-end-center, .layout-align-space-between-center, .layout-align-space-around-center { align-items: center; align-content: center; max-width: 100%; } .layout-align-start-center > *, .layout-align-center-center > *, .layout-align-end-center > *, .layout-align-space-between-center > *, .layout-align-space-around-center > * { max-width: 100%; box-sizing: border-box; } .layout-align-start-end, .layout-align-center-end, .layout-align-end-end, .layout-align-space-between-end, .layout-align-space-around-end { align-items: flex-end; align-content: flex-end; } .layout-align-start-stretch, .layout-align-center-stretch, .layout-align-end-stretch, .layout-align-space-between-stretch, .layout-align-space-around-stretch { align-items: stretch; align-content: stretch; } .flex { flex: 1; box-sizing: border-box; } .flex-grow { flex: 1 1 100%; box-sizing: border-box; } .flex-initial { flex: 0 1 auto; box-sizing: border-box; } .flex-auto { flex: 1 1 auto; box-sizing: border-box; } .flex-none { flex: 0 0 auto; box-sizing: border-box; } .flex-noshrink { flex: 1 0 auto; box-sizing: border-box; } .flex-nogrow { flex: 0 1 auto; box-sizing: border-box; } .flex-0 { flex: 1 1 0%; max-width: 0%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-0 { flex: 1 1 0%; max-width: 0%; max-height: 100%; box-sizing: border-box; min-width: 0; } .layout-column > .flex-0 { flex: 1 1 0%; max-width: 100%; max-height: 0%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-0 { flex: 1 1 0%; max-width: 0%; max-height: 100%; box-sizing: border-box; min-width: 0; } .layout-column > .flex-0 { flex: 1 1 0%; max-width: 100%; max-height: 0%; box-sizing: border-box; min-height: 0; } .flex-5 { flex: 1 1 5%; max-width: 5%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-5 { flex: 1 1 5%; max-width: 5%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-5 { flex: 1 1 5%; max-width: 100%; max-height: 5%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-5 { flex: 1 1 5%; max-width: 5%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-5 { flex: 1 1 5%; max-width: 100%; max-height: 5%; box-sizing: border-box; } .flex-10 { flex: 1 1 10%; max-width: 10%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-10 { flex: 1 1 10%; max-width: 10%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-10 { flex: 1 1 10%; max-width: 100%; max-height: 10%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-10 { flex: 1 1 10%; max-width: 10%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-10 { flex: 1 1 10%; max-width: 100%; max-height: 10%; box-sizing: border-box; } .flex-15 { flex: 1 1 15%; max-width: 15%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-15 { flex: 1 1 15%; max-width: 15%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-15 { flex: 1 1 15%; max-width: 100%; max-height: 15%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; } .layout-column > .flex-66, .layout-column > .flex-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; } .layout-row > .flex-15 { flex: 1 1 15%; max-width: 15%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-15 { flex: 1 1 15%; max-width: 100%; max-height: 15%; box-sizing: border-box; } .flex-20 { flex: 1 1 20%; max-width: 20%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-20 { flex: 1 1 20%; max-width: 20%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-20 { flex: 1 1 20%; max-width: 100%; max-height: 20%; box-sizing: border-box; } .layout-row > .flex-33, .layout-row > .flex-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; } .layout-row > .flex-66, .layout-row > .flex-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; } .layout-column > .flex-33, .layout-column > .flex-33 { flex: 1 1 33.33%; max-width: 100