@gitlab/duo-ui 0.1.0

package/src/scss/utility-mixins/spacing.scss

@@ -0,0 +1,1564 @@
+/**
+* Padding utilities.
+*
+* naming convention: gl-p{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-p-0 {
+  padding: 0;
+}
+
+@mixin gl-p-1 {
+  padding: $gl-spacing-scale-1;
+}
+
+@mixin gl-p-2 {
+  padding: $gl-spacing-scale-2;
+}
+
+@mixin gl-p-3 {
+  padding: $gl-spacing-scale-3;
+}
+
+@mixin gl-p-4 {
+  padding: $gl-spacing-scale-4;
+}
+
+@mixin gl-p-5 {
+  padding: $gl-spacing-scale-5;
+}
+
+@mixin gl-p-6 {
+  padding: $gl-spacing-scale-6;
+}
+
+@mixin gl-p-7 {
+  padding: $gl-spacing-scale-7;
+}
+
+@mixin gl-p-9 {
+  padding: $gl-spacing-scale-9;
+}
+
+@mixin gl-p-13 {
+  padding: $gl-spacing-scale-13;
+}
+
+@mixin gl-px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@mixin gl-px-1 {
+  padding-left: $gl-spacing-scale-1;
+  padding-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-px-2 {
+  padding-left: $gl-spacing-scale-2;
+  padding-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-px-3 {
+  padding-left: $gl-spacing-scale-3;
+  padding-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-px-4 {
+  padding-left: $gl-spacing-scale-4;
+  padding-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-px-5 {
+  padding-left: $gl-spacing-scale-5;
+  padding-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-px-6 {
+  padding-left: $gl-spacing-scale-6;
+  padding-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-px-7 {
+  padding-left: $gl-spacing-scale-7;
+  padding-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-lg-px-7 {
+  @include gl-media-breakpoint-up(lg) {
+    padding-left: $gl-spacing-scale-7;
+    padding-right: $gl-spacing-scale-7;
+  }
+}
+
+@mixin gl-px-8 {
+  padding-left: $gl-spacing-scale-8;
+  padding-right: $gl-spacing-scale-8;
+}
+
+@mixin gl-px-9 {
+  padding-left: $gl-spacing-scale-9;
+  padding-right: $gl-spacing-scale-9;
+}
+
+@mixin gl-pr-0 {
+  padding-right: 0;
+}
+
+@mixin gl-pr-1 {
+  padding-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-pr-2 {
+  padding-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-pr-3 {
+  padding-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-pr-4 {
+  padding-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-pr-5 {
+  padding-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-pr-6 {
+  padding-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-pr-7 {
+  padding-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-pr-8 {
+  padding-right: $gl-spacing-scale-8;
+}
+
+@mixin gl-pr-9 {
+  padding-right: $gl-spacing-scale-9;
+}
+
+@mixin gl-pr-10 {
+  padding-right: $gl-spacing-scale-10;
+}
+
+@mixin gl-pl-0 {
+  padding-left: 0;
+}
+
+@mixin gl-pl-1 {
+  padding-left: $gl-spacing-scale-1;
+}
+
+@mixin gl-pl-2 {
+  padding-left: $gl-spacing-scale-2;
+}
+
+@mixin gl-pl-3 {
+  padding-left: $gl-spacing-scale-3;
+}
+
+@mixin gl-pl-4 {
+  padding-left: $gl-spacing-scale-4;
+}
+
+@mixin gl-pl-5 {
+  padding-left: $gl-spacing-scale-5;
+}
+
+@mixin gl-pl-6 {
+  padding-left: $gl-spacing-scale-6;
+}
+
+@mixin gl-pl-7 {
+  padding-left: $gl-spacing-scale-7;
+}
+
+@mixin gl-pl-8 {
+  padding-left: $gl-spacing-scale-8;
+}
+
+@mixin gl-pl-9 {
+  padding-left: $gl-spacing-scale-9;
+}
+
+@mixin gl-pl-10 {
+  padding-left: $gl-spacing-scale-10;
+}
+
+@mixin gl-pl-11 {
+  padding-left: $gl-spacing-scale-11;
+}
+
+@mixin gl-pl-11-5 {
+  padding-left: $gl-spacing-scale-11-5;
+}
+
+@mixin gl-pl-12 {
+  padding-left: $gl-spacing-scale-12;
+}
+
+@mixin gl-pt-0 {
+  padding-top: 0;
+}
+
+@mixin gl-pt-1 {
+  padding-top: $gl-spacing-scale-1;
+}
+
+@mixin gl-pt-2 {
+  padding-top: $gl-spacing-scale-2;
+}
+
+@mixin gl-pt-3 {
+  padding-top: $gl-spacing-scale-3;
+}
+
+@mixin gl-pt-4 {
+  padding-top: $gl-spacing-scale-4;
+}
+
+@mixin gl-pt-5 {
+  padding-top: $gl-spacing-scale-5;
+}
+
+@mixin gl-pt-6 {
+  padding-top: $gl-spacing-scale-6;
+}
+
+@mixin gl-pt-7 {
+  padding-top: $gl-spacing-scale-7;
+}
+
+@mixin gl-pt-8 {
+  padding-top: $gl-spacing-scale-8;
+}
+
+@mixin gl-pt-9 {
+  padding-top: $gl-spacing-scale-9;
+}
+
+@mixin gl-pt-11 {
+  padding-top: $gl-spacing-scale-11;
+}
+
+@mixin gl-pt-12 {
+  padding-top: $gl-spacing-scale-12;
+}
+
+@mixin gl-pt-13 {
+  padding-top: $gl-spacing-scale-13;
+}
+
+@mixin gl-md-pt-12 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-12;
+  }
+}
+
+@mixin gl-pb-0 {
+  padding-bottom: 0;
+}
+
+@mixin gl-pb-1 {
+  padding-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-pb-2 {
+  padding-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-pb-3 {
+  padding-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-pb-4 {
+  padding-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-pb-5 {
+  padding-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-pb-6 {
+  padding-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-pb-7 {
+  padding-bottom: $gl-spacing-scale-7;
+}
+
+@mixin gl-pb-8 {
+  padding-bottom: $gl-spacing-scale-8;
+}
+
+@mixin gl-pb-9 {
+  padding-bottom: $gl-spacing-scale-9;
+}
+
+@mixin gl-pb-11 {
+  padding-bottom: $gl-spacing-scale-11;
+}
+
+@mixin gl-pb-13 {
+  padding-bottom: $gl-spacing-scale-13;
+}
+
+@mixin gl-py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@mixin gl-py-1 {
+  padding-top: $gl-spacing-scale-1;
+  padding-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-py-2 {
+  padding-top: $gl-spacing-scale-2;
+  padding-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-py-3 {
+  padding-top: $gl-spacing-scale-3;
+  padding-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-py-4 {
+  padding-top: $gl-spacing-scale-4;
+  padding-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-py-5 {
+  padding-top: $gl-spacing-scale-5;
+  padding-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-py-6 {
+  padding-top: $gl-spacing-scale-6;
+  padding-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-py-7 {
+  padding-top: $gl-spacing-scale-7;
+  padding-bottom: $gl-spacing-scale-7;
+}
+
+@mixin gl-py-8 {
+  padding-top: $gl-spacing-scale-8;
+  padding-bottom: $gl-spacing-scale-8;
+}
+
+@mixin gl-py-13 {
+  padding-top: $gl-spacing-scale-13;
+  padding-bottom: $gl-spacing-scale-13;
+}
+
+/**
+* Margin utilities.
+*
+* naming convention: gl-m{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-m-0 {
+  margin: 0;
+}
+
+@mixin gl-m-2 {
+  margin: $gl-spacing-scale-2;
+}
+
+@mixin gl-m-3 {
+  margin: $gl-spacing-scale-3;
+}
+
+@mixin gl-m-4 {
+  margin: $gl-spacing-scale-4;
+}
+
+@mixin gl-m-5 {
+  margin: $gl-spacing-scale-5;
+}
+
+@mixin gl-m-7 {
+  margin: $gl-spacing-scale-7;
+}
+
+@mixin gl-m-auto {
+  margin: auto;
+}
+
+@mixin gl-mt-auto {
+  margin-top: auto;
+}
+
+@mixin gl-mt-0 {
+  margin-top: 0;
+}
+
+@mixin gl-mt-1 {
+  margin-top: $gl-spacing-scale-1;
+}
+
+@mixin gl-mt-n1 {
+  margin-top: -$gl-spacing-scale-1;
+}
+
+@mixin gl-mt-n5 {
+  margin-top: -$gl-spacing-scale-5;
+}
+
+@mixin gl-md-mt-n2 {
+  @include gl-media-breakpoint-up(md) {
+    margin-top: -$gl-spacing-scale-2;
+  }
+}
+
+@mixin gl-mt-2 {
+  margin-top: $gl-spacing-scale-2;
+}
+
+@mixin gl-mt-n2 {
+  margin-top: -$gl-spacing-scale-2;
+}
+
+@mixin gl-mt-3 {
+  margin-top: $gl-spacing-scale-3;
+}
+
+@mixin gl-mt-n3 {
+  margin-top: -$gl-spacing-scale-3;
+}
+
+@mixin gl-mt-4 {
+  margin-top: $gl-spacing-scale-4;
+}
+
+@mixin gl-mt-5 {
+  margin-top: $gl-spacing-scale-5;
+}
+
+@mixin gl-mt-6 {
+  margin-top: $gl-spacing-scale-6;
+}
+
+@mixin gl-mt-7 {
+  margin-top: $gl-spacing-scale-7;
+}
+
+@mixin gl-mt-8 {
+  margin-top: $gl-spacing-scale-8;
+}
+
+@mixin gl-mt-9 {
+  margin-top: $gl-spacing-scale-9;
+}
+
+@mixin gl-mt-11 {
+  margin-top: $gl-spacing-scale-11;
+}
+
+@mixin gl-md-mt-11 {
+  @include gl-media-breakpoint-up(md) {
+    margin-top: $gl-spacing-scale-11;
+  }
+}
+
+@mixin gl-mr-auto {
+  margin-right: auto;
+}
+
+@mixin gl-md-mr-auto {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mr-auto;
+  }
+}
+
+@mixin gl-mr-0 {
+  margin-right: 0;
+}
+
+@mixin gl-mr-1 {
+  margin-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-mr-n1 {
+  margin-right: -$gl-spacing-scale-1;
+}
+
+@mixin gl-mr-n2 {
+  margin-right: -$gl-spacing-scale-2;
+}
+
+@mixin gl-mr-2 {
+  margin-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-mr-3 {
+  margin-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-mr-n3 {
+  margin-right: -$gl-spacing-scale-3;
+}
+
+@mixin gl-mr-4 {
+  margin-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-mr-n4 {
+  margin-right: -$gl-spacing-scale-4;
+}
+
+@mixin gl-mr-5 {
+  margin-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-mr-6 {
+  margin-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-mr-7 {
+  margin-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-mr-5p {
+  margin-right: 5%;
+}
+
+@mixin gl-sm-mr-3 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-right: $gl-spacing-scale-3;
+  }
+}
+
+@mixin gl-mb-auto {
+  margin-bottom: auto;
+}
+
+@mixin gl-mb-0 {
+  margin-bottom: 0;
+}
+
+@mixin gl-mb-1 {
+  margin-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-mb-n1 {
+  margin-bottom: -$gl-spacing-scale-1;
+}
+
+@mixin gl-mb-2 {
+  margin-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-mb-n2 {
+  margin-bottom: -$gl-spacing-scale-2;
+}
+
+@mixin gl-mb-3 {
+  margin-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-mb-n3 {
+  margin-bottom: -$gl-spacing-scale-3;
+}
+
+@mixin gl-mb-4 {
+  margin-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-mb-n4 {
+  margin-bottom: -$gl-spacing-scale-4;
+}
+
+@mixin gl-mb-5 {
+  margin-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-mb-n5 {
+  margin-bottom: -$gl-spacing-scale-5;
+}
+
+@mixin gl-mb-6 {
+  margin-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-mb-n6 {
+  margin-bottom: -$gl-spacing-scale-6;
+}
+
+@mixin gl-mb-7 {
+  margin-bottom: $gl-spacing-scale-7;
+}
+
+@mixin gl-mb-n7 {
+  margin-bottom: -$gl-spacing-scale-7;
+}
+
+@mixin gl-mb-8 {
+  margin-bottom: $gl-spacing-scale-8;
+}
+
+@mixin gl-mb-n8 {
+  margin-bottom: -$gl-spacing-scale-8;
+}
+
+@mixin gl-mb-9 {
+  margin-bottom: $gl-spacing-scale-9;
+}
+
+@mixin gl-mb-11 {
+  margin-bottom: $gl-spacing-scale-11;
+}
+
+@mixin gl-mb-12 {
+  margin-bottom: $gl-spacing-scale-12;
+}
+
+@mixin gl-ml-auto {
+  margin-left: auto;
+}
+
+@mixin gl-sm-ml-auto {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-auto;
+  }
+}
+
+@mixin gl-ml-0 {
+  margin-left: 0;
+}
+
+@mixin gl-ml-1 {
+  margin-left: $gl-spacing-scale-1;
+}
+
+@mixin gl-ml-n1 {
+  margin-left: -$gl-spacing-scale-1;
+}
+
+@mixin gl-ml-2 {
+  margin-left: $gl-spacing-scale-2;
+}
+
+@mixin gl-ml-n2 {
+  margin-left: -$gl-spacing-scale-2;
+}
+
+@mixin gl-ml-3 {
+  margin-left: $gl-spacing-scale-3;
+}
+
+@mixin gl-ml-n3 {
+  margin-left: -$gl-spacing-scale-3;
+}
+
+@mixin gl-ml-4 {
+  margin-left: $gl-spacing-scale-4;
+}
+
+@mixin gl-ml-n4 {
+  margin-left: -$gl-spacing-scale-4;
+}
+
+@mixin gl-ml-5 {
+  margin-left: $gl-spacing-scale-5;
+}
+
+@mixin gl-ml-6 {
+  margin-left: $gl-spacing-scale-6;
+}
+
+@mixin gl-ml-7 {
+  margin-left: $gl-spacing-scale-7;
+}
+
+@mixin gl-ml-11 {
+  margin-left: $gl-spacing-scale-11;
+}
+
+@mixin gl-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+@mixin gl-my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@mixin gl-my-1 {
+  margin-top: $gl-spacing-scale-1;
+  margin-bottom: $gl-spacing-scale-1;
+}
+
+@mixin gl-my-2 {
+  margin-top: $gl-spacing-scale-2;
+  margin-bottom: $gl-spacing-scale-2;
+}
+
+@mixin gl-my-3 {
+  margin-top: $gl-spacing-scale-3;
+  margin-bottom: $gl-spacing-scale-3;
+}
+
+@mixin gl-my-4 {
+  margin-top: $gl-spacing-scale-4;
+  margin-bottom: $gl-spacing-scale-4;
+}
+
+@mixin gl-my-5 {
+  margin-top: $gl-spacing-scale-5;
+  margin-bottom: $gl-spacing-scale-5;
+}
+
+@mixin gl-my-6 {
+  margin-top: $gl-spacing-scale-6;
+  margin-bottom: $gl-spacing-scale-6;
+}
+
+@mixin gl-my-7 {
+  margin-top: $gl-spacing-scale-7;
+  margin-bottom: $gl-spacing-scale-7;
+}
+
+@mixin gl-my-8 {
+  margin-top: $gl-spacing-scale-8;
+  margin-bottom: $gl-spacing-scale-8;
+}
+
+@mixin gl-my-9 {
+  margin-top: $gl-spacing-scale-9;
+  margin-bottom: $gl-spacing-scale-9;
+}
+
+@mixin gl-my-11 {
+  margin-top: $gl-spacing-scale-11;
+  margin-bottom: $gl-spacing-scale-11;
+}
+
+@mixin gl-my-12 {
+  margin-top: $gl-spacing-scale-12;
+  margin-bottom: $gl-spacing-scale-12;
+}
+
+@mixin gl-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin gl-mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+@mixin gl-mx-1 {
+  margin-left: $gl-spacing-scale-1;
+  margin-right: $gl-spacing-scale-1;
+}
+
+@mixin gl-mx-2 {
+  margin-left: $gl-spacing-scale-2;
+  margin-right: $gl-spacing-scale-2;
+}
+
+@mixin gl-mx-3 {
+  margin-left: $gl-spacing-scale-3;
+  margin-right: $gl-spacing-scale-3;
+}
+
+@mixin gl-mx-4 {
+  margin-left: $gl-spacing-scale-4;
+  margin-right: $gl-spacing-scale-4;
+}
+
+@mixin gl-mx-5 {
+  margin-left: $gl-spacing-scale-5;
+  margin-right: $gl-spacing-scale-5;
+}
+
+@mixin gl-mx-6 {
+  margin-left: $gl-spacing-scale-6;
+  margin-right: $gl-spacing-scale-6;
+}
+
+@mixin gl-mx-7 {
+  margin-left: $gl-spacing-scale-7;
+  margin-right: $gl-spacing-scale-7;
+}
+
+@mixin gl-mx-8 {
+  margin-left: $gl-spacing-scale-8;
+  margin-right: $gl-spacing-scale-8;
+}
+
+/**
+* Negative margin utilities.
+*
+* naming convention: gl-m{position}-n{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-my-n1 {
+  margin-top: -#{$gl-spacing-scale-1};
+  margin-bottom: -#{$gl-spacing-scale-1};
+}
+
+@mixin gl-mx-n1 {
+  margin-left: -#{$gl-spacing-scale-1};
+  margin-right: -#{$gl-spacing-scale-1};
+}
+
+@mixin gl-my-n2 {
+  margin-top: -#{$gl-spacing-scale-2};
+  margin-bottom: -#{$gl-spacing-scale-2};
+}
+
+@mixin gl-mx-n2 {
+  margin-left: -#{$gl-spacing-scale-2};
+  margin-right: -#{$gl-spacing-scale-2};
+}
+
+@mixin gl-my-n3 {
+  margin-top: -#{$gl-spacing-scale-3};
+  margin-bottom: -#{$gl-spacing-scale-3};
+}
+
+@mixin gl-mx-n3 {
+  margin-left: -#{$gl-spacing-scale-3};
+  margin-right: -#{$gl-spacing-scale-3};
+}
+
+@mixin gl-my-n4 {
+  margin-top: -#{$gl-spacing-scale-4};
+  margin-bottom: -#{$gl-spacing-scale-4};
+}
+
+@mixin gl-mx-n4 {
+  margin-left: -#{$gl-spacing-scale-4};
+  margin-right: -#{$gl-spacing-scale-4};
+}
+
+@mixin gl-mx-n5 {
+  margin-left: -#{$gl-spacing-scale-5};
+  margin-right: -#{$gl-spacing-scale-5};
+}
+
+@mixin gl-mx-n6 {
+  margin-left: -#{$gl-spacing-scale-6};
+  margin-right: -#{$gl-spacing-scale-6};
+}
+
+/**
+* Gap utilities
+*
+* naming convention: gl-gap-{direction}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+* - Utilities should be refactored to use gap after dropping Safari 13.x support
+*/
+
+@mixin gl-gap-1 {
+  gap: $gl-spacing-scale-1;
+}
+
+@mixin gl-gap-2 {
+  gap: $gl-spacing-scale-2;
+}
+
+@mixin gl-gap-3 {
+  gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-sm-gap-3 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-gap-3;
+  }
+}
+
+@mixin gl-gap-4 {
+  gap: $gl-spacing-scale-4;
+}
+
+@mixin gl-gap-5 {
+  gap: $gl-spacing-scale-5;
+}
+
+@mixin gl-gap-6 {
+  gap: $gl-spacing-scale-6;
+}
+
+@mixin gl-gap-7 {
+  gap: $gl-spacing-scale-7;
+}
+
+/**
+* Column gap utilities
+*
+* naming convention: gl-column-gap-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+
+@mixin gl-column-gap-1 {
+  column-gap: $gl-spacing-scale-1;
+}
+
+@mixin gl-column-gap-2 {
+  column-gap: $gl-spacing-scale-2;
+}
+
+@mixin gl-column-gap-3 {
+  column-gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-column-gap-4 {
+  column-gap: $gl-spacing-scale-4;
+}
+
+@mixin gl-column-gap-5 {
+  column-gap: $gl-spacing-scale-5;
+}
+
+@mixin gl-column-gap-6 {
+  column-gap: $gl-spacing-scale-6;
+}
+
+@mixin gl-column-gap-7 {
+  column-gap: $gl-spacing-scale-7;
+}
+
+/**
+* Row gap utilities
+*
+* naming convention: gl-row-gap-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+
+@mixin gl-row-gap-1 {
+  row-gap: $gl-spacing-scale-1;
+}
+
+@mixin gl-row-gap-2 {
+  row-gap: $gl-spacing-scale-2;
+}
+
+@mixin gl-row-gap-3 {
+  row-gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-row-gap-4 {
+  row-gap: $gl-spacing-scale-4;
+}
+
+@mixin gl-row-gap-5 {
+  row-gap: $gl-spacing-scale-5;
+}
+
+@mixin gl-row-gap-6 {
+  row-gap: $gl-spacing-scale-6;
+}
+
+@mixin gl-row-gap-7 {
+  row-gap: $gl-spacing-scale-7;
+}
+
+/**
+* Responsive margin utilities.
+*
+* naming convention: gl-{breakpoint}-m{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+@mixin gl-sm-ml-3 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-3;
+  }
+}
+
+@mixin gl-sm-ml-5 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-5;
+  }
+}
+
+@mixin gl-sm-ml-7 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-7;
+  }
+}
+
+@mixin gl-sm-mr-0 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mr-0;
+  }
+}
+
+@mixin gl-sm-mt-0 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mt-0;
+  }
+}
+
+@mixin gl-sm-mt-5 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mt-5;
+  }
+}
+
+@mixin gl-sm-mt-6 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mt-6;
+  }
+}
+
+@mixin gl-sm-mb-0 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-bottom: 0;
+  }
+}
+
+@mixin gl-sm-mb-7 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mb-7;
+  }
+}
+
+@mixin gl-sm-my-12 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-my-12;
+  }
+}
+
+@mixin gl-sm-mx-0 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mx-0;
+  }
+}
+
+@mixin gl-md-mt-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mt-0;
+  }
+}
+
+@mixin gl-md-mt-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mt-5;
+  }
+}
+
+@mixin gl-md-mb-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mb-0;
+  }
+}
+
+@mixin gl-md-mb-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mb-3;
+  }
+}
+
+@mixin gl-md-mb-6 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mb-6;
+  }
+}
+
+@mixin gl-md-mb-12 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mb-12;
+  }
+}
+
+@mixin gl-lg-mb-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mb-0;
+  }
+}
+
+@mixin gl-lg-mb-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mb-5;
+  }
+}
+
+@mixin gl-md-ml-auto {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-auto;
+  }
+}
+
+@mixin gl-md-ml-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-2;
+  }
+}
+
+@mixin gl-md-ml-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-3;
+  }
+}
+
+@mixin gl-md-mr-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mr-0;
+  }
+}
+
+@mixin gl-md-mr-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mr-3;
+  }
+}
+
+@mixin gl-md-mr-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mr-5;
+  }
+}
+
+@mixin gl-lg-mr-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mr-2;
+  }
+}
+
+@mixin gl-lg-mr-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mr-3;
+  }
+}
+
+@mixin gl-lg-mr-10 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-10;
+  }
+}
+
+@mixin gl-lg-mr-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-right: $gl-spacing-scale-12;
+  }
+}
+
+@mixin gl-lg-ml-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-ml-2;
+  }
+}
+
+@mixin gl-lg-ml-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-ml-3;
+  }
+}
+
+@mixin gl-lg-ml-10 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-10;
+  }
+}
+
+@mixin gl-lg-ml-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12;
+  }
+}
+
+@mixin gl-xl-ml-3 {
+  @include gl-media-breakpoint-up(xl) {
+    margin-left: $gl-spacing-scale-3;
+  }
+}
+
+@mixin gl-lg-mx-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mx-2;
+  }
+}
+
+@mixin gl-lg-mx-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mx-3;
+  }
+}
+
+@mixin gl-lg-mx-12 {
+  @include gl-media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-12;
+    margin-right: $gl-spacing-scale-12;
+  }
+}
+
+@mixin gl-lg-my-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-my-5;
+  }
+}
+
+@mixin gl-lg-mt-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mt-0;
+  }
+}
+
+@mixin gl-lg-mt-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-mt-5;
+  }
+}
+
+/**
+* Responsive padding utilities.
+*
+* naming convention: gl-{breakpoint}-p{position}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+
+@mixin gl-sm-pr-2 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-pr-2;
+  }
+}
+
+@mixin gl-sm-pr-4 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-pr-4;
+  }
+}
+
+@mixin gl-sm-pl-0 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-sm-pl-6 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-pl-6;
+  }
+}
+
+@mixin gl-md-pt-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-md-pt-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-md-pt-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-md-pt-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-md-pt-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-md-pt-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-5;
+  }
+}
+
+@mixin gl-md-pt-11 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-11;
+  }
+}
+
+@mixin gl-md-pr-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-0;
+  }
+}
+
+@mixin gl-md-pr-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-md-pr-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-md-pr-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-4;
+  }
+}
+
+@mixin gl-md-pr-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-5;
+  }
+}
+
+@mixin gl-md-pb-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-md-pb-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-md-pb-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-md-pb-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-md-pb-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-md-pb-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-md-pl-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-md-pl-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-md-pl-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-md-pl-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-3;
+  }
+}
+
+@mixin gl-md-pl-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-4;
+  }
+}
+
+@mixin gl-md-pl-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-5;
+  }
+}
+
+@mixin gl-md-pl-7 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-7;
+  }
+}
+
+@mixin gl-md-px-7 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-px-7;
+  }
+}
+
+@mixin gl-lg-pt-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-lg-pt-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-lg-pt-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-lg-pt-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-lg-pt-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-lg-pt-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-5;
+  }
+}
+
+@mixin gl-lg-pr-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-0;
+  }
+}
+
+@mixin gl-lg-pr-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-lg-pr-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-2;
+  }
+}
+
+@mixin gl-lg-pr-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-lg-pr-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-4;
+  }
+}
+
+@mixin gl-lg-pr-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-5;
+  }
+}
+
+@mixin gl-lg-pb-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-lg-pb-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-lg-pb-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-lg-pb-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-lg-pb-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-lg-pb-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-lg-pl-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-lg-pl-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-lg-pl-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-lg-pl-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-3;
+  }
+}
+
+@mixin gl-lg-pl-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-4;
+  }
+}
+
+@mixin gl-lg-pl-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-5;
+  }
+}
+
+/**
+  * Remove margin and padding from empty elements
+  * to prevent them from inadvertantly taking up
+  * space when empty. Note that for :empty to match
+  * the element can not even have whitespace in it
+  */
+@mixin gl-collapse-empty {
+  &:empty {
+    padding: 0;
+    margin: 0;
+  }
+}