responsivewebframework/src/less/button.less

Jalasoft Foundation Front End Framework ========================================

// Button
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  &.button,
  &.button-block {
    background: @button-bg;
    height: @button-height;
    padding: 0 20px;
    opacity: 1;
    border: none;
    font-weight: bold;
    text-decoration: none;
    overflow: hidden;
    border-radius: @button-border-radius;
    min-width: @button-min-width;
    text-transform: @button-text-transform;
    text-align: center;
    .font-format(@font-family-base-component, @button-font-size, @button-line-height, @button-letter-space, @button-font-color);

    &:disabled {
      opacity: 0.5;

      &:hover {
        cursor: default;
        -webkit-webkit-box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.10);
        -moz-webkit-box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.10);
        -ms-webkit-box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.10);
        -o-webkit-box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.10);
        webkit-box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.10);
        box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.10);
      }
    }

    &:hover {
      cursor: pointer;
      -webkit-box-shadow: inset 0px 0px 300px 200px rgba(255, 255, 255, 0.10);
      -moz-box-shadow: inset 0px 0px 300px 200px rgba(255, 255, 255, 0.10);
      box-shadow: inset 0px 0px 300px 200px rgba(255, 255, 255, 0.10);
    }

    &:active {
      -webkit-box-shadow: inset 0px 0px 300px 200px rgba(0, 0, 0, 0.22);
      -moz-box-shadow: inset 0px 0px 300px 200px rgba(0, 0, 0, 0.22);
      box-shadow: inset 0px 0px 300px 200px rgba(0, 0, 0, 0.22);
    }

    &:focus {
      outline: none;
    }
  }
}

.button-block {
  display: block;
  width: 100%;
}
// Vertically space out multiple block buttons
.button-block + .button-block {
  margin-top: 5px;
}