ciser/src/_max-widths.css

Functional CSS, help quickly build and design new UI without writing css.

/*

   MAX WIDTHS
   Docs: http://tachyons.io/docs/layout/max-widths/

   Base:
     mw = max-width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale
     6 = 6st step in width scale
     7 = 7nd step in width scale
     8 = 8rd step in width scale
     9 = 9th step in width scale

     -100 = literal value 100%

     -none  = string value none


   Media Query Extensions:
     -ns = not-small
     -m  = medium       -ml = mobile landscape
     -l  = large

*/

/* Max Width Scale */

.mw1  {  max-width: 1rem; }
.mw1s  {  max-width: 1.5rem; }
.mw2  {  max-width: 2rem; }
.mw2s  {  max-width: 3rem; }
.mw3  {  max-width: 4rem; }
.mw3s  {  max-width: 6rem; }
.mw4  {  max-width: 8rem; }
.mw4s  {  max-width: 12rem; }
.mw5  {  max-width: 16rem; }
.mw5s  {  max-width: 24rem; }
.mw6  {  max-width: 32rem; }
.mw6s  {  max-width: 40rem; }
.mw7  {  max-width: 48rem; }
.mw7s  {  max-width: 56rem; }
.mw8  {  max-width: 64rem; }
.mw8s  {  max-width: 80rem; }
.mw9  {  max-width: 96rem; }

/* Max Width String Properties */

.mw-none { max-width: none; }

@media screen and (min-width: 30em) {
  .mw1-ns  {  max-width: 1rem; }
  .mw1s-ns  {  max-width: 1.5rem; }
  .mw2-ns  {  max-width: 2rem; }
  .mw2s-ns  {  max-width: 3rem; }
  .mw3-ns  {  max-width: 4rem; }
  .mw3s-ns  {  max-width: 6rem; }
  .mw4-ns  {  max-width: 8rem; }
  .mw4s-ns  {  max-width: 12rem; }
  .mw5-ns  {  max-width: 16rem; }
  .mw5s-ns  {  max-width: 24rem; }
  .mw6-ns  {  max-width: 32rem; }
  .mw6s-ns  {  max-width: 40rem; }
  .mw7-ns  {  max-width: 48rem; }
  .mw7s-ns  {  max-width: 56rem; }
  .mw8-ns  {  max-width: 64rem; }
  .mw8s-ns  {  max-width: 80rem; }
  .mw9-ns  {  max-width: 96rem; }

  .mw-none-ns { max-width: none; }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .mw1-m  {  max-width: 1rem; }
  .mw1s-m  {  max-width: 1.5rem; }
  .mw2-m  {  max-width: 2rem; }
  .mw2s-m  {  max-width: 3rem; }
  .mw3-m  {  max-width: 4rem; }
  .mw3s-m  {  max-width: 6rem; }
  .mw4-m  {  max-width: 8rem; }
  .mw4s-m  {  max-width: 12rem; }
  .mw5-m  {  max-width: 16rem; }
  .mw5s-m  {  max-width: 24rem; }
  .mw6-m  {  max-width: 32rem; }
  .mw6s-m  {  max-width: 40rem; }
  .mw7-m  {  max-width: 48rem; }
  .mw7s-m  {  max-width: 56rem; }
  .mw8-m  {  max-width: 64rem; }
  .mw8s-m  {  max-width: 80rem; }
  .mw9-m  {  max-width: 96rem; }

  .mw-none-m { max-width: none; }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .mw1-ml  {  max-width: 1rem; }
  .mw1s-ml  {  max-width: 1.5rem; }
  .mw2-ml  {  max-width: 2rem; }
  .mw2s-ml  {  max-width: 3rem; }
  .mw3-ml  {  max-width: 4rem; }
  .mw3s-ml  {  max-width: 6rem; }
  .mw4-ml  {  max-width: 8rem; }
  .mw4s-ml  {  max-width: 12rem; }
  .mw5-ml  {  max-width: 16rem; }
  .mw5s-ml  {  max-width: 24rem; }
  .mw6-ml  {  max-width: 32rem; }
  .mw6s-ml  {  max-width: 40rem; }
  .mw7-ml  {  max-width: 48rem; }
  .mw7s-ml  {  max-width: 56rem; }
  .mw8-ml  {  max-width: 64rem; }
  .mw8s-ml  {  max-width: 80rem; }
  .mw9-ml  {  max-width: 96rem; }

  .mw-none-ml { max-width: none; }
}

@media screen and (min-width: 60em) {
  .mw1-l  {  max-width: 1rem; }
  .mw1s-l  {  max-width: 1.5rem; }
  .mw2-l  {  max-width: 2rem; }
  .mw2s-l  {  max-width: 3rem; }
  .mw3-l  {  max-width: 4rem; }
  .mw3s-l  {  max-width: 6rem; }
  .mw4-l  {  max-width: 8rem; }
  .mw4s-l  {  max-width: 12rem; }
  .mw5-l  {  max-width: 16rem; }
  .mw5s-l  {  max-width: 24rem; }
  .mw6-l  {  max-width: 32rem; }
  .mw6s-l  {  max-width: 40rem; }
  .mw7-l  {  max-width: 48rem; }
  .mw7s-l  {  max-width: 56rem; }
  .mw8-l  {  max-width: 64rem; }
  .mw8s-l  {  max-width: 80rem; }
  .mw9-l  {  max-width: 96rem; }

  .mw-none-l { max-width: none; }
}