withfront
Version:
Tools for frontend development especially with Bootstrap 3.x and jQuery 3.x also FontAwesome, jsCookie and more
133 lines (131 loc) • 7.75 kB
CSS
/**
* Padding tools for all view port
* example: (.p-10, .p-b-10, .p-t-10, .p-v-10, .p-h-10, .p-l-10, .p-r-10)
* also with Bootstrap4 philosophy (.p-10, .pb-10, .pt-10, .px-10, .py-10, .pl-10, .pr-10)
*/
/* padding-(all) 0,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200*/
.p-0 { padding: 0px; }
.p-0-imp { padding: 0px ; }
.p-10 { padding: 10px ; }
.p-15 { padding: 15px ; }
.p-20 { padding: 20px ; }
.p-25 { padding: 25px ; }
.p-30 { padding: 30px ; }
.p-35 { padding: 35px ; }
.p-40 { padding: 40px ; }
.p-50 { padding: 50px ; }
.p-60 { padding: 60px ; }
.p-70 { padding: 70px ; }
.p-80 { padding: 80px ; }
.p-90 { padding: 90px ; }
.p-100 { padding: 100px ; }
.p-150 { padding: 150px ; }
.p-200 { padding: 200px ; }
/* padding-(vertical/top-bottom) 0,5,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200 */
.p-v-0 { padding-top: 0px ; padding-bottom: 0px ; }
.p-v-5 { padding-top: 5px ; padding-bottom: 5px ; }
.p-v-10, .py-10 { padding-top: 10px ; padding-bottom: 10px ; }
.p-v-15, .py-15 { padding-top: 15px ; padding-bottom: 15px ; }
.p-v-20, .py-20 { padding-top: 20px ; padding-bottom: 20px ; }
.p-v-25, .py-25 { padding-top: 25px ; padding-bottom: 25px ; }
.p-v-30, .py-30 { padding-top: 30px ; padding-bottom: 30px ; }
.p-v-35, .py-35 { padding-top: 35px ; padding-bottom: 35px ; }
.p-v-40, .py-40 { padding-top: 40px ; padding-bottom: 40px ; }
.p-v-50, .py-50 { padding-top: 50px ; padding-bottom: 50px ; }
.p-v-60, .py-60 { padding-top: 60px ; padding-bottom: 60px ; }
.p-v-70, .py-70 { padding-top: 70px ; padding-bottom: 70px ; }
.p-v-80, .py-80 { padding-top: 80px ; padding-bottom: 80px ; }
.p-v-90, .py-90 { padding-top: 90px ; padding-bottom: 90px ; }
.p-v-100, .py-100 { padding-top: 100px ; padding-bottom: 100px ; }
.p-v-150, .py-150 { padding-top: 150px ; padding-bottom: 150px ; }
.p-v-200, .py-200 { padding-top: 200px ; padding-bottom: 200px ; }
/* padding-(horizontal/left-right) 0,5,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200 */
.p-h-0 { padding-left: 0px ; padding-right: 0px ; }
.p-h-5 { padding-left: 5px ; padding-right: 5px ; }
.p-h-10, .px-10 { padding-left: 10px ; padding-right: 10px ; }
.p-h-15, .px-15 { padding-left: 15px ; padding-right: 15px ; }
.p-h-20, .px-20 { padding-left: 20px ; padding-right: 20px ; }
.p-h-25, .px-25 { padding-left: 25px ; padding-right: 25px ; }
.p-h-30, .px-30 { padding-left: 30px ; padding-right: 30px ; }
.p-h-35, .px-35 { padding-left: 35px ; padding-right: 35px ; }
.p-h-40, .px-40 { padding-left: 40px ; padding-right: 40px ; }
.p-h-50, .px-50 { padding-left: 50px ; padding-right: 50px ; }
.p-h-60, .px-60 { padding-left: 60px ; padding-right: 60px ; }
.p-h-70, .px-70 { padding-left: 70px ; padding-right: 70px ; }
.p-h-80, .px-80 { padding-left: 80px ; padding-right: 80px ; }
.p-h-90, .px-90 { padding-left: 90px ; padding-right: 90px ; }
.p-h-100, .px-100 { padding-left: 100px ; padding-right: 100px ; }
.p-h-150, .px-150 { padding-left: 150px ; padding-right: 150px ; }
.p-h-200, .px-200 { padding-left: 200px ; padding-right: 200px ; }
/* padding-(top) 0,5,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200 */
.p-t-0 { padding-top: 0px ; }
.p-t-5 { padding-top: 5px ; }
.p-t-10, .pt-10 { padding-top: 10px ; }
.p-t-15, .pt-15 { padding-top: 15px ; }
.p-t-20, .pt-20 { padding-top: 20px ; }
.p-t-25, .pt-25 { padding-top: 25px ; }
.p-t-30, .pt-30 { padding-top: 30px ; }
.p-t-35, .pt-35 { padding-top: 35px ; }
.p-t-40, .pt-40 { padding-top: 40px ; }
.p-t-50, .pt-50 { padding-top: 50px ; }
.p-t-60, .pt-60 { padding-top: 60px ; }
.p-t-70, .pt-70 { padding-top: 70px ; }
.p-t-80, .pt-80 { padding-top: 80px ; }
.p-t-90, .pt-90 { padding-top: 90px ; }
.p-t-100, .pt-100 { padding-top: 100px ; }
.p-t-150, .pt-150 { padding-top: 150px ; }
.p-t-200, .pt-200 { padding-top: 200px ; }
/* padding-(bottom) 0,5,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200 */
.p-b-0 { padding-bottom: 0px ; }
.p-b-5 { padding-bottom: 5px ; }
.p-b-10, .pb-10 { padding-bottom: 10px ; }
.p-b-15, .pb-15 { padding-bottom: 15px ; }
.p-b-20, .pb-20 { padding-bottom: 20px ; }
.p-b-25, .pb-25 { padding-bottom: 25px ; }
.p-b-30, .pb-30 { padding-bottom: 30px ; }
.p-b-35, .pb-35 { padding-bottom: 35px ; }
.p-b-40, .pb-40 { padding-bottom: 40px ; }
.p-b-50, .pb-50 { padding-bottom: 50px ; }
.p-b-60, .pb-60 { padding-bottom: 60px ; }
.p-b-70, .pb-70 { padding-bottom: 70px ; }
.p-b-80, .pb-80 { padding-bottom: 80px ; }
.p-b-90, .pb-90 { padding-bottom: 90px ; }
.p-b-100, .pb-100 { padding-bottom: 100px ; }
.p-b-150, .pb-150 { padding-bottom: 150px ; }
.p-b-200, .pb-200 { padding-bottom: 200px ; }
/* padding-(right) 0,5,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200 */
.p-r-0 { padding-right: 0px ; }
.p-r-5 { padding-right: 5px ; }
.p-r-10, .pr-10 { padding-right: 10px ; }
.p-r-15, .pr-15 { padding-right: 15px ; }
.p-r-20, .pr-20 { padding-right: 20px ; }
.p-r-25, .pr-25 { padding-right: 25px ; }
.p-r-30, .pr-30 { padding-right: 30px ; }
.p-r-35, .pr-35 { padding-right: 35px ; }
.p-r-40, .pr-40 { padding-right: 40px ; }
.p-r-50, .pr-50 { padding-right: 50px ; }
.p-r-60, .pr-60 { padding-right: 60px ; }
.p-r-70, .pr-70 { padding-right: 70px ; }
.p-r-80, .pr-80 { padding-right: 80px ; }
.p-r-90, .pr-90 { padding-right: 90px ; }
.p-r-100, .pr-100 { padding-right: 100px ; }
.p-r-150, .pr-150 { padding-right: 150px ; }
.p-r-200, .pr-200 { padding-right: 200px ; }
/* padding-(left) 0,5,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200 */
.p-l-0 { padding-left: 0px ; }
.p-l-5 { padding-left: 5px ; }
.p-l-10, .pl-10 { padding-left: 10px ; }
.p-l-15, .pl-15 { padding-left: 15px ; }
.p-l-20, .pl-20 { padding-left: 20px ; }
.p-l-25, .pl-25 { padding-left: 25px ; }
.p-l-30, .pl-30 { padding-left: 30px ; }
.p-l-35, .pl-35 { padding-left: 35px ; }
.p-l-40, .pl-40 { padding-left: 40px ; }
.p-l-50, .pl-50 { padding-left: 50px ; }
.p-l-60, .pl-60 { padding-left: 60px ; }
.p-l-70, .pl-70 { padding-left: 70px ; }
.p-l-80, .pl-80 { padding-left: 80px ; }
.p-l-90, .pl-90 { padding-left: 90px ; }
.p-l-100, .pl-100 { padding-left: 100px ; }
.p-l-150, .pl-150 { padding-left: 150px ; }
.p-l-200, .pl-200 { padding-left: 200px ; }