_borders.scss

/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* stylelint-disable at-rule-disallowed-list */

@import 'tokens.scss';

////
/// @group borders
////

/// Full border utility.
///
/// @access private

@mixin _bpk-border($size, $color, $inset) {
  box-shadow: 0 0 0 $size $color #{$inset};
}

/// Top border utility.
///
/// @access private

@mixin _bpk-border-top($size, $color, $inset) {
  $offset-y: if($inset == inset, $size, -#{$size});

  box-shadow: 0 $offset-y 0 0 $color #{$inset};
}

/// Right border utility.
///
/// @access private

@mixin bpk-border-right($size, $color, $inset) {
  $offset-x: if($inset == inset, -#{$size}, $size);

  box-shadow: $offset-x 0 0 0 $color #{$inset};
}

/// Bottom border utility.
///
/// @access private

@mixin _bpk-border-bottom($size, $color, $inset) {
  $offset-y: if($inset == inset, -#{$size}, $size);

  box-shadow: 0 $offset-y 0 0 $color #{$inset};
}

/// Left border utility.
///
/// @access private

@mixin bpk-border-left($size, $color, $inset) {
  $offset-x: if($inset == inset, $size, -#{$size});

  box-shadow: $offset-x 0 0 0 $color #{$inset};
}

/// Small "1px" border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-sm($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-sm($color, $inset: inset) {
  @include _bpk-border($bpk-border-size-sm, $color, $inset);
}

/// Small "1px" top border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-top-sm($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-top-sm($color, $inset: inset) {
  @include _bpk-border-top($bpk-border-size-sm, $color, $inset);
}

/// Small "1px" right border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-right-sm($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-right-sm($color, $inset: inset) {
  @include bpk-border-right($bpk-border-size-sm, $color, $inset);
}

/// Small "1px" bottom border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-bottom-sm($color, $inset: inset) {
  @include _bpk-border-bottom($bpk-border-size-sm, $color, $inset);
}

/// Small "1px" left border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-left-sm($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-left-sm($color, $inset: inset) {
  @include bpk-border-left($bpk-border-size-sm, $color, $inset);
}

/// Large "2px" border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-lg($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-lg($color, $inset: inset) {
  @include _bpk-border($bpk-border-size-lg, $color, $inset);
}

/// Large "2px" top border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-top-lg($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-top-lg($color, $inset: inset) {
  @include _bpk-border-top($bpk-border-size-lg, $color, $inset);
}

/// Large "2px" right border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-right-lg($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-right-lg($color, $inset: inset) {
  @include bpk-border-right($bpk-border-size-lg, $color, $inset);
}

/// Large "2px" bottom border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-bottom-lg($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-bottom-lg($color, $inset: inset) {
  @include _bpk-border-bottom($bpk-border-size-lg, $color, $inset);
}

/// Large "2px" left border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-left-lg($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-left-lg($color, $inset: inset) {
  @include bpk-border-left($bpk-border-size-lg, $color, $inset);
}

/// Extra large "3px" border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-xl($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-xl($color, $inset: inset) {
  @include _bpk-border($bpk-border-size-xl, $color, $inset);
}

/// Extra large "3px" top border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-top-xl($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-top-xl($color, $inset: inset) {
  @include _bpk-border-top($bpk-border-size-xl, $color, $inset);
}

/// Extra large "3px" right border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-right-xl($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-right-xl($color, $inset: inset) {
  @include bpk-border-right($bpk-border-size-xl, $color, $inset);
}

/// Extra large "3px" bottom border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-bottom-xl($color, $inset: inset) {
  @include _bpk-border-bottom($bpk-border-size-xl, $color, $inset);
}

/// Extra large "3px" left border.
///
/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
///
/// @example scss
///   .selector {
///     @include bpk-border-left-xl($bpk-color-sky-gray-tint-06);
///   }

@mixin bpk-border-left-xl($color, $inset: inset) {
  @include bpk-border-left($bpk-border-size-xl, $color, $inset);
}