@gitlab/ui 58.2.1 → 58.4.0

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

@@ -174,6 +174,10 @@
   background-color: $red-700;
 }
 
+@mixin gl-bg-t-gray-a-08($hover: true) {
+  background-color: $t-gray-a-08;
+}
+
 @mixin gl-bg-theme-indigo-50 {
   background-color: $theme-indigo-50;
 }

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

@@ -421,6 +421,11 @@
   border-bottom-right-radius: 0;
 }
 
+@mixin gl-rounded-bottom-base {
+  border-bottom-left-radius: $gl-border-radius-base;
+  border-bottom-right-radius: $gl-border-radius-base;
+}
+
 @mixin gl-rounded-top-left-small {
   border-top-left-radius: $gl-border-radius-small;
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -125,6 +125,10 @@
   box-shadow: inset $gl-border-size-3 0 0 0 $red-600;
 }
 
+@mixin gl-inset-border-1-gray-a-08 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $t-gray-a-08;
+}
+
 @mixin gl-inset-border-b-2-theme-accent {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
 }
@@ -186,6 +190,10 @@
   box-shadow: -4px 0 8px $gray-200;
 }
 
+@mixin gl-shadow-x0-y0-b3-s1-blue-500 {
+  box-shadow: inset 0 0 3px 1px $blue-500;
+}
+
 /**
 * New utilities to match design specs
 * Per https: //gitlab.com/gitlab-org/gitlab-ui/-/issues/615,

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

@@ -18,3 +18,7 @@
   @include gl-align-items-center;
   @include gl-justify-content-center;
 }
+
+@mixin gl--focus($focus: true) {
+  @include gl-focus;
+}

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

@@ -241,6 +241,10 @@
   flex-basis: 0;
 }
 
+@mixin gl-flex-basis-quarter {
+  flex-basis: 25%;
+}
+
 @mixin gl-flex-basis-third {
   flex-basis: 33%;
 }
@@ -257,6 +261,10 @@
   flex-basis: 100%;
 }
 
+@mixin gl-flex-flow-row-wrap {
+  flex-flow: row wrap;
+}
+
 @mixin gl-justify-content-center {
   justify-content: center;
 }
@@ -287,6 +295,12 @@
   justify-content: space-between;
 }
 
+@mixin gl-md-justify-content-space-between {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-justify-content-space-between;
+  }
+}
+
 @mixin gl-justify-content-start {
   justify-content: flex-start;
 }

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

@@ -26,3 +26,15 @@
     grid-template-columns: 1fr 1fr;
   }
 }
+
+@mixin gl-md-grid-template-columns-3 {
+  @include gl-media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@mixin gl-lg-grid-template-columns-4 {
+  @include gl-media-breakpoint-up(lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

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

@@ -28,6 +28,7 @@
 @import './display';
 @import './flex';
 @import './grid';
+@import './isolation';
 @import './list-style';
 @import './masks';
 @import './mix-blend-mode';

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

@@ -0,0 +1,3 @@
+@mixin gl-isolation-isolate {
+  isolation: isolate;
+}

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

@@ -86,6 +86,10 @@
   top: 50%;
 }
 
+@mixin gl-top-66vh {
+  top: 66vh;
+}
+
 @mixin gl-right-auto {
   right: auto;
 }

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

@@ -126,6 +126,14 @@
   width: 100%;
 }
 
+@mixin gl-w-grid-size-30 {
+  width: $grid-size * 30;
+}
+
+@mixin gl-w-grid-size-40 {
+  width: $grid-size * 40;
+}
+
 @mixin gl-xs-w-full {
   // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
@@ -378,10 +386,18 @@
   max-width: $gl-spacing-scale-34;
 }
 
+@mixin gl-max-w-48 {
+  max-width: $gl-spacing-scale-48;
+}
+
 @mixin gl-max-w-62 {
   max-width: $gl-spacing-scale-62;
 }
 
+@mixin gl-max-w-75 {
+  max-width: $gl-spacing-scale-75;
+}
+
 @mixin gl-max-w-80 {
   max-width: $gl-spacing-scale-80;
 }
@@ -410,6 +426,10 @@
   max-width: 100vw;
 }
 
+@mixin gl-max-w-50p {
+  max-width: 50%;
+}
+
 /**
 * Responsive Minimum/Maximun dimension (width/height) utilities
 *

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

@@ -344,6 +344,11 @@
   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;
@@ -400,6 +405,10 @@
   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;
@@ -450,6 +459,12 @@
   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;
 }
@@ -466,6 +481,10 @@
   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;
 }
@@ -498,6 +517,12 @@
   margin-right: $gl-spacing-scale-7;
 }
 
+@mixin gl-sm-mr-3 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-right: $gl-spacing-scale-3;
+  }
+}
+
 @mixin gl-mb-auto {
   margin-bottom: auto;
 }
@@ -558,6 +583,10 @@
   margin-bottom: $gl-spacing-scale-11;
 }
 
+@mixin gl-mb-12 {
+  margin-bottom: $gl-spacing-scale-12;
+}
+
 @mixin gl-ml-auto {
   margin-left: auto;
 }
@@ -935,12 +964,36 @@
   }
 }
 
+@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;
@@ -1031,6 +1084,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;
@@ -1151,6 +1210,12 @@
   }
 }
 
+@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;

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

@@ -54,6 +54,10 @@
   text-transform: capitalize;
 }
 
+@mixin gl-text-uppercase {
+  text-transform: uppercase;
+}
+
 /**
 * Text overflow utilities
 *

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

@@ -11,6 +11,14 @@
   transition-property: width;
 }
 
+@mixin gl-transition-property-stroke {
+  transition-property: stroke;
+}
+
+@mixin gl-transition-property-stroke-opacity {
+  transition-property: stroke-opacity;
+}
+
 @mixin gl-transition-duration-slow {
   transition-duration: $gl-transition-duration-slow;
 }

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

@@ -35,6 +35,10 @@
 * - Strictly based on design system type scale. See
 * $gl-type-scale for further references.
 */
