@gitlab/ui 32.25.0 → 32.29.0

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

@@ -53,7 +53,7 @@
 * naming convention: gl-{breakpoint}-border-{position}-{style}
 */
 @mixin gl-md-border-l-solid {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     border-left-style: solid;
   }
 }

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

@@ -20,7 +20,7 @@
 }
 
 @mixin gl-sm-text-body {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-text-body;
   }
 }

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

@@ -8,19 +8,19 @@
 }
 
 @mixin gl-sm-display-none {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-display-none;
   }
 }
 
 @mixin gl-md-display-none {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-display-none;
   }
 }
 
 @mixin gl-lg-display-none {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-display-none;
   }
 }
@@ -30,19 +30,19 @@
 }
 
 @mixin gl-sm-display-flex {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-display-flex;
   }
 }
 
 @mixin gl-md-display-flex {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-display-flex;
   }
 }
 
 @mixin gl-lg-display-flex {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-display-flex;
   }
 }
@@ -52,19 +52,19 @@
 }
 
 @mixin gl-sm-display-inline-flex {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline-flex;
   }
 }
 
 @mixin gl-md-display-inline-flex {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-display-inline-flex;
   }
 }
 
 @mixin gl-lg-display-inline-flex {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-display-inline-flex;
   }
 }
@@ -74,19 +74,19 @@
 }
 
 @mixin gl-sm-display-block {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-display-block;
   }
 }
 
 @mixin gl-md-display-block {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-display-block;
   }
 }
 
 @mixin gl-lg-display-block {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-display-block;
   }
 }
@@ -96,7 +96,7 @@
 }
 
 @mixin gl-sm-display-inline {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline;
   }
 }
@@ -106,19 +106,19 @@
 }
 
 @mixin gl-sm-display-inline-block {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline-block;
   }
 }
 
 @mixin gl-md-display-inline-block {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-display-inline-block;
   }
 }
 
 @mixin gl-lg-display-inline-block {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-display-inline-block;
   }
 }
@@ -140,7 +140,7 @@
 }
 
 @mixin gl-lg-display-table-cell {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-display-table-cell;
   }
 }

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

@@ -22,37 +22,37 @@
 }
 
 @mixin gl-xs-align-items-baseline {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     @include gl-align-items-baseline;
   }
 }
 
 @mixin gl-lg-align-items-baseline {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-align-items-baseline;
   }
 }
 
 @mixin gl-md-align-items-center {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-align-items-center;
   }
 }
 
 @mixin gl-lg-align-items-center {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-align-items-center;
   }
 }
 
 @mixin gl-sm-align-items-flex-end {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-align-items-flex-end;
   }
 }
 
 @mixin gl-lg-align-items-flex-end {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-align-items-flex-end;
   }
 }
@@ -62,26 +62,26 @@
 }
 
 @mixin gl-lg-flex-wrap {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-flex-wrap;
   }
 }
 
 @mixin gl-xl-flex-wrap {
-  @media (min-width: $breakpoint-xl) {
+  @include gl-media-breakpoint-up(xl) {
     @include gl-flex-wrap;
   }
 }
 
 @mixin gl-sm-flex-wrap {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-flex-wrap;
   }
 }
 
 // Deprecated, prefer `gl-sm-flex-wrap`
 @mixin gl-flex-sm-wrap {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-flex-wrap;
   }
 }
@@ -91,13 +91,13 @@
 }
 
 @mixin gl-sm-flex-direction-column {
-  @media (max-width: $breakpoint-md) {
+  @include gl-media-breakpoint-down(md) {
     @include gl-flex-direction-column;
   }
 }
 
 @mixin gl-xs-flex-direction-column {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
   }
 }
@@ -115,25 +115,25 @@
 }
 
 @mixin gl-sm-flex-direction-row {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-flex-direction-row;
   }
 }
 
 @mixin gl-md-flex-direction-row {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-flex-direction-row;
   }
 }
 
 @mixin gl-lg-flex-direction-row {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-flex-direction-row;
   }
 }
 
 @mixin gl-xl-flex-direction-row {
-  @media (min-width: $breakpoint-xl) {
+  @include gl-media-breakpoint-up(xl) {
     @include gl-flex-direction-row;
   }
 }
@@ -159,19 +159,19 @@
 }
 
 @mixin gl-md-flex-grow-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-flex-grow-0;
   }
 }
 
 @mixin gl-md-flex-grow-1 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-flex-grow-1;
   }
 }
 
 @mixin gl-lg-flex-grow-1 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-flex-grow-1;
   }
 }
@@ -193,19 +193,19 @@
 }
 
 @mixin gl-sm-justify-content-end {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-end;
   }
 }
 
 @mixin gl-md-justify-content-end {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-end;
   }
 }
 
 @mixin gl-lg-justify-content-end {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-justify-content-end;
   }
 }
