@gitlab/ui/src/scss/utility-mixins/sizing.scss

/**
* 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-eighth {
  width: 12.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-85p {
  width: 85%;
}

@mixin gl-w-90p {
  width: 90%;
}

@mixin gl-w-full {
  width: 100%;
}

@mixin gl-xs-w-full {
  @media (max-width: $breakpoint-sm) {
    @include gl-w-full;
  }
}

@mixin gl-w-max-content {
  width: max-content;
}

@mixin gl-layout-w-limited {
  max-width: $limited-layout-width;
}

@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-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%;
}

/**
* 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 {
  @media (min-width: $breakpoint-sm) {
    width: auto;
  }
}

@mixin gl-md-w-auto {
  @media (min-width: $breakpoint-md) {
    width: auto;
  }
}

/**
* 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-full {
  min-width: 100%;
}

@mixin gl-min-w-fit-content {
  min-width: fit-content;
}

@mixin gl-min-h-6 {
  min-height: $gl-spacing-scale-6;
}

@mixin gl-min-h-7 {
  min-height: $gl-spacing-scale-7;
}

@mixin gl-max-w-full {
  max-width: 100%;
}

@mixin gl-max-h-full {
  max-height: 100%;
}

@mixin gl-max-w-100vw {
  max-width: 100vw;
}