A Pen by Arlekino.

A-Pen-by-Arlekino.markdown

A Pen by Arlekino

A Pen by Arlekino on CodePen.

License.

index.slim

a.btn href="#" Click me
button.btn.primary Primary
button.btn.success Success
button.btn.warning Warning
input type="text" placeholder="Type your text"

style.less

body {
  padding: 100px;
}



@brand-default:    hsl(0,0%,20%);
@brand-primary:    hsl(230,30%,50%);
@brand-success:    hsl(70,40%,40%);
@brand-warning:    hsl(40,70%,50%);


.set-button-color( @color ) {
    background-color: fade(@color, 0%);
    border: 1px solid fade(@color, 75%);
    color: fade(@color, 75%);
    box-shadow: inset 0 0 0 30px fade(@color, 0%);
  
    &:hover {
      border-color: fade(@color, 100%);
      box-shadow: inset 0 0 0 1px fade(@color, 100%);
      color: fade(@color, 100%);
    }
    &:active, &:focus {
        background-color: fade(@color, 100%);
        color: contrast(@color, rgba(0,0,0,.75), #fff, 70%); 
    }
}




.btn {
  -webkit-font-smoothing: antialiased;
  .set-button-color( @brand-default );
  text-decoration: none;
  
  line-height: 20px;
  font-size: 14px;
  font-family: Open Sans,sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  
  padding: 8px 18px;
  border-radius: 4px;  
  display: inline-block;
  margin: 0 1px;
  -webkit-transition: all .25s;
  &:focus {
      outline: 0;
  }
}

.btn.primary {
    .set-button-color( @brand-primary );
}
.btn.success {
    .set-button-color( @brand-success );
}
.btn.warning {
    .set-button-color( @brand-warning );
}


input[type=text] {
    -webkit-font-smoothing: antialiased;
    margin: 0;
    display: inline-block;
    line-height: 20px; 
    line-height: 20px;
    font-size: 13px;
    font-family: Open Sans,sans-serif;
    font-weight: 400;
    border-radius: 3px;
    padding: 8px 8px;
    outline: none;
    border: 1px solid fade(@brand-default, 50%);
    background-color: fade(@brand-default, 0%);
    color: @brand-default;
    -webkit-transition: all .25s;
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
    -webkit-appearance: none;
  
    &:focus {
       border-color: fade(@brand-default, 100%);
    }
}