barecss-power/less/_input.less

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

@import (reference) "config";


@lab-margint: 1em;
@lab-marginr: 1em;
@lab-font: 1em;
@lab-weight: bold;
@lab-transform: uppercase;

@inp-marginb: 1.5em;
@inp-font: 1em;
@inp-color: inherit;
@inp-borderc: darken(@def-back, 20%);
@inp-borderb: 0.2em;
@inp-padv: 1em;
@inp-padh: 0.5em;
@inp-back: transparent;
@inp-weight: inherit;
@inp-hborderc: @sec-back;
@inp-hback: initial;
@inp-htext: @sec-text;

@tarea-height: 4.8em;
@tarea-borderc: darken(@def-back, 20%);
@tarea-borderr: 0.1em;
@tarea-radius: 1.5 * @radius-s;
@tarea-padr: 1.2em;

@sel-height: 3em;
@sel-borderc: @grey-light;
@sel-border: 0.1em;
@sel-radius: @radius-s;
@sel-back: @def-back;
@sel-arrow: 1.2em;
@sel-font: inherit;
@sel-weight: normal;
@sel-indent: 0.3em;
@sel-htext: initial;
@sel-hback: initial;
@sel-hborderc: @sec-back;
@sel-margint: 0.3em;
@sel-marginb: 1.2em;
@sel-padv: 0.3em;
@sel-padr: 1.8em;
@sel-padl: 0.6em;

@cho-width: 1.5em;
@cho-height: 1.5em;
@cho-borderc: @grey-dark;
@cho-border: 0.1em;
@cho-back: @def-back;

@rad-font: inherit;
@rad-weight: 200;
@rad-hborderc: @pri-back;
@rad-hback: @pri-back;
@rad-border: 0.1em;

@cb-font: inherit;
@cb-weight: 200;
@cb-radius: @radius-s;
@cb-hborderc: @pri-back;
@cb-hback: @pri-back;


// labels
label {
  display: inline-block;
  width: 100%;
  margin-top: @lab-margint;
  margin-right: @lab-marginr;
  font-size: @lab-font;
  font-weight: @lab-weight;
  text-transform: @lab-transform;
  
  &:first-child { margin-top: 0 }
}

.mx-input() {
  display: inline-block;
  width: 100%;
  margin-bottom: @inp-marginb;
  border: none;
  border-radius: 0;
  border-bottom: @inp-borderb solid @inp-borderc;
  padding: @inp-padv @inp-padh;
  background: @inp-back;
  font-size: @inp-font;
  font-weight: @inp-weight;
  color: @inp-color;
  
  &:focus, &:hover {
    outline: 0;
    border-color: @inp-hborderc;
    background: @inp-hback;
    color: @inp-htext;
  }
}

// text fields
input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]) {
  .mx-input();
}

textarea {
  .mx-input();
  min-height: @tarea-height;
  border-right: @tarea-borderr solid @tarea-borderc;
  border-bottom-right-radius: @tarea-radius;
  padding-right: @tarea-padr;
}


// select
select {
  cursor: pointer;
  .apperance(none);
  display: block;
  width: 100%;
  height: @sel-height;
  border: @sel-border solid @sel-borderc;
  border-radius: @sel-radius;
  margin: @sel-margint 0 @sel-marginb;
  padding: @sel-padv @sel-padr @sel-padv @sel-padl;
  background: @sel-back data-uri('../icons/chevron-down.svg') no-repeat right @sel-padl center;
  background-size: @sel-arrow;
  font-size: @sel-font;
  font-weight: @sel-weight;
  text-indent: @sel-indent;
  
  &:focus, &:hover {
    outline: 0;
    background-color: @sel-hback;
    border-color: @sel-hborderc;
    color: @sel-htext;
  }
}


// radio and checkboxes
input {
  &[type=radio], &[type=checkbox] {
    & {
      cursor: pointer;
      width: @cho-width;
      height: @cho-height;
      z-index: 2;
      opacity: 0;
      margin-right: -@cho-width;
      vertical-align: middle;
      
      // note that the label must be placed after the radio or checkbox tag
      + label {
        width: auto;
        text-transform: none;
        
        &:before {
          content: "";
          display: inline-block;
          width: @cho-width;
          height: @cho-height;
          margin-right: @cho-width / 2;
          border: @cho-border solid @cho-borderc;
          background: @cho-back;
          vertical-align: middle;
        }
        
        &:after {
          content: "";
          pointer-events: none;
          position: absolute;
          top: 4px;
          left: 2px;
          width: @cho-width - 0.1;
          height: @cho-width - 0.1;
          transform: scale(0);
          visibility: hidden;
          opacity: 0;
        }
      }
    }
  }
  
  
  // radio
  // eg: <input type="radio" name="radio" id="radio-1"> <label for="radio-1">Select me</label>
  &[type=radio] {
    + label {
      font-size: @rad-font;
      font-weight: @rad-weight;
      
      &:before { border-radius: 100% }
    }
    
    &:checked + label {
      &:before {
        border-color: @rad-hborderc;
        background: @rad-hback;
      }
      
      &:after {
        top: 0.3em;
        transform: scale(1);
        visibility: visible;
        opacity: 1;
        border: @rad-border solid @rad-hborderc;
        border-radius: 100%;
        background: @rad-hback;
      }
    }
  }
  
  
  // checkbox
  // eg: <input type="checkbox" id="checkbox-1"> <label for="checkbox-1">Check me</label>
  &[type=checkbox] {
    + label {
      font-size: @cb-font;
      font-weight: @cb-weight;
  
      &:before { border-radius: @cb-radius; }
      
      &:after {
        border-radius: 100%;
        background: data-uri('../icons/done.svg') no-repeat center center;
        background-size: 100%;
      }
    }
    
    &:checked {
      + label {
        &:before {
          border-color: @cb-hborderc;
          background: @cb-hback;
        }
        
        &:after {
          top: 0.3em;
          left: 2px;
          transform: scale(1);
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
}