@material/layout-grid
Version:
The Material Components for the web layout grid component
1 lines • 33.5 kB
Source Map (JSON)
{"version":3,"sources":["webpack:///./packages/mdc-layout-grid/mdc-layout-grid.scss","webpack:///mdc-layout-grid.scss","webpack:///./packages/mdc-layout-grid/_mixins.scss"],"names":[],"mappings":";;;;;;;AAyBA;EAEI;EAIA;EAIA;EARA;EAIA;EAIA;EARA;EAIA;EAIA;ACzBJ;;AC0DI;EFzBJ;IE+DE;IACA;IACA,aF9Da;IEgEb;ED5FA;AACF;AC4CI;EFpBJ;IE+DE;IACA;IACA,aF9Da;IEgEb;EDpFA;AACF;AC+BI;EFfJ;IE+DE;IACA;IACA,aF9Da;IEgEb;ED5EA;AACF;;ACiCI;EFfJ;IEqEE;IACA;IACA;IACA;IAEA;EDnFA;ECqFA;IF5EF;ME6EI;MACA;MACA,cF3EW;ME6EX;MACA;IDnFA;EACF;AACF;ACSI;EFVJ;IEqEE;IACA;IACA;IACA;IAEA;EDjEA;ECmEA;IF5EF;ME6EI;MACA;MACA,cF3EW;ME6EX;MACA;IDjEA;EACF;AACF;ACdI;EFLJ;IEqEE;IACA;IACA;IACA;IAEA;ED/CA;ECiDA;IF5EF;ME6EI;MACA;MACA,cF3EW;ME6EX;MACA;ID/CA;EACF;AACF;;ACtBI;EFJJ;IE0BE;IAEA;IAyDA;IACA;IAEA;EDrDA;ECLA;IF9BF;ME+BI;MACA;IDQA;EACF;ECiDA;IF1FF;ME2FI;ID9CA;EACF;EDjCe;;IEaf;IAEA;EDuBA;ECrBA;IFjBe;;MEkBb;MACA;IDyBA;EACF;;ED7Ce;;IEaf;IAEA;EDoCA;EClCA;IFjBe;;MEkBb;MACA;IDsCA;EACF;;ED1De;;IEaf;IAEA;EDiDA;EC/CA;IFjBe;;MEkBb;MACA;IDmDA;EACF;;EDvEe;;IEaf;IAEA;ED8DA;EC5DA;IFjBe;;MEkBb;MACA;IDgEA;EACF;;EDpFe;;IEaf;IAEA;ED2EA;ECzEA;IFjBe;;MEkBb;MACA;ID6EA;EACF;;EDjGe;;IEaf;IAEA;EDwFA;ECtFA;IFjBe;;MEkBb;MACA;ID0FA;EACF;;ED9Ge;;IEaf;IAEA;EDqGA;ECnGA;IFjBe;;MEkBb;MACA;IDuGA;EACF;;ED3He;;IEaf;IAEA;EDkHA;EChHA;IFjBe;;MEkBb;MACA;IDoHA;EACF;;EDxIe;;IEaf;IAEA;ED+HA;EC7HA;IFjBe;;MEkBb;MACA;IDiIA;EACF;;EDrJe;;IEaf;IAEA;ED4IA;EC1IA;IFjBe;;MEkBb;MACA;ID8IA;EACF;;EDlKe;;IEaf;IAEA;EDyJA;ECvJA;IFjBe;;MEkBb;MACA;ID2JA;EACF;;ED/Ke;;IEaf;IAEA;EDsKA;ECpKA;IFjBe;;MEkBb;MACA;IDwKA;EACF;AACF;AC3MI;EFCJ;IE0BE;IAEA;IAyDA;IACA;IAEA;ED0HA;ECpLA;IF9BF;ME+BI;MACA;IDuLA;EACF;EC9HA;IF1FF;ME2FI;IDiIA;EACF;EDhNe;;IEaf;IAEA;EDsMA;ECpMA;IFjBe;;MEkBb;MACA;IDwMA;EACF;;ED5Ne;;IEaf;IAEA;EDmNA;ECjNA;IFjBe;;MEkBb;MACA;IDqNA;EACF;;EDzOe;;IEaf;IAEA;EDgOA;EC9NA;IFjBe;;MEkBb;MACA;IDkOA;EACF;;EDtPe;;IEaf;IAEA;ED6OA;EC3OA;IFjBe;;MEkBb;MACA;ID+OA;EACF;;EDnQe;;IEaf;IAEA;ED0PA;ECxPA;IFjBe;;MEkBb;MACA;ID4PA;EACF;;EDhRe;;IEaf;IAEA;EDuQA;ECrQA;IFjBe;;MEkBb;MACA;IDyQA;EACF;;ED7Re;;IEaf;IAEA;EDoRA;EClRA;IFjBe;;MEkBb;MACA;IDsRA;EACF;;ED1Se;;IEaf;IAEA;EDiSA;EC/RA;IFjBe;;MEkBb;MACA;IDmSA;EACF;;EDvTe;;IEaf;IAEA;ED8SA;EC5SA;IFjBe;;MEkBb;MACA;IDgTA;EACF;;EDpUe;;IEaf;IAEA;ED2TA;ECzTA;IFjBe;;MEkBb;MACA;ID6TA;EACF;;EDjVe;;IEaf;IAEA;EDwUA;ECtUA;IFjBe;;MEkBb;MACA;ID0UA;EACF;;ED9Ve;;IEaf;IAEA;EDqVA;ECnVA;IFjBe;;MEkBb;MACA;IDuVA;EACF;AACF;AC/XI;EFMJ;IE0BE;IAEA;IAyDA;IACA;IAEA;EDySA;ECnWA;IF9BF;ME+BI;MACA;IDsWA;EACF;EC7SA;IF1FF;ME2FI;IDgTA;EACF;ED/Xe;;IEaf;IAEA;EDqXA;ECnXA;IFjBe;;MEkBb;MACA;IDuXA;EACF;;ED3Ye;;IEaf;IAEA;EDkYA;EChYA;IFjBe;;MEkBb;MACA;IDoYA;EACF;;EDxZe;;IEaf;IAEA;ED+YA;EC7YA;IFjBe;;MEkBb;MACA;IDiZA;EACF;;EDrae;;IEaf;IAEA;ED4ZA;EC1ZA;IFjBe;;MEkBb;MACA;ID8ZA;EACF;;EDlbe;;IEaf;IAEA;EDyaA;ECvaA;IFjBe;;MEkBb;MACA;ID2aA;EACF;;ED/be;;IEaf;IAEA;EDsbA;ECpbA;IFjBe;;MEkBb;MACA;IDwbA;EACF;;ED5ce;;IEaf;IAEA;EDmcA;ECjcA;IFjBe;;MEkBb;MACA;IDqcA;EACF;;EDzde;;IEaf;IAEA;EDgdA;EC9cA;IFjBe;;MEkBb;MACA;IDkdA;EACF;;EDtee;;IEaf;IAEA;ED6dA;EC3dA;IFjBe;;MEkBb;MACA;ID+dA;EACF;;EDnfe;;IEaf;IAEA;ED0eA;ECxeA;IFjBe;;MEkBb;MACA;ID4eA;EACF;;EDhgBe;;IEaf;IAEA;EDufA;ECrfA;IFjBe;;MEkBb;MACA;IDyfA;EACF;;ED7gBe;;IEaf;IAEA;EDogBA;EClgBA;IFjBe;;MEkBb;MACA;IDsgBA;EACF;AACF;ADhhBI;EEwEF,QFzEa;ACohBf;ADnhBI;EEwEF,QFzEa;ACuhBf;ADthBI;EEwEF,QFzEa;AC0hBf;ADzhBI;EEwEF,QFzEa;AC6hBf;AD5hBI;EEwEF,QFzEa;ACgiBf;AD/hBI;EEwEF,QFzEa;ACmiBf;ADliBI;EEwEF,QFzEa;ACsiBf;ADriBI;EEwEF,QFzEa;ACyiBf;ADxiBI;EEwEF,QFzEa;AC4iBf;AD3iBI;EEwEF,SFzEa;AC+iBf;AD9iBI;EEwEF,SFzEa;ACkjBf;ADjjBI;EEwEF,SFzEa;ACqjBf;AD9iBE;EEuEE;AD0eJ;ACxeI;EFzEF;IE0EI;ED2eJ;AACF;ADljBE;EE2EE;AD0eJ;ADjjBE;EE2EE;ADyeJ;ACveI;EF7EF;IE8EI;ED0eJ;AACF;;AC3lBI;EFuCJ;IE2FE;IAGA;;;;GAAA;EDgeA;AACF;AC3mBI;EF4CJ;IE2FE;IAGA;;;;GAAA;ED0eA;AACF;AC1nBI;EFiDJ;IE2FE;IAGA;;;;GAAA;EDofA;AACF;;ADlkBA;EACE;EACA;ACqkBF;;ADlkBA;EACE;EACA;ACqkBF,C","file":"mdc.layout-grid.css","sourcesContent":["// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use 'sass:list';\n@use 'sass:map';\n@use './variables';\n@use './mixins';\n\n:root {\n @each $size in map.keys(variables.$columns) {\n --mdc-layout-grid-margin-#{$size}: #{map.get(\n variables.$default-margin,\n $size\n )};\n --mdc-layout-grid-gutter-#{$size}: #{map.get(\n variables.$default-gutter,\n $size\n )};\n --mdc-layout-grid-column-width-#{$size}: #{map.get(\n variables.$column-width,\n $size\n )};\n }\n}\n\n// postcss-bem-linter: define layout-grid\n.mdc-layout-grid {\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $margin: map.get(variables.$default-margin, $size);\n\n @include mixins.layout-grid($size, $margin, variables.$max-width);\n }\n }\n}\n\n.mdc-layout-grid__inner {\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $margin: map.get(variables.$default-margin, $size);\n $gutter: map.get(variables.$default-gutter, $size);\n\n @include mixins.inner($size, $margin, $gutter);\n }\n }\n}\n\n.mdc-layout-grid__cell {\n // select the upper breakpoint\n $upper-breakpoint: list.nth(map.keys(variables.$columns), 1);\n\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $gutter: map.get(variables.$default-gutter, $size);\n\n @include mixins.cell($size, variables.$default-column-span, $gutter);\n\n @for $span from 1 through map.get(variables.$columns, $upper-breakpoint) {\n // Span classes.\n // stylelint-disable max-nesting-depth\n @at-root .mdc-layout-grid__cell--span-#{$span},\n .mdc-layout-grid__cell--span-#{$span}-#{$size} {\n @include mixins.cell-span_($size, $span, $gutter);\n }\n // stylelint-enable max-nesting-depth\n }\n }\n }\n\n // Order override classes.\n @for $i from 1 through map.get(variables.$columns, $upper-breakpoint) {\n &--order-#{$i} {\n @include mixins.cell-order($i);\n }\n }\n\n // Alignment classes.\n &--align-top {\n @include mixins.cell-align(top);\n }\n\n &--align-middle {\n @include mixins.cell-align(middle);\n }\n\n &--align-bottom {\n @include mixins.cell-align(bottom);\n }\n}\n\n.mdc-layout-grid--fixed-column-width {\n @each $size in map.keys(variables.$columns) {\n @include mixins.media-query_($size) {\n $margin: map.get(variables.$default-margin, $size);\n $gutter: map.get(variables.$default-gutter, $size);\n $column-width: map.get(variables.$column-width, $size);\n\n @include mixins.fixed-column-width(\n $size,\n $margin,\n $gutter,\n $column-width\n );\n }\n }\n}\n\n.mdc-layout-grid--align-left {\n margin-right: auto;\n margin-left: 0;\n}\n\n.mdc-layout-grid--align-right {\n margin-right: 0;\n margin-left: auto;\n}\n// postcss-bem-linter: end\n",":root {\n --mdc-layout-grid-margin-desktop: 24px;\n --mdc-layout-grid-gutter-desktop: 24px;\n --mdc-layout-grid-column-width-desktop: 72px;\n --mdc-layout-grid-margin-tablet: 16px;\n --mdc-layout-grid-gutter-tablet: 16px;\n --mdc-layout-grid-column-width-tablet: 72px;\n --mdc-layout-grid-margin-phone: 16px;\n --mdc-layout-grid-gutter-phone: 16px;\n --mdc-layout-grid-column-width-phone: 72px;\n}\n\n@media (min-width: 840px) {\n .mdc-layout-grid {\n box-sizing: border-box;\n margin: 0 auto;\n padding: 24px;\n padding: var(--mdc-layout-grid-margin-desktop, 24px);\n }\n}\n@media (min-width: 600px) and (max-width: 839px) {\n .mdc-layout-grid {\n box-sizing: border-box;\n margin: 0 auto;\n padding: 16px;\n padding: var(--mdc-layout-grid-margin-tablet, 16px);\n }\n}\n@media (max-width: 599px) {\n .mdc-layout-grid {\n box-sizing: border-box;\n margin: 0 auto;\n padding: 16px;\n padding: var(--mdc-layout-grid-margin-phone, 16px);\n }\n}\n\n@media (min-width: 840px) {\n .mdc-layout-grid__inner {\n display: flex;\n flex-flow: row wrap;\n align-items: stretch;\n margin: -12px;\n margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2 * -1);\n }\n @supports (display: grid) {\n .mdc-layout-grid__inner {\n display: grid;\n margin: 0;\n grid-gap: 24px;\n grid-gap: var(--mdc-layout-grid-gutter-desktop, 24px);\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n }\n}\n@media (min-width: 600px) and (max-width: 839px) {\n .mdc-layout-grid__inner {\n display: flex;\n flex-flow: row wrap;\n align-items: stretch;\n margin: -8px;\n margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2 * -1);\n }\n @supports (display: grid) {\n .mdc-layout-grid__inner {\n display: grid;\n margin: 0;\n grid-gap: 16px;\n grid-gap: var(--mdc-layout-grid-gutter-tablet, 16px);\n grid-template-columns: repeat(8, minmax(0, 1fr));\n }\n }\n}\n@media (max-width: 599px) {\n .mdc-layout-grid__inner {\n display: flex;\n flex-flow: row wrap;\n align-items: stretch;\n margin: -8px;\n margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2 * -1);\n }\n @supports (display: grid) {\n .mdc-layout-grid__inner {\n display: grid;\n margin: 0;\n grid-gap: 16px;\n grid-gap: var(--mdc-layout-grid-gutter-phone, 16px);\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n }\n}\n\n@media (min-width: 840px) {\n .mdc-layout-grid__cell {\n width: calc(33.3333333333% - 24px);\n width: calc(33.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px));\n box-sizing: border-box;\n margin: 12px;\n margin: calc(var(--mdc-layout-grid-gutter-desktop, 24px) / 2);\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell {\n width: auto;\n grid-column-end: span 4;\n }\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell {\n margin: 0;\n }\n }\n .mdc-layout-grid__cell--span-1,\n.mdc-layout-grid__cell--span-1-desktop {\n width: calc(8.3333333333% - 24px);\n width: calc(8.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-1,\n.mdc-layout-grid__cell--span-1-desktop {\n width: auto;\n grid-column-end: span 1;\n }\n }\n\n .mdc-layout-grid__cell--span-2,\n.mdc-layout-grid__cell--span-2-desktop {\n width: calc(16.6666666667% - 24px);\n width: calc(16.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-2,\n.mdc-layout-grid__cell--span-2-desktop {\n width: auto;\n grid-column-end: span 2;\n }\n }\n\n .mdc-layout-grid__cell--span-3,\n.mdc-layout-grid__cell--span-3-desktop {\n width: calc(25% - 24px);\n width: calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-3,\n.mdc-layout-grid__cell--span-3-desktop {\n width: auto;\n grid-column-end: span 3;\n }\n }\n\n .mdc-layout-grid__cell--span-4,\n.mdc-layout-grid__cell--span-4-desktop {\n width: calc(33.3333333333% - 24px);\n width: calc(33.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-4,\n.mdc-layout-grid__cell--span-4-desktop {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-5,\n.mdc-layout-grid__cell--span-5-desktop {\n width: calc(41.6666666667% - 24px);\n width: calc(41.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-5,\n.mdc-layout-grid__cell--span-5-desktop {\n width: auto;\n grid-column-end: span 5;\n }\n }\n\n .mdc-layout-grid__cell--span-6,\n.mdc-layout-grid__cell--span-6-desktop {\n width: calc(50% - 24px);\n width: calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-6,\n.mdc-layout-grid__cell--span-6-desktop {\n width: auto;\n grid-column-end: span 6;\n }\n }\n\n .mdc-layout-grid__cell--span-7,\n.mdc-layout-grid__cell--span-7-desktop {\n width: calc(58.3333333333% - 24px);\n width: calc(58.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-7,\n.mdc-layout-grid__cell--span-7-desktop {\n width: auto;\n grid-column-end: span 7;\n }\n }\n\n .mdc-layout-grid__cell--span-8,\n.mdc-layout-grid__cell--span-8-desktop {\n width: calc(66.6666666667% - 24px);\n width: calc(66.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-8,\n.mdc-layout-grid__cell--span-8-desktop {\n width: auto;\n grid-column-end: span 8;\n }\n }\n\n .mdc-layout-grid__cell--span-9,\n.mdc-layout-grid__cell--span-9-desktop {\n width: calc(75% - 24px);\n width: calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-9,\n.mdc-layout-grid__cell--span-9-desktop {\n width: auto;\n grid-column-end: span 9;\n }\n }\n\n .mdc-layout-grid__cell--span-10,\n.mdc-layout-grid__cell--span-10-desktop {\n width: calc(83.3333333333% - 24px);\n width: calc(83.3333333333% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-10,\n.mdc-layout-grid__cell--span-10-desktop {\n width: auto;\n grid-column-end: span 10;\n }\n }\n\n .mdc-layout-grid__cell--span-11,\n.mdc-layout-grid__cell--span-11-desktop {\n width: calc(91.6666666667% - 24px);\n width: calc(91.6666666667% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-11,\n.mdc-layout-grid__cell--span-11-desktop {\n width: auto;\n grid-column-end: span 11;\n }\n }\n\n .mdc-layout-grid__cell--span-12,\n.mdc-layout-grid__cell--span-12-desktop {\n width: calc(100% - 24px);\n width: calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-12,\n.mdc-layout-grid__cell--span-12-desktop {\n width: auto;\n grid-column-end: span 12;\n }\n }\n}\n@media (min-width: 600px) and (max-width: 839px) {\n .mdc-layout-grid__cell {\n width: calc(50% - 16px);\n width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));\n box-sizing: border-box;\n margin: 8px;\n margin: calc(var(--mdc-layout-grid-gutter-tablet, 16px) / 2);\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell {\n width: auto;\n grid-column-end: span 4;\n }\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell {\n margin: 0;\n }\n }\n .mdc-layout-grid__cell--span-1,\n.mdc-layout-grid__cell--span-1-tablet {\n width: calc(12.5% - 16px);\n width: calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-1,\n.mdc-layout-grid__cell--span-1-tablet {\n width: auto;\n grid-column-end: span 1;\n }\n }\n\n .mdc-layout-grid__cell--span-2,\n.mdc-layout-grid__cell--span-2-tablet {\n width: calc(25% - 16px);\n width: calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-2,\n.mdc-layout-grid__cell--span-2-tablet {\n width: auto;\n grid-column-end: span 2;\n }\n }\n\n .mdc-layout-grid__cell--span-3,\n.mdc-layout-grid__cell--span-3-tablet {\n width: calc(37.5% - 16px);\n width: calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-3,\n.mdc-layout-grid__cell--span-3-tablet {\n width: auto;\n grid-column-end: span 3;\n }\n }\n\n .mdc-layout-grid__cell--span-4,\n.mdc-layout-grid__cell--span-4-tablet {\n width: calc(50% - 16px);\n width: calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-4,\n.mdc-layout-grid__cell--span-4-tablet {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-5,\n.mdc-layout-grid__cell--span-5-tablet {\n width: calc(62.5% - 16px);\n width: calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-5,\n.mdc-layout-grid__cell--span-5-tablet {\n width: auto;\n grid-column-end: span 5;\n }\n }\n\n .mdc-layout-grid__cell--span-6,\n.mdc-layout-grid__cell--span-6-tablet {\n width: calc(75% - 16px);\n width: calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-6,\n.mdc-layout-grid__cell--span-6-tablet {\n width: auto;\n grid-column-end: span 6;\n }\n }\n\n .mdc-layout-grid__cell--span-7,\n.mdc-layout-grid__cell--span-7-tablet {\n width: calc(87.5% - 16px);\n width: calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-7,\n.mdc-layout-grid__cell--span-7-tablet {\n width: auto;\n grid-column-end: span 7;\n }\n }\n\n .mdc-layout-grid__cell--span-8,\n.mdc-layout-grid__cell--span-8-tablet {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-8,\n.mdc-layout-grid__cell--span-8-tablet {\n width: auto;\n grid-column-end: span 8;\n }\n }\n\n .mdc-layout-grid__cell--span-9,\n.mdc-layout-grid__cell--span-9-tablet {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-9,\n.mdc-layout-grid__cell--span-9-tablet {\n width: auto;\n grid-column-end: span 8;\n }\n }\n\n .mdc-layout-grid__cell--span-10,\n.mdc-layout-grid__cell--span-10-tablet {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-10,\n.mdc-layout-grid__cell--span-10-tablet {\n width: auto;\n grid-column-end: span 8;\n }\n }\n\n .mdc-layout-grid__cell--span-11,\n.mdc-layout-grid__cell--span-11-tablet {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-11,\n.mdc-layout-grid__cell--span-11-tablet {\n width: auto;\n grid-column-end: span 8;\n }\n }\n\n .mdc-layout-grid__cell--span-12,\n.mdc-layout-grid__cell--span-12-tablet {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-12,\n.mdc-layout-grid__cell--span-12-tablet {\n width: auto;\n grid-column-end: span 8;\n }\n }\n}\n@media (max-width: 599px) {\n .mdc-layout-grid__cell {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n box-sizing: border-box;\n margin: 8px;\n margin: calc(var(--mdc-layout-grid-gutter-phone, 16px) / 2);\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell {\n width: auto;\n grid-column-end: span 4;\n }\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell {\n margin: 0;\n }\n }\n .mdc-layout-grid__cell--span-1,\n.mdc-layout-grid__cell--span-1-phone {\n width: calc(25% - 16px);\n width: calc(25% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-1,\n.mdc-layout-grid__cell--span-1-phone {\n width: auto;\n grid-column-end: span 1;\n }\n }\n\n .mdc-layout-grid__cell--span-2,\n.mdc-layout-grid__cell--span-2-phone {\n width: calc(50% - 16px);\n width: calc(50% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-2,\n.mdc-layout-grid__cell--span-2-phone {\n width: auto;\n grid-column-end: span 2;\n }\n }\n\n .mdc-layout-grid__cell--span-3,\n.mdc-layout-grid__cell--span-3-phone {\n width: calc(75% - 16px);\n width: calc(75% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-3,\n.mdc-layout-grid__cell--span-3-phone {\n width: auto;\n grid-column-end: span 3;\n }\n }\n\n .mdc-layout-grid__cell--span-4,\n.mdc-layout-grid__cell--span-4-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-4,\n.mdc-layout-grid__cell--span-4-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-5,\n.mdc-layout-grid__cell--span-5-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-5,\n.mdc-layout-grid__cell--span-5-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-6,\n.mdc-layout-grid__cell--span-6-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-6,\n.mdc-layout-grid__cell--span-6-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-7,\n.mdc-layout-grid__cell--span-7-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-7,\n.mdc-layout-grid__cell--span-7-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-8,\n.mdc-layout-grid__cell--span-8-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-8,\n.mdc-layout-grid__cell--span-8-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-9,\n.mdc-layout-grid__cell--span-9-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-9,\n.mdc-layout-grid__cell--span-9-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-10,\n.mdc-layout-grid__cell--span-10-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-10,\n.mdc-layout-grid__cell--span-10-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-11,\n.mdc-layout-grid__cell--span-11-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-11,\n.mdc-layout-grid__cell--span-11-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n\n .mdc-layout-grid__cell--span-12,\n.mdc-layout-grid__cell--span-12-phone {\n width: calc(100% - 16px);\n width: calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));\n }\n @supports (display: grid) {\n .mdc-layout-grid__cell--span-12,\n.mdc-layout-grid__cell--span-12-phone {\n width: auto;\n grid-column-end: span 4;\n }\n }\n}\n.mdc-layout-grid__cell--order-1 {\n order: 1;\n}\n.mdc-layout-grid__cell--order-2 {\n order: 2;\n}\n.mdc-layout-grid__cell--order-3 {\n order: 3;\n}\n.mdc-layout-grid__cell--order-4 {\n order: 4;\n}\n.mdc-layout-grid__cell--order-5 {\n order: 5;\n}\n.mdc-layout-grid__cell--order-6 {\n order: 6;\n}\n.mdc-layout-grid__cell--order-7 {\n order: 7;\n}\n.mdc-layout-grid__cell--order-8 {\n order: 8;\n}\n.mdc-layout-grid__cell--order-9 {\n order: 9;\n}\n.mdc-layout-grid__cell--order-10 {\n order: 10;\n}\n.mdc-layout-grid__cell--order-11 {\n order: 11;\n}\n.mdc-layout-grid__cell--order-12 {\n order: 12;\n}\n.mdc-layout-grid__cell--align-top {\n align-self: flex-start;\n}\n@supports (display: grid) {\n .mdc-layout-grid__cell--align-top {\n align-self: start;\n }\n}\n.mdc-layout-grid__cell--align-middle {\n align-self: center;\n}\n.mdc-layout-grid__cell--align-bottom {\n align-self: flex-end;\n}\n@supports (display: grid) {\n .mdc-layout-grid__cell--align-bottom {\n align-self: end;\n }\n}\n\n@media (min-width: 840px) {\n .mdc-layout-grid--fixed-column-width {\n width: 1176px;\n width: calc(\n var(--mdc-layout-grid-column-width-desktop, 72px) * 12 +\n var(--mdc-layout-grid-gutter-desktop, 24px) * 11 +\n var(--mdc-layout-grid-margin-desktop, 24px) * 2\n );\n }\n}\n@media (min-width: 600px) and (max-width: 839px) {\n .mdc-layout-grid--fixed-column-width {\n width: 720px;\n width: calc(\n var(--mdc-layout-grid-column-width-tablet, 72px) * 8 +\n var(--mdc-layout-grid-gutter-tablet, 16px) * 7 +\n var(--mdc-layout-grid-margin-tablet, 16px) * 2\n );\n }\n}\n@media (max-width: 599px) {\n .mdc-layout-grid--fixed-column-width {\n width: 368px;\n width: calc(\n var(--mdc-layout-grid-column-width-phone, 72px) * 4 +\n var(--mdc-layout-grid-gutter-phone, 16px) * 3 +\n var(--mdc-layout-grid-margin-phone, 16px) * 2\n );\n }\n}\n\n.mdc-layout-grid--align-left {\n margin-right: auto;\n margin-left: 0;\n}\n\n.mdc-layout-grid--align-right {\n margin-right: 0;\n margin-left: auto;\n}","// Copyright 2017 Google Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n// THE SOFTWARE.\n\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use './variables';\n\n// returns the lower grid boundary or null if the smallest grid is selected\n@function breakpoint-min($size) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n $min: map.get(variables.$breakpoints, $size);\n\n @return if($min > 0, $min, null);\n}\n\n// returns the upper grid boundary or null if the largest grid is selected\n@function breakpoint-max($size) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n $names: map.keys(variables.$columns);\n $n: list.index($names, $size);\n $prev: if($n > 1, list.nth($names, $n - 1), null);\n\n @return if($prev, (breakpoint-min($prev) - 1px), null);\n}\n\n// Private mixins, meant for internal use.\n@mixin media-query_($size) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n $min: breakpoint-min($size);\n $max: breakpoint-max($size);\n\n @if $min == null and $max != null {\n // Phone\n @media (max-width: $max) {\n @content;\n }\n } @else if $min != null and $max != null {\n // Tablet\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $min != null and $max == null {\n // Desktop\n @media (min-width: $min) {\n @content;\n }\n } @else {\n // Fallback - no breakpoints defined\n @content;\n }\n}\n\n@mixin cell-span_($size, $span, $gutter) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n $percent: math.percentage(\n math.div($span, map.get(variables.$columns, $size))\n );\n\n @if $percent > 100% {\n $percent: 100%;\n }\n\n width: calc(#{$percent} - #{$gutter});\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));\n\n @supports (display: grid) {\n width: auto;\n grid-column-end: span math.min($span, map.get(variables.$columns, $size));\n }\n}\n\n// Public mixins, meant for developer usage.\n@mixin layout-grid($size, $margin, $max-width: null) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n box-sizing: border-box;\n margin: 0 auto;\n padding: $margin;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n padding: var(--mdc-layout-grid-margin-#{$size}, #{$margin});\n\n @if $max-width {\n max-width: $max-width;\n }\n}\n\n@mixin inner($size, $margin, $gutter) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n display: flex;\n flex-flow: row wrap;\n align-items: stretch;\n margin: math.div(-$gutter, 2);\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2 * -1);\n\n @supports (display: grid) {\n display: grid;\n margin: 0;\n grid-gap: $gutter;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n grid-gap: var(--mdc-layout-grid-gutter-#{$size}, $gutter);\n grid-template-columns: repeat(\n map.get(variables.$columns, $size),\n minmax(0, 1fr)\n );\n }\n}\n\n@mixin cell($size, $default-span, $gutter) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n @include cell-span_($size, $default-span, $gutter);\n\n box-sizing: border-box;\n margin: math.div($gutter, 2);\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n margin: calc(var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) / 2);\n\n @supports (display: grid) {\n margin: 0;\n }\n}\n\n@mixin cell-order($order) {\n order: $order;\n}\n\n@mixin cell-align($position) {\n @if $position == 'top' {\n align-self: flex-start;\n\n @supports (display: grid) {\n align-self: start;\n }\n }\n\n @if $position == 'middle' {\n align-self: center;\n }\n\n @if $position == 'bottom' {\n align-self: flex-end;\n\n @supports (display: grid) {\n align-self: end;\n }\n }\n\n @if $position == 'stretch' {\n align-self: stretch;\n }\n}\n\n@mixin fixed-column-width($size, $margin, $gutter, $column-width) {\n @if not map.has-key(variables.$columns, $size) {\n @error \"Invalid style specified! Choose one of #{map.keys(variables.$columns)}\";\n }\n\n $columnCount: map.get(variables.$columns, $size);\n $gutter-number: $columnCount - 1;\n $margin-number: 2;\n\n width: $column-width * $columnCount + $gutter * $gutter-number + $margin *\n $margin-number;\n // stylelint-disable-next-line declaration-block-no-duplicate-properties\n width: calc(\n var(--mdc-layout-grid-column-width-#{$size}, #{$column-width}) * #{$columnCount} +\n var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}) * #{$gutter-number} +\n var(--mdc-layout-grid-margin-#{$size}, #{$margin}) * #{$margin-number}\n );\n}\n"],"sourceRoot":""}