@gitlab/ui 58.2.1 → 58.4.0

package/src/scss/utilities.scss

@@ -474,6 +474,22 @@
   background-color: $red-700 !important
 }
 
+.gl-bg-t-gray-a-08 {
+  background-color: $t-gray-a-08
+}
+
+.gl-hover-bg-t-gray-a-08:hover {
+  background-color: $t-gray-a-08
+}
+
+.gl-bg-t-gray-a-08\! {
+  background-color: $t-gray-a-08 !important
+}
+
+.gl-hover-bg-t-gray-a-08\!:hover {
+  background-color: $t-gray-a-08 !important
+}
+
 .gl-bg-theme-indigo-50 {
   background-color: $theme-indigo-50
 }
@@ -1743,6 +1759,16 @@
   border-bottom-right-radius: 0 !important;
 }
 
+.gl-rounded-bottom-base {
+  border-bottom-left-radius: $gl-border-radius-base;
+  border-bottom-right-radius: $gl-border-radius-base;
+}
+
+.gl-rounded-bottom-base\! {
+  border-bottom-left-radius: $gl-border-radius-base !important;
+  border-bottom-right-radius: $gl-border-radius-base !important;
+}
+
 .gl-rounded-top-left-small {
   border-top-left-radius: $gl-border-radius-small;
 }
@@ -2050,6 +2076,14 @@
   box-shadow: inset $gl-border-size-3 0 0 0 $red-600 !important
 }
 
+.gl-inset-border-1-gray-a-08 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $t-gray-a-08
+}
+
+.gl-inset-border-1-gray-a-08\! {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $t-gray-a-08 !important
+}
+
 .gl-inset-border-b-2-theme-accent {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500)
 }
@@ -2162,6 +2196,14 @@
   box-shadow: -4px 0 8px $gray-200 !important
 }
 
+.gl-shadow-x0-y0-b3-s1-blue-500 {
+  box-shadow: inset 0 0 3px 1px $blue-500
+}
+
+.gl-shadow-x0-y0-b3-s1-blue-500\! {
+  box-shadow: inset 0 0 3px 1px $blue-500 !important
+}
+
 .gl-shadow-sm {
   box-shadow: 0 1px 2px rgba($gray-950, 0.1)
 }
@@ -2667,11 +2709,28 @@
   @include gl-align-items-center;
   @include gl-justify-content-center
 }
+
 .gl--flex-center\!{
   @include gl-display-flex;
   @include gl-align-items-center;
   @include gl-justify-content-center
 }
+
+.gl--focus{
+  @include gl-focus
+}
+
+.gl-focus--focus:focus{
+  @include gl-focus
+}
+
+.gl--focus\!{
+  @include gl-focus
+}
+
+.gl-focus--focus\!:focus{
+  @include gl-focus
+}
 .gl-content-empty {
   content: ''
 }
@@ -3560,6 +3619,14 @@
   flex-basis: 0 !important;
 }
 
+.gl-flex-basis-quarter {
+  flex-basis: 25%;
+}
+
+.gl-flex-basis-quarter\! {
+  flex-basis: 25% !important;
+}
+
 .gl-flex-basis-third {
   flex-basis: 33%;
 }
@@ -3592,6 +3659,14 @@
   flex-basis: 100% !important;
 }
 
+.gl-flex-flow-row-wrap {
+  flex-flow: row wrap;
+}
+
+.gl-flex-flow-row-wrap\! {
+  flex-flow: row wrap !important;
+}
+
 .gl-justify-content-center {
   justify-content: center;
 }
@@ -3652,6 +3727,18 @@
   justify-content: space-between !important;
 }
 
+.gl-md-justify-content-space-between {
+  @include gl-media-breakpoint-up(md) {
+  justify-content: space-between;
+  }
+}
+
+.gl-md-justify-content-space-between\! {
+  @include gl-media-breakpoint-up(md) {
+  justify-content: space-between !important;
+  }
+}
+
 .gl-justify-content-start {
   justify-content: flex-start;
 }
@@ -3787,6 +3874,36 @@
   }
 }
 
