ciser/src/_outlines.css

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

/*

   OUTLINES

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

*/

.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }

@media screen and (min-width: 30em) {
  .outline-ns { outline: 1px solid; }
  .outline-transparent-ns { outline: 1px solid transparent; }
  .outline-0-ns { outline: 0; }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .outline-m { outline: 1px solid; }
  .outline-transparent-m { outline: 1px solid transparent; }
  .outline-0-m { outline: 0; }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .outline-ml { outline: 1px solid; }
  .outline-transparent-ml { outline: 1px solid transparent; }
  .outline-0-ml { outline: 0; }
}

@media screen and (min-width: 60em) {
  .outline-l { outline: 1px solid; }
  .outline-transparent-l { outline: 1px solid transparent; }
  .outline-0-l { outline: 0; }
}