@gitlab/ui 98.5.2 → 99.0.0

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

@@ -1,79 +0,0 @@
-/**
-* SVG fill color utilities.
-*
-* naming convention: gl-fill-{color-palette-variable-name}
-* notes:
-* - Strictly based design system color palette. See variables.scss
-* for a comprehensive list.
-*/
-@mixin gl-fill-current-color {
-  fill: currentColor;
-}
-
-@mixin gl-fill-blue-200 {
-  fill: $blue-200;
-}
-
-@mixin gl-fill-blue-500 {
-  fill: $blue-500;
-}
-
-@mixin gl-stop-color-gray-50 {
-  stop-color: $gray-50;
-}
-
-@mixin gl-stop-color-gray-100 {
-  stop-color: $gray-100;
-}
-
-@mixin gl-stop-color-gray-200 {
-  stop-color: $gray-200;
-}
-
-@mixin gl-stroke-white {
-  stroke: $white;
-}
-
-@mixin gl-stroke-gray-200 {
-  stroke: $gray-200;
-}
-
-@mixin gl-stroke-blue-400 {
-  stroke: $blue-400;
-}
-
-@mixin gl-stroke-trans {
-  stroke: transparent;
-}
-
-@mixin gl-fill-gray-100 {
-  fill: $gray-100;
-}
-
-@mixin gl-fill-gray-200 {
-  fill: $gray-200;
-}
-
-@mixin gl-fill-gray-400 {
-  fill: $gray-400;
-}
-
-@mixin gl-fill-gray-600 {
-  fill: $gray-600;
-}
-
-@mixin gl-fill-gray-700 {
-  fill: $gray-700;
-}
-
-@mixin gl-fill-green-500 {
-  fill: $green-500;
-}
-
-@mixin gl-fill-green-700 {
-  fill: $green-700;
-}
-
-@mixin gl-fill-transparent {
-  fill: transparent;
-}

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

