path: root/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 markdown tables
 */
@mixin markdown-table {
  width: auto;
  display: inline-block;
  overflow-x: auto;
  border: 0;
  border-color: $md-area-border;

  @supports (width: fit-content) {
    display: block;
    width: fit-content;
  }

  tr {
    th {
      border-bottom: solid 2px $md-area-border;
    }

    td {
      border-color: $md-area-border;
    }
  }
}

/*
 * 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;

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

@mixin bulleted-list {
  > ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;

      ul {
        list-style-type: square;
      }
    }
  }
}

@mixin dark-diff-match-line {
  color: $dark-diff-match-bg;
  background: $dark-diff-match-color;
}

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

/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
@mixin on-webkit-only {
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @content;
  }
}

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

  @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;
  -webkit-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 {
    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 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-light;

    &: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%;
  }
}