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

/**
* 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-t-transparent {
  border-top-color: transparent;
}

@mixin gl-border-gray-50 {
  border-color: $gray-50;
}

@mixin gl-border-gray-100 {
  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-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-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-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;
}

/**
* 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-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-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-top-base {
  border-top-left-radius: $gl-border-radius-base;
  border-top-right-radius: $gl-border-radius-base;
}

@mixin gl-rounded-bottom-left-base {
  border-bottom-left-radius: $gl-border-radius-base;
}

@mixin gl-rounded-bottom-left-none {
  border-bottom-left-radius: 0;
}

@mixin gl-rounded-bottom-right-base {
  border-bottom-right-radius: $gl-border-radius-base;
}

@mixin gl-rounded-bottom-right-none {
  border-bottom-right-radius: 0;
}

@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-small {
  border-bottom-left-radius: $gl-border-radius-small;
}

@mixin gl-rounded-bottom-right-small {
  border-bottom-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;
}