liser/src/modules/outlines.css

functional css help to optimizing design work and building responsive websites

.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;
  }
}