Css helpers

Positioning

Padding

.mg-pad[0-10] { padding: [0-10]rem; } .mg-pad-l[0-10] { padding-left: [0-10]rem; } .mg-pad-r[0-10] { padding-right: [0-10]rem; } .mg-pad-b[0-10] { padding-bottom: [0-10]rem; } .mg-pad-t[0-10] { padding-top: [0-10]rem; }

Marging

.mg-space[0-10] { margin: [0-10]rem; } .mg-space-l[0-10] { margin-left: [0-10]rem; } .mg-space-r[0-10] { margin-right: [0-10]rem; } .mg-space-b[0-10] { margin-bottom: [0-10]rem; } .mg-space-t[0-10] { margin-top: [0-10]rem; }

Sizing

width and height

.mg-w[0-10] { width: [0-10]rem; } .mg-h[0-10] { height: [0-10]rem; } .mg-min-w[0-10] { min-witdh: [0-10]rem; } .mg-min-h[0-10] { min-height: [0-10]rem; } .mg-max-w[0-10] { max-width: [0-10]rem; } .mg-max-h[0-10] { max-height: [0-10]rem; }
.mg-w[0-10]vh { width: [0-10]vh; } .mg-h[0-10]vh { height: [0-10]vh; } .mg-min-w[0-10]vh { min-witdh: [0-10]vh; } .mg-min-h[0-10]vh { min-height: [0-10]vh; } .mg-max-w[0-10]vh { max-width: [0-10]vh; } .mg-max-h[0-10]vh { max-height: [0-10]vh; }

Visibility

.mg-block { display: block; } .mg-inline-block { display: inline-block; } .mg-inline { display: inline; } .mg-none { display: none; } .mg-show { visibility: visible; opacity:1; } .mg-clearfix { transform: scale(1); } .mg-shadow { box-shadow: $control-shadow; } .mg-overflow-auto { overflow: auto; } .mg-overflow-x-auto { overflow-x: auto; } .mg-overflow-y-auto { overflow-y: auto; } .mg-overflow-x-hidden { overflow-x: hidden; } .mg-overflow-y-hidden { overflow-y: hidden; } .mg-visible { visibility: visible; } .mg-hidden { visibility: hidden;} .mg-rounded[0-10] { border-radius: [0-10]rem;} .mg-rounded-tl[0-10] { border-top-left-radius: [0-10]rem;} .mg-rounded-tr[0-10] { border-top-right-radius: [0-10]rem;} .mg-rounded-br[0-10] { border-bottom-right-radius: [0-10]rem;} .mg-rounded-bl[0-10] { border-bottom-left-radius: [0-10]rem;} .mg-rounded-none { border-radius: 0;} .mg-rounded-full { border-radius: 100%;}