Css helpers

This section showcases the functionality of CSS helpers in our design system. CSS helpers are used to quickly apply styles to elements. Below, you will find examples of how to use CSS helpers to style various elements and components.

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; } .mg-space-auto { margin: auto; }

Placing

.mg-fit { min-width: 100%; } .mg-fixed-top { vertical-align: middle; } .mg-valign-middle { position: fixed; bottom: 0; left: 0; z-index: 999; } .mg-relative { position: relative; } .mg-fixed { position: fixed; } .mg-static { position: static; } .mg-sticky { position: sticky; } .mg-fixed-top { position: fixed; top: 0; left: 0; z-index: 999; } .mg-fixed-bottom { position: fixed; bottom: 0; left: 0; z-index: 999; } .mg-top { top: 0; } .mg-bottom { bottom: 0; } .mg-right { float: right; right: 0; } .mg-left { float: left; left: 0; } .mg-center { left: 50%; transform: translateX(-50%);} .mg-middle { top: 50%; transform: translateY(-50%); } .mg-top-left { top: 0; left:0; } .mg-top-right { top: 0; right:0; } .mg-bottom-left { bottom: 0; left:0; } .mg-bottom-right { bottom: 0; right:0; } .mg-text-center { text-align: center; } .mg-text-right { text-align: right; } .mg-text-left { text-align: left; }

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

Text

.mg-text-left { text-align: left; } .mg-text-right { text-align: right; } .mg-text-center { text-align: center; } .mg-text-justify { text-align: justify; } .mg-text-nowrap { white-space: nowrap; } .mg-text-lowercase { text-transform: lowercase; } .mg-text-uppercase { text-transform: uppercase; } .mg-text-capitalize { text-transform: capitalize; } .mg-text-underline { text-decoration: underline; } .mg-text-linethrough { text-decoration: linethrough; } .mg-text-overline { text-decoration: overline; } .mg-text-none { text-decoration: none; } .mg-text-break { word-break: break-all; } .mg-text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mg-text-clip { overflow: hidden; text-overflow: clip; white-space: nowrap; } .mg-text-[s-m-l-xl-2xl-3xl-4xl-5xl] { font-size: $base-font-size*N; } .mg-text-bold { font-weight: bold; } .mg-text-bolder { font-weight: bolder; } .mg-text-lighter { font-weight: lighter; }