cssrecipes-utils/lib/sizes/minXL.css

Some generic, semantic, responsives CSS utilities

@media (--r-minXL) {

  .r-minXL--1of12 {
    width: calc(100% * 1 / 12);
  }

  .r-minXL--1of11 {
    width: calc(100% * 1 / 11);
  }

  .r-minXL--1of10 {
    width: 10%;
  }

  .r-minXL--1of9 {
    width: calc(100% * 1 / 9);
  }

  .r-minXL--1of8 {
    width: 12.5%;
  }

  .r-minXL--1of7 {
    width: calc(100% * 1 / 7);
  }

  .r-minXL--1of6,
  .r-minXL--2of12 {
    width: calc(100% * 1 / 6);
  }

  .r-minXL--2of11 {
    width: calc(100% * 2 / 11);
  }

  .r-minXL--1of5,
  .r-minXL--2of10 {
    width: 20%;
  }

  .r-minXL--2of9 {
    width: calc(100% * 2 / 9);
  }

  .r-minXL--1of4,
  .r-minXL--2of8,
  .r-minXL--3of12 {
    width: 25%;
  }

  .r-minXL--3of11 {
    width: calc(100% * 3 / 11);
  }

  .r-minXL--2of7 {
    width: calc(100% * 2 / 7);
  }

  .r-minXL--3of10 {
    width: 30%;
  }

  .r-minXL--1of3,
  .r-minXL--2of6,
  .r-minXL--3of9,
  .r-minXL--4of12 {
    width: calc(100% * 1 / 3);
  }

  .r-minXL--4of11 {
    width: calc(100% * 4 / 11);
  }

  .r-minXL--3of8 {
    width: 37.5%;
  }

  .r-minXL--2of5,
  .r-minXL--4of10 {
    width: 40%;
  }

  .r-minXL--5of12 {
    width: calc(100% * 5 / 12);
  }

  .r-minXL--3of7 {
    width: calc(100% * 3 / 7);
  }

  .r-minXL--4of9 {
    width: calc(100% * 4 / 9);
  }

  .r-minXL--5of11 {
    width: calc(100% * 5 / 11);
  }

  .r-minXL--1of2,
  .r-minXL--2of4,
  .r-minXL--3of6,
  .r-minXL--4of8,
  .r-minXL--5of10,
  .r-minXL--6of12 {
    width: 50%;
  }

  .r-minXL--6of11 {
    width: calc(100% * 6 / 11 );
  }

  .r-minXL--5of9 {
    width: calc(100% * 5 / 9);
  }

  .r-minXL--4of7 {
    width: calc(100% * 4 / 7)
  }

  .r-minXL--7of12 {
    width: calc(100% * 7 / 12);
  }

  .r-minXL--3of5,
  .r-minXL--6of10 {
    width: 60%;
  }

  .r-minXL--7of11 {
    width: calc(100% * 7 / 11);
  }

  .r-minXL--5of8 {
    width: 62.5%;
  }

  .r-minXL--2of3,
  .r-minXL--4of6,
  .r-minXL--6of9,
  .r-minXL--8of12 {
    width: calc(100% * 2 / 3);
  }

  .r-minXL--7of10 {
    width: 70%;
  }

  .r-minXL--5of7 {
    width: calc(100% * 5 / 7);
  }

  .r-minXL--8of11 {
    width: calc(100% * 8 / 11);
  }

  .r-minXL--3of4,
  .r-minXL--6of8,
  .r-minXL--9of12 {
    width: 75%;
  }

  .r-minXL--7of9 {
    width: calc(100% * 7 / 9);
  }

  .r-minXL--4of5,
  .r-minXL--8of10 {
    width: 80%;
  }

  .r-minXL--9of11 {
    width: calc(100% * 9 / 11);
  }

  .r-minXL--5of6,
  .r-minXL--10of12 {
    width: calc(100% * 5 / 6);
  }

  .r-minXL--6of7 {
    width: calc(100% * 6 / 7);
  }

  .r-minXL--7of8 {
    width: 87.5%;
  }

  .r-minXL--8of9 {
    width: calc(100% * 8 / 9);
  }

  .r-minXL--9of10 {
    width: 90%;
  }

  .r-minXL--10of11 {
    width: calc(100% * 10 / 11);
  }

  .r-minXL--11of12 {
    width: calc(100% * 11 / 12);
  }

  .r-minXL--1of1,
  .r-minXL--2of2,
  .r-minXL--3of3,
  .r-minXL--4of4,
  .r-minXL--5of5,
  .r-minXL--6of6,
  .r-minXL--7of7,
  .r-minXL--8of8,
  .r-minXL--9of9,
  .r-minXL--10of10,
  .r-minXL--11of11,
  .r-minXL--12of12 {
    width: 100%;
  }

  .r-minXL--hidden {
    display: none;
  }

  .r-minXL--visible {
    display: inline-block;
  }

}