Created
September 1, 2016 00:28
-
-
Save PseudoSky/eb791dc8065cd8cbcc6ce7083d066aee to your computer and use it in GitHub Desktop.
CSS Utils
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.m-2 { margin: -2em !important; } | |
.ml-2 { margin-left: -2em !important; } | |
.mr-2 { margin-right: -2em !important; } | |
.mt-2 { margin-top: -2em !important; } | |
.mb-2 { margin-bottom: -2em !important; } | |
.m-1 { margin: -1em !important; } | |
.ml-1 { margin-left: -1em !important; } | |
.mr-1 { margin-right: -1em !important; } | |
.mt-1 { margin-top: -1em !important; } | |
.mb-1 { margin-bottom: -1em !important; } | |
.m0 { margin: 0em !important; } | |
.ml0 { margin-left: 0em !important; } | |
.mr0 { margin-right: 0em !important; } | |
.mt0 { margin-top: 0em !important; } | |
.mb0 { margin-bottom: 0em !important; } | |
.m1 { margin: 1em !important; } | |
.ml1 { margin-left: 1em !important; } | |
.mr1 { margin-right: 1em !important; } | |
.mt1 { margin-top: 1em !important; } | |
.mb1 { margin-bottom: 1em !important; } | |
.m2 { margin: 2em !important; } | |
.ml2 { margin-left: 2em !important; } | |
.mr2 { margin-right: 2em !important; } | |
.mt2 { margin-top: 2em !important; } | |
.mb2 { margin-bottom: 2em !important; } | |
.m3 { margin: 3em !important; } | |
.ml3 { margin-left: 3em !important; } | |
.mr3 { margin-right: 3em !important; } | |
.mt3 { margin-top: 3em !important; } | |
.mb3 { margin-bottom: 3em !important; } | |
.m4 { margin: 4em !important; } | |
.ml4 { margin-left: 4em !important; } | |
.mr4 { margin-right: 4em !important; } | |
.mt4 { margin-top: 4em !important; } | |
.mb4 { margin-bottom: 4em !important; } | |
.m5 { margin: 5em !important; } | |
.ml5 { margin-left: 5em !important; } | |
.mr5 { margin-right: 5em !important; } | |
.mt5 { margin-top: 5em !important; } | |
.mb5 { margin-bottom: 5em !important; } | |
.m6 { margin: 6em !important; } | |
.ml6 { margin-left: 6em !important; } | |
.mr6 { margin-right: 6em !important; } | |
.mt6 { margin-top: 6em !important; } | |
.mb6 { margin-bottom: 6em !important; } | |
.m7 { margin: 7em !important; } | |
.ml7 { margin-left: 7em !important; } | |
.mr7 { margin-right: 7em !important; } | |
.mt7 { margin-top: 7em !important; } | |
.mb7 { margin-bottom: 7em !important; } | |
.m8 { margin: 8em !important; } | |
.ml8 { margin-left: 8em !important; } | |
.mr8 { margin-right: 8em !important; } | |
.mt8 { margin-top: 8em !important; } | |
.mb8 { margin-bottom: 8em !important; } | |
.p-2 { padding: -2em !important; } | |
.pl-2 { padding-left: -2em !important; } | |
.pr-2 { padding-right: -2em !important; } | |
.pt-2 { padding-top: -2em !important; } | |
.pb-2 { padding-bottom: -2em !important; } | |
.p-1 { padding: -1em !important; } | |
.pl-1 { padding-left: -1em !important; } | |
.pr-1 { padding-right: -1em !important; } | |
.pt-1 { padding-top: -1em !important; } | |
.pb-1 { padding-bottom: -1em !important; } | |
.p0 { padding: 0em !important; } | |
.pl0 { padding-left: 0em !important; } | |
.pr0 { padding-right: 0em !important; } | |
.pt0 { padding-top: 0em !important; } | |
.pb0 { padding-bottom: 0em !important; } | |
.p1 { padding: 1em !important; } | |
.pl1 { padding-left: 1em !important; } | |
.pr1 { padding-right: 1em !important; } | |
.pt1 { padding-top: 1em !important; } | |
.pb1 { padding-bottom: 1em !important; } | |
.p2 { padding: 2em !important; } | |
.pl2 { padding-left: 2em !important; } | |
.pr2 { padding-right: 2em !important; } | |
.pt2 { padding-top: 2em !important; } | |
.pb2 { padding-bottom: 2em !important; } | |
.p3 { padding: 3em !important; } | |
.pl3 { padding-left: 3em !important; } | |
.pr3 { padding-right: 3em !important; } | |
.pt3 { padding-top: 3em !important; } | |
.pb3 { padding-bottom: 3em !important; } | |
.p4 { padding: 4em !important; } | |
.pl4 { padding-left: 4em !important; } | |
.pr4 { padding-right: 4em !important; } | |
.pt4 { padding-top: 4em !important; } | |
.pb4 { padding-bottom: 4em !important; } | |
.p5 { padding: 5em !important; } | |
.pl5 { padding-left: 5em !important; } | |
.pr5 { padding-right: 5em !important; } | |
.pt5 { padding-top: 5em !important; } | |
.pb5 { padding-bottom: 5em !important; } | |
.p6 { padding: 6em !important; } | |
.pl6 { padding-left: 6em !important; } | |
.pr6 { padding-right: 6em !important; } | |
.pt6 { padding-top: 6em !important; } | |
.pb6 { padding-bottom: 6em !important; } | |
.p7 { padding: 7em !important; } | |
.pl7 { padding-left: 7em !important; } | |
.pr7 { padding-right: 7em !important; } | |
.pt7 { padding-top: 7em !important; } | |
.pb7 { padding-bottom: 7em !important; } | |
.p8 { padding: 8em !important; } | |
.pl8 { padding-left: 8em !important; } | |
.pr8 { padding-right: 8em !important; } | |
.pt8 { padding-top: 8em !important; } | |
.pb8 { padding-bottom: 8em !important; } | |
.ma { margin: auto; } | |
.mra { margin-right: auto; } | |
.mla { margin-left: auto; } | |
.mta { margin-top: auto; } | |
.mba { margin-bottom: auto; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin prefixed-margin-padding($style:'margin', $prefix:'.m', $unit: 'em'){ | |
$dirs: ('l', 'r', 't', 'b'); | |
$dirstyle: ('left', 'right', 'top' ,'bottom'); | |
@for $i from -2 through 8 { | |
#{$prefix}#{$i}{ | |
#{$style}: #{$i}#{$unit} !important; | |
} | |
@for $idx from 1 through length($dirstyle) { | |
#{$prefix}#{unquote(nth($dirs, $idx))}#{$i}{ | |
#{$style}-#{unquote(nth($dirstyle, $idx))}: #{$i}#{$unit} !important; | |
} | |
} | |
} | |
} | |
@include prefixed-margin-padding(); | |
@include prefixed-margin-padding('padding','.p'); | |
.ma { margin: auto; } | |
.mra{ margin-right: auto; } | |
.mla{ margin-left: auto; } | |
.mta{ margin-top: auto; } | |
.mba{ margin-bottom: auto; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment