@gitlab/ui 76.1.0 → 77.1.0

package/src/scss/utilities.scss

@@ -122,24 +122,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
     animation-iteration-count: 3 !important;
   }
 }
-.gl-number-as-text-input {
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  -moz-appearance: textfield;
-}
-.gl-number-as-text-input\! {
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-    margin: 0 !important;
-  }
-
-  -moz-appearance: textfield !important;
-}
 .gl-bg-transparent {
   background-color: transparent
 }
@@ -3010,6 +2992,30 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-cursor-help\! {
   cursor: help !important
 }
+.gl-deprecated-top-66vh {
+  top: 66vh;
+}
+.gl-deprecated-top-66vh\! {
+  top: 66vh !important;
+}
+.gl-number-as-text-input {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  -moz-appearance: textfield;
+}
+.gl-number-as-text-input\! {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0 !important;
+  }
+
+  -moz-appearance: textfield !important;
+}
 .gl-display-none {
   display: none;
 }
@@ -4157,7 +4163,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-object-fit-contain\! {
   object-fit: contain !important
 }
-
 .gl-list-style-none {
   list-style-type: none
 }
@@ -4337,417 +4342,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-pointer-events-auto\! {
   pointer-events: auto !important
 }
-.gl-relative {
-  position: relative;
-}
-
-.gl-relative\! {
-  position: relative !important;
-}
-
-.gl-absolute {
-  position: absolute;
-}
-
-.gl-absolute\! {
-  position: absolute !important;
-}
-
-.gl-static {
-  position: static;
-}
-
-.gl-static\! {
-  position: static !important;
-}
-
-.gl-fixed {
-  position: fixed;
-}
-
-.gl-fixed\! {
-  position: fixed !important;
-}
-
-.gl-sticky {
-  position: sticky;
-}
-
-.gl-sticky\! {
-  position: sticky !important;
-}
-
-.gl-lg-sticky {
-  @include gl-media-breakpoint-up(lg) {
-  position: sticky;
-  }
-}
-
-.gl-lg-sticky\! {
-  @include gl-media-breakpoint-up(lg) {
-  position: sticky !important;
-  }
-}
-
-.gl-top-auto {
-  top: auto;
-}
-
-.gl-top-auto\! {
-  top: auto !important;
-}
-
-.gl-top-0 {
-  top: 0;
-}
-
-.gl-top-0\! {
-  top: 0 !important;
-}
-
-.gl-top-1 {
-  top: $gl-spacing-scale-1;
-}
-
-.gl-top-1\! {
-  top: $gl-spacing-scale-1 !important;
-}
-
-.gl-top-2 {
-  top: $gl-spacing-scale-2;
-}
-
-.gl-top-2\! {
-  top: $gl-spacing-scale-2 !important;
-}
-
-.gl-top-3 {
-  top: $gl-spacing-scale-3;
-}
-
-.gl-top-3\! {
-  top: $gl-spacing-scale-3 !important;
-}
-
-.gl-top-4 {
-  top: $gl-spacing-scale-4;
-}
-
-.gl-top-4\! {
-  top: $gl-spacing-scale-4 !important;
-}
-
-.gl-top-5 {
-  top: $gl-spacing-scale-5;
-}
-
-.gl-top-5\! {
-  top: $gl-spacing-scale-5 !important;
-}
-
-.gl-top-6 {
-  top: $gl-spacing-scale-6;
-}
-
-.gl-top-6\! {
-  top: $gl-spacing-scale-6 !important;
-}
-
-.gl-top-7 {
-  top: $gl-spacing-scale-7;
-}
-
-.gl-top-7\! {
-  top: $gl-spacing-scale-7 !important;
-}
-
-.gl-top-8 {
-  top: $gl-spacing-scale-8;
-}
-
-.gl-top-8\! {
-  top: $gl-spacing-scale-8 !important;
-}
-
-.gl-top-half {
-  top: 50%;
-}
-
-.gl-top-half\! {
-  top: 50% !important;
-}
-
-.gl-top-66vh {
-  top: 66vh;
-}
-
-.gl-top-66vh\! {
-  top: 66vh !important;
-}
-
-.gl-top-full {
-  top: 100%;
-}
-
-.gl-top-full\! {
-  top: 100% !important;
-}
-
-.gl-right-auto {
-  right: auto;
-}
-
-.gl-right-auto\! {
-  right: auto !important;
-}
-
-.gl-right-0 {
-  right: 0;
-}
-
-.gl-right-0\! {
-  right: 0 !important;
-}
-
-.gl-right-1 {
-  right: $gl-spacing-scale-1;
-}
-
-.gl-right-1\! {
-  right: $gl-spacing-scale-1 !important;
-}
-
-.gl-right-2 {
-  right: $gl-spacing-scale-2;
-}
-
-.gl-right-2\! {
-  right: $gl-spacing-scale-2 !important;
-}
-
-.gl-right-3 {
-  right: $gl-spacing-scale-3;
-}
-
-.gl-right-3\! {
-  right: $gl-spacing-scale-3 !important;
-}
-
-.gl-right-4 {
-  right: $gl-spacing-scale-4;
-}
-
-.gl-right-4\! {
-  right: $gl-spacing-scale-4 !important;
-}
-
-.gl-right-5 {
-  right: $gl-spacing-scale-5;
-}
-
-.gl-right-5\! {
-  right: $gl-spacing-scale-5 !important;
-}
-
-.gl-right-6 {
-  right: $gl-spacing-scale-6;
-}
-
-.gl-right-6\! {
-  right: $gl-spacing-scale-6 !important;
-}
-
-.gl-right-7 {
-  right: $gl-spacing-scale-7;
-}
-
-.gl-right-7\! {
-  right: $gl-spacing-scale-7 !important;
-}
-
-.gl-bottom-0 {
-  bottom: 0;
-}
-
-.gl-bottom-0\! {
-  bottom: 0 !important;
-}
-
-.gl-bottom-1 {
-  bottom: $gl-spacing-scale-1;
-}
-
-.gl-bottom-1\! {
-  bottom: $gl-spacing-scale-1 !important;
-}
-
-.gl-bottom-2 {
-  bottom: $gl-spacing-scale-2;
-}
-
-.gl-bottom-2\! {
-  bottom: $gl-spacing-scale-2 !important;
-}
-
-.gl-bottom-3 {
-  bottom: $gl-spacing-scale-3;
-}
-
-.gl-bottom-3\! {
-  bottom: $gl-spacing-scale-3 !important;
-}
-
-.gl-bottom-4 {
-  bottom: $gl-spacing-scale-4;
-}
-
-.gl-bottom-4\! {
-  bottom: $gl-spacing-scale-4 !important;
-}
-
-.gl-bottom-5 {
-  bottom: $gl-spacing-scale-5;
-}
-
-.gl-bottom-5\! {
-  bottom: $gl-spacing-scale-5 !important;
-}
-
-.gl-bottom-6 {
-  bottom: $gl-spacing-scale-6;
-}
-
-.gl-bottom-6\! {
-  bottom: $gl-spacing-scale-6 !important;
-}
-
-.gl-bottom-7 {
-  bottom: $gl-spacing-scale-7;
-}
-
-.gl-bottom-7\! {
-  bottom: $gl-spacing-scale-7 !important;
-}
-
-.gl-left-auto {
-  left: auto;
-}
-
-.gl-left-auto\! {
-  left: auto !important;
-}
-
-.gl-left-0 {
-  left: 0;
-}
-
-.gl-left-0\! {
-  left: 0 !important;
-}
-
-.gl-left-1 {
-  left: $gl-spacing-scale-1;
-}
-
-.gl-left-1\! {
-  left: $gl-spacing-scale-1 !important;
-}
-
-.gl-left-2 {
-  left: $gl-spacing-scale-2;
-}
-
-.gl-left-2\! {
-  left: $gl-spacing-scale-2 !important;
-}
-
-.gl-left-3 {
-  left: $gl-spacing-scale-3;
-}
-
-.gl-left-3\! {
-  left: $gl-spacing-scale-3 !important;
-}
-
-.gl-left-4 {
-  left: $gl-spacing-scale-4;
-}
-
-.gl-left-4\! {
-  left: $gl-spacing-scale-4 !important;
-}
-
-.gl-left-5 {
-  left: $gl-spacing-scale-5;
-}
-
-.gl-left-5\! {
-  left: $gl-spacing-scale-5 !important;
-}
-
-.gl-left-6 {
-  left: $gl-spacing-scale-6;
-}
-
-.gl-left-6\! {
-  left: $gl-spacing-scale-6 !important;
-}
-
-.gl-left-7 {
-  left: $gl-spacing-scale-7;
-}
-
-.gl-left-7\! {
-  left: $gl-spacing-scale-7 !important;
-}
-
-.gl-left-n5 {
-  left: -$gl-spacing-scale-5;
-}
-
-.gl-left-n5\! {
-  left: -$gl-spacing-scale-5 !important;
-}
-
-.gl-left-n37 {
-  left: -$gl-spacing-scale-37;
-}
-
-.gl-left-n37\! {
-  left: -$gl-spacing-scale-37 !important;
-}
-
-.gl-left-50p {
-  left: 50%;
-}
-
-.gl-left-50p\! {
-  left: 50% !important;
-}
-
-.gl-top-n5 {
-  top: -$gl-spacing-scale-5;
-}
-
-.gl-top-n5\! {
-  top: -$gl-spacing-scale-5 !important;
-}
-
-.gl-float-left {
-  float: left;
-}
-
-.gl-float-left\! {
-  float: left !important;
-}
-
-.gl-float-right {
-  float: right;
-}
-
-.gl-float-right\! {
-  float: right !important;
-}
 .gl-w-auto {
   width: auto;
 }