+.gl-md-grid-template-columns-3 {
+  @include gl-media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.gl-md-grid-template-columns-3\! {
+  @include gl-media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+}
+
+.gl-lg-grid-template-columns-4 {
+  @include gl-media-breakpoint-up(lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.gl-lg-grid-template-columns-4\! {
+  @include gl-media-breakpoint-up(lg) {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
+}
+
+.gl-isolation-isolate {
+  isolation: isolate
+}
+.gl-isolation-isolate\! {
+  isolation: isolate !important
+}
 .gl-list-style-none {
   list-style-type: none
 }
@@ -4124,6 +4241,14 @@
   top: 50% !important;
 }
 
+.gl-top-66vh {
+  top: 66vh;
+}
+
+.gl-top-66vh\! {
+  top: 66vh !important;
+}
+
 .gl-right-auto {
   right: auto;
 }
@@ -4603,6 +4728,22 @@
   width: 100% !important;
 }
 
+.gl-w-grid-size-30 {
+  width: $grid-size * 30;
+}
+
+.gl-w-grid-size-30\! {
+  width: $grid-size * 30 !important;
+}
+
+.gl-w-grid-size-40 {
+  width: $grid-size * 40;
+}
+
+.gl-w-grid-size-40\! {
+  width: $grid-size * 40 !important;
+}
+
 .gl-xs-w-full {
   @include gl-media-breakpoint-down(sm) {
   width: 100%;
@@ -5075,6 +5216,14 @@
   max-width: $gl-spacing-scale-34 !important;
 }
 
+.gl-max-w-48 {
+  max-width: $gl-spacing-scale-48;
+}
+
+.gl-max-w-48\! {
+  max-width: $gl-spacing-scale-48 !important;
+}
+
 .gl-max-w-62 {
   max-width: $gl-spacing-scale-62;
 }
@@ -5083,6 +5232,14 @@
   max-width: $gl-spacing-scale-62 !important;
 }
 
+.gl-max-w-75 {
+  max-width: $gl-spacing-scale-75;
+}
+
+.gl-max-w-75\! {
+  max-width: $gl-spacing-scale-75 !important;
+}
+
 .gl-max-w-80 {
   max-width: $gl-spacing-scale-80;
 }
@@ -5139,6 +5296,14 @@
   max-width: 100vw !important;
 }
 
+.gl-max-w-50p {
+  max-width: 50%;
+}
+
+.gl-max-w-50p\! {
+  max-width: 50% !important;
+}
+
 .gl-md-max-w-26 {
   @include gl-media-breakpoint-up(md) {
     max-width: $gl-spacing-scale-26;
@@ -5730,6 +5895,14 @@
   padding-top: $gl-spacing-scale-7 !important;
   padding-bottom: $gl-spacing-scale-7 !important;
 }
+.gl-py-8 {
+  padding-top: $gl-spacing-scale-8;
+  padding-bottom: $gl-spacing-scale-8;
+}
+.gl-py-8\! {
+  padding-top: $gl-spacing-scale-8 !important;
+  padding-bottom: $gl-spacing-scale-8 !important;
+}
 .gl-py-13 {
   padding-top: $gl-spacing-scale-13;
   padding-bottom: $gl-spacing-scale-13;
@@ -5804,6 +5977,12 @@
 .gl-mt-n1\! {
   margin-top: -$gl-spacing-scale-1 !important;
 }
+.gl-mt-n5 {
+  margin-top: -$gl-spacing-scale-5;
+}
+.gl-mt-n5\! {
+  margin-top: -$gl-spacing-scale-5 !important;
+}
 .gl-md-mt-n2 {
   @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2;
@@ -5880,6 +6059,16 @@
 .gl-mt-11\! {
   margin-top: $gl-spacing-scale-11 !important;
 }
+.gl-md-mt-11 {
+  @include gl-media-breakpoint-up(md) {
+    margin-top: $gl-spacing-scale-11;
+  }
+}
+.gl-md-mt-11\! {
+  @include gl-media-breakpoint-up(md) {
+    margin-top: $gl-spacing-scale-11 !important;
+  }
+}
 .gl-mr-auto {
   margin-right: auto;
 }
@@ -5904,6 +6093,12 @@
 .gl-mr-n1\! {
   margin-right: -$gl-spacing-scale-1 !important;
 }
+.gl-mr-n2 {
+  margin-right: -$gl-spacing-scale-2;
+}
+.gl-mr-n2\! {
+  margin-right: -$gl-spacing-scale-2 !important;
+}
 .gl-mr-2 {
   margin-right: $gl-spacing-scale-2;
 }
@@ -5952,6 +6147,16 @@
 .gl-mr-7\! {
   margin-right: $gl-spacing-scale-7 !important;
 }
+.gl-sm-mr-3 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-right: $gl-spacing-scale-3;
+  }
+}
+.gl-sm-mr-3\! {
+  @include gl-media-breakpoint-up(sm) {
+    margin-right: $gl-spacing-scale-3 !important;
+  }
+}
 .gl-mb-auto {
   margin-bottom: auto;
 }
@@ -6042,6 +6247,12 @@
 .gl-mb-11\! {
   margin-bottom: $gl-spacing-scale-11 !important;
 }
+.gl-mb-12 {
+  margin-bottom: $gl-spacing-scale-12;
+}
+.gl-mb-12\! {
+  margin-bottom: $gl-spacing-scale-12 !important;
+}
 .gl-ml-auto {
   margin-left: auto;
 }
@@ -6594,6 +6805,16 @@
   margin-top: 0 !important;
   }
 }
