@gitlab/ui 32.54.2 → 32.58.0

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

@@ -206,20 +206,44 @@
   }
 }
 
+@mixin gl-sm-w-half {
+  @include gl-media-breakpoint-up(sm) {
+    width: 50%;
+  }
+}
+
 @mixin gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;
   }
 }
 
+@mixin gl-md-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
 @mixin gl-lg-w-1px {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     width: 1px;
   }
 }
 
-@mixin gl-md-w-50p {
-  @include gl-media-breakpoint-up(md) {
+@mixin gl-lg-w-auto {
+  @include gl-media-breakpoint-up(lg) {
+    width: auto;
+  }
+}
+
+@mixin gl-lg-w-25p {
+  @include gl-media-breakpoint-up(lg) {
+    width: 25%;
+  }
+}
+
+@mixin gl-lg-w-50p {
+  @include gl-media-breakpoint-up(lg) {
     width: 50%;
   }
 }

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

@@ -732,6 +732,21 @@
   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-x-3 {
+  * + * {
+    margin-left: #{$gl-spacing-scale-3};
+  }
+}
+
 /**
 * Responsive margin utilities.
 *
@@ -806,6 +821,12 @@
   }
 }
 
+@mixin gl-md-ml-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-3;
+  }
+}
+
 @mixin gl-md-mr-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-mr-3;
@@ -879,18 +900,187 @@
 * notes:
 * - Utilities should strictly follow $gl-spacing-scale
 */
+
+@mixin gl-sm-pt-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-sm-pt-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-sm-pt-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-sm-pt-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-sm-pt-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-sm-pt-5 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-5;
+  }
+}
+
+@mixin gl-sm-pr-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-0;
+  }
+}
+
+@mixin gl-sm-pr-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-sm-pr-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-2;
+  }
+}
+
+@mixin gl-sm-pr-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-sm-pr-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-sm-pr-5 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-5;
   }
 }
 
+@mixin gl-sm-pb-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-sm-pb-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-sm-pb-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-sm-pb-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-sm-pb-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-sm-pb-5 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-sm-pl-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-sm-pl-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-sm-pl-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-sm-pl-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-3;
+  }
+}
+
+@mixin gl-sm-pl-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-4;
+  }
+}
+
 @mixin gl-sm-pl-5 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-5;
   }
 }
 
+@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-pr-0 {
   @include gl-media-breakpoint-up(md) {
     @include gl-pr-0;
@@ -909,18 +1099,240 @@
   }
 }
 
-@mixin gl-lg-pr-5 {
-  @include gl-media-breakpoint-up(lg) {
+@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-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