Misago/emberapp/app/styles/misago/buttons.less

//
// Buttons
// --------------------------------------------------


// Make lone button take all its place on small display
.btn-block-sm {
  @media (max-width: @screen-sm-max) {
    display: block;
    width: 100%;

    text-align: center;
  }
}


// Make busy button really look busy
.btn.btn-busy {
  .loader-compact {
    margin-top: @line-height-computed * -1;
    height: 20px;
  }
}


// Remove outline and shadow from all buttons
.btn-reset-styles {
  &, &:link, &:visited, &:hover, &:focus, &:active {
    .box-shadow(none);
    outline: 0;
  }
}

// Flat buttons
.btn-style(@color, @bg) {
  .btn-reset-styles();

  &, &:link, &:visited {
    background: transparent;
    border-color: transparent;

    color: @color;
  }

  &.btn-outlined, &:hover, &:focus {
    background: fadeOut(@bg, 80%);
    border-color: transparent;

    color: @color;
  }

  &:active {
    background: fadeOut(@bg, 60%);
    border-color: transparent;

    color: @color;
  }

  &.btn-busy {
    &, &:link, &:visited, &:hover, &:focus, &:active {
      color: transparent;

      .loader-compact>div { background-color: @color; }
    }
  }
}

.btn {
  &.btn-default {
    .btn-style(@btn-default-color, @btn-default-bg);
  }

  &.btn-primary {
    .btn-style(@btn-primary-color, @btn-primary-bg);
  }

  &.btn-success {
    .btn-style(@btn-success-color, @btn-success-bg);
  }

  &.btn-warning {
    .btn-style(@btn-warning-color, @btn-warning-bg);
  }

  &.btn-danger {
    .btn-style(@btn-danger-color, @btn-danger-bg);
  }
}


// Raised buttons
.btn-raised-style(@color, @bg) {
  .btn-reset-styles();

  &, &:link, &:visited, &:hover, &:focus {
    background: @bg;
    border-color: @bg;
    .box-shadow(none);
    .shadow-2dp();

    color: @color;
  }

  &:focus {
    .shadow-4dp();
  }

  &:active {
    background: darken(@bg, 8%);
    border-color: darken(@bg, 8%);
    .box-shadow(none);
    .shadow-6dp();

    outline: none;

    color: @color;
  }

  &.btn-busy {
    &, &:link, &:visited, &:hover, &:focus, &:active {
      .box-shadow(none);

      color: transparent;

      .loader-compact>div { background-color: @color; }
    }
  }
}


.btn.btn-raised {
  &.btn-default {
    .btn-raised-style(@btn-default-raised-color, @btn-default-raised-bg);

    &:disabled {
      background-color: darken(@btn-default-raised-bg, 10%);
    }
  }

  &.btn-primary {
    .btn-raised-style(@btn-primary-raised-color, @btn-primary-raised-bg);
  }

  &.btn-success {
    .btn-raised-style(@btn-success-raised-color, @btn-success-raised-bg);
  }

  &.btn-warning {
    .btn-raised-style(@btn-warning-raised-color, @btn-warning-raised-bg);
  }

  &.btn-danger {
    .btn-raised-style(@btn-danger-raised-color, @btn-danger-raised-bg);
  }
}


// Icon-only button
.btn-icon {
  // vert padding = icon height / 2 - base padding - border width
  @vertical-padding: @padding-base-vertical - (28px - @line-height-computed) / 2 - 1px;
  padding: @vertical-padding @padding-base-horizontal;

  .material-icons {
    top: 0px;

    font-size: 28px;
    line-height: 28px;
  }
}