BookStack Code Mirror - bookstack/blob - resources/sass/_spacing.scss

   1 // Here we generate spacing utility classes for our sizes for all box sides and axis.
   2 // These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)
   3
   4 @mixin spacing($prop, $propLetter) {
   5   @each $sizeLetter, $size in $spacing {
   6     .#{$propLetter}-#{$sizeLetter} {
   7       #{$prop}: $size !important;
   8     }
   9     .#{$propLetter}x-#{$sizeLetter} {
  10       #{$prop}-inline-start: $size !important;
  11       #{$prop}-inline-end: $size !important;
  12     }
  13     .#{$propLetter}y-#{$sizeLetter} {
  14       #{$prop}-top: $size !important;
  15       #{$prop}-bottom: $size !important;
  16     }
  17     .#{$propLetter}t-#{$sizeLetter} {
  18       #{$prop}-top: $size !important;
  19     }
  20     .#{$propLetter}r-#{$sizeLetter} {
  21       #{$prop}-inline-end: $size !important;
  22     }
  23     .#{$propLetter}b-#{$sizeLetter} {
  24       #{$prop}-bottom: $size !important;
  25     }
  26     .#{$propLetter}l-#{$sizeLetter} {
  27       #{$prop}-inline-start: $size !important;
  28     }
  29   }
  30 }
  31 @include spacing('margin', 'm');
  32 @include spacing('padding', 'p');
  33
  34 @each $sizeLetter, $size in $spacing {
  35   .gap-#{$sizeLetter} {
  36     gap: $size !important;
  37   }
  38   .gap-x-#{$sizeLetter} {
  39     column-gap: $size !important;
  40   }
  41   .gap-y-#{$sizeLetter} {
  42     row-gap: $size !important;
  43   }
  44 }