4_Adding Generic Styles - mukeshrathore/base-project GitHub Wiki

Adding below generic styles in styles.scss

Declaring variables in scss
$text-color:#222; $font-family: Roboto, "Helvetica Neue", sans-serif;
Please note variables can be declared anad used in scss by initialization starting with '$' symbol.

body { margin: 0; font-family: $font-family; font-size: 14px; color: $text-color; font-style: normal; line-height: 1.4; background-color: #f2f2f2; min-width: 1300px !important; }

// Generic Classes

.mrg0{margin:0 !important;} .mrgTop0{margin-top:0 !important;} .mrgBtm0{margin-bottom:0 !important;} .mrgLt0{margin-left:0 !important;} .mrgRt0{margin-right:0 !important;}

.mrg5{margin:5px !important;} .mrgTop5{margin-top:5px !important;} .mrgBtm5{margin-bottom:5px !important;} .mrgLt5{margin-left:5px !important;} .mrgRt5{margin-right:5px !important;}

.mrg10{margin:10px !important;} .mrgTop10{margin-top:10px !important;} .mrgBtm10{margin-bottom:10px !important;} .mrgLt10{margin-left:10px !important;} .mrgRt10{margin-right:10px !important;}

.mrg15{margin:15px !important;} .mrgTop15{margin-top:15px !important;} .mrgBtm15{margin-bottom:15px !important;} .mrgLt15{margin-left:15px !important;} .mrgRt15{margin-right:15px !important;}

.mrg20{margin:20px !important;} .mrgTop20{margin-top:20px !important;} .mrgBtm20{margin-bottom:20px !important;} .mrgLt20{margin-left:20px !important;} .mrgRt20{margin-right:20px !important;}

.pad0{padding:0 !important;} .padTop0{padding-top:0 !important;} .padBtm0{padding-bottom:0 !important;} .padLt0{padding-left:0 !important;} .padRt0{padding-right:0 !important;}

.pad5{padding:5px !important;} .padTop5{padding-top:5px !important;} .padBtm5{padding-bottom:5px !important;} .padLt5{padding-left:5px !important;} .padRt5{padding-right:5px !important;}

.pad10{padding:10px !important;} .padTop10{padding-top:10px !important;} .padBtm10{padding-bottom:10px !important;} .padLt10{padding-left:10px !important;} .padRt10{padding-right:10px !important;}

.pad15{padding:15px !important;} .padTop15{padding-top:15px !important;} .padBtm15{padding-bottom:15px !important;} .padLt15{padding-left:15px !important;} .padRt15{padding-right:15px !important;}

.pad20{padding:20px !important;} .padTop20{padding-top:20px !important;} .padBtm20{padding-bottom:20px !important;} .padLt20{padding-left:20px !important;} .padRt20{padding-right:20px !important;}

.pos-abs{position: absolute;} .pos-rel{position: relative;}
.width{width: 100% !important;}
.inline-block{display: inline-block;} .block{display: block;} .display-flex{display: flex;}
.border0{border: 0;} .borderRad0{border-radius: 0;}
texrtarea{resize: none!important;}

// Heading Styles

.line-height-1{line-height: 1;} .flex-space{flex:1 1 auto;} .center-align{text-align: center;}