+.gl-md-mt-5 {
+  @include gl-media-breakpoint-up(md) {
+  margin-top: $gl-spacing-scale-5;
+  }
+}
+.gl-md-mt-5\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-top: $gl-spacing-scale-5 !important;
+  }
+}
 .gl-md-mb-0 {
   @include gl-media-breakpoint-up(md) {
   margin-bottom: 0;
@@ -6604,6 +6825,36 @@
   margin-bottom: 0 !important;
   }
 }
+.gl-md-mb-3 {
+  @include gl-media-breakpoint-up(md) {
+  margin-bottom: $gl-spacing-scale-3;
+  }
+}
+.gl-md-mb-3\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-bottom: $gl-spacing-scale-3 !important;
+  }
+}
+.gl-md-mb-6 {
+  @include gl-media-breakpoint-up(md) {
+  margin-bottom: $gl-spacing-scale-6;
+  }
+}
+.gl-md-mb-6\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-bottom: $gl-spacing-scale-6 !important;
+  }
+}
+.gl-md-mb-12 {
+  @include gl-media-breakpoint-up(md) {
+  margin-bottom: $gl-spacing-scale-12;
+  }
+}
+.gl-md-mb-12\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-bottom: $gl-spacing-scale-12 !important;
+  }
+}
 .gl-lg-mb-0 {
   @include gl-media-breakpoint-up(lg) {
   margin-bottom: 0;
@@ -6754,6 +7005,16 @@
     margin-left: $gl-spacing-scale-12 !important;
   }
 }
+.gl-xl-ml-3 {
+  @include gl-media-breakpoint-up(xl) {
+    margin-left: $gl-spacing-scale-3;
+  }
+}
+.gl-xl-ml-3\! {
+  @include gl-media-breakpoint-up(xl) {
+    margin-left: $gl-spacing-scale-3 !important;
+  }
+}
 .gl-lg-mx-2 {
   @include gl-media-breakpoint-up(lg) {
   margin-left: $gl-spacing-scale-2;
@@ -6942,6 +7203,16 @@
   padding-top: $gl-spacing-scale-5 !important;
   }
 }
+.gl-md-pt-11 {
+  @include gl-media-breakpoint-up(md) {
+  padding-top: $gl-spacing-scale-11;
+  }
+}
+.gl-md-pt-11\! {
+  @include gl-media-breakpoint-up(md) {
+  padding-top: $gl-spacing-scale-11 !important;
+  }
+}
 .gl-md-pr-0 {
   @include gl-media-breakpoint-up(md) {
   padding-right: 0;
@@ -7635,6 +7906,12 @@
 .gl-text-transform-capitalize\! {
   text-transform: capitalize !important;
 }
+.gl-text-uppercase {
+  text-transform: uppercase;
+}
+.gl-text-uppercase\! {
+  text-transform: uppercase !important;
+}
 .gl-text-overflow-ellipsis {
   text-overflow: ellipsis;
 }
@@ -7844,6 +8121,22 @@
   transition-property: width !important
 }
 
+.gl-transition-property-stroke {
+  transition-property: stroke
+}
+
+.gl-transition-property-stroke\! {
+  transition-property: stroke !important
+}
+
+.gl-transition-property-stroke-opacity {
+  transition-property: stroke-opacity
+}
+
+.gl-transition-property-stroke-opacity\! {
+  transition-property: stroke-opacity !important
+}
+
 .gl-transition-duration-slow {
   transition-duration: $gl-transition-duration-slow
 }
@@ -7887,303 +8180,254 @@
   font-family: $gl-monospace-font;
   font-variant-ligatures: none;
 }
