Last active
April 7, 2017 10:45
-
-
Save hinok/ccffc8c2408e3a119d75 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| // | |
| // 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); | |
| } |
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
| .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; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Look at https://github.com/hinok/spejson