package/src/scss/utility-mixins/{appearance.scss → deprecated.scss}

@@ -1,3 +1,12 @@
+/**
+* This file contains deprecated utility mixins that we don't have an immediate migration path for.
+* Please do not add any mixin in here unless you're actively working on migrating to Tailwind CSS.
+*/
+
+@mixin gl-deprecated-top-66vh {
+  top: 66vh;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 @mixin gl-number-as-text-input {
   &::-webkit-outer-spin-button,

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

@@ -17,7 +17,6 @@
 
 @import './accessibility';
 @import './animation';
-@import './appearance';
 @import './background';
 @import './border';
 @import './box-shadow';
@@ -33,7 +32,6 @@
 @import './outline';
 @import './overflow';
 @import './pointer-events';
-@import './position';
 @import './sizing';
 @import './spacing';
 @import './svg';
@@ -44,3 +42,6 @@
 @import './vertical-align';
 @import './visibility';
 @import './z-index';
+
+// Deprecated mixins that don't have a migration path yet
+@import './deprecated';

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

@@ -1,223 +0,0 @@
-/**
-* Position utilities.
-*
-* naming convention: gl-{property-value}
-*/
-@mixin gl-relative {
-  position: relative;
-}
-
-@mixin gl-absolute {
-  position: absolute;
-}
-
-@mixin gl-static {
-  position: static;
-}
-
-@mixin gl-fixed {
-  position: fixed;
-}
-
-@mixin gl-sticky {
-  position: sticky;
-}
-
-@mixin gl-lg-sticky {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-sticky;
-  }
-}
-
-/**
-* Placement utilities.
-*
-* For absolute or fixed positioned elements
-*
-* naming convention: gl-{position}-{spacing-scale-index}
-*/
-
-/**
-* Placement utilities
-*
-* naming convention: gl-{position}-{value}
-*/
-@mixin gl-top-auto {
-  top: auto;
-}
-
-@mixin gl-top-0 {
-  top: 0;
-}
-
-@mixin gl-top-1 {
-  top: $gl-spacing-scale-1;
-}
-
-@mixin gl-top-2 {
-  top: $gl-spacing-scale-2;
-}
-
-@mixin gl-top-3 {
-  top: $gl-spacing-scale-3;
-}
-
-@mixin gl-top-4 {
-  top: $gl-spacing-scale-4;
-}
-
-@mixin gl-top-5 {
-  top: $gl-spacing-scale-5;
-}
-
-@mixin gl-top-6 {
-  top: $gl-spacing-scale-6;
-}
-
-@mixin gl-top-7 {
-  top: $gl-spacing-scale-7;
-}
-
-@mixin gl-top-8 {
-  top: $gl-spacing-scale-8;
-}
-
-@mixin gl-top-half {
-  top: 50%;
-}
-
-@mixin gl-top-66vh {
-  top: 66vh;
-}
-
-@mixin gl-top-full {
-  top: 100%;
-}
-
-@mixin gl-right-auto {
-  right: auto;
-}
-
-@mixin gl-right-0 {
-  right: 0;
-}
-
-@mixin gl-right-1 {
-  right: $gl-spacing-scale-1;
-}
-
-@mixin gl-right-2 {
-  right: $gl-spacing-scale-2;
-}
-
-@mixin gl-right-3 {
-  right: $gl-spacing-scale-3;
-}
-
-@mixin gl-right-4 {
-  right: $gl-spacing-scale-4;
-}
-
-@mixin gl-right-5 {
-  right: $gl-spacing-scale-5;
-}
-
-@mixin gl-right-6 {
-  right: $gl-spacing-scale-6;
-}
-
-@mixin gl-right-7 {
-  right: $gl-spacing-scale-7;
-}
-
-@mixin gl-bottom-0 {
-  bottom: 0;
-}
-
-@mixin gl-bottom-1 {
-  bottom: $gl-spacing-scale-1;
-}
-
-@mixin gl-bottom-2 {
-  bottom: $gl-spacing-scale-2;
-}
-
-@mixin gl-bottom-3 {
-  bottom: $gl-spacing-scale-3;
-}
-
-@mixin gl-bottom-4 {
-  bottom: $gl-spacing-scale-4;
-}
-
-@mixin gl-bottom-5 {
-  bottom: $gl-spacing-scale-5;
-}
-
-@mixin gl-bottom-6 {
-  bottom: $gl-spacing-scale-6;
-}
-
-@mixin gl-bottom-7 {
-  bottom: $gl-spacing-scale-7;
-}
-
-@mixin gl-left-auto {
-  left: auto;
-}
-
-@mixin gl-left-0 {
-  left: 0;
-}
-
-@mixin gl-left-1 {
-  left: $gl-spacing-scale-1;
-}
-
-@mixin gl-left-2 {
-  left: $gl-spacing-scale-2;
-}
-
-@mixin gl-left-3 {
-  left: $gl-spacing-scale-3;
-}
-
-@mixin gl-left-4 {
-  left: $gl-spacing-scale-4;
-}
-
-@mixin gl-left-5 {
-  left: $gl-spacing-scale-5;
-}
-
-@mixin gl-left-6 {
-  left: $gl-spacing-scale-6;
-}
-
-@mixin gl-left-7 {
-  left: $gl-spacing-scale-7;
-}
-
-@mixin gl-left-n5 {
-  left: -$gl-spacing-scale-5;
-}
-
-@mixin gl-left-n37 {
-  left: -$gl-spacing-scale-37;
-}
-
-@mixin gl-left-50p {
-  left: 50%;
-}
-
-@mixin gl-top-n5 {
-  top: -$gl-spacing-scale-5;
-}
-
-@mixin gl-float-left {
-  float: left;
-}
-
-@mixin gl-float-right {
-  float: right;
-}