wagtail/client/scss/tools/_mixins.grid.scss

@use 'sass:math';

// Utility variable - you should never need to modify this
$padding: math.div($grid-gutter-width, 2);

// Our row container
@mixin row($padding: 0) {
  @include clearfix();
  box-sizing: border-box;
  display: block;
  margin-inline-end: auto;
  margin-inline-start: auto;
  padding-inline-end: $padding;
  padding-inline-start: $padding;
}

@mixin row-flush() {
  margin-inline-start: -$padding;
  margin-inline-end: -$padding;
}

// Our column container
@mixin column($x, $padding: $padding, $grid-columns: $grid-columns) {
  box-sizing: border-box;
  display: inline;
  float: left;
  width: 100% * math.div($x, $grid-columns);
  padding-inline-end: $padding;
  padding-inline-start: $padding;
}

@mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) {
  box-sizing: border-box;
  width: 100% * math.div($x, $grid-columns);
}

// Push adds left padding
@mixin push($offset: 1, $grid-columns: $grid-columns) {
  margin-inline-start: 100% * math.div($offset, $grid-columns);
}

@mixin push-padding($offset: 1, $grid-columns: $grid-columns) {
  padding-inline-start: 100% * math.div($offset, $grid-columns);
}

// Pull adds right padding
@mixin pull($offset: 1, $grid-columns: $grid-columns) {
  margin-inline-end: 100% * math.div($offset, $grid-columns);
}

@mixin pull-padding($offset: 1, $grid-columns: $grid-columns) {
  padding-inline-end: 100% * math.div($offset, $grid-columns);
}

// only used in places where padding not applied to same elements as row or row-flush
// most of the time this class should be applied directly to the html elements
@mixin nice-padding {
  padding-inline-start: $mobile-nice-padding;
  padding-inline-end: $mobile-nice-padding;

  @include media-breakpoint-up(sm) {
    padding-inline-start: $desktop-nice-padding;
    padding-inline-end: $desktop-nice-padding;
  }
}

@mixin nice-margin {
  margin-inline-start: $mobile-nice-padding;
  margin-inline-end: $mobile-nice-padding;

  @include media-breakpoint-up(sm) {
    margin-inline-start: $desktop-nice-padding;
    margin-inline-end: $desktop-nice-padding;
  }
}