@@ -1,183 +0,0 @@
-@import '../mixins';
-
-/**
-* Text align utilities
-*/
-@mixin gl-text-left {
-  text-align: left;
-}
-
-@mixin gl-text-center {
-  text-align: center;
-}
-
-@mixin gl-text-right {
-  text-align: right;
-}
-
-@mixin gl-reset-text-align {
-  text-align: inherit;
-}
-
-/**
-* Text utilities
-*/
-@mixin gl-text-decoration-none($active: true, $focus: true, $hover: true) {
-  text-decoration: none;
-}
-
-@mixin gl-text-decoration-underline($active: true, $focus: true, $hover: true) {
-  text-decoration: underline;
-}
-
-@mixin gl-reset-text-decoration-color {
-  text-decoration-color: inherit;
-}
-
-@mixin gl-text-decoration-color-gray-500 {
-  text-decoration-color: $gray-500;
-}
-
-@mixin gl-text-decoration-color-gray-700 {
-  text-decoration-color: $gray-700;
-}
-
-@mixin gl-text-decoration-color-gray-900 {
-  text-decoration-color: $gray-900;
-}
-
-@mixin gl-text-transform-none {
-  text-transform: none;
-}
-
-@mixin gl-text-transform-capitalize {
-  text-transform: capitalize;
-}
-
-@mixin gl-text-transform-uppercase {
-  text-transform: uppercase;
-}
-
-/**
-* Text overflow utilities
-*
-* Naming convention: gl-text-overflow-{value}
-*/
-@mixin gl-text-overflow-ellipsis {
-  text-overflow: ellipsis;
-}
-
-/**
-* Line clamp utilities
-*
-* Naming convention: gl-line-clamp-{value}
-*/
-@mixin gl-line-clamp-1 {
-  white-space: normal;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  // stylelint-disable-next-line value-no-vendor-prefix
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@mixin gl-line-clamp-2 {
-  white-space: normal;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  // stylelint-disable-next-line value-no-vendor-prefix
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@mixin gl-line-clamp-3 {
-  white-space: normal;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  // stylelint-disable-next-line value-no-vendor-prefix
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-/**
-* Text indent utilities
-*
-* Naming convention: gl-text-indent-{value}
-*/
-@mixin gl-text-indent-0 {
-  text-indent: 0;
-}
-
-@mixin gl-text-indent-hide {
-  text-indent: -9999px;
-}
-
-/**
-* White-space utilities.
-*
-* naming convention: gl-white-space-{value}
-*/
-@mixin gl-white-space-normal {
-  white-space: normal;
-}
-
-@mixin gl-white-space-nowrap {
-  white-space: nowrap;
-}
-
-@mixin gl-white-space-pre-wrap {
-  white-space: pre-wrap;
-}
-
-@mixin gl-white-space-pre-line {
-  white-space: pre-line;
-}
-
-/**
-* Responsive White-space utilities
-*
-* naming convention: gl-{breakpoint}-white-space-{value}
-*/
-
-@mixin gl-md-white-space-nowrap {
-  @include gl-media-breakpoint-up(md) {
-    white-space: nowrap;
-  }
-}
-
-/**
-* Word utilities.
-*
-* naming convention: gl-word-{action}-{value}
-*/
-
-@mixin gl-word-break-all {
-  word-break: break-all;
-}
-
-@mixin gl-word-break-word {
-  word-break: break-word;
-}
-
-@mixin gl-overflow-break-word {
-  overflow-wrap: break-word;
-  hyphens: auto;
-}
-
-@mixin gl-overflow-anywhere {
-  hyphens: auto;
-  overflow-wrap: anywhere;
-  word-break: normal;
-}
-
-// Deprecated, prefer `gl-text-truncate`
-@mixin gl-str-truncated {
-  @include str-truncated;
-}
-
-// single line ellipsis'd text
-@mixin gl-text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

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

@@ -1,58 +0,0 @@
-/**
-* Transform utilities
-*
-* naming convention: gl-{transform}-{position}-{value}, or
-*                    gl-{transform}-{value}
-*/
-
-@mixin gl-translate-x-0 {
-  transform: translateX(0);
-}
-
-@mixin gl-translate-x-100 {
-  transform: translateX(100%);
-}
-
-@mixin gl-translate-x-n50 {
-  transform: translateX(-50%);
-}
-
-@mixin gl-translate-y-0 {
-  transform: translateY(0);
-}
-
-@mixin gl-translate-y-100 {
-  transform: translateY(100%);
-}
-
-@mixin gl-translate-y-n50 {
-  transform: translateY(-50%);
-}
-
-@mixin gl-translate-y-n100 {
-  transform: translateY(-100%);
-}
-
-@mixin gl-rotate-90 {
-  transform: rotate(90deg);
-}
-
-@mixin gl-rotate-180 {
-  transform: rotate(180deg);
-}
-
-@mixin gl-rotate-270 {
-  transform: rotate(270deg);
-}
-
-@mixin gl-flip-horizontal {
-  transform: scale(-1, 1);
-}
-
-@mixin gl-flip-vertical {
-  transform: scale(1, -1);
-}
-
-@mixin gl-flip-both {
-  transform: scale(-1, -1);
-}

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

@@ -1,44 +0,0 @@
-/**
-* Transition utilities
-*
-* naming convention: gl-transition-{speed}
-*/
-@mixin gl-transition-property-border-color {
-  transition-property: border-color;
-}
-
-@mixin gl-transition-property-width {
-  transition-property: width;
-}
-
-@mixin gl-transition-property-stroke {
-  transition-property: stroke;
-}
-
-@mixin gl-transition-property-stroke-opacity {
-  transition-property: stroke-opacity;
-}
-
-@mixin gl-transition-duration-slow {
-  transition-duration: $gl-transition-duration-slow;
-}
-
-@mixin gl-transition-duration-medium {
-  transition-duration: $gl-transition-duration-medium;
-}
-
-@mixin gl-transition-duration-fast {
-  transition-duration: $gl-transition-duration-fast;
-}
-
-@mixin gl-transition-timing-function-ease {
-  transition-timing-function: ease;
-}
-
-@mixin gl-transition-slow {
-  transition: all $gl-transition-duration-slow ease;
-}
-
-@mixin gl-transition-medium {
-  transition: all $gl-transition-duration-medium ease;
-}