@gitlab/ui 98.5.1 → 99.0.0

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

@@ -1,360 +0,0 @@
-/**
-* Flexbox utilities
-*
-* Naming convention: gl-{breakpoint?}-{property}-{value}
-*/
-@mixin gl-align-items-baseline {
-  align-items: baseline;
-}
-
-@mixin gl-align-items-center {
-  align-items: center;
-}
-
-@mixin gl-align-items-flex-start {
-  align-items: flex-start;
-}
-
-@mixin gl-align-items-flex-end {
-  align-items: flex-end;
-}
-
-@mixin gl-align-items-stretch {
-  align-items: stretch;
-}
-
-@mixin gl-lg-align-items-baseline {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-align-items-baseline;
-  }
-}
-
-@mixin gl-sm-align-items-center {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-align-items-center;
-  }
-}
-
-@mixin gl-md-align-items-center {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-align-items-center;
-  }
-}
-
-@mixin gl-lg-align-items-center {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-align-items-center;
-  }
-}
-
-@mixin gl-sm-align-items-flex-start {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-align-items-flex-start;
-  }
-}
-
-@mixin gl-sm-align-items-flex-end {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-align-items-flex-end;
-  }
-}
-
-@mixin gl-md-align-items-flex-start {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-align-items-flex-start;
-  }
-}
-
-@mixin gl-lg-align-items-flex-start {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-align-items-flex-start;
-  }
-}
-
-@mixin gl-lg-align-items-flex-end {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-align-items-flex-end;
-  }
-}
-
-@mixin gl-flex-wrap {
-  flex-wrap: wrap;
-}
-
-@mixin gl-lg-flex-wrap {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-wrap;
-  }
-}
-
-@mixin gl-xl-flex-wrap {
-  @include gl-media-breakpoint-up(xl) {
-    @include gl-flex-wrap;
-  }
-}
-
-@mixin gl-sm-flex-wrap {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-flex-wrap;
-  }
-}
-
-@mixin gl-flex-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-
-@mixin gl-flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-@mixin gl-md-flex-nowrap {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-flex-nowrap;
-  }
-}
-
-@mixin gl-sm-flex-nowrap {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-flex-nowrap;
-  }
-}
-
-@mixin gl-flex-direction-column {
-  flex-direction: column;
-}
-
-@mixin gl-md-flex-direction-column {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-flex-direction-column;
-  }
-}
-
-@mixin gl-lg-flex-direction-column {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-direction-column;
-  }
-}
-
-@mixin gl-flex-direction-column-reverse {
-  flex-direction: column-reverse;
-}
-
-@mixin gl-flex-direction-row {
-  flex-direction: row;
-}
-
-@mixin gl-sm-flex-direction-row {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-flex-direction-row;
-  }
-}
-
-@mixin gl-md-flex-direction-row {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-flex-direction-row;
-  }
-}
-
-@mixin gl-lg-flex-direction-row {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-direction-row;
-  }
-}
-
-@mixin gl-xl-flex-direction-row {
-  @include gl-media-breakpoint-up(xl) {
-    @include gl-flex-direction-row;
-  }
-}
-
-@mixin gl-flex-direction-row-reverse {
-  flex-direction: row-reverse;
-}
-
-@mixin gl-sm-flex-direction-row-reverse {
-  @include gl-media-breakpoint-up(sm) {
-    flex-direction: row-reverse;
-  }
-}
-
-@mixin gl-md-flex-direction-row-reverse {
-  @include gl-media-breakpoint-up(md) {
-    flex-direction: row-reverse;
-  }
-}
-
-@mixin gl-flex-shrink-0 {
-  flex-shrink: 0;
-}
-
-@mixin gl-flex-grow-0 {
-  flex-grow: 0;
-}
-
-@mixin gl-flex-grow-1 {
-  flex-grow: 1;
-}
-
-@mixin gl-flex-grow-2 {
-  flex-grow: 2;
-}
-
-@mixin gl-md-flex-grow-0 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-flex-grow-0;
-  }
-}
-
-@mixin gl-md-flex-grow-1 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-grow-1;
-  }
-}
-
-@mixin gl-lg-flex-grow-1 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-grow-1;
-  }
-}
-
-@mixin gl-flex-basis-0 {
-  flex-basis: 0;
-}
-
-@mixin gl-flex-basis-quarter {
-  flex-basis: 25%;
-}
-
-@mixin gl-flex-basis-third {
-  flex-basis: 33%;
-}
-
-@mixin gl-md-flex-basis-13 {
-  @include gl-media-breakpoint-up(md) {
-    flex-basis: $gl-spacing-scale-13;
-  }
-}
-
-@mixin gl-md-flex-basis-third {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-flex-basis-third;
-  }
-}
-
-@mixin gl-flex-basis-two-thirds {
-  flex-basis: 66%;
-}
-
-@mixin gl-flex-basis-half {
-  flex-basis: 50%;
-}
-
-@mixin gl-flex-basis-full {
-  flex-basis: 100%;
-}
-
-@mixin gl-flex-flow-row-wrap {
-  flex-flow: row wrap;
-}
-
-@mixin gl-justify-content-center {
-  justify-content: center;
-}
-
-@mixin gl-justify-content-end {
-  justify-content: flex-end;
-}
-
-@mixin gl-sm-justify-content-end {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-justify-content-end;
-  }
-}
-
-@mixin gl-md-justify-content-center {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-justify-content-center;
-  }
-}
-
-@mixin gl-md-justify-content-end {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-justify-content-end;
-  }
-}
-
-@mixin gl-lg-justify-content-end {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-justify-content-end;
-  }
-}
-
-@mixin gl-justify-content-space-between {
-  justify-content: space-between;
-}
-
-@mixin gl-md-justify-content-space-between {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-justify-content-space-between;
-  }
-}
-
-@mixin gl-justify-content-start {
-  justify-content: flex-start;
-}
-
-@mixin gl-sm-justify-content-start {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-justify-content-start;
-  }
-}
-
-@mixin gl-md-justify-content-start {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-justify-content-start;
-  }
-}
-
-@mixin gl-lg-justify-content-start {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-justify-content-start;
-  }
-}
-
-@mixin gl-align-self-start {
-  align-self: flex-start;
-}
-
-@mixin gl-align-self-end {
-  align-self: flex-end;
-}
-
-@mixin gl-align-self-center {
-  align-self: center;
-}
-
-@mixin gl-sm-align-self-center {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-align-self-center;
-  }
-}
-
-@mixin gl-md-align-self-center {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-align-self-center;
-  }
-}
-
-@mixin gl-align-self-baseline {
-  align-self: baseline;
-}
-
-/**
- * Order utilities
- *
- * naming convention: gl-order-{position}
- */
-
-@mixin gl-order-n1 {
-  order: -1;
-}

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