+@mixin gl-font-xs {
+  font-size: $gl-font-size-xs;
+}
+
 @mixin gl-font-sm {
   font-size: $gl-font-size-sm;
 }
@@ -146,10 +150,18 @@
   line-height: 0;
 }
 
+@mixin gl-line-height-1 {
+  line-height: 1;
+}
+
 @mixin gl-line-height-normal {
   line-height: $gl-line-height-16;
 }
 
+@mixin gl-line-height-12 {
+  line-height: $gl-line-height-12;
+}
+
 @mixin gl-line-height-20 {
   line-height: $gl-line-height-20;
 }
@@ -181,3 +193,12 @@
 @mixin gl-reset-line-height {
   line-height: inherit;
 }
+
+/**
+* Letter spacing utilities.
+*
+* naming convention: gl-letter-spacing-{letter-spacing}{unit}
+*/
+@mixin gl-letter-spacing-06em {
+  letter-spacing: 0.06em;
+}

package/src/scss/variables.scss

@@ -22,7 +22,9 @@ $gl-spacing-scale-26: 26 * $grid-size;
 $gl-spacing-scale-28: 28 * $grid-size;
 $gl-spacing-scale-30: 30 * $grid-size;
 $gl-spacing-scale-34: 34 * $grid-size;
+$gl-spacing-scale-48: 48 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;
+$gl-spacing-scale-75: 75 * $grid-size;
 $gl-spacing-scale-80: 80 * $grid-size;
 
 // Responsive breakpoints
@@ -328,6 +330,7 @@ $gl-font-weights: (
 );
 
 // Line height
+$gl-line-height-12: px-to-rem(12px);
 $gl-line-height-16: px-to-rem(16px);
 $gl-line-height-20: px-to-rem(20px);
 $gl-line-height-24: px-to-rem(24px);
@@ -342,6 +345,7 @@ $gl-line-height-52: px-to-rem(52px);
 
 // default (min-width: 0)
 $gl-font-size: px-to-rem(14px);
+$gl-font-size-xs: px-to-rem(10px);
 $gl-font-size-sm: px-to-rem(12px);
 $gl-font-size-lg: px-to-rem(16px);