Mailspring/static/buttons.less

@import "ui-variables";
@import "ui-mixins";

button, html input[type="button"] {
  cursor: default;
  &:hover, &:active {
    cursor: default;
  }
}

.btn {
  border:  0;
  padding: 0.33em 1em;
  border-radius: @border-radius-base;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
  cursor: default;
  display:inline-block;

  height: auto;
  line-height: 1;

  &:active {
    cursor: default;
    background-color: darken(@btn-default-bg-color, 9%);
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.21);
  }
  &:focus {
    outline: none
  }

  font-size: @font-size-base;
  &.btn-smaller {
    font-size: @font-size-smaller;
  }
  &.btn-small {
    font-size: @font-size-small;
  }
  &.btn-large {
    font-size: @font-size-large;
    padding: 0.5em 1.3em;
  }
  &.btn-larger {
    font-size: @font-size-larger;
    padding: 0.66em 1.6em;
  }

  color:      @btn-default-text-color;
  background: @btn-default-bg-color;

  &.btn-action {
    color:      @btn-action-text-color;
    background: @btn-action-bg-color;
  }

  &.btn-emphasis {
    background-image: -webkit-gradient(linear, left top, left bottom, from(lighten(@btn-emphasis-bg-color,10%)), to(@btn-emphasis-bg-color));
    border:1px solid darken(@btn-emphasis-bg-color, 5%);
    color: @btn-emphasis-text-color;
    font-weight: @font-weight-medium;

    img {-webkit-filter: brightness(100);}
  }

  &.btn-emphasis:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-emphasis-bg-color,10%)), to(darken(@btn-emphasis-bg-color, 4%)));
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
  }

  &.btn-danger, .btn-destructive {
    color:      @btn-danger-text-color;
    background: @btn-danger-bg-color;
  }
}

.btn-toolbar {
  min-height:36px;
}

.btn-gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(@btn-default-bg-color), to(darken(@btn-default-bg-color, 4.5%)));
}
.btn-gradient:active {
  background: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-default-bg-color, 9%)), to(darken(@btn-default-bg-color, 13.5%)));
}

.btn-icon {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: @text-color-subtle;
  margin-right: 10px;
  outline: none !important;
  font-size: 20px;

  &:last-child {
    margin-right: 0;
  }

  &.inverse {
    color: @text-color-inverse;

    &:hover {
      color: white;
    }

    &:active {
      color: @text-color-inverse;
    }
  }

  &:hover {
    cursor: default;
    color: @text-color-link;
    box-shadow: none;
  }
  &:active {
    color: @text-color-link-active;
    box-shadow: none;
  }
}