gitlab-org--gitlab-foss/app/assets/stylesheets/framework/mixins.scss

/**
 * Prefilled mixins
 * Mixins with fixed values
 */

@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 for fixed width container
 */
@mixin fixed-width-container {
  max-width: $limited-layout-width - ($gl-padding * 2);
  margin-left: auto;
  margin-right: auto;
}

/*
 * Base mixin for lists in GitLab
 */
@mixin basic-list {
  margin: 5px 0;
  padding: 0;
  list-style: none;

  > li {
    @include clearfix;

    padding: 10px 0;
    border-bottom: 1px solid $gray-darker;
    display: block;
    margin: 0;

    &:last-child {
      border-bottom: 0;
    }

    &.active {
      background: $gray-light;

      a {
        font-weight: $gl-font-weight-bold;
      }
    }

    &.hide {
      display: none;
    }

    &.light {
      a {
        color: $gl-text-color;
      }
    }
  }
}

@mixin basic-list-stats {
  .stats {
    float: right;
    line-height: $list-text-height;
    color: $gl-text-color-secondary;

    span {
      margin-right: 15px;
    }
  }
}

@mixin webkit-prefix($property, $value) {
  #{'-webkit-' + $property}: $value;
  #{$property}: $value;
}

/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
@mixin on-webkit-only {
  /* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @content;
  }
}

@mixin keyframes($animation-name) {
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin include-keyframes($animation-name) {
  @include webkit-prefix(animation-name, $animation-name);
  @include keyframes($animation-name) {
    @content;
  }
}

/*
 * Mixin for status badges, as used for pipelines and commit signatures
 */
@mixin status-color($color-light, $color-main, $color-dark) {
  color: $color-main;
  border-color: $color-main;

  &:not(span):hover {
    background-color: $color-light;
    color: $color-dark;
    border-color: $color-dark;
  }
}

@mixin green-status-color {
  @include status-color($green-100, $green-500, $green-700);
}

@mixin fade($gradient-direction, $gradient-color) {
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  position: absolute;
  bottom: 12px;
  width: 43px;
  height: 30px;
  transition-duration: 0.3s;
  transform: translateZ(0);
  background: linear-gradient(to $gradient-direction,
  $gradient-color 45%,
  rgba($gradient-color, 0.4));

  &.scrolling {
    visibility: visible;
    opacity: 1;
    transition-duration: 0.3s;
  }

  .fa,
  svg {
    position: relative;
    top: 5px;
    font-size: 18px;
  }
}

@mixin scrolling-links() {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: nowrap;

  &::-webkit-scrollbar {
    display: none;
  }
}

@mixin triangle($color, $border-color, $size, $border-size) {
  &::before,
  &::after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &::before {
    border-color: transparent;
    border-bottom-color: $border-color;
    border-width: ($size + $border-size);
    margin-left: -($size + $border-size);
  }

  &::after {
    border-color: transparent;
    border-bottom-color: $color;
    border-width: $size;
    margin-left: -$size;
  }
}

/*
 * Mixin that fixes wrapping issues with long strings (e.g. URLs)
 *
 * Note: the width needs to be set for it to work in Firefox
 */
@mixin overflow-break-word {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/*
* Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs)
*/
@mixin build-trace($background: $black) {
  background: $background;
  color: $gray-darkest;
  white-space: pre;
  overflow-x: auto;
  font-size: 12px;
  border-radius: 0;
  border: 0;
  padding: $grid-size;

  .bash {
    display: block;
  }

  &.build-trace-rounded {
    border-radius: $border-radius-base;
  }
}

// Used in EE for Web Terminal
@mixin build-trace-bar($height) {
  height: $height;
  min-height: $height;
  background: $gray-light;
  border: 1px solid $border-color;
  color: $gl-text-color;
  padding: $grid-size;
}

@mixin build-trace-top-bar($height) {
  @include build-trace-bar($height);

  position: -webkit-sticky;
  position: sticky;
  top: $header-height;

  .with-performance-bar & {
    top: $header-height + $performance-bar-height;
  }
}

/*
* Mixin that handles the position of the controls placed on the top bar
*/
@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size, $svg-display: block, $svg-top: 2px) {
  display: flex;
  font-size: $control-font-size;
  justify-content: $flex-direction;
  align-items: center;
  align-self: baseline;
  @if $with-grow {
    flex-grow: $flex-grow-size;
  }

  svg {
    width: 15px;
    height: 15px;
    display: $svg-display;
    top: $svg-top;
  }

  .controllers-buttons {
    color: $gl-text-color;
    margin: 0 $grid-size;

    &:last-child {
      margin-right: 0;
    }
  }

  .btn-scroll.animate {
    .scroll-arrow {
      animation: blinking-scroll-button 1.5s ease-in-out infinite;
    }

    .scroll-dot {
      animation: blinking-scroll-button 1.5s ease-in-out infinite;
      animation-delay: 0.3s;
    }

    &:disabled {
      opacity: 1;
    }
  }

  .btn-scroll:disabled,
  .btn-refresh:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
}

@mixin build-loader-animation {
  position: relative;
  white-space: initial;

  .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: auto auto 12px;
    border-radius: 50%;
    animation: blinking-dot 1s linear infinite;
    background: $white;

    &:nth-child(2) {
      animation-delay: 0.33s;
    }

    &:nth-child(3) {
      animation-delay: 0.66s;
    }
  }
}

@mixin borderless-status-icon($color) {
  svg {
    border: 1px solid $color;
    border-radius: 50%;
  }
}

@mixin emoji-menu-toggle-button {
  line-height: 1;
  padding: 0;
  min-width: 16px;
  color: $gray-600;
  fill: $gray-600;

  .fa {
    position: relative;
    font-size: 16px;
  }

  svg {
    @include btn-svg;
    margin: 0;
  }

  .award-control-icon-positive,
  .award-control-icon-super-positive {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  &:hover,
  &.is-active {
    .danger-highlight {
      color: $red-500;
    }

    .link-highlight {
      color: $blue-600;
      fill: $blue-600;
    }

    .award-control-icon-neutral {
      opacity: 0;
    }

    .award-control-icon-positive {
      opacity: 1;
    }
  }

  &.is-active {
    .award-control-icon-positive {
      opacity: 0;
    }

    .award-control-icon-super-positive {
      opacity: 1;
    }
  }
}

/*
* Mixin that handles the size and right margin of avatars.
*/
@mixin avatar-size($size, $margin-right) {
  width: $size;
  height: $size;
  margin-right: $margin-right;
}

@mixin code-icon-size() {
  width: $gl-font-size * $code-line-height * 0.9;
  height: $gl-font-size * $code-line-height * 0.9;
}

@mixin avatar-counter($border-radius: 1em) {
  background-color: $gray-darkest;
  color: $white;
  border: 1px solid $gray-normal;
  border-radius: $border-radius;
  font-family: $regular-font;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
}

@mixin middle-dot-divider {
  &::after {
    // Duplicate `content` property used as a fallback
    // scss-lint:disable DuplicateProperty
    content: '\00B7'; // middle dot fallback if browser does not support alternative content
    content: '\00B7' / ''; // tell screen readers to ignore the content https://www.w3.org/TR/css-content-3/#accessibility
    padding: 0 0.375rem;
    font-weight: $gl-font-weight-bold;
  }

  &:last-child {
    &::after {
      content: '';
      padding: 0;
    }
  }
}