@gitlab/ui/src/scss/mixins.scss

GitLab UI Components

@mixin str-truncated($max-width: 82%) {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
  max-width: $max-width;
}

@mixin mask-chevron-down {
  mask-image: url('#{$gl-icon-chevron-down}');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

@mixin gl-fluid-font-size($min, $max) {
  @include gl-responsive-property('font-size', $min, $max);
}

@mixin gl-fluid-line-height($min, $max) {
  @include gl-responsive-property('line-height', $min, $max);
}

/**
* Declares a property with a fluid value that decreases or
* rises depending on the viewport’s size. The property type
* should be numeric.
*
* Values are expected in rem units.
* Fluid range: between 48rem (768px) – 75rem (1200px).
*
* @param $property Property name, i.e. line-height, font-size, width, height, etc.
* @param $min Property value lower bound.
* @param $max Property value upper bound.
*/
@mixin gl-responsive-property($property, $min, $max) {
  #{$property}: clamp-between($min, $max);
}

/**
* Helper function for :focus
*
* @param $size is deprecated and should not be used anymore
*/
@mixin gl-focus(
  $size: null,
  $color: false,
  $important: false,
  $inset: false,
  $focus-ring: $focus-ring,
  $outline: false,
  $outline-offset: $outline-offset
) {
  @if $inset == true {
    @if $color {
      box-shadow: inset 0 0 0 $outline-width $blue-400,
        inset 0 0 0 #{$outline-width + $outline-offset} $white,
        inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
        $focus-ring-inset if-important($important);
      outline: none if-important($important);
    } @else if $outline == true {
      outline: $focus-ring-outline if-important($important);
      outline-offset: $outline-offset;
    } @else {
      box-shadow: inset 0 0 0 $outline-width $blue-400, $focus-ring-inset if-important($important);
      outline: none if-important($important);
    }
  } @else if $color {
    box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
    outline: none if-important($important);
  } @else if $outline == true {
    outline: $focus-ring-outline if-important($important);
    outline-offset: $outline-offset;
  } @else {
    box-shadow: $focus-ring if-important($important);
    outline: none if-important($important);
  }
}

@mixin gl-bg-gradient-blur($direction, $color) {
  background-image: linear-gradient(to $direction, $transparent-rgba, $color 33%);
}

/**
* Helper function for @media of at least the minimum
* breakpoint width.
*
* @param $name Breakpoint name, such as `sm` or `md`.
*/
@mixin gl-media-breakpoint-up($name) {
  $min: map-get($breakpoints, $name);
  @if $min == null {
    @error "#{$name} is not a valid breakpoint for this @media query.";
  }
  @if $min != 0 {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

/**
* Helper function for @media of at most the maximum
* breakpoint width.
*
* Note: Before using, consider using a mobile-first
* approach, and define @media for larger breakpoints
* using `gl-media-breakpoint-up` while using this rule as
* the starting point instead.
*
* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid
*/
@mixin gl-media-breakpoint-down($name) {
  $max: map-get($breakpoints, $name);
  @if ($max == null or $max == 0) {
    @error "#{$name} is not a valid breakpoint for this @media query.";
  }
  // The maximum value is reduced by 0.02px to work around the limitations of
  // `min-` and `max-` prefixes and with fractional viewport sizes.
  // See: https://www.w3.org/TR/mediaqueries-4/#mq-min-max
  // Use 0.02px rather than 0.01px to work around a current rounding bug in Safari.
  // See https://bugs.webkit.org/show_bug.cgi?id=178261
  $breakpoint-max-range-precision: 0.02px;

  @media (max-width: $max - $breakpoint-max-range-precision) {
    @content;
  }
}

/**
* Helper function to resolve font-size value from $gl-font-sizes and
* $gl-font-sizes-fixed maps.
*
* @param $size Number font-size scale
* @param $fixed Boolean toggle default and fixed font size scales
*/
@function get-font-size-variable($size, $fixed) {
  @if $fixed == true {
    @if map-has-key($gl-font-sizes-fixed, $size) {
      @return map-get($gl-font-sizes-fixed, $size);
    } @else {
      @error "#{$size} is not a valid fixed font size property";
      @return null;
    }
  } @else {
    @if map-has-key($gl-font-sizes, $size) {
      @return map-get($gl-font-sizes, $size);
    } @else {
      @error "#{$size} is not a valid font size property";
      @return null;
    }
  }
}

/**
* Defines default properties for heading typography based on font-size
* scale value and default or fixed sizing.
*
* Note: overrides Bootstrap margin-top, other margin is determined by
* individual context
*
* @param $size Number font-size scale
* @param $fixed Boolean toggle default and fixed font size scales
*/
@mixin gl-heading-scale($size, $fixed: false) {
  font-weight: $gl-font-weight-heading;
  margin-top: 0; // override bootstrap reset in GitLab
  font-size: get-font-size-variable($size, $fixed);

  // Larger headings have reduced letter spacing
  @if ($size <= 500) {
    letter-spacing: $gl-letter-spacing-heading;
  } @else {
    letter-spacing: $gl-letter-spacing-heading-reduced;
  }

  // Display heading has different line height
  @if ($size == 800) {
    line-height: $gl-line-height-heading-display;
  } @else {
    line-height: $gl-line-height-heading;
  }
}