@uqds/grid
Version:
1 lines • 11.9 kB
CSS
.uq-grid{box-sizing:border-box}.uq-grid *,.uq-grid *::before,.uq-grid *::after{box-sizing:border-box}.uq-grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:flex-start;margin-top:-0.5rem;margin-bottom:-0.5rem}@media(min-width: 37.5rem){.uq-grid{margin-top:-0.75rem;margin-bottom:-0.75rem}}@media(min-width: 75rem){.uq-grid{margin-top:-1rem;margin-bottom:-1rem}}.uq-grid__col{padding-left:.5rem;padding-right:.5rem;padding-top:.5rem;padding-bottom:.5rem;flex:none}@media(min-width: 37.5rem){.uq-grid__col{padding-left:.75rem;padding-right:.75rem}}@media(min-width: 75rem){.uq-grid__col{padding-left:1rem;padding-right:1rem}}@media(min-width: 37.5rem){.uq-grid__col{padding-top:.75rem;padding-bottom:.75rem}}@media(min-width: 75rem){.uq-grid__col{padding-top:1rem;padding-bottom:1rem}}@supports(display: grid){.uq-grid{display:grid;grid-template-columns:repeat(24, 1fr);grid-gap:1rem 0;margin-top:0;margin-bottom:0}@media(min-width: 37.5rem){.uq-grid{grid-row-gap:1.5rem;margin-top:0;margin-bottom:0}}@media(min-width: 75rem){.uq-grid{grid-row-gap:2rem;margin-top:0;margin-bottom:0}}.uq-grid__col{padding-top:0;padding-bottom:0}@media(min-width: 37.5rem){.uq-grid__col{padding-top:0;padding-bottom:0}}@media(min-width: 75rem){.uq-grid__col{padding-top:0;padding-bottom:0}}}.uq-grid:not(.uq-grid--full-width){margin-left:1rem;margin-right:1rem}@media(min-width: 32.5rem){.uq-grid:not(.uq-grid--full-width){margin-left:auto;margin-right:auto;max-width:30.5rem}}@media(min-width: 37.5rem){.uq-grid:not(.uq-grid--full-width){margin-left:3.25rem;margin-right:3.25rem;max-width:none}}@media(min-width: 64.25rem){.uq-grid:not(.uq-grid--full-width){margin-left:auto;margin-right:auto;max-width:57.75rem}}@media(min-width: 75rem){.uq-grid:not(.uq-grid--full-width){margin-left:8.375rem;margin-right:8.375rem;max-width:none}}@media(min-width: 90rem){.uq-grid:not(.uq-grid--full-width){margin-left:auto;margin-right:auto;max-width:73.25rem}}.uq-grid--full-width{margin-left:-0.5rem;margin-right:-0.5rem;max-width:none}@media(min-width: 37.5rem){.uq-grid--full-width{margin-left:-0.75rem;margin-right:-0.75rem}}@media(min-width: 75rem){.uq-grid--full-width{margin-left:-1rem;margin-right:-1rem}}.uq-grid .uq-grid{margin-left:-0.5rem;margin-right:-0.5rem;max-width:none}@media(min-width: 37.5rem){.uq-grid .uq-grid{margin-left:-0.75rem;margin-right:-0.75rem}}@media(min-width: 75rem){.uq-grid .uq-grid{margin-left:-1rem;margin-right:-1rem}}.uq-grid__col--xl-1{width:8.3333333333%}.uq-grid__col--xl-2{width:16.6666666667%}.uq-grid__col--xl-3,.uq-grid--quarters>.uq-grid__col{width:25%}.uq-grid__col--xl-4,.uq-grid--thirds>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even){width:33.3333333333%}.uq-grid__col--xl-5{width:41.6666666667%}.uq-grid__col--xl-6{width:50%}.uq-grid__col--xl-7,.uq-grid--golden>.uq-grid__col:nth-child(odd){width:58.3333333333%}.uq-grid__col--xl-8{width:66.6666666667%}.uq-grid__col--xl-9{width:75%}.uq-grid__col--xl-10{width:83.3333333333%}.uq-grid__col--xl-11{width:91.6666666667%}.uq-grid__col--xl-12{width:100%}@supports(display: grid){.uq-grid__col--xl-1{grid-column:auto/span 2;width:auto}.uq-grid__col--xl-2{grid-column:auto/span 4;width:auto}.uq-grid__col--xl-3,.uq-grid--quarters>.uq-grid__col{grid-column:auto/span 6;width:auto}.uq-grid__col--xl-4,.uq-grid--thirds>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even){grid-column:auto/span 8;width:auto}.uq-grid__col--xl-5{grid-column:auto/span 10;width:auto}.uq-grid__col--xl-6{grid-column:auto/span 12;width:auto}.uq-grid__col--xl-7,.uq-grid--golden>.uq-grid__col:nth-child(odd){grid-column:auto/span 14;width:auto}.uq-grid__col--xl-8{grid-column:auto/span 16;width:auto}.uq-grid__col--xl-9{grid-column:auto/span 18;width:auto}.uq-grid__col--xl-10{grid-column:auto/span 20;width:auto}.uq-grid__col--xl-11{grid-column:auto/span 22;width:auto}.uq-grid__col--xl-12{grid-column:auto/span 24;width:auto}}.uq-grid__col--md-1{width:12.5%}.uq-grid__col--md-2,.uq-grid--golden>.uq-grid__col:nth-child(even){width:25%}.uq-grid__col--md-3{width:37.5%}.uq-grid__col--md-4,.uq-grid--quarters>.uq-grid__col,.uq-grid--thirds>.uq-grid__col,.uq-grid--halves>.uq-grid__col{width:50%}.uq-grid__col--md-5,.uq-grid--golden>.uq-grid__col:nth-child(odd){width:62.5%}.uq-grid__col--md-6{width:75%}.uq-grid__col--md-7{width:87.5%}.uq-grid__col--md-8{width:100%}@supports(display: grid){.uq-grid__col--md-1{grid-column:auto/span 3;width:auto}.uq-grid__col--md-2,.uq-grid--golden>.uq-grid__col:nth-child(even){grid-column:auto/span 6;width:auto}.uq-grid__col--md-3{grid-column:auto/span 9;width:auto}.uq-grid__col--md-4,.uq-grid--quarters>.uq-grid__col,.uq-grid--thirds>.uq-grid__col,.uq-grid--halves>.uq-grid__col{grid-column:auto/span 12;width:auto}.uq-grid__col--md-5,.uq-grid--golden>.uq-grid__col:nth-child(odd){grid-column:auto/span 15;width:auto}.uq-grid__col--md-6{grid-column:auto/span 18;width:auto}.uq-grid__col--md-7{grid-column:auto/span 21;width:auto}.uq-grid__col--md-8{grid-column:auto/span 24;width:auto}}.uq-grid__col--1{width:16.6666666667%}.uq-grid__col--2{width:33.3333333333%}.uq-grid__col--3{width:50%}.uq-grid__col--4{width:66.6666666667%}.uq-grid__col--5{width:83.3333333333%}.uq-grid__col--6,.uq-grid--quarters>.uq-grid__col,.uq-grid--thirds>.uq-grid__col,.uq-grid--halves>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even),.uq-grid--golden>.uq-grid__col:nth-child(odd){width:100%}@supports(display: grid){.uq-grid__col--1{grid-column:auto/span 4;width:auto}.uq-grid__col--2{grid-column:auto/span 8;width:auto}.uq-grid__col--3{grid-column:auto/span 12;width:auto}.uq-grid__col--4{grid-column:auto/span 16;width:auto}.uq-grid__col--5{grid-column:auto/span 20;width:auto}.uq-grid__col--6,.uq-grid--quarters>.uq-grid__col,.uq-grid--thirds>.uq-grid__col,.uq-grid--halves>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even),.uq-grid--golden>.uq-grid__col:nth-child(odd){grid-column:auto/span 24;width:auto}}@media(min-width: 37.5rem){.uq-grid__col--xl-1{width:8.3333333333%}.uq-grid__col--xl-2{width:16.6666666667%}.uq-grid__col--xl-3,.uq-grid--quarters>.uq-grid__col{width:25%}.uq-grid__col--xl-4,.uq-grid--thirds>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even){width:33.3333333333%}.uq-grid__col--xl-5{width:41.6666666667%}.uq-grid__col--xl-6{width:50%}.uq-grid__col--xl-7,.uq-grid--golden>.uq-grid__col:nth-child(odd){width:58.3333333333%}.uq-grid__col--xl-8{width:66.6666666667%}.uq-grid__col--xl-9{width:75%}.uq-grid__col--xl-10{width:83.3333333333%}.uq-grid__col--xl-11{width:91.6666666667%}.uq-grid__col--xl-12{width:100%}@supports(display: grid){.uq-grid__col--xl-1{grid-column:auto/span 2;width:auto}.uq-grid__col--xl-2{grid-column:auto/span 4;width:auto}.uq-grid__col--xl-3,.uq-grid--quarters>.uq-grid__col{grid-column:auto/span 6;width:auto}.uq-grid__col--xl-4,.uq-grid--thirds>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even){grid-column:auto/span 8;width:auto}.uq-grid__col--xl-5{grid-column:auto/span 10;width:auto}.uq-grid__col--xl-6{grid-column:auto/span 12;width:auto}.uq-grid__col--xl-7,.uq-grid--golden>.uq-grid__col:nth-child(odd){grid-column:auto/span 14;width:auto}.uq-grid__col--xl-8{grid-column:auto/span 16;width:auto}.uq-grid__col--xl-9{grid-column:auto/span 18;width:auto}.uq-grid__col--xl-10{grid-column:auto/span 20;width:auto}.uq-grid__col--xl-11{grid-column:auto/span 22;width:auto}.uq-grid__col--xl-12{grid-column:auto/span 24;width:auto}}.uq-grid__col--md-1{width:12.5%}.uq-grid__col--md-2,.uq-grid--golden>.uq-grid__col:nth-child(even){width:25%}.uq-grid__col--md-3{width:37.5%}.uq-grid__col--md-4,.uq-grid--quarters>.uq-grid__col,.uq-grid--thirds>.uq-grid__col,.uq-grid--halves>.uq-grid__col{width:50%}.uq-grid__col--md-5,.uq-grid--golden>.uq-grid__col:nth-child(odd){width:62.5%}.uq-grid__col--md-6{width:75%}.uq-grid__col--md-7{width:87.5%}.uq-grid__col--md-8{width:100%}@supports(display: grid){.uq-grid__col--md-1{grid-column:auto/span 3;width:auto}.uq-grid__col--md-2,.uq-grid--golden>.uq-grid__col:nth-child(even){grid-column:auto/span 6;width:auto}.uq-grid__col--md-3{grid-column:auto/span 9;width:auto}.uq-grid__col--md-4,.uq-grid--quarters>.uq-grid__col,.uq-grid--thirds>.uq-grid__col,.uq-grid--halves>.uq-grid__col{grid-column:auto/span 12;width:auto}.uq-grid__col--md-5,.uq-grid--golden>.uq-grid__col:nth-child(odd){grid-column:auto/span 15;width:auto}.uq-grid__col--md-6{grid-column:auto/span 18;width:auto}.uq-grid__col--md-7{grid-column:auto/span 21;width:auto}.uq-grid__col--md-8{grid-column:auto/span 24;width:auto}}}@media(min-width: 75rem){.uq-grid__col--xl-1{width:8.3333333333%}.uq-grid__col--xl-2{width:16.6666666667%}.uq-grid__col--xl-3,.uq-grid--quarters>.uq-grid__col{width:25%}.uq-grid__col--xl-4,.uq-grid--thirds>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even){width:33.3333333333%}.uq-grid__col--xl-5{width:41.6666666667%}.uq-grid__col--xl-6{width:50%}.uq-grid__col--xl-7,.uq-grid--golden>.uq-grid__col:nth-child(odd){width:58.3333333333%}.uq-grid__col--xl-8{width:66.6666666667%}.uq-grid__col--xl-9{width:75%}.uq-grid__col--xl-10{width:83.3333333333%}.uq-grid__col--xl-11{width:91.6666666667%}.uq-grid__col--xl-12{width:100%}@supports(display: grid){.uq-grid__col--xl-1{grid-column:auto/span 2;width:auto}.uq-grid__col--xl-2{grid-column:auto/span 4;width:auto}.uq-grid__col--xl-3,.uq-grid--quarters>.uq-grid__col{grid-column:auto/span 6;width:auto}.uq-grid__col--xl-4,.uq-grid--thirds>.uq-grid__col,.uq-grid--golden>.uq-grid__col:nth-child(even){grid-column:auto/span 8;width:auto}.uq-grid__col--xl-5{grid-column:auto/span 10;width:auto}.uq-grid__col--xl-6{grid-column:auto/span 12;width:auto}.uq-grid__col--xl-7,.uq-grid--golden>.uq-grid__col:nth-child(odd){grid-column:auto/span 14;width:auto}.uq-grid__col--xl-8{grid-column:auto/span 16;width:auto}.uq-grid__col--xl-9{grid-column:auto/span 18;width:auto}.uq-grid__col--xl-10{grid-column:auto/span 20;width:auto}.uq-grid__col--xl-11{grid-column:auto/span 22;width:auto}.uq-grid__col--xl-12{grid-column:auto/span 24;width:auto}}}.uq-grid--flexible>.uq-grid__col{flex:1 0 15.625rem;max-width:100%;width:auto}@supports(display: grid){.uq-grid--flexible{grid-template-columns:repeat(auto-fit, minmax(15.625rem, 1fr))}}@media(min-width: 37.5rem){.uq-grid--golden>.uq-grid__col:nth-child(even){margin-left:12.5%}@supports(display: grid){.uq-grid--golden>.uq-grid__col:nth-child(even){margin-left:0;grid-column-start:18}}}@media(min-width: 75rem){.uq-grid--golden>.uq-grid__col:nth-child(even){margin-left:8.3333333333%}@supports(display: grid){.uq-grid--golden>.uq-grid__col:nth-child(even){margin-left:0;grid-column-start:18}}}@media(max-width: 63.9375rem){.uq-grid--scroll-small{display:flex;flex-wrap:nowrap;overflow:auto}.uq-grid--scroll-small .uq-grid__col{flex:1 0 18.75rem;margin-right:1.5rem}}.uq-layout-container{margin-left:1rem;margin-right:1rem;padding-left:.5rem;padding-right:.5rem}@media(min-width: 32.5rem){.uq-layout-container{margin-left:auto;margin-right:auto;max-width:30.5rem}}@media(min-width: 37.5rem){.uq-layout-container{margin-left:3.25rem;margin-right:3.25rem;max-width:none}}@media(min-width: 64.25rem){.uq-layout-container{margin-left:auto;margin-right:auto;max-width:57.75rem}}@media(min-width: 75rem){.uq-layout-container{margin-left:8.375rem;margin-right:8.375rem;max-width:none}}@media(min-width: 90rem){.uq-layout-container{margin-left:auto;margin-right:auto;max-width:73.25rem}}@media(min-width: 37.5rem){.uq-layout-container{padding-left:.75rem;padding-right:.75rem}}@media(min-width: 75rem){.uq-layout-container{padding-left:1rem;padding-right:1rem}}.uq-layout-container .uq-grid{margin-left:-0.5rem;margin-right:-0.5rem;max-width:none}@media(min-width: 37.5rem){.uq-layout-container .uq-grid{margin-left:-0.75rem;margin-right:-0.75rem}}@media(min-width: 75rem){.uq-layout-container .uq-grid{margin-left:-1rem;margin-right:-1rem}}