mixins.scss 2.32 KB
Newer Older
1 2 3 4 5
/**
 * Prefilled mixins
 * Mixins with fixed values
 */

6
@mixin str-truncated($max_width: 82%) {
7 8 9 10 11 12 13
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
  max-width: $max_width;
}
14

15 16 17 18 19 20 21
/*
 * Mixin for markdown tables
 */
@mixin markdown-table {
  width: auto;
}

22 23 24 25
/*
 * Base mixin for lists in GitLab
 */
@mixin basic-list {
26 27
  margin: 5px 0;
  padding: 0;
28
  list-style: none;
29

30
  > li {
31 32
    @include clearfix;

33
    padding: 10px 0;
34
    border-bottom: 1px solid $list-border-light;
35
    display: block;
36
    margin: 0;
37 38

    &:last-child {
39
      border-bottom: none;
40 41 42
    }

    &.active {
43
      background: $gray-light;
44

45
      a {
46
        font-weight: $gl-font-weight-bold;
47 48 49 50 51 52 53 54 55
      }
    }

    &.hide {
      display: none;
    }

    &.light {
      a {
56
        color: $gl-text-color;
57 58 59 60
      }
    }
  }
}
61

62 63 64 65 66 67 68 69 70 71 72 73
@mixin basic-list-stats {
  .stats {
    float: right;
    line-height: $list-text-height;
    color: $gl-text-color;

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

74 75 76 77 78 79 80 81 82 83 84 85
@mixin bulleted-list {
  > ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;

      ul {
        list-style-type: square;
      }
    }
  }
86 87 88
}

@mixin dark-diff-match-line {
89 90
  color: $dark-diff-match-bg;
  background: $dark-diff-match-color;
91
}
92 93 94 95 96

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

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

105 106 107 108 109 110 111 112 113
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }

  @keyframes #{$animation-name} {
    @content;
  }
}
114 115 116 117 118 119 120

@mixin include-keyframes($animation-name) {
  @include webkit-prefix(animation-name, $animation-name);
  @include keyframes($animation-name) {
    @content;
  }
}
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144

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

    svg {
      fill: $color-dark;
    }
  }

  svg {
    fill: $color-main;
  }
}

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