@gitlab/ui 98.5.1 → 99.0.0

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

@@ -1,582 +0,0 @@
-/**
-* Fixed dimension (width/height) utilities
-*
-* naming convention: gl-{width|height}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-w-auto {
-  width: auto;
-}
-
-@mixin gl-w-2 {
-  width: $gl-spacing-scale-2;
-}
-
-@mixin gl-w-3 {
-  width: $gl-spacing-scale-3;
-}
-
-@mixin gl-w-4 {
-  width: $gl-spacing-scale-4;
-}
-
-@mixin gl-w-5 {
-  width: $gl-spacing-scale-5;
-}
-
-@mixin gl-w-6 {
-  width: $gl-spacing-scale-6;
-}
-
-@mixin gl-w-7 {
-  width: $gl-spacing-scale-7;
-}
-
-@mixin gl-w-8 {
-  width: $gl-spacing-scale-8;
-}
-
-@mixin gl-w-9 {
-  width: $gl-spacing-scale-9;
-}
-
-@mixin gl-w-10 {
-  width: $gl-spacing-scale-10;
-}
-
-@mixin gl-w-11 {
-  width: $gl-spacing-scale-11;
-}
-
-@mixin gl-w-12 {
-  width: $gl-spacing-scale-12;
-}
-
-@mixin gl-w-13 {
-  width: $gl-spacing-scale-13;
-}
-
-@mixin gl-w-15 {
-  width: $gl-spacing-scale-15;
-}
-
-@mixin gl-w-20 {
-  width: $gl-spacing-scale-20;
-}
-
-@mixin gl-w-28 {
-  width: $gl-spacing-scale-28;
-}
-
-@mixin gl-w-30 {
-  width: $gl-spacing-scale-30;
-}
-
-@mixin gl-w-31 {
-  width: $gl-spacing-scale-31;
-}
-
-@mixin gl-w-eighth {
-  width: 12.5%;
-}
-
-@mixin gl-w-5p {
-  width: 5%;
-}
-
-// In the future, any percentage-based classes should follow this convention per the conversation at https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1884#note_459949588
-@mixin gl-w-10p {
-  width: 10%;
-}
-
-@mixin gl-w-15p {
-  width: 15%;
-}
-
-@mixin gl-w-20p {
-  width: 20%;
-}
-
-@mixin gl-w-30p {
-  width: 30%;
-}
-
-@mixin gl-w-40p {
-  width: 40%;
-}
-
-@mixin gl-w-quarter {
-  width: 25%;
-}
-
-@mixin gl-w-half {
-  width: 50%;
-}
-
-@mixin gl-w-70p {
-  width: 70%;
-}
-
-@mixin gl-w-85p {
-  width: 85%;
-}
-
-@mixin gl-w-90p {
-  width: 90%;
-}
-
-@mixin gl-w-full {
-  width: 100%;
-}
-
-@mixin gl-w-grid-size-30 {
-  width: $grid-size * 30;
-}
-
-@mixin gl-w-grid-size-40 {
-  width: $grid-size * 40;
-}
-
-@mixin gl-sm-w-full {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-w-full;
-  }
-}
-
-@mixin gl-md-w-full {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-full;
-  }
-}
-
-@mixin gl-lg-w-full {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-w-full;
-  }
-}
-
-@mixin gl-w-max-content {
-  width: max-content;
-}
-
-@mixin gl-layout-w-limited {
-  max-width: $limited-layout-width;
-}
-
-@mixin gl-max-w-container-xl {
-  max-width: $container-xl;
-}
-
-@mixin gl-h-auto {
-  height: auto;
-}
-
-@mixin gl-h-0 {
-  height: 0;
-}
-
-@mixin gl-h-2 {
-  height: $gl-spacing-scale-2;
-}
-
-@mixin gl-h-3 {
-  height: $gl-spacing-scale-3;
-}
-
-@mixin gl-h-4 {
-  height: $gl-spacing-scale-4;
-}
-
-@mixin gl-h-5 {
-  height: $gl-spacing-scale-5;
-}
-
-@mixin gl-h-6 {
-  height: $gl-spacing-scale-6;
-}
-
-@mixin gl-h-7 {
-  height: $gl-spacing-scale-7;
-}
-
-@mixin gl-h-8 {
-  height: $gl-spacing-scale-8;
-}
-
-@mixin gl-h-9 {
-  height: $gl-spacing-scale-9;
-}
-
-@mixin gl-h-10 {
-  height: $gl-spacing-scale-10;
-}
-
-@mixin gl-h-11 {
-  height: $gl-spacing-scale-11;
-}
-
-@mixin gl-h-11-5 {
-  height: $gl-spacing-scale-11-5;
-}
-
-@mixin gl-h-13 {
-  height: $gl-spacing-scale-13;
-}
-
-@mixin gl-h-full {
-  height: 100%;
-}
-
-@mixin gl-h-100vh {
-  height: 100vh;
-}
-
-/**
-* Responsive dimension (width/height) utilities
-*
-* naming convention: gl-{breakpoint}-{width|height}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-
-@mixin gl-sm-w-auto {
-  @include gl-media-breakpoint-up(sm) {
-    width: auto;
-  }
-}
-
-@mixin gl-sm-w-half {
-  @include gl-media-breakpoint-up(sm) {
-    width: 50%;
-  }
-}
-
-@mixin gl-sm-w-25p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 25%;
-  }
-}
-
-@mixin gl-sm-w-30p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 30%;
-  }
-}
-
-@mixin gl-sm-w-40p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 40%;
-  }
-}
-
-@mixin gl-sm-w-75p {
-  @include gl-media-breakpoint-up(sm) {
-    width: 75%;
-  }
-}
-
-@mixin gl-md-h-9 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-h-9;
-  }
-}
-
-@mixin gl-md-w-15 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-15;
-  }
-}
-
-@mixin gl-md-w-20 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-20;
-  }
-}
-
-@mixin gl-md-w-30 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-w-30;
-  }
-}
-
-@mixin gl-md-w-half {
-  @include gl-media-breakpoint-up(md) {
-    width: 50%;
-  }
-}
-
-@mixin gl-lg-w-half {
-  @include gl-media-breakpoint-up(lg) {
-    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 {
-  @include gl-media-breakpoint-up(lg) {
-    width: 1px;
-  }
-}
-
-@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-30p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 30%;
-  }
-}
-
-@mixin gl-lg-w-40p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 40%;
-  }
-}
-
-@mixin gl-lg-w-50p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 50%;
-  }
-}
-
-/**
-* Minimum/Maximun dimension (width/height) utilities
-*
-* naming convention: gl-{min|max}-{w|h}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-min-w-0 {
-  min-width: 0;
-}
-
-@mixin gl-min-w-1 {
-  min-width: $gl-spacing-scale-1;
-}
-
-@mixin gl-min-w-2 {
-  min-width: $gl-spacing-scale-2;
-}
-
-@mixin gl-min-w-3 {
-  min-width: $gl-spacing-scale-3;
-}
-
-@mixin gl-min-w-4 {
-  min-width: $gl-spacing-scale-4;
-}
-
-@mixin gl-min-w-5 {
-  min-width: $gl-spacing-scale-5;
-}
-
-@mixin gl-min-w-6 {
-  min-width: $gl-spacing-scale-6;
-}
-
-@mixin gl-min-w-7 {
-  min-width: $gl-spacing-scale-7;
-}
-
-@mixin gl-min-w-8 {
-  min-width: $gl-spacing-scale-8;
-}
-
-@mixin gl-min-w-9 {
-  min-width: $gl-spacing-scale-9;
-}
-
-@mixin gl-min-w-10 {
-  min-width: $gl-spacing-scale-10;
-}
-
-@mixin gl-min-w-20 {
-  min-width: $gl-spacing-scale-20;
-}
-
-@mixin gl-min-w-33 {
-  min-width: $gl-spacing-scale-33;
-}
-
-@mixin gl-min-w-full {
-  min-width: 100%;
-}
-
-@mixin gl-min-w-fit-content {
-  min-width: fit-content;
-}
-
-@mixin gl-min-h-0 {
-  min-height: 0;
-}
-
-@mixin gl-min-h-5 {
-  min-height: $gl-spacing-scale-5;
-}
-
-@mixin gl-min-h-6 {
-  min-height: $gl-spacing-scale-6;
-}
-
-@mixin gl-min-h-7 {
-  min-height: $gl-spacing-scale-7;
-}
-
-@mixin gl-min-h-8 {
-  min-height: $gl-spacing-scale-8;
-}
-
-@mixin gl-min-h-100vh {
-  min-height: 100vh;
-}
-
-@mixin gl-max-w-0 {
-  max-width: 0;
-}
-
-@mixin gl-max-w-12 {
-  max-width: $gl-spacing-scale-12;
-}
-
-@mixin gl-max-w-15 {
-  max-width: $gl-spacing-scale-15;
-}
-
-@mixin gl-max-w-20 {
-  max-width: $gl-spacing-scale-20;
-}
-
-@mixin gl-max-w-26 {
-  max-width: $gl-spacing-scale-26;
-}
-
-@mixin gl-max-w-30 {
-  max-width: $gl-spacing-scale-30;
-}
-
-@mixin gl-max-w-34 {
-  max-width: $gl-spacing-scale-34;
-}
-
-@mixin gl-max-w-37 {
-  max-width: $gl-spacing-scale-37;
-}
-
-@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;
-}
-
-@mixin gl-max-w-88 {
-  max-width: $gl-spacing-scale-88;
-}
-
-@mixin gl-max-w-none {
-  max-width: none;
-}
-
-@mixin gl-max-h-none {
-  max-height: none;
-}
-
-@mixin gl-max-w-full {
-  max-width: 100%;
-}
-
-@mixin gl-max-w-max-content {
-  max-width: max-content;
-}
-
-@mixin gl-max-h-full {
-  max-height: 100%;
-}
-
-@mixin gl-max-w-100vw {
-  max-width: 100vw;
-}
-
-@mixin gl-max-w-50p {
-  max-width: 50%;
-}
-
-/**
-* Responsive Minimum/Maximun dimension (width/height) utilities
-*
-* naming convention: gl-{breakpoint}-{min|max}-{w|h}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-
-@mixin gl-md-max-w-26 {
-  @include gl-media-breakpoint-up(md) {
-    max-width: $gl-spacing-scale-26;
-  }
-}
-
-@mixin gl-md-max-w-15p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 15%;
-  }
-}
-
-@mixin gl-md-max-w-30p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 30%;
-  }
-}
-
-@mixin gl-md-max-w-50p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 50%;
-  }
-}
-
-@mixin gl-md-max-w-70p {
-  @include gl-media-breakpoint-up(md) {
-    max-width: 70%;
-  }
-}
-
-@mixin gl-lg-max-w-80p {
-  @include gl-media-breakpoint-up(lg) {
-    max-width: 80%;
-  }
-}
-
-@mixin gl-lg-max-w-50p {
-  @include gl-media-breakpoint-up(lg) {
-    max-width: 50%;
-  }
-}