grid small-X fix
This commit is contained in:
parent
feb666b6b2
commit
d7b3265494
5 changed files with 5 additions and 5 deletions
|
@ -1 +1 @@
|
|||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:576px -1){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
|
@ -60,7 +60,7 @@ $extra-large: 1200px !default;
|
|||
/* intermediate breakpoint */
|
||||
// -small-X suffix means "X columns when < small screen"
|
||||
// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< small) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($small -1)) {
|
||||
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4{
|
||||
[class*="grid-"][class*="-small-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
|
|
|
@ -2654,7 +2654,7 @@ button:focus {
|
|||
}
|
||||
|
||||
/* intermediate breakpoint */
|
||||
@media (min-width: 480px) and (max-width: 576px -1) {
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
[class*="grid-"][class*="-small-1"] {
|
||||
-ms-grid-columns: (1fr)[1];
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -49,7 +49,7 @@
|
|||
/* intermediate breakpoint */
|
||||
// -small-X suffix means "X columns when < small screen"
|
||||
// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< small) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($small -1)) {
|
||||
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4{
|
||||
[class*="grid-"][class*="-small-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
|
|
Loading…
Reference in a new issue