-
 .gl-font-monospace\! {
   font-family: $gl-monospace-font !important;
   font-variant-ligatures: none !important;
 }
-
 .gl-font-regular {
   font-family: $gl-regular-font;
 }
-
 .gl-font-regular\! {
   font-family: $gl-regular-font !important;
 }
-
 .gl-font-style-italic {
   font-style: italic;
 }
-
 .gl-font-style-italic\! {
   font-style: italic !important;
 }
-
 .gl-font-style-normal {
   font-style: normal;
 }
-
 .gl-font-style-normal\! {
   font-style: normal !important;
 }
-
+.gl-font-xs {
+  font-size: $gl-font-size-xs;
+}
+.gl-font-xs\! {
+  font-size: $gl-font-size-xs !important;
+}
 .gl-font-sm {
   font-size: $gl-font-size-sm;
 }
-
 .gl-font-sm\! {
   font-size: $gl-font-size-sm !important;
 }
-
 .gl-font-base {
   font-size: $gl-font-size;
 }
-
 .gl-font-base\! {
   font-size: $gl-font-size !important;
 }
-
 .gl-font-lg {
   font-size: $gl-font-size-lg;
 }
-
 .gl-font-lg\! {
   font-size: $gl-font-size-lg !important;
 }
-
 .gl-font-size-h-display {
   font-size: $gl-font-size-h-display;
 }
-
 .gl-font-size-h-display\! {
   font-size: $gl-font-size-h-display !important;
 }
-
 .gl-font-size-h1 {
   font-size: $gl-font-size-h1;
 }
-
 .gl-font-size-h1\! {
   font-size: $gl-font-size-h1 !important;
 }
-
 .gl-font-size-h2 {
   font-size: $gl-font-size-h2;
 }
-
 .gl-font-size-h2\! {
   font-size: $gl-font-size-h2 !important;
 }
-
 .gl-font-size-h-display-xl {
   font-size: $gl-font-size-h-display-xl;
 }
-
 .gl-font-size-h-display-xl\! {
   font-size: $gl-font-size-h-display-xl !important;
 }
-
 .gl-font-size-h1-xl {
   font-size: $gl-font-size-h1-xl;
 }
-
 .gl-font-size-h1-xl\! {
   font-size: $gl-font-size-h1-xl !important;
 }
-
 .gl-font-size-h2-xl {
   font-size: $gl-font-size-h2-xl;
 }
-
 .gl-font-size-h2-xl\! {
   font-size: $gl-font-size-h2-xl !important;
 }
-
 .gl-font-icon-size {
   font-size: $default-icon-size;
 }
-
 .gl-font-icon-size\! {
   font-size: $default-icon-size !important;
 }
-
 .gl-font-size-markdown-sm {
   font-size: $gl-font-size-markdown-sm;
 }
-
 .gl-font-size-markdown-sm\! {
   font-size: $gl-font-size-markdown-sm !important;
 }
-
 .gl-font-size-markdown {
   font-size: $gl-font-size-markdown;
 }
-
 .gl-font-size-markdown\! {
   font-size: $gl-font-size-markdown !important;
 }
-
 .gl-font-size-markdown-h1 {
   font-size: $gl-font-size-markdown-h1;
 }
-
 .gl-font-size-markdown-h1\! {
   font-size: $gl-font-size-markdown-h1 !important;
 }
-
 .gl-font-size-markdown-h2 {
   font-size: $gl-font-size-markdown-h2;
 }
