@gitlab/ui 92.1.1 → 92.3.0

package/src/components/base/markdown/markdown.scss

@@ -6,53 +6,53 @@
   @include gl-font-weight-normal;
 
   :first-child {
-    @include gl-mt-0;
+    @apply gl-mt-0;
   }
 
   h1,
   .gl-h1 {
     @include gl-heading-1;
-    @include gl-mt-7;
+    @apply gl-mt-7;
   }
 
   h2,
   .gl-h2 {
     @include gl-heading-2;
-    @include gl-mt-6;
+    @apply gl-mt-6;
   }
 
   h3,
   .gl-h3 {
     @include gl-heading-3;
-    @include gl-mt-6;
+    @apply gl-mt-6;
   }
 
   h4,
   .gl-h4 {
     @include gl-heading-4;
-    @include gl-mt-5;
+    @apply gl-mt-5;
   }
 
   h5,
   .gl-h5 {
     @include gl-heading-5;
-    @include gl-mt-5;
+    @apply gl-mt-5;
   }
 
   h6,
   .gl-h6 {
     @include gl-heading-6;
-    @include gl-mt-5;
+    @apply gl-mt-5;
   }
 
   p,
   .gl-paragraph {
-    @include gl-mt-0;
-    @include gl-mb-0;
+    @apply gl-mt-0;
+    @apply gl-mb-0;
 
     + p,
     + .gl-paragraph {
-      @include gl-mt-5;
+      @apply gl-mt-5;
     }
 
     &.sm {
@@ -73,17 +73,17 @@
 
   blockquote {
     @include gl-text-gray-700;
-    @include gl-py-3;
-    @include gl-pl-6;
-    @include gl-my-3;
-    @include gl-mx-0;
+    @apply gl-py-3;
+    @apply gl-pl-6;
+    @apply gl-my-3;
+    @apply gl-mx-0;
     @include gl-inset-border-l-4-gray-100;
   }
 
   .idiff {
     @apply gl-rounded-base;
     @include gl-display-inline-flex;
-    @include gl-px-2;
+    @apply gl-px-2;
   }
 
   .deletion {
@@ -98,23 +98,23 @@
     @apply gl-rounded-base;
     @include gl-bg-gray-50;
     @include gl-text-gray-950;
-    @include gl-px-2;
-    @include gl-py-1;
+    @apply gl-px-2;
+    @apply gl-py-1;
   }
 
   pre {
     @apply gl-rounded-base;
-    @include gl-py-3;
-    @include gl-px-4;
+    @apply gl-py-3;
+    @apply gl-px-4;
     @include gl-inset-border-1-gray-100;
-    @include gl-my-7;
+    @apply gl-my-7;
     @include gl-overflow-auto;
 
     code {
       @include gl-bg-white;
       @include gl-rounded-0;
       @include gl-text-gray-900;
-      @include gl-p-0;
+      @apply gl-p-0;
     }
   }
 
@@ -128,10 +128,10 @@
     }
 
     a {
-      @include gl-mt-3;
+      @apply gl-mt-3;
 
       &::before {
-        @include gl-mr-2;
+        @apply gl-mr-2;
         text-rendering: auto;
         -webkit-font-smoothing: antialiased;
         content: '📎';
@@ -140,12 +140,12 @@
   }
 
   table {
-    @include gl-my-7;
+    @apply gl-my-7;
 
     th,
     td {
-      @include gl-px-3;
-      @include gl-py-4;
+      @apply gl-px-3;
+      @apply gl-py-4;
       @include gl-inset-border-b-1-gray-100;
       @include gl-vertical-align-top;
     }
@@ -172,37 +172,37 @@
   h1,
   .gl-h1 {
     @include gl-heading-1-fixed;
-    @include gl-mt-7; 
+    @apply gl-mt-7;
   }
 
   h2,
   .gl-h2 {
     @include gl-heading-2-fixed;
-    @include gl-mt-6;
+    @apply gl-mt-6;
   }
 
   h3,
   .gl-h3 {
     @include gl-heading-3-fixed;
-    @include gl-mt-6;
+    @apply gl-mt-6;
   }
 
   h4,
   .gl-h4 {
     @include gl-heading-4-fixed;
-    @include gl-mt-5;
+    @apply gl-mt-5;
   }
 
   h5,
   .gl-h5 {
     @include gl-heading-5-fixed;
-    @include gl-mt-5;
+    @apply gl-mt-5;
   }
 
   h6,
   .gl-h6 {
     @include gl-heading-6-fixed;
-    @include gl-mt-5;
+    @apply gl-mt-5;
   }
 
   .sm {
@@ -217,7 +217,7 @@
   table {
     th,
     td {
-      @include gl-py-3;
+      @apply gl-py-3;
     }
   }
 }

package/src/components/base/modal/modal.scss

@@ -54,7 +54,7 @@ body.modal-open {
   }
 
   .modal-header {
-    @include gl-pb-3;
+    @apply gl-pb-3;
     @apply gl-border-none;
 
     .modal-title {
@@ -67,8 +67,8 @@ body.modal-open {
     min-height: $modal-body-height;
     line-height: $modal-body-line-height;
     position: relative;
-    @include gl-p-5;
-    @include gl-py-3;
+    @apply gl-p-5;
+    @apply gl-py-3;
     @include gl-text-left;
     @include gl-white-space-normal;
     @include gl-font-base;
@@ -78,18 +78,18 @@ body.modal-open {
   .modal-footer {
     @include gl-display-flex;
     @include gl-flex-direction-row;
-    @include gl-p-5;
-    @include gl-pt-3;
+    @apply gl-p-5;
+    @apply gl-pt-3;
     @apply gl-border-none;
 
     .btn {
-      @include gl-m-0;
+      @apply gl-m-0;
     }
 
     .btn + .btn:not(.dropdown-toggle-split),
     .btn + .btn-group,
     .btn-group + .btn {
-      @include gl-ml-3;
+      @apply gl-ml-3;
     }
 
     .btn-group .btn + .btn {
@@ -102,13 +102,13 @@ body.modal-open {
       .btn + .btn:not(.dropdown-toggle-split),
       .btn + .btn-group,
       .btn-group + .btn {
-        @include gl-ml-0;
-        @include gl-mt-3;
+        @apply gl-ml-0;
+        @apply gl-mt-3;
       }
 
       .btn-group .btn + .btn {
         @include gl-tmp-modal-btn-group-ml;
-        @include gl-mt-0;
+        @apply gl-mt-0;
       }
     }
   }
@@ -121,7 +121,7 @@ body.modal-open {
   @include media-breakpoint-up(sm) {
     .modal-dialog {
       @include gl-mx-auto;
-      @include gl-my-0;
+      @apply gl-my-0;
       @include gl-display-flex;
       @include gl-align-items-center;
       min-height: calc(100% - 1rem);

package/src/components/base/new_dropdowns/dropdown.scss

@@ -35,9 +35,9 @@
     position: relative;
     @include gl-flex-grow-1;
     @include gl-overflow-y-auto;
-    @include gl-pl-0;
-    @include gl-mb-0;
-    @include gl-py-2;
+    @apply gl-pl-0;
+    @apply gl-mb-0;
+    @apply gl-py-2;
     @include gl-list-style-none;
 
     &:focus-visible {
@@ -52,10 +52,10 @@
   .gl-new-dropdown-toggle {
     // optically align the caret
     &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
-      @include gl-pr-3;
+      @apply gl-pr-3;
 
       &.btn-sm {
-        @include gl-pr-2;
+        @apply gl-pr-2;
       }
     }
 
@@ -77,7 +77,7 @@
   }
 
   &.btn-sm .gl-icon {
-    @include gl-my-0;
+    @apply gl-my-0;
 
     &.gl-new-dropdown-chevron {
       @include gl-h-5;
@@ -86,35 +86,35 @@
   }
 
   .gl-button .gl-button-icon.gl-new-dropdown-chevron {
-    @include gl-ml-2;
-    @include gl-mr-0;
+    @apply gl-ml-2;
+    @apply gl-mr-0;
   }
 
   .gl-new-dropdown-icon-only {
     // optically align the caret
     &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
-      @include gl-pr-2;
+      @apply gl-pr-2;
 
       &.btn-sm {
-        @include gl-pr-0;
+        @apply gl-pr-0;
       }
     }
 
     .gl-button-icon.gl-button-icon {
-      @include gl-mr-0;
+      @apply gl-mr-0;
     }
 
     &.btn-sm .gl-new-dropdown-chevron {
-      @include gl-mx-0;
+      @apply gl-mx-0;
     }
   }
 
   .gl-new-dropdown-caret-only {
     // optically center the caret
-    @include gl-pl-2;
+    @apply gl-pl-2;
 
     &.btn-sm {
-      @include gl-pl-0;
+      @apply gl-pl-0;
     }
   }
 

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -1,19 +1,19 @@
 .gl-new-dropdown-item {
   @include gl-cursor-pointer;
-  @include gl-px-2;
-  @include gl-my-1;
+  @apply gl-px-2;
+  @apply gl-my-1;
 
   /* when there is a scrim `li` items inside the list, the first and last real items
   do not match the selector `:first-child` and `:last-child`,
   that's why we have to target them with a different selector */
   &:first-child,
   .gl-new-dropdown-contents-with-scrim-overlay > &:nth-child(3):not(:last-child) {
-    @include gl-mt-0;
+    @apply gl-mt-0;
   }
 
   &:last-child,
   .gl-new-dropdown-contents-with-scrim-overlay > &:nth-last-child(3):not(:first-child) {
-    @include gl-mb-0;
+    @apply gl-mb-0;
   }
 
   &:hover,
@@ -86,8 +86,8 @@
     @include gl-font-base;
     @include gl-font-weight-normal;
     @include gl-line-height-normal;
-    @include gl-px-3;
-    @include gl-py-0;
+    @apply gl-px-3;
+    @apply gl-py-0;
     position: relative;
     @include gl-text-decoration-none;
     @include gl-text-gray-900;
@@ -99,19 +99,19 @@
 
     .gl-new-dropdown-item-check-icon {
       @include gl-flex-shrink-0;
-      @include gl-mr-3;
+      @apply gl-mr-3;
       @include gl-text-blue-500;
     }
 
     .gl-new-dropdown-item-icon {
       @include gl-flex-shrink-0;
-      @include gl-mr-3;
+      @apply gl-mr-3;
     }
 
     .gl-new-dropdown-item-text-wrapper {
       @include gl-min-w-0;
       @include gl-flex-grow-1;
-      @include gl-py-3;
+      @apply gl-py-3;
     }
   }
 }

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -12,7 +12,7 @@ $clear-button-size: 24px;
     @include gl-rounded-0;
     padding-left: calc(#{$gl-spacing-scale-7} + #{$gl-spacing-scale-2});
     padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
-    @include gl-py-4;
+    @apply gl-py-4;
     @include gl-font-base;
 
     &:focus {

package/src/components/base/pagination/pagination.scss

@@ -8,12 +8,12 @@
   .page-link {
     @apply gl-border-gray-200;
     @include gl-line-height-normal;
-    @include gl-px-4;
-    @include gl-py-3;
+    @apply gl-px-4;
+    @apply gl-py-3;
 
     &.prev-page-item,
     &.next-page-item {
-      @include gl-px-3;
+      @apply gl-px-3;
     }
 
     &:not(.active):hover {

package/src/components/base/path/path.scss

@@ -31,8 +31,8 @@ $path-chevron-right-margin: px-to-rem(14px);
   @include gl-display-flex;
 
   .gl-path-nav-list {
-    @include gl-p-1;
-    @include gl-m-0;
+    @apply gl-p-1;
+    @apply gl-m-0;
     @include gl-list-style-none;
     @include gl-display-inline-flex;
     @include gl-overflow-hidden;
@@ -52,8 +52,8 @@ $path-chevron-right-margin: px-to-rem(14px);
   }
 
   .gl-path-button {
-    @include gl-pl-5;
-    @include gl-py-3;
+    @apply gl-pl-5;
+    @apply gl-py-3;
     @include gl-display-flex;
     @include gl-font-base;
     @include gl-z-index-0;
@@ -152,7 +152,7 @@ $path-chevron-right-margin: px-to-rem(14px);
   }
 
   .gl-clear-icon-button {
-    @include gl-p-0;
+    @apply gl-p-0;
     @include gl-h-full;
     color: var(--gl-icon-color-subtle);
 

package/src/components/base/popover/popover.scss

@@ -76,7 +76,7 @@ $gl-popover-max-width: $grid-size * 35;
     color: var(--gl-text-color-heading);
     @include gl-heading-scale-200;
     @apply gl-border-b-0;
-    @include gl-pb-0;
+    @apply gl-pb-0;
   }
 
   &.has-title .popover-header {
@@ -91,12 +91,12 @@ $gl-popover-max-width: $grid-size * 35;
   }
 
   .popover-body {
-    @include gl-py-3;
-    @include gl-px-4;
+    @apply gl-py-3;
+    @apply gl-px-4;
 
     > .popover-hr {
-      @include gl-my-5;
-      @include gl-mx-0;
+      @apply gl-my-5;
+      @apply gl-mx-0;
     }
   }
 }

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -24,14 +24,14 @@
     position: absolute;
     top: $gl-spacing-scale-2;
     right: $gl-spacing-scale-2;
-    @include gl-mr-2;
+    @apply gl-mr-2;
     @include gl-z-index-3;
   }
 }
 
 .gl-search-box-by-click-with-search-button {
   .gl-search-box-by-click-input {
-    @include gl-pr-7;
+    @apply gl-pr-7;
   }
 
   .gl-search-box-by-click-clear-button {

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -17,7 +17,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 .gl-search-box-by-type-loading-icon {
   @include gl-text-gray-500;
   @include gl-w-5;
-  @include gl-mr-2;
+  @apply gl-mr-2;
 }
 
 .gl-search-box-by-type-clear {
@@ -27,7 +27,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 .gl-search-box-by-type-input,
 .gl-search-box-by-type-input.gl-form-input {
   @include gl-h-7;
-  @include gl-pr-7;
+  @apply gl-pr-7;
   padding-left: $gl-search-box-by-type-input-padding;
 
   &::-webkit-search-cancel-button {
@@ -41,8 +41,8 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   @include gl-font-base;
   @include gl-h-auto;
   @include gl-line-height-normal;
-  @include gl-pl-7;
-  @include gl-py-4;
+  @apply gl-pl-7;
+  @apply gl-py-4;
   @include gl-shadow-none;
   @include gl-w-full;
   border-radius: 0;

package/src/components/base/table/table.scss

@@ -7,7 +7,7 @@ table.gl-table {
     td {
       @apply gl-border-b-solid gl-border-b-1;
       border-color: var(--gl-border-color-default);
-      @include gl-p-5;
+      @apply gl-p-5;
       @include gl-bg-transparent;
       @include gl-line-height-normal;
       @include gl-font-base;
@@ -22,8 +22,8 @@ table.gl-table {
         flex-direction: row-reverse;
 
         div.gl-ml-2 {
-          @include gl-ml-0;
-          @include gl-mr-2;
+          @apply gl-ml-0;
+          @apply gl-mr-2;
         }
       }
 
@@ -62,7 +62,7 @@ table.gl-table {
   }
 
   caption {
-    @include gl-pt-2;
+    @apply gl-pt-2;
     color: var(--gl-text-color-subtle);
   }
 

package/src/components/base/tabs/tabs/tabs.scss

@@ -4,8 +4,8 @@
 
 .gl-tab-nav-item {
   position: relative;
-  @include gl-px-4;
-  @include gl-py-5;
+  @apply gl-px-4;
+  @apply gl-py-5;
   @include gl-line-height-normal;
   @include gl-font-base;
   @include gl-display-flex;
@@ -58,12 +58,12 @@
 
   > .gl-tab-counter-badge {
     font-weight: inherit;
-    @include gl-ml-2;
+    @apply gl-ml-2;
   }
 }
 
 .gl-tab-content {
-  @include gl-py-3;
+  @apply gl-py-3;
   @include gl-font-base;
   @include gl-line-height-normal;
   color: var(--gl-text-color-default);
@@ -106,7 +106,7 @@
   @include gl-w-full;
   @include gl-display-flex;
   @include gl-flex-direction-column;
-  @include gl-mt-3;
+  @apply gl-mt-3;
   @include gl-md-display-none;
 }
 
@@ -116,20 +116,20 @@
   @include gl-justify-content-end;
   @include gl-align-items-center;
   @include gl-flex-direction-row;
-  @include gl-mt-0;
+  @apply gl-mt-0;
   @include gl-md-display-flex;
 }
 
 .gl-actions-tabs-start,
 .gl-actions-tabs-end {
   button {
-    @include gl-mb-3;
+    @apply gl-mb-3;
     @include gl-md-mr-3;
     @include gl-md-mb-0;
   }
 
   button:last-child {
-    @include gl-m-0;
+    @apply gl-m-0;
   }
 }
 
@@ -137,7 +137,7 @@
   @include gl-w-8;
   bottom: 0;
   position: sticky;
-  @include gl-p-2;
+  @apply gl-p-2;
 }
 
 .gl-tabs-fade-left {
@@ -153,7 +153,7 @@
 .gl-tabs-fade-icon-button {
   @apply gl-border;
   @include gl-action-neutral-colors;
-  @include gl-p-0;
+  @apply gl-p-0;
   @include gl-h-full;
 }
 

package/src/components/base/toast/toast.scss

@@ -21,8 +21,8 @@
   .gl-toast {
     @apply gl-rounded-base;
     @include gl-font-base;
-    @include gl-py-5;
-    @include gl-px-6;
+    @apply gl-py-5;
+    @apply gl-px-6;
     @include gl-line-height-normal;
     @include gl-display-flex;
     @include gl-align-items-center;
@@ -33,7 +33,7 @@
 
   .toast-body {
     @include gl-font-weight-300;
-    @include gl-pr-3;
+    @apply gl-pr-3;
     order: 1;
   }
 
@@ -44,9 +44,9 @@
 
   .gl-toast-action {
     @include gl-text-blue-300;
-    @include gl-p-3;
-    @include gl-m-0;
-    @include gl-ml-5;
+    @apply gl-p-3;
+    @apply gl-m-0;
+    @apply gl-ml-5;
     @include gl-text-transform-none;
     @include gl-font-base;
     @include gl-white-space-nowrap;
@@ -55,6 +55,6 @@
   }
 
   .gl-toast-close-button {
-    @include gl-ml-5;
+    @apply gl-ml-5;
   }
 }