@@ -1,50 +0,0 @@
-/**
-* Grid utilities
-*
-* naming convention: gl-grid-{breakpoint?}-{property}-{value?}
-*/
-@mixin gl-grid-tpl-rows-auto {
-  grid-template-rows: auto;
-}
-
-@mixin gl-grid-col-start-1 {
-  grid-column-start: 1;
-}
-
-@mixin gl-grid-template-columns-2 {
-  grid-template-columns: 1fr 1fr;
-}
-
-@mixin gl-sm-grid-template-columns-2 {
-  @include gl-media-breakpoint-up(sm) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@mixin gl-md-grid-template-columns-2 {
-  @include gl-media-breakpoint-up(md) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@mixin gl-md-grid-template-columns-3 {
-  @include gl-media-breakpoint-up(md) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@mixin gl-grid-template-columns-4 {
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-}
-
-@mixin gl-md-grid-template-columns-4 {
-  @include gl-media-breakpoint-up(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-@mixin gl-lg-grid-template-columns-4 {
-  @include gl-media-breakpoint-up(lg) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}

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

@@ -1,8 +0,0 @@
-/**
-* Object fit utilities.
-*
-* naming convention: gl-object-fit-{value}
-*/
-@mixin gl-object-fit-contain {
-  object-fit: contain;
-}

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

@@ -1,47 +0,0 @@
-/**
-* Utility class library
-*
-* ===========
-* = WARNING =
-* ===========
-*
-* Please take caution to make sure that the utility naming and values are consistent. We'd like to
-* be able to automate this file in the future.
-*
-* Naming conventions
-*
-* - Prefix the utility names with the gl- namespace
-* - Use t(op), b(ottom), l(eft), and r(ight) to indicate
-*   positioning variations, i.e. gl-border-b-1
-*/
-
-@import './accessibility';
-@import './animation';
-@import './background';
-@import './border';
-@import './box-shadow';
-@import './color';
-@import './composite';
-@import './cursor';
-@import './display';
-@import './flex';
-@import './grid';
-@import './image';
-@import './list-style';
-@import './opacity';
-@import './outline';
-@import './overflow';
-@import './pointer-events';
-@import './sizing';
-@import './spacing';
-@import './svg';
-@import './text';
-@import './transform';
-@import './transition';
-@import './typography';
-@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/list-style.scss

@@ -1,12 +0,0 @@
-/**
-* List style utilities.
-*
-* naming convention: gl-list-style-{value}
-*/
-@mixin gl-list-style-none {
-  list-style-type: none;
-}
-
-@mixin gl-list-style-position-inside {
-  list-style-position: inside;
-}

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

@@ -1,32 +0,0 @@
-/**
-* Opacity utilities
-*
-* naming convention: gl-opacity-{amount}
-*/
-@mixin gl-opacity-0 {
-  opacity: 0;
-}
-
-@mixin gl-opacity-3 {
-  opacity: 0.3;
-}
-
-@mixin gl-opacity-4 {
-  opacity: 0.4;
-}
-
-@mixin gl-opacity-5 {
-  opacity: 0.5;
-}
-
-@mixin gl-opacity-6 {
-  opacity: 0.6;
-}
-
-@mixin gl-opacity-7 {
-  opacity: 0.7;
-}
-
-@mixin gl-opacity-10 {
-  opacity: 1;
-}

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

@@ -1,12 +0,0 @@
-/**
-* Outline utilities.
-*
-* naming convention: gl-outline-{style}
-*/
-@mixin gl-outline-0 {
-  outline: 0;
-}
-
-@mixin gl-outline-none {
-  outline: none;
-}

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

@@ -1,45 +0,0 @@
-/**
-* Overflow utilities.
-*
-* naming convention: gl-overflow-{property-value} |
-* gl-overflow-x-{property-value} | gl-overflow-y-{property-value}
-*/
-@mixin gl-overflow-hidden {
-  overflow: hidden;
-}
-
-@mixin gl-overflow-x-auto {
-  overflow-x: auto;
-}
-
-@mixin gl-overflow-y-auto {
-  overflow-y: auto;
-}
-
-@mixin gl-overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-@mixin gl-overflow-wrap-break {
-  overflow-wrap: break-word;
-}
-
-@mixin gl-overflow-wrap-anywhere {
-  overflow-wrap: anywhere;
-}
-
-@mixin gl-overflow-x-scroll {
-  overflow-x: scroll;
-}
-
-@mixin gl-overflow-scroll {
-  overflow: scroll;
-}
-
-@mixin gl-overflow-auto {
-  overflow: auto;
-}
-
-@mixin gl-overflow-visible {
-  overflow: visible;
-}

package/src/scss/utility-mixins/pointer-events.scss

@@ -1,12 +0,0 @@
-/**
-* Pointer events utilities
-*
-* Naming convention gl-pointer-events-{property-value}
-*/
-@mixin gl-pointer-events-none {
-  pointer-events: none;
-}
-
-@mixin gl-pointer-events-auto {
-  pointer-events: auto;
-}