@gitlab/ui 98.5.1 → 99.0.0

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

@@ -1,498 +0,0 @@
-/**
-* Border style utilities.
-*
-* naming convention: gl-border-{position}-{style}
-*/
-
-@mixin gl-border {
-  border: solid $gl-border-size-1 $border-color;
-}
-
-@mixin gl-border-t {
-  border-top: solid $gl-border-size-1 $border-color;
-}
-
-@mixin gl-border-b {
-  border-bottom: solid $gl-border-size-1 $border-color;
-}
-
-@mixin gl-border-l {
-  border-left: solid $gl-border-size-1 $border-color;
-}
-
-@mixin gl-border-r {
-  border-right: solid $gl-border-size-1 $border-color;
-}
-
-@mixin gl-border-none {
-  border-style: none;
-}
-
-@mixin gl-border-t-none {
-  border-top-style: none;
-}
-
-@mixin gl-border-solid {
-  border-style: solid;
-}
-
-@mixin gl-border-dashed($hover: true) {
-  border-style: dashed;
-}
-
-@mixin gl-border-dotted($hover: true) {
-  border-style: dotted;
-}
-
-@mixin gl-border-t-solid($hover: true) {
-  border-top-style: solid;
-}
-
-@mixin gl-border-t-double {
-  border-top-style: double;
-}
-
-@mixin gl-border-r-solid {
-  border-right-style: solid;
-}
-
-@mixin gl-border-b-solid($hover: true) {
-  border-bottom-style: solid;
-}
-
-@mixin gl-border-b-initial {
-  border-bottom-style: initial;
-}
-
-@mixin gl-border-l-solid {
-  border-left-style: solid;
-}
-
-@mixin gl-border-l-none {
-  border-left-style: none;
-}
-
-@mixin gl-border-r-none {
-  border-right-style: none;
-}
-
-/**
-* Responsive border style utilities.
-*
-* naming convention: gl-{breakpoint}-border-{position}-{style}
-*/
-@mixin gl-md-border-l-solid {
-  @include gl-media-breakpoint-up(md) {
-    border-left-style: solid;
-  }
-}
-
-/**
-* Border color utilities.
-*
-* naming convention: gl-border-{position}-{color-palette-variable}
-* notes:
-* - Prefer design system color palette. See variables.scss
-* for a comprehensive list.
-*/
-@mixin gl-border-white {
-  border-color: $white;
-}
-
-@mixin gl-border-transparent {
-  border-color: transparent;
-}
-
-@mixin gl-border-t-transparent {
-  border-top-color: transparent;
-}
-
-@mixin gl-border-r-transparent {
-  border-right-color: transparent;
-}
-
-@mixin gl-border-b-transparent {
-  border-bottom-color: transparent;
-}
-
-@mixin gl-border-l-transparent {
-  border-left-color: transparent;
-}
-
-@mixin gl-border-gray-10 {
-  border-color: $gray-10;
-}
-
-@mixin gl-border-gray-50 {
-  border-color: $gray-50;
-}
-
-@mixin gl-border-gray-100($hover: true) {
-  border-color: $gray-100;
-}
-
-@mixin gl-border-gray-200($active: true, $focus: true, $hover: true) {
-  border-color: $gray-200;
-}
-
-@mixin gl-border-gray-300 {
-  border-color: $gray-300;
-}
-
-@mixin gl-border-gray-400 {
-  border-color: $gray-400;
-}
-
-@mixin gl-border-gray-500 {
-  border-color: $gray-500;
-}
-
-@mixin gl-border-red-500 {
-  border-color: $red-500;
-}
-
-@mixin gl-border-orange-500 {
-  border-color: $orange-500;
-}
-
-@mixin gl-border-green-500 {
-  border-color: $green-500;
-}
-
-@mixin gl-border-blue-200($hover: true) {
-  border-color: $blue-200;
-}
-
-@mixin gl-border-blue-300 {
-  border-color: $blue-300;
-}
-
-@mixin gl-border-blue-500 {
-  border-color: $blue-500;
-}
-
-@mixin gl-border-blue-600 {
-  border-color: $blue-600;
-}
-
-@mixin gl-border-blue-700 {
-  border-color: $blue-700;
-}
-
-@mixin gl-border-purple-300 {
-  border-color: $purple-300;
-}
-
-@mixin gl-border-purple-500 {
-  border-color: $purple-500;
-}
-
-@mixin gl-border-purple-700 {
-  border-color: $purple-700;
-}
-
-@mixin gl-border-gray-a-08 {
-  border-color: $t-gray-a-08;
-}
-
-@mixin gl-border-gray-a-24 {
-  border-color: $t-gray-a-24;
-}
-
-@mixin gl-border-t-gray-100 {
-  border-top-color: $gray-100;
-}
-
-@mixin gl-border-t-gray-200 {
-  border-top-color: $gray-200;
-}
-
-@mixin gl-border-r-gray-100 {
-  border-right-color: $gray-100;
-}
-
-@mixin gl-border-r-gray-200 {
-  border-right-color: $gray-200;
-}
-
-@mixin gl-border-b-gray-10 {
-  border-bottom-color: $gray-10;
-}
-
-@mixin gl-border-b-gray-50 {
-  border-bottom-color: $gray-50;
-}
-
-@mixin gl-border-b-gray-100 {
-  border-bottom-color: $gray-100;
-}
-
-@mixin gl-border-b-gray-200 {
-  border-bottom-color: $gray-200;
-}
-
-@mixin gl-border-l-gray-50 {
-  border-left-color: $gray-50;
-}
-
-@mixin gl-border-l-gray-100 {
-  border-left-color: $gray-100;
-}
-
-@mixin gl-border-l-gray-200 {
-  border-left-color: $gray-200;
-}
-
-@mixin gl-border-l-gray-500 {
-  border-left-color: $gray-500;
-}
-
-@mixin gl-border-t-blue-600 {
-  border-top-color: $blue-600;
-}
-
-@mixin gl-border-r-blue-600 {
-  border-right-color: $blue-600;
-}
-
-@mixin gl-border-b-blue-600 {
-  border-bottom-color: $blue-600;
-}
-
-@mixin gl-border-l-blue-600 {
-  border-left-color: $blue-600;
-}
-
-@mixin gl-border-t-red-500 {
-  border-top-color: $red-500;
-}
-
-/**
-* Border width utilities.
-*
-* naming convention: gl-border-{position}-{border-width}
-* notes:
-* - Base new utilities in this group in the $gl-border-size variable
-*/
-@mixin gl-border-0 {
-  border-width: 0;
-}
-
-@mixin gl-border-t-0 {
-  border-top-width: 0;
-}
-
-@mixin gl-border-b-0 {
-  border-bottom-width: 0;
-}
-
-@mixin gl-border-l-0 {
-  border-left-width: 0;
-}
-
-@mixin gl-border-r-0 {
-  border-right-width: 0;
-}
-
-@mixin gl-border-1 {
-  border-width: $gl-border-size-1;
-}
-
-@mixin gl-border-2 {
-  border-width: $gl-border-size-2;
-}
-
-@mixin gl-border-3 {
-  border-width: $gl-border-size-3;
-}
-
-@mixin gl-border-4 {
-  border-width: $gl-border-size-4;
-}
-
-@mixin gl-border-8 {
-  border-width: $gl-border-size-8;
-}
-
-@mixin gl-border-t-1 {
-  border-top-width: $gl-border-size-1;
-}
-
-@mixin gl-border-b-1 {
-  border-bottom-width: $gl-border-size-1;
-}
-
-@mixin gl-border-l-1 {
-  border-left-width: $gl-border-size-1;
-}
-
-@mixin gl-border-l-4 {
-  border-left-width: $gl-border-size-4;
-}
-
-@mixin gl-border-r-1 {
-  border-right-width: $gl-border-size-1;
-}
-
-@mixin gl-border-t-2 {
-  border-top-width: $gl-border-size-2;
-}
-
-@mixin gl-border-b-2 {
-  border-bottom-width: $gl-border-size-2;
-}
-
-@mixin gl-border-r-2 {
-  border-right-width: $gl-border-size-2;
-}
-
-@mixin gl-border-top-0 {
-  border-top: 0;
-}
-
-@mixin gl-border-right-0 {
-  border-right: 0;
-}
-@mixin gl-border-bottom-0 {
-  border-bottom: 0;
-}
-
-@mixin gl-border-left-0 {
-  border-left: 0;
-}
-
-/**
-* Border radius utilities.
-*
-* naming convention: gl-rounded-{roundness-size}
-* notes:
-* - Base new utilities in this group in the $gl-border-radius variables
-*/
-@mixin gl-rounded-0 {
-  border-radius: 0;
-}
-
-@mixin gl-rounded-6 {
-  border-radius: $gl-border-radius-6;
-}
-
-@mixin gl-rounded-7 {
-  border-radius: $gl-border-radius-7;
-}
-
-@mixin gl-rounded-base($hover: true) {
-  border-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-full {
-  border-radius: $gl-border-radius-full;
-}
-
-@mixin gl-rounded-small {
-  border-radius: $gl-border-radius-small;
-}
-
-@mixin gl-rounded-lg {
-  border-radius: $gl-border-radius-large;
-}
-
-@mixin gl-rounded-pill {
-  border-radius: $gl-spacing-scale-4;
-}
-
-@mixin gl-rounded-left-none {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-@mixin gl-rounded-left-base {
-  border-top-left-radius: $gl-border-radius-base;
-  border-bottom-left-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-top-left-base {
-  border-top-left-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-top-left-none {
-  border-top-left-radius: 0;
-}
-
-@mixin gl-rounded-top-right-base {
-  border-top-right-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-top-right-none {
-  border-top-right-radius: 0;
-}
-
-@mixin gl-rounded-right-none {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-@mixin gl-rounded-top-base {
-  border-top-left-radius: $gl-border-radius-base;
-  border-top-right-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-bottom-left-small {
-  border-bottom-left-radius: $gl-border-radius-small;
-}
-
-@mixin gl-rounded-bottom-left-base {
-  border-bottom-left-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-bottom-left-large {
-  border-bottom-left-radius: $gl-border-radius-large;
-}
-
-@mixin gl-rounded-bottom-left-none {
-  border-bottom-left-radius: 0;
-}
-
-@mixin gl-rounded-bottom-right-small {
-  border-bottom-right-radius: $gl-border-radius-small;
-}
-
-@mixin gl-rounded-bottom-right-base {
-  border-bottom-right-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-bottom-right-large {
-  border-bottom-right-radius: $gl-border-radius-large;
-}
-
-@mixin gl-rounded-bottom-right-none {
-  border-bottom-right-radius: 0;
-}
-
-@mixin gl-rounded-bottom-base {
-  border-bottom-left-radius: $gl-border-radius-base;
-  border-bottom-right-radius: $gl-border-radius-base;
-}
-
-@mixin gl-rounded-top-left-small {
-  border-top-left-radius: $gl-border-radius-small;
-}
-
-@mixin gl-rounded-top-right-small {
-  border-top-right-radius: $gl-border-radius-small;
-}
-
-@mixin gl-rounded-bottom-left-6 {
-  border-bottom-left-radius: $gl-border-radius-6;
-}
-
-@mixin gl-rounded-bottom-right-6 {
-  border-bottom-right-radius: $gl-border-radius-6;
-}
-
-@mixin gl-rounded-top-left-6 {
-  border-top-left-radius: $gl-border-radius-6;
-}
-
-@mixin gl-rounded-top-right-6 {
-  border-top-right-radius: $gl-border-radius-6;
-}

package/src/scss/utility-mixins/box-shadow.scss

@@ -1,220 +0,0 @@
-/**
-* Inset border utilities
-*
-* Uses box-shadow: inset to create a border that does not
-* increase the box size of an element
-*
-* Naming convention: gl-inset-border-{border-position}-{border-size}-{color-name}
-*/
-
-@mixin gl-inset-border-1-gray-100 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
-}
-
-@mixin gl-inset-border-1-gray-200 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-200;
-}
-
-@mixin gl-inset-border-1-gray-400 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
-}
-
-@mixin gl-inset-border-1-gray-600 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-600;
-}
-
-@mixin gl-inset-border-2-gray-300 {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
-}
-
-@mixin gl-inset-border-2-gray-400 {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
-}
-
-@mixin gl-inset-border-y-1-gray-200 {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
-}
-
-@mixin gl-inset-border-y-1-gray-100 {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
-}
-
-@mixin gl-inset-border-b-1-gray-100 {
-  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
-}
-
-@mixin gl-inset-border-b-2-gray-100 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
-}
-
-@mixin gl-inset-border-l-4-gray-100 {
-  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100;
-}
-
-@mixin gl-inset-border-b-1-gray-200 {
-  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
-}
-
-@mixin gl-inset-border-b-2-gray-200 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-200;
-}
-
-@mixin gl-inset-border-b-1-gray-300 {
-  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-300;
-}
-
-@mixin gl-inset-border-b-2-gray-300 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-300;
-}
-
-@mixin gl-inset-border-b-2-gray-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-500;
-}
-
-@mixin gl-inset-border-b-1-gray-900 {
-  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-900;
-}
-
-@mixin gl-inset-border-1-blue-500 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $blue-500;
-}
-
-@mixin gl-inset-border-1-blue-600 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $blue-600;
-}
-
-@mixin gl-inset-border-b-2-blue-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500;
-}
-
-@mixin gl-inset-border-1-green-500 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $green-500;
-}
-
-@mixin gl-inset-border-1-green-600 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $green-600;
-}
-
-@mixin gl-inset-border-2-blue-400($focus: true) {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400;
-}
-
-@mixin gl-inset-border-2-green-400 {
-  box-shadow: inset 0 0 0 $gl-border-size-2 $green-400;
-}
-
-@mixin gl-inset-border-1-orange-500 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $orange-500;
-}
-
-@mixin gl-inset-border-1-orange-600 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $orange-600;
-}
-
-@mixin gl-inset-border-1-red-300 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300;
-}
-
-@mixin gl-inset-border-1-red-400 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $red-400;
-}
-
-@mixin gl-inset-border-1-red-500 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500;
-}
-
-@mixin gl-inset-border-1-red-600 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $red-600;
-}
-
-@mixin gl-inset-border-l-3-red-600 {
-  box-shadow: inset $gl-border-size-3 0 0 0 $red-600;
-}
-
-@mixin gl-inset-border-1-gray-a-08 {
-  box-shadow: inset 0 0 0 $gl-border-size-1 $t-gray-a-08;
-}
-
-@mixin gl-inset-border-b-2-theme-accent {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
-}
-
-@mixin gl-inset-border-b-2-theme-indigo-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500;
-}
-
-@mixin gl-inset-border-b-2-theme-indigo-300 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-300;
-}
-
-@mixin gl-inset-border-b-2-theme-red-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-red-500;
-}
-
-@mixin gl-inset-border-b-2-theme-light-red-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-red-500;
-}
-
-@mixin gl-inset-border-b-2-theme-blue-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-blue-500;
-}
-
-@mixin gl-inset-border-b-2-theme-light-blue-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-blue-500;
-}
-
-@mixin gl-inset-border-b-2-theme-green-300 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-300;
-}
-
-@mixin gl-inset-border-b-2-theme-green-500 {
-  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-500;
-}
-
-/**
-* Box shadow utilities
-*
-* naming convention: gl-shadow-{config-name}
-*/
-@mixin gl-shadow-none {
-  box-shadow: none;
-}
-
-@mixin gl-shadow {
-  box-shadow: 0 1px 4px 0 rgba(#000, 0.3);
-}
-
-@mixin gl-shadow-x0-y2-b4-s0 {
-  box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
-}
-
-@mixin gl-shadow-blue-200-x0-y0-b4-s2 {
-  box-shadow: 0 0 4px 2px $blue-200;
-}
-
-@mixin gl-shadow-x0-y0-b3-s1-blue-500 {
-  box-shadow: inset 0 0 3px 1px $blue-500;
-}
-
-/**
-* New utilities to match design specs
-* Per https: //gitlab.com/gitlab-org/gitlab-ui/-/issues/615,
-* some of the above could be replaced.
-*
-* These use gray instead of black to align with
-* tinted neutrals.
-*/
-
-@mixin gl-shadow-sm {
-  box-shadow: 0 1px 2px var(--gl-shadow-color-default);
-}
-
-@mixin gl-shadow-md {
-  box-shadow: 0 2px 8px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default);
-}
-
-@mixin gl-shadow-lg {
-  box-shadow: 0 4px 12px var(--gl-shadow-color-default), 0 0 4px var(--gl-shadow-color-default);
-}

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

@@ -1,9 +0,0 @@
-// See https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_clearfix.scss
-
-@mixin gl-clearfix {
-  &::after {
-    display: block;
-    clear: both;
-    content: '';
-  }
-}