Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
//
// I created standalone package, look here
//
// https://github.com/hinok/spejson
//
// ----
// libsass (v3.0.2)
// ----
//
// From less to sass.
// Ported version of Responsive Margin & Padding Shortcuts
// for Twitter Bootstrap 3.0
//---------------------------------------------------------------
//
// Responsive Margin & Padding Shortcuts for Twitter Bootstrap 3.0
// ---------------------------------------------------------------
// This is an addition to Twitter Bootstrap that allows additional margin and padding shortcuts
// for enhanced layout control purposes. It should be included after the bootstrap.less
// import statement or precompiled as you see fit. It differs from bootstrap standards in
// that for any given screen size it predetermines the margin/padding size. All you have to
// do is specify the size you want xs,sm,md,lg, or xl. The exception is for items that you
// want to be centered using auto left/right margins. This can be device responsive by
// specifying mc-xs, mc-sm, mc-md, or mc-lg depending on when you want that behavior.
// these are the base sizes
// adjust to your preference
// ---------------------------------------------------------------
$margin-xs: 5px;
$margin-sm: 10px;
$margin-md: 15px;
$margin-lg: 30px;
$margin-xl: 50px;
// these are the scale values for each device size
// adjust to your preference
// ---------------------------------------------------------------
$margin-scale-xs: 0.75;
$margin-scale-sm: 0.75;
$margin-scale-md: 1;
$margin-scale-lg: 1.5;
// Defined breakpoints
// ---------------------------------------------------------------
$screen-xs: 480px;
$screen-xs-min: 480px;
$screen-sm: 768px;
$screen-sm-min: 768px;
$screen-md: 992px;
$screen-md-min: 992px;
$screen-lg: 1200px;
$screen-lg-min: 1200px;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);
// Mixin
// ---------------------------------------------------------------
@mixin responsive-margin-padding($scale) {
$sizes: (
xs: $margin-xs,
sm: $margin-sm,
md: $margin-md,
lg: $margin-lg,
xl: $margin-xl
);
$props: (
m: margin,
p: padding
);
$directions: (
t: top,
r: right,
b: bottom,
l: left
);
@each $prop-short, $prop in $props {
@each $size-short, $size in $sizes {
@each $direction-short, $direction in $directions {
.#{$prop-short}#{$direction-short}-#{$size-short} {
#{$prop}-#{$direction}: round($size * $scale);
}
}
}
}
}
// ** you shouldnt need to change anything below this point **
// ---------------------------------------------------------------
// these are the device-agnostic resets and centering
.mc { margin-left: auto;
margin-right: auto; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 {padding-bottom: 0; }
.pl-0 { padding-left: 0; }
// what follows are all the different device size adjustments
@media (max-width: #{$screen-xs-max}) {
.mc-sm {
margin-right: auto;
margin-left: auto;
}
@include responsive-margin-padding($margin-scale-xs);
}
@media (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max}) {
.mc-md {
margin-right: auto;
margin-left: auto;
}
@include responsive-margin-padding($margin-scale-sm);
}
@media (min-width: #{$screen-md}) and (max-width: #{$screen-md-max}) {
.mc-lg {
margin-right: auto;
margin-left: auto;
}
@include responsive-margin-padding($margin-scale-md);
}
@media (min-width: #{$screen-lg}) {
.mc-xl {
margin-right: auto;
margin-left: auto;
}
@include responsive-margin-padding($margin-scale-lg);
}
.mc {
margin-left: auto;
margin-right: auto; }
.mt-0 {
margin-top: 0; }
.mr-0 {
margin-right: 0; }
.mb-0 {
margin-bottom: 0; }
.ml-0 {
margin-left: 0; }
.pt-0 {
padding-top: 0; }
.pr-0 {
padding-right: 0; }
.pb-0 {
padding-bottom: 0; }
.pl-0 {
padding-left: 0; }
@media (max-width: 767px) {
.mc-sm {
margin-right: auto;
margin-left: auto; }
.mt-xs {
margin-top: 4px; }
.mr-xs {
margin-right: 4px; }
.mb-xs {
margin-bottom: 4px; }
.ml-xs {
margin-left: 4px; }
.mt-sm {
margin-top: 8px; }
.mr-sm {
margin-right: 8px; }
.mb-sm {
margin-bottom: 8px; }
.ml-sm {
margin-left: 8px; }
.mt-md {
margin-top: 11px; }
.mr-md {
margin-right: 11px; }
.mb-md {
margin-bottom: 11px; }
.ml-md {
margin-left: 11px; }
.mt-lg {
margin-top: 23px; }
.mr-lg {
margin-right: 23px; }
.mb-lg {
margin-bottom: 23px; }
.ml-lg {
margin-left: 23px; }
.mt-xl {
margin-top: 38px; }
.mr-xl {
margin-right: 38px; }
.mb-xl {
margin-bottom: 38px; }
.ml-xl {
margin-left: 38px; }
.pt-xs {
padding-top: 4px; }
.pr-xs {
padding-right: 4px; }
.pb-xs {
padding-bottom: 4px; }
.pl-xs {
padding-left: 4px; }
.pt-sm {
padding-top: 8px; }
.pr-sm {
padding-right: 8px; }
.pb-sm {
padding-bottom: 8px; }
.pl-sm {
padding-left: 8px; }
.pt-md {
padding-top: 11px; }
.pr-md {
padding-right: 11px; }
.pb-md {
padding-bottom: 11px; }
.pl-md {
padding-left: 11px; }
.pt-lg {
padding-top: 23px; }
.pr-lg {
padding-right: 23px; }
.pb-lg {
padding-bottom: 23px; }
.pl-lg {
padding-left: 23px; }
.pt-xl {
padding-top: 38px; }
.pr-xl {
padding-right: 38px; }
.pb-xl {
padding-bottom: 38px; }
.pl-xl {
padding-left: 38px; }
}
@media (min-width: 768px) and (max-width: 991px) {
.mc-md {
margin-right: auto;
margin-left: auto; }
.mt-xs {
margin-top: 4px; }
.mr-xs {
margin-right: 4px; }
.mb-xs {
margin-bottom: 4px; }
.ml-xs {
margin-left: 4px; }
.mt-sm {
margin-top: 8px; }
.mr-sm {
margin-right: 8px; }
.mb-sm {
margin-bottom: 8px; }
.ml-sm {
margin-left: 8px; }
.mt-md {
margin-top: 11px; }
.mr-md {
margin-right: 11px; }
.mb-md {
margin-bottom: 11px; }
.ml-md {
margin-left: 11px; }
.mt-lg {
margin-top: 23px; }
.mr-lg {
margin-right: 23px; }
.mb-lg {
margin-bottom: 23px; }
.ml-lg {
margin-left: 23px; }
.mt-xl {
margin-top: 38px; }
.mr-xl {
margin-right: 38px; }
.mb-xl {
margin-bottom: 38px; }
.ml-xl {
margin-left: 38px; }
.pt-xs {
padding-top: 4px; }
.pr-xs {
padding-right: 4px; }
.pb-xs {
padding-bottom: 4px; }
.pl-xs {
padding-left: 4px; }
.pt-sm {
padding-top: 8px; }
.pr-sm {
padding-right: 8px; }
.pb-sm {
padding-bottom: 8px; }
.pl-sm {
padding-left: 8px; }
.pt-md {
padding-top: 11px; }
.pr-md {
padding-right: 11px; }
.pb-md {
padding-bottom: 11px; }
.pl-md {
padding-left: 11px; }
.pt-lg {
padding-top: 23px; }
.pr-lg {
padding-right: 23px; }
.pb-lg {
padding-bottom: 23px; }
.pl-lg {
padding-left: 23px; }
.pt-xl {
padding-top: 38px; }
.pr-xl {
padding-right: 38px; }
.pb-xl {
padding-bottom: 38px; }
.pl-xl {
padding-left: 38px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
.mc-lg {
margin-right: auto;
margin-left: auto; }
.mt-xs {
margin-top: 5px; }
.mr-xs {
margin-right: 5px; }
.mb-xs {
margin-bottom: 5px; }
.ml-xs {
margin-left: 5px; }
.mt-sm {
margin-top: 10px; }
.mr-sm {
margin-right: 10px; }
.mb-sm {
margin-bottom: 10px; }
.ml-sm {
margin-left: 10px; }
.mt-md {
margin-top: 15px; }
.mr-md {
margin-right: 15px; }
.mb-md {
margin-bottom: 15px; }
.ml-md {
margin-left: 15px; }
.mt-lg {
margin-top: 30px; }
.mr-lg {
margin-right: 30px; }
.mb-lg {
margin-bottom: 30px; }
.ml-lg {
margin-left: 30px; }
.mt-xl {
margin-top: 50px; }
.mr-xl {
margin-right: 50px; }
.mb-xl {
margin-bottom: 50px; }
.ml-xl {
margin-left: 50px; }
.pt-xs {
padding-top: 5px; }
.pr-xs {
padding-right: 5px; }
.pb-xs {
padding-bottom: 5px; }
.pl-xs {
padding-left: 5px; }
.pt-sm {
padding-top: 10px; }
.pr-sm {
padding-right: 10px; }
.pb-sm {
padding-bottom: 10px; }
.pl-sm {
padding-left: 10px; }
.pt-md {
padding-top: 15px; }
.pr-md {
padding-right: 15px; }
.pb-md {
padding-bottom: 15px; }
.pl-md {
padding-left: 15px; }
.pt-lg {
padding-top: 30px; }
.pr-lg {
padding-right: 30px; }
.pb-lg {
padding-bottom: 30px; }
.pl-lg {
padding-left: 30px; }
.pt-xl {
padding-top: 50px; }
.pr-xl {
padding-right: 50px; }
.pb-xl {
padding-bottom: 50px; }
.pl-xl {
padding-left: 50px; }
}
@media (min-width: 1200px) {
.mc-xl {
margin-right: auto;
margin-left: auto; }
.mt-xs {
margin-top: 8px; }
.mr-xs {
margin-right: 8px; }
.mb-xs {
margin-bottom: 8px; }
.ml-xs {
margin-left: 8px; }
.mt-sm {
margin-top: 15px; }
.mr-sm {
margin-right: 15px; }
.mb-sm {
margin-bottom: 15px; }
.ml-sm {
margin-left: 15px; }
.mt-md {
margin-top: 23px; }
.mr-md {
margin-right: 23px; }
.mb-md {
margin-bottom: 23px; }
.ml-md {
margin-left: 23px; }
.mt-lg {
margin-top: 45px; }
.mr-lg {
margin-right: 45px; }
.mb-lg {
margin-bottom: 45px; }
.ml-lg {
margin-left: 45px; }
.mt-xl {
margin-top: 75px; }
.mr-xl {
margin-right: 75px; }
.mb-xl {
margin-bottom: 75px; }
.ml-xl {
margin-left: 75px; }
.pt-xs {
padding-top: 8px; }
.pr-xs {
padding-right: 8px; }
.pb-xs {
padding-bottom: 8px; }
.pl-xs {
padding-left: 8px; }
.pt-sm {
padding-top: 15px; }
.pr-sm {
padding-right: 15px; }
.pb-sm {
padding-bottom: 15px; }
.pl-sm {
padding-left: 15px; }
.pt-md {
padding-top: 23px; }
.pr-md {
padding-right: 23px; }
.pb-md {
padding-bottom: 23px; }
.pl-md {
padding-left: 23px; }
.pt-lg {
padding-top: 45px; }
.pr-lg {
padding-right: 45px; }
.pb-lg {
padding-bottom: 45px; }
.pl-lg {
padding-left: 45px; }
.pt-xl {
padding-top: 75px; }
.pr-xl {
padding-right: 75px; }
.pb-xl {
padding-bottom: 75px; }
.pl-xl {
padding-left: 75px; }
}
@hinok

This comment has been minimized.

Copy link
Owner Author

@hinok hinok commented Dec 15, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.