edx-platform/lms/static/sass/discussion/elements/_actions.scss

.discussion {

  // discussion - elements - actions
  // ====================

  // UI: general action list
  .post-actions-list,
  .response-actions-list,
  .comment-actions-list {
    @extend %ui-no-list;

    @include text-align(right);

    .actions-item {
      box-sizing: border-box;
      display: block;
      margin: ($baseline/4) 0;

      &.is-hidden {
        display: none;
      }

      &.is-disabled {
        a {
          pointer-events: none;

          .action-icon {
            display: none;
          }

          .action-label {
            @include padding-right(0);
          }

          &:hover {
            border-color: transparent;

            .action-label {
              color: $forum-color-active-text;
            }
          }
        }
      }
    }

    .more-wrapper {
      position: relative;
    }
  }

  // ====================

  // UI: general actions dropdown layout
  .actions-dropdown {
    @extend %ui-no-list;
    @extend %ui-depth1;

    @include right(0);

    display: none;
    position: absolute;
    top: 100%;
    pointer-events: none;
    min-width: $actions-dropdown-width;

    &.is-expanded {
      display: block;
      pointer-events: auto;
    }

    .actions-dropdown-list {
      box-sizing: border-box;
      box-shadow: 0 1px 1px $shadow-l1;
      position: relative;
      width: 100%;
      border-radius: $forum-border-radius;
      margin: ($baseline/4) 0 0 0;
      border: 1px solid $forum-color-border;
      padding: ($baseline/2) ($baseline*0.75);
      background: $forum-color-background;

      // ui triangle/nub
      &::after,
      &::before {
        @include right(6px);

        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }

      &::after {
        @include margin-right(1px);

        border-color: transparent;
        border-bottom-color: $white;
        border-width: 6px;
      }

      &::before {
        border-color: transparent;
        border-bottom-color: $forum-color-border;
        border-width: 7px;
      }
    }

    .actions-item {
      display: block;
      margin: 0;

      &.is-hidden {
        display: none;
      }
    }
  }

  // ====================

  // UI: general action
  .action-button {
    @include transition(border 0.5s linear 0s);

    box-sizing: border-box;
    display: inline-block;
    border: 1px solid transparent;
    border-radius: $forum-border-radius;
    color: theme-color("secondary");

    .action-icon {
      display: inline-block;
      font-size: $forum-small-font-size;
      height: $baseline;
      width: $baseline;
      border: 1px solid $forum-color-border;
      border-radius: $forum-border-radius;
      text-align: center;
      color: theme-color("secondary");

      .icon {
        @include margin-right(0);

        vertical-align: middle;
      }
    }

    .action-label {
      @extend %t-copy-sub2;

      display: none;
      vertical-align: middle;
      padding: 2px 8px;
    }

    &:hover,
    &:focus {
      .action-label {
        display: inline-block;
      }

      .action-icon {
        @include border-radius(0, $forum-border-radius, $forum-border-radius, 0);
      }
    }

    // specific button styles
    &.action-follow {
      .action-label {
        color: theme-color("primary");
      }

      &.is-checked,
      &:hover,
      &:focus {
        .action-icon {
          background-color: $forum-color-following;
          border: 1px solid theme-color("primary");
          color: $white;
        }
      }

      &:hover,
      &:focus {
        border-color: $forum-color-following;
      }
    }

    &.action-vote {
      .action-label {
        opacity: 1;
      }

      &.is-checked,
      &:hover,
      &:focus {
        .action-icon {
          background-color: $green;
          border: 1px solid $green;
          color: $white;
        }
      }

      &:hover,
      &:focus {
        border-color: $green;

        .action-label {
          color: $green;
        }
      }
    }

    &.action-endorse {
      &.is-checked,
      &:hover,
      &:focus {
        .action-icon {
          background-color: theme-color("primary");
          border: 1px solid theme-color("primary");
          color: $white;
        }
      }

      &:hover,
      &:focus {
        border-color: theme-color("primary");
        background-color: $forum-color-background;

        .action-label {
          color: theme-color("primary");
        }
      }
    }

    &.action-answer {
      &.is-checked,
      &:hover,
      &:focus {
        .action-icon {
          border: 1px solid $green;
          background-color: $green;
          color: $white;
        }
      }

      &:hover,
      &:focus {
        border-color: $green;
        background-color: $forum-color-background;

        .action-label {
          color: $green;
        }
      }
    }

    // more drop-down menu
    &.action-more {
      position: relative;

      &:hover,
      &:focus {
        border-color: theme-color("dark");
        background-color: $forum-color-background;

        .action-icon {
          border: 1px solid theme-color("dark");
          background-color: theme-color("dark");
          color: theme-color("inverse");
        }

        .action-label {
          opacity: 1;
          color: $black;
        }
      }
    }
  }

  // ====================

  .actions-dropdown {

    // UI: secondary action
    .action-list-item {
      @extend %t-copy-sub2;

      @include text-align(right);

      display: block;
      width: 100%;
      padding: ($baseline/10) 0;
      white-space: nowrap;
      color: theme-color("secondary");

      &:hover,
      &:focus {
        color: $link-color;
      }

      .action-icon {
        @include margin-left($baseline/4);

        display: inline-block;
        width: ($baseline/2);
        color: inherit;
      }

      .action-label {
        display: inline-block;
        color: inherit;
      }

      // CASE: checked
      &.is-checked {
        // CASE: pin action
        &.action-pin {
          color: $pink;
        }

        // CASE: report action
        &.action-report {
          color: $pink;
        }

        // CASE: hover for any action
        &:hover,
        &:focus {
          color: $link-color;
        }
      }
    }
  }

  .action-button,
  .action-list-item {
    .action-label {
      @include float(left);

      .label-checked {
        display: none;
      }
    }

    &.is-checked {
      .label-unchecked {
        display: none;
      }

      .label-checked {
        display: inline;
      }
    }
  }

  .btn-primary,
  .btn-outline-primary {
    &:focus {
      box-shadow: 0 0 0 2px rgb(0, 120, 180);
    }
  }
}