Bulma Spacing Helpers

helpers.scss

$sizes: -20,-19,-18,-18,-16,-15,-14,-13,-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20;
@media screen {
  @each $size in $sizes {
    .pb-#{$size}-widescreen {
      @include widescreen { padding-bottom: #{$size}rem !important; }
    }
    .pt-#{$size}-widescreen {
      @include widescreen { padding-top: #{$size}rem !important; }
    }
    .pl-#{$size}-widescreen {
      @include widescreen { padding-left: #{$size}rem !important; }
    }
    .pr-#{$size}-widescreen {
      @include widescreen { padding-right: #{$size}rem !important; }
    }

    .pb-#{$size}-desktop {
      @include desktop { padding-bottom: #{$size}rem !important; }
    }
    .pt-#{$size}-desktop {
      @include desktop { padding-top: #{$size}rem !important; }
    }
    .pl-#{$size}-desktop {
      @include desktop { padding-left: #{$size}rem !important; }
    }
    .pr-#{$size}-desktop {
      @include desktop { padding-right: #{$size}rem !important; }
    }

    .pb-#{$size}-touch {
      @include touch { padding-bottom: #{$size}rem !important; }
    }
    .pt-#{$size}-touch {
      @include touch { padding-top: #{$size}rem !important; }
    }
    .pl-#{$size}-touch {
      @include touch { padding-left: #{$size}rem !important; }
    }
    .pr-#{$size}-touch {
      @include touch { padding-right: #{$size}rem !important; }
    }

    .pb-#{$size}-tablet {
      @include tablet { padding-bottom: #{$size}rem !important; }
    }
    .pt-#{$size}-tablet {
      @include tablet { padding-top: #{$size}rem !important; }
    }
    .pl-#{$size}-tablet {
      @include tablet { padding-left: #{$size}rem !important; }
    }
    .pr-#{$size}-tablet {
      @include tablet { padding-right: #{$size}rem !important; }
    }

    .pb-#{$size}-mobile {
      @include mobile { padding-bottom: #{$size}rem !important; }
    }
    .pt-#{$size}-mobile {
      @include mobile { padding-top: #{$size}rem !important; }
    }
    .pl-#{$size}-mobile {
      @include mobile { padding-left: #{$size}rem !important; }
    }
    .pr-#{$size}-mobile {
      @include mobile { padding-right: #{$size}rem !important; }
    }

    .pb-#{$size} {
      padding-bottom: #{$size}rem !important;
    }
    .pt-#{$size} {
      padding-top: #{$size}rem !important;
    }
    .pl-#{$size} {
      padding-left: #{$size}rem !important;
    }
    .pr-#{$size} {
      padding-right: #{$size}rem !important;
    }

    .pa-#{$size} {
      padding: #{$size}rem !important;
    }

    .mb-#{$size}-widescreen {
      @include widescreen { margin-bottom: #{$size}rem !important; }
    }
    .mt-#{$size}-widescreen {
      @include widescreen { margin-top: #{$size}rem !important; }
    }
    .ml-#{$size}-widescreen {
      @include widescreen { margin-left: #{$size}rem !important; }
    }
    .mr-#{$size}-widescreen {
      @include widescreen { margin-right: #{$size}rem !important; }
    }

    .mb-#{$size}-desktop {
      @include desktop { margin-bottom: #{$size}rem !important; }
    }
    .mt-#{$size}-desktop {
      @include desktop { margin-top: #{$size}rem !important; }
    }
    .ml-#{$size}-desktop {
      @include desktop { margin-left: #{$size}rem !important; }
    }
    .mr-#{$size}-desktop {
      @include desktop { margin-right: #{$size}rem !important; }
    }

    .mb-#{$size}-touch {
      @include touch { margin-bottom: #{$size}rem !important; }
    }
    .mt-#{$size}-touch {
      @include touch { margin-top: #{$size}rem !important; }
    }
    .ml-#{$size}-touch {
      @include touch { margin-left: #{$size}rem !important; }
    }
    .mr-#{$size}-touch {
      @include touch { margin-right: #{$size}rem !important; }
    }

    .mb-#{$size}-tablet {
      @include tablet { margin-bottom: #{$size}rem !important; }
    }
    .mt-#{$size}-tablet {
      @include tablet { margin-top: #{$size}rem !important; }
    }
    .ml-#{$size}-tablet {
      @include tablet { margin-left: #{$size}rem !important; }
    }
    .mr-#{$size}-tablet {
      @include tablet { margin-right: #{$size}rem !important; }
    }

    .mb-#{$size}-mobile {
      @include mobile { margin-bottom: #{$size}rem !important; }
    }
    .mt-#{$size}-mobile {
      @include mobile { margin-top: #{$size}rem !important; }
    }
    .ml-#{$size}-mobile {
      @include mobile { margin-left: #{$size}rem !important; }
    }
    .mr-#{$size}-mobile {
      @include mobile { margin-right: #{$size}rem !important; }
    }

    .mb-#{$size} {
      margin-bottom: #{$size}rem !important;
    }
    .mt-#{$size} {
      margin-top: #{$size}rem !important;
    }
    .ml-#{$size} {
      margin-left: #{$size}rem !important;
    }
    .mr-#{$size} {
      margin-right: #{$size}rem !important;
    }

    .ma-#{$size} {
      margin: #{$size} !important;
    }

    .mh-#{$size} {
      min-height: #{$size} !important;
    }
    .mw-#{$size} {
      min-width: #{$size} !important;
    }
  }
}

.nudge {
  margin-left: 5px;
}