barecss-power/less/_button.less

A classless CSS framework (power) http://barecss.com

@import (reference) "config";


// config
@btn-font: @size-s;
@btn-text: @def-text;
@btn-weight: bold;
@btn-back: darken(@def-back, 10%);
@btn-line: 1em;
@btn-marginh: 0.6em;
@btn-marginb: @btn-marginh;
@btn-padh: 1.2em;
@btn-padv: 1em;
@btn-border: 0.1em;
@btn-borderc: @btn-back;
@btn-radius: @radius-s;
@btn-shadow: 0 0 0 rgba(0,0,0,0);
@btn-htext: initial;
@btn-hback: @btn-back;
@btn-hshadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

@bpri-borderc: lighten(@pri-back, 10%);
@bpri-back: @pri-back;
@bpri-text: @pri-text;
@bpri-htext: initial;
@bpri-hback: lighten(@bpri-back, 10%);

@bdis-back: darken(@def-back, 20%);
@bdis-borderc: @bdis-back;
@bdis-text: lighten(@def-text, 50%);

@brnd-radius: @radius-xl;


// normal
button, input[type=button], input[type=submit], [btn] {
  cursor: pointer;
  -webkit-appearance: none;
  display: inline-block;
  margin: 0 @btn-marginh @btn-marginb 0;
  box-shadow: @btn-shadow;
  border: @btn-border solid @btn-borderc;
  border-radius: @btn-radius;
  padding: @btn-padv @btn-padh;
  background: @btn-back;
  line-height: @btn-line;
  font-size: @btn-font;
  font-weight: @btn-weight;
  color: @btn-text;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transform: scale3d(1.2,1.2,1.2);
    opacity: 0;
    background: @pri-back;
  }
  
  &:not(:disabled):hover {
    box-shadow: @btn-hshadow;
    background: @btn-hback;
    color: @btn-htext;
    
    &:active {
      box-shadow: none;
      transition: none;
    }
  }
  
  // primary
  &[primary] {
    border-color: @bpri-borderc;
    background: @bpri-back;
    color: @bpri-text;
    
    &:not(:disabled):hover {
      background: @bpri-hback;
      color: @bpri-htext;
    }
  }

  // disabled
  &:disabled, &.disabled {
    cursor: default;
    border-color: @bdis-borderc;
    background: @bdis-back;
    color: @bdis-text;
  }
  
  // round
  &[round] { border-radius: @brnd-radius; }
}