edx-platform/lms/static/sass/elements/_controls.scss

// lms - elements - controls
// ====================

%btn {
  @include box-sizing(border-box);
  @include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
  display: inline-block;
  cursor: pointer;
  text-decoration: none;

  &:hover, &:active, &:focus {
    text-decoration: none;
  }

  &.disabled, &[disabled] {
    cursor: default;
    pointer-events: none;
  }
}

%btn-pill {
  border-radius: $baseline/5;
}

%btn-rounded {
  border-radius: ($baseline/2);
}

%btn-edged {
  border-radius: ($baseline/10);
}

// primary button
%btn-primary {
  @extend %t-weight3;
  @extend %btn;
  @extend %btn-edged;
  border: none;
  padding: ($baseline*0.75) $baseline;
  text-align: center;

  &:hover, &:active, &:focus {

  }

  &.current, &.active {

    &:hover, &:active, &:focus {

    }
  }

  &.disabled, &.is-disabled, &[disabled] {
    background: $m-gray-l2;
    color: $white-t3;
  }
}

// blue primary gray
%btn-primary-gray {
  @extend %btn-primary;
  box-shadow: 0 2px 1px 0 $m-gray-d2;
  background: $m-gray;
  color: $white;

  &:hover, &:active, &:focus {
    background: $m-gray-l1;
    color: $white;
  }

  &.current, &.active {
    box-shadow: inset 0 2px 1px 1px $m-gray-d2;
    background: $m-gray;
    color: $m-gray-l1;

    &:hover, &:active, &:focus {
      box-shadow: inset 0 2px 1px 1px $m-gray-d3;
      color: $m-gray-d3;
    }
  }

  &.disabled, &[disabled] {
    box-shadow: none;
  }
}

// blue primary error color
%btn-primary-error {
  @extend %btn-primary;
  box-shadow: 0 2px 1px 0 shade($error-color, 25%);
  background: shade($error-color, 25%);
  color: $white;

  &:hover, &:active {
    background: $error-color;
    color: $white;
  }

  &.disabled, &[disabled] {
    box-shadow: none;
  }
}

// blue primary button
%btn-primary-blue {
  @extend %btn-primary;
  box-shadow: 0 2px 1px 0 $m-blue-d4;
  background: $m-blue-d3;
  color: $white;

  &:hover, &:active, &:focus {
    background: $m-blue-d1;
    color: $white;
  }

  &.current, &.active {
    box-shadow: inset 0 2px 1px 1px $m-blue-d2;
    background: $m-blue;
    color: $m-blue-d2;

    &:hover, &:active, &:focus {
      box-shadow: inset 0 2px 1px 1px $m-blue-d3;
      color: $m-blue-d3;
    }
  }

  &.disabled, &[disabled] {
    box-shadow: none;
  }
}

// pink primary button
%btn-primary-pink {
  @extend %btn-primary;
  box-shadow: 0 2px 1px 0 $m-pink-d2;
  background: $m-pink;
  color: $white;

  &:hover, &:active, &:focus {
    background: $m-pink-l3;
    color: $white;
  }

  &.current, &.active {
    box-shadow: inset 0 2px 1px 1px $m-pink-d1;
    background: $m-pink-l2;
    color: $m-pink-d1;

    &:hover, &:active, &:focus {
      box-shadow: inset 0 2px 1px 1px $m-pink-d2;
      color: $m-pink-d3;
    }
  }

  &.disabled, &[disabled] {
    box-shadow: none;
  }
}

// green primary button
%btn-primary-green {
  @extend %btn-primary;
  box-shadow: 0 2px 1px 0 $m-green-d2;
  background: $m-green-d1;
  color: $white;

  &:hover, &:active, &:focus {
    background: $m-green-s1;
    color: $white;
  }

  &.current, &.active {
    box-shadow: inset 0 2px 1px 1px $m-green;
    background: $m-green-l2;
    color: $m-green;

    &:hover, &:active, &:focus {
      box-shadow: inset 0 2px 1px 1px $m-green-d1;
      color: $m-green-d1;
    }
  }

  &.disabled, &[disabled] {
    box-shadow: none;
  }
}

// disabled primary button - used for more manual approaches
%btn-primary-disabled {
  background: $m-gray-l2;
  color: $white-t3;
  pointer-events: none;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  :hover, :focus {
    pointer-events: none;
  }
}

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

  // application: canned actions
  .btn {
    font-family: $f-sans-serif;
  }

  .btn-large {
    @extend %t-action1;
    @extend %t-weight3;
    display: block;
    padding:($baseline*0.75) ($baseline*1.5);
  }

  .btn-avg {
    @extend %t-action2;
    @extend %t-weight3;
  }

  .btn-blue {
    @extend %btn-primary-blue;
    margin-bottom: $baseline;


    &:last-child {
      margin-bottom: none;
    }
  }

  .btn-pink {
    @extend %btn-primary-pink;
    margin-bottom: $baseline;


    &:last-child {
      margin-bottom: none;
    }
  }