gitlab-org--gitlab-foss/app/assets/stylesheets/pages/labels.scss

.suggest-colors {
  margin-top: 5px;

  a {
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    text-decoration: none;
  }

  &.suggest-colors-dropdown {
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: $border-radius-base;
    overflow: hidden;

    a {
      border-radius: 0;
      width: (100% / 7);
      margin-right: 0;
      margin-bottom: -5px;
    }
  }
}

.dropdown-menu-labels {
  .dropdown-content {
    max-height: 135px;
  }
}

.dropdown-new-label {
  .dropdown-content {
    max-height: 136px;
  }
}

.dropdown-label-color-input {
  position: relative;
  margin-bottom: 10px;

  &.is-active {
    padding-left: 32px;
  }
}

.dropdown-label-color-preview {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-top-left-radius: $border-radius-base;
  border-bottom-left-radius: $border-radius-base;
}

.label-row {
  .label-name {
    display: inline-block;
    margin-bottom: 10px;

    @media (min-width: $screen-sm-min) {
      width: 200px;
      margin-left: $gl-padding * 2;
      margin-bottom: 0;
    }

    .label {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
  }

  .label-type {
    display: block;
    margin-bottom: 10px;
    margin-left: 50px;

    @media (min-width: $screen-sm-min) {
      display: inline-block;
      width: 100px;
      margin-left: 10px;
      margin-bottom: 0;
      vertical-align: top;
    }
  }

  .label-description {
    display: block;
    margin-bottom: 10px;

    .description-text {
      margin-bottom: $gl-padding;
    }

    a {
      color: $blue-600;
    }

    @media (min-width: $screen-sm-min) {
      display: inline-block;
      max-width: 50%;
      margin-left: 10px;
      margin-bottom: 0;
      vertical-align: top;
    }
  }

  .label {
    padding: 4px $grid-size;
    font-size: $label-font-size;
    position: relative;
    top: ($grid-size / 2);
  }
}

.color-label {
  padding: 0 $grid-size;
  line-height: 16px;
  border-radius: $label-border-radius;
}

.dropdown-labels-error {
  padding: 5px 10px;
  margin-bottom: 10px;
  background-color: $gl-danger;
  color: $white-light;
}

.manage-labels-list {
  @media(min-width: $screen-md-min) {
    &.content-list li {
      padding: $gl-padding 0;
    }
  }

  > li:not(.empty-message):not(.is-not-draggable) {
    background-color: $white-light;
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    margin-bottom: 5px;

    padding: 11px 10px 11px $gl-padding;
    border-radius: $border-radius-default;

    &:active {
      cursor: -webkit-grabbing;
      cursor: -moz-grabbing;
    }

    &.sortable-ghost {
      opacity: 0.3;
    }

    .prioritized-labels & {
      box-shadow: 0 1px 2px $issue-boards-card-shadow;
    }
  }

  .btn-action {
    .fa {
      font-size: 18px;
      vertical-align: middle;
      pointer-events: none;
    }

    &:hover {
      color: $gl-link-color;

      &.remove-row {
        color: $gl-danger;
      }
    }
  }

  .dropdown {
    @media (min-width: $screen-sm-min) {
      float: right;
    }
  }

  @media (max-width: $screen-xs-max) {
    .dropdown-menu {
      min-width: 100%;
    }
  }
}

.draggable-handler {
  display: inline-block;
  vertical-align: top;
  margin: 5px 0;
  opacity: 0;
  transition: opacity .3s;
  color: $gray-darkest;
}

.prioritized-labels {
  margin-bottom: 30px;

  .add-priority {
    display: none;
    color: $gray-light;
  }

  li:hover {
    .draggable-handler {
      display: inline-block;
      opacity: 1;
    }
  }
}

.other-labels {
  .remove-priority {
    display: none;
  }
}

.toggle-priority {
  display: inline-block;
  vertical-align: top;

  button {
    border-color: transparent;
    padding: 5px 8px;
    vertical-align: top;
    font-size: 14px;

    &:hover {
      border-color: transparent;
    }
  }
}

.filtered-labels {
  font-size: 0;
  padding: 12px 16px;

  .label-row {
    margin-top: 4px;
    margin-bottom: 4px;

    &:not(:last-child) {
      margin-right: 8px;
    }
  }

  .label-remove {
    border-left: 1px solid $label-remove-border;
    z-index: 3;
    border-radius: $label-border-radius;
    padding: 6px 10px 6px 9px;

    &:hover {
      box-shadow: inset 0 0 0 80px $label-remove-border;
    }
  }

  .btn {
    color: inherit;
  }

  a.btn {
    padding: 0;

    .has-tooltip {
      top: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      line-height: 1.1;
    }
  }
}

.label-options-toggle {
  width: 100%;
}

.label-subscription {
  vertical-align: middle;

  .dropdown-group-label a {
    cursor: pointer;
  }
}

.label-subscribe-button {
  @media(min-width: $screen-md-min) {
    min-width: 105px;
    margin-left: $gl-padding;
  }

  .label-subscribe-button-icon {
    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  .label-subscribe-button-loading {
    display: none;
  }

  &.disabled {
    .label-subscribe-button-icon {
      display: none;
    }

    .label-subscribe-button-loading {
      display: block;
    }
  }
}

.label-link {
  display: inline-flex;
  vertical-align: top;

  .label {
    vertical-align: inherit;
    font-size: $label-font-size;
  }
}

.labels-container {
  background-color: $gray-light;
  border-radius: $border-radius-default;
  padding: $gl-padding $gl-padding-8;
}