-
 .gl-font-size-markdown-h2\! {
   font-size: $gl-font-size-markdown-h2 !important;
 }
-
 .gl-font-size-markdown-h3 {
   font-size: $gl-font-size-markdown-h3;
 }
-
 .gl-font-size-markdown-h3\! {
   font-size: $gl-font-size-markdown-h3 !important;
 }
-
 .gl-font-size-compact-markdown-h1 {
   font-size: $gl-font-size-compact-markdown-h1;
 }
-
 .gl-font-size-compact-markdown-h1\! {
   font-size: $gl-font-size-compact-markdown-h1 !important;
 }
-
 .gl-reset-font-size {
   font-size: inherit;
 }
-
 .gl-reset-font-size\! {
   font-size: inherit !important;
 }
-
 .gl-font-weight-100 {
   font-weight: 100;
 }
-
 .gl-font-weight-100\! {
   font-weight: 100 !important;
 }
-
 .gl-font-weight-300 {
   font-weight: 300;
 }
-
 .gl-font-weight-300\! {
   font-weight: 300 !important;
 }
-
 .gl-font-weight-normal {
   font-weight: $gl-font-weight-normal;
 }
-
 .gl-font-weight-normal\! {
   font-weight: $gl-font-weight-normal !important;
 }
-
 .gl-font-weight-semibold {
   font-weight: $gl-font-weight-semibold;
 }
-
 .gl-font-weight-semibold\! {
   font-weight: $gl-font-weight-semibold !important;
 }
-
 .gl-font-weight-bold {
   font-weight: $gl-font-weight-bold;
 }
-
 .gl-font-weight-bold\! {
   font-weight: $gl-font-weight-bold !important;
 }
-
 .gl-sm-font-weight-bold {
   @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold;
   }
 }
-
 .gl-sm-font-weight-bold\! {
   @include gl-media-breakpoint-up(sm) {
   font-weight: $gl-font-weight-bold !important;
   }
 }
-
 .gl-line-height-0 {
   line-height: 0;
 }
-
 .gl-line-height-0\! {
   line-height: 0 !important;
 }
-
+.gl-line-height-1 {
+  line-height: 1;
+}
+.gl-line-height-1\! {
+  line-height: 1 !important;
+}
 .gl-line-height-normal {
   line-height: $gl-line-height-16;
 }
-
 .gl-line-height-normal\! {
   line-height: $gl-line-height-16 !important;
 }
-
+.gl-line-height-12 {
+  line-height: $gl-line-height-12;
+}
+.gl-line-height-12\! {
+  line-height: $gl-line-height-12 !important;
+}
 .gl-line-height-20 {
   line-height: $gl-line-height-20;
 }
-
 .gl-line-height-20\! {
   line-height: $gl-line-height-20 !important;
 }
-
 .gl-line-height-24 {
   line-height: $gl-line-height-24;
 }
-
 .gl-line-height-24\! {
   line-height: $gl-line-height-24 !important;
 }
-
 .gl-line-height-28 {
   line-height: $gl-line-height-28;
 }
-
 .gl-line-height-28\! {
   line-height: $gl-line-height-28 !important;
 }
-
 .gl-line-height-32 {
   line-height: $gl-line-height-32;
 }
-
 .gl-line-height-32\! {
   line-height: $gl-line-height-32 !important;
 }
-
 .gl-line-height-36 {
   line-height: $gl-line-height-36;
 }
-
 .gl-line-height-36\! {
   line-height: $gl-line-height-36 !important;
 }
-
 .gl-line-height-42 {
   line-height: $gl-line-height-42;
 }
-
 .gl-line-height-42\! {
   line-height: $gl-line-height-42 !important;
 }
-
 .gl-line-height-52 {
   line-height: $gl-line-height-52;
 }
-
 .gl-line-height-52\! {
   line-height: $gl-line-height-52 !important;
 }
-
 .gl-reset-line-height {
   line-height: inherit;
 }
-
 .gl-reset-line-height\! {
   line-height: inherit !important;
 }
+.gl-letter-spacing-06em {
+  letter-spacing: 0.06em;
+}
+.gl-letter-spacing-06em\! {
+  letter-spacing: 0.06em !important;
+}
 .gl-user-select-none {
   user-select: none
 }