@@ -219,13 +219,13 @@
 }
 
 @mixin gl-justify-content-md-start {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-start;
   }
 }
 
 @mixin gl-lg-justify-content-start {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-justify-content-start;
   }
 }
@@ -243,13 +243,13 @@
 }
 
 @mixin gl-sm-align-self-center {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-align-self-center;
   }
 }
 
 @mixin gl-md-align-self-center {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-align-self-center;
   }
 }

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

@@ -119,7 +119,7 @@
 }
 
 @mixin gl-xs-w-full {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     @include gl-w-full;
   }
 }
@@ -201,19 +201,19 @@
 */
 
 @mixin gl-sm-w-auto {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     width: auto;
   }
 }
 
 @mixin gl-md-w-auto {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     width: auto;
   }
 }
 
 @mixin gl-md-w-50p {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     width: 50%;
   }
 }
@@ -298,7 +298,7 @@
 */
 
 @mixin gl-md-max-w-30p {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     max-width: 30%;
   }
 }

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

@@ -78,7 +78,7 @@
 }
 
 @mixin gl-lg-px-7 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     padding-left: $gl-spacing-scale-7;
     padding-right: $gl-spacing-scale-7;
   }
@@ -195,7 +195,7 @@
 }
 
 @mixin gl-pt-md-2 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     padding-top: $gl-spacing-scale-2;
   }
 }
@@ -237,7 +237,7 @@
 }
 
 @mixin gl-md-pt-12 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-pt-12;
   }
 }
@@ -375,7 +375,7 @@
 }
 
 @mixin gl-mt-md-n2 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2;
   }
 }
@@ -737,133 +737,133 @@
 */
 
 @mixin gl-xs-mb-3 {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     @include gl-mb-3;
   }
 }
 
 @mixin gl-sm-ml-3 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-ml-3;
   }
 }
 
 @mixin gl-sm-mt-0 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-mt-0;
   }
 }
 
 @mixin gl-sm-mt-5 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-mt-5;
   }
 }
 
 @mixin gl-sm-mb-7 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-mb-7;
   }
 }
 
 @mixin gl-sm-my-12 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-my-12;
   }
 }
 
 @mixin gl-sm-mx-0 {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-mx-0;
   }
 }
 
 @mixin gl-md-mt-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-mt-0;
   }
 }
 
 @mixin gl-md-mb-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-mb-0;
   }
 }
 
 @mixin gl-lg-mb-0 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mb-0;
   }
 }
 
 @mixin gl-lg-mb-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mb-5;
   }
 }
 
 @mixin gl-md-mr-3 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-mr-3;
   }
 }
 
 @mixin gl-md-mr-5 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-mr-5;
   }
 }
 
 @mixin gl-lg-mr-2 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mr-2;
   }
 }
 
 @mixin gl-lg-mr-3 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mr-3;
   }
 }
 
 @mixin gl-lg-ml-2 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-ml-2;
   }
 }
 
 @mixin gl-lg-ml-3 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-ml-3;
   }
 }
 
 @mixin gl-lg-mx-2 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mx-2;
   }
 }
 
 @mixin gl-lg-mx-3 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mx-3;
   }
 }
 
 @mixin gl-lg-my-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-my-5;
   }
 }
 
 @mixin gl-lg-mt-0 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mt-0;
   }
 }
 
 @mixin gl-lg-mt-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-mt-5;
   }
 }
@@ -876,43 +876,43 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 @mixin gl-sm-pr-5 {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     @include gl-pr-5;
   }
 }
 
 @mixin gl-sm-pl-5 {
-  @media (max-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-down(sm) {
     @include gl-pl-5;
   }
 }
 
 @mixin gl-md-pr-0 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-pr-0;
   }
 }
 
 @mixin gl-md-pr-1 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-pr-1;
   }
 }
 
 @mixin gl-md-pr-2 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-pr-2;
   }
 }
 
 @mixin gl-lg-pr-5 {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-pr-5;
   }
 }
 
 @mixin gl-md-pl-3 {
-  @media (min-width: $breakpoint-md) {
+  @include gl-media-breakpoint-up(md) {
     @include gl-pl-3;
   }
 }

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

@@ -133,7 +133,7 @@
 }
 
 @mixin gl-sm-font-weight-bold {
-  @media (min-width: $breakpoint-sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-font-weight-bold;
   }
 }

package/src/scss/variables.scss

@@ -20,10 +20,19 @@ $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 
 // Responsive breakpoints
-$breakpoint-sm: px-to-rem(576px);
-$breakpoint-md: px-to-rem(768px);
-$breakpoint-lg: px-to-rem(992px);
-$breakpoint-xl: px-to-rem(1200px);
+
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+
+$breakpoints: (
+  xs: 0,
+  sm: $breakpoint-sm,
+  md: $breakpoint-md,
+  lg: $breakpoint-lg,
+  xl: $breakpoint-xl,
+);
 
 // Max widths
 $limited-layout-width: 990px !default;