ciser/src/_utilities.css

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

/*

   UTILITIES

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

*/

/* Equivalent to .overflow-y-scroll */
.overflow-container {
  overflow-y: scroll;
}

.center {
  margin-right: auto;
  margin-left: auto;
}
.center-box {
  margin: 0 auto;
}
.mr-auto { margin-right: auto; }
.ml-auto { margin-left:  auto; }

@media screen and (min-width: 30em){
  .center-ns {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-ns {
    margin: 0 auto;
  }
  .mr-auto-ns { margin-right: auto; }
  .ml-auto-ns { margin-left:  auto; }
}

@media screen and (min-width: 30em) and (max-width: 60em){
  .center-m {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-m {
    margin: 0 auto;
  }
  .mr-auto-m { margin-right: auto; }
  .ml-auto-m { margin-left:  auto; }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .center-ml {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-ml {
    margin: 0 auto;
  }
  .mr-auto-ml { margin-right: auto; }
  .ml-auto-ml { margin-left:  auto; }
}

@media screen and (min-width: 60em){
  .center-l {
    margin-right: auto;
    margin-left: auto;
  }
  .center-box-l {
    margin: 0 auto;
  }
  .mr-auto-l { margin-right: auto; }
  .ml-auto-l { margin-left:  auto; }
}