Common Css Syles for Materialize

common-styles.css

/**
* Manage Width
*/

.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.w-25 {
    width: 25% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-75 {
    width: 75% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

/*
* Manage Margin
*
*/
.m-5 {
    margin: 5% !important;
}

.m-10 {
    margin: 10% !important;
}

.m-20 {
    margin: 20% !important;
}

.m-25 {
    margin: 25% !important;
}

.m-30 {
    margin: 30% !important;
}

.m-35 {
    margin: 35% !important;
}


.m-40 {
    margin: 40% !important;
}

.m-50 {
    margin: 50% !important;
}

.m-60 {
    margin: 60% !important;
}

.m-70 {
    margin: 70% !important;
}

.m-80 {
    margin: 80% !important;
}

.m-90 {
    margin: 90% !important;
}

/*
* Manage  Top Margin
*
*/
.mt-5 {
    margin-top: 5% !important;
}

.mt-10 {
    margin-top: 10% !important;
}

.mt-20 {
    margin-top: 20% !important;
}

.mt-25 {
    margin-top: 25% !important;
}

.mt-30 {
    margin-top: 30% !important;
}

.mt-35 {
    margin-top: 35% !important;
}


.mt-40 {
    margin-top: 40% !important;
}

.mt-50 {
    margin-top: 50% !important;
}

.mt-60 {
    margin-top: 60% !important;
}

.mt-70 {
    margin-top: 70% !important;
}

.mt-80 {
    margin-top: 80% !important;
}

.mt-90 {
    margin-top: 90% !important;
}

/*
* Manage Margin Left
*
*/
.ml-5 {
    margin-left: 5% !important;
}

.ml-10 {
    margin-left: 10% !important;
}

.ml-20 {
    margin-left: 20% !important;
}

.ml-25 {
    margin-left: 25% !important;
}

.ml-30 {
    margin-left: 30% !important;
}

.ml-35 {
    margin-left: 35% !important;
}


.ml-40 {
    margin-left: 40% !important;
}

.ml-50 {
    margin-left: 50% !important;
}

.ml-60 {
    margin-left: 60% !important;
}

.ml-70 {
    margin-left: 70% !important;
}

.ml-80 {
    margin-left: 80% !important;
}

.ml-90 {
    margin-left: 90% !important;
}

/*
* Manage Right Margin
*
*/
.mr-5 {
    margin-right: 5% !important;
}

.mr-10 {
    margin-right: 10% !important;
}

.mr-20 {
    margin-right: 20% !important;
}

.mr-25 {
    margin-right: 25% !important;
}

.mr-30 {
    margin-right: 30% !important;
}

.mr-35 {
    margin-right: 35% !important;
}


.mr-40 {
    margin-right: 40% !important;
}

.mr-50 {
    margin-right: 50% !important;
}

.mr-60 {
    margin-right: 60% !important;
}

.mr-70 {
    margin-right: 70% !important;
}

.mr-80 {
    margin-right: 80% !important;
}

.mr-90 {
    margin-right: 90% !important;
}

/*
* Manage Margin Bottom
*
*/
.mb-5 {
    margin-bottom: 5% !important;
}

.mb-10 {
    margin-bottom: 10% !important;
}

.mb-20 {
    margin-bottom: 20% !important;
}

.mb-25 {
    margin-bottom: 25% !important;
}

.mb-30 {
    margin-bottom: 30% !important;
}

.mb-35 {
    margin-bottom: 35% !important;
}


.mb-40 {
    margin-bottom: 40% !important;
}

.mb-50 {
    margin-bottom: 50% !important;
}

.mb-60 {
    margin-bottom: 60% !important;
}

.mb-70 {
    margin-bottom: 70% !important;
}

.mb-80 {
    margin-bottom: 80% !important;
}

.mb-90 {
    margin-bottom: 90% !important;
}



/*
* Manage Padding
*
*/
.p-5 {
    padding: 5% !important;
}

.p-10 {
    padding: 10% !important;
}

.p-20 {
    padding: 20% !important;
}

.p-25 {
    padding: 25% !important;
}

.p-30 {
    padding: 30% !important;
}

.p-35 {
    padding: 35% !important;
}


.p-40 {
    padding: 40% !important;
}

.p-50 {
    padding: 50% !important;
}

.p-60 {
    padding: 60% !important;
}

.p-70 {
    padding: 70% !important;
}

.p-80 {
    padding: 80% !important;
}

.p-90 {
    padding: 90% !important;
}

/*
* Manage  Top padding
*
*/
.pt-5 {
    padding-top: 5% !important;
}

.pt-10 {
    padding-top: 10% !important;
}

.pt-20 {
    padding-top: 20% !important;
}

.pt-25 {
    padding-top: 25% !important;
}

.pt-30 {
    padding-top: 30% !important;
}

.pt-35 {
    padding-top: 35% !important;
}


.pt-40 {
    padding-top: 40% !important;
}

.pt-50 {
    padding-top: 50% !important;
}

.pt-60 {
    padding-top: 60% !important;
}

.pt-70 {
    padding-top: 70% !important;
}

.pt-80 {
    padding-top: 80% !important;
}

.pt-90 {
    padding-top: 90% !important;
}

/*
* Manage padding Left
*
*/
.pl-5 {
    padding-left: 5% !important;
}

.pl-10 {
    padding-left: 10% !important;
}

.pl-20 {
    padding-left: 20% !important;
}

.pl-25 {
    padding-left: 25% !important;
}

.pl-30 {
    padding-left: 30% !important;
}

.pl-35 {
    padding-left: 35% !important;
}


.pl-40 {
    padding-left: 40% !important;
}

.pl-50 {
    padding-left: 50% !important;
}

.pl-60 {
    padding-left: 60% !important;
}

.pl-70 {
    padding-left: 70% !important;
}

.pl-80 {
    padding-left: 80% !important;
}

.pl-90 {
    padding-left: 90% !important;
}

/*
* Manage Right padding
*
*/
.pr-5 {
    padding-right: 5% !important;
}

.pr-10 {
    padding-right: 10% !important;
}

.pr-20 {
    padding-right: 20% !important;
}

.pr-25 {
    padding-right: 25% !important;
}

.pr-30 {
    padding-right: 30% !important;
}

.pr-35 {
    padding-right: 35% !important;
}


.pr-40 {
    padding-right: 40% !important;
}

.pr-50 {
    padding-right: 50% !important;
}

.pr-60 {
    padding-right: 60% !important;
}

.pr-70 {
    padding-right: 70% !important;
}

.pr-80 {
    padding-right: 80% !important;
}

.pr-90 {
    padding-right: 90% !important;
}

/*
* Manage Padding
*
*/
.pb-5 {
    padding-bottom: 5% !important;
}

.pb-10 {
    padding-bottom: 10% !important;
}

.pb-20 {
    padding-bottom: 20% !important;
}

.pb-25 {
    padding-bottom: 25% !important;
}

.pb-30 {
    padding-bottom: 30% !important;
}

.pb-35 {
    padding-bottom: 35% !important;
}


.pb-40 {
    padding-bottom: 40% !important;
}

.pb-50 {
    padding-bottom: 50% !important;
}

.pb-60 {
    padding-bottom: 60% !important;
}

.pb-70 {
    padding-bottom: 70% !important;
}

.pb-80 {
    padding-bottom: 80% !important;
}

.pb-90 {
    padding-bottom: 90% !important;
}


//Typography
.lowercase {
    text-transform: lowercase;
    line-height: 3;
}

.uppercase::first-letter {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 5px;
}