mitjajez/SONCE

@import './utils.less';

// Standard text input
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  // Sizing
//  .font-s2;
//  .type-regular;

  // Style
  ::placeholder {
    color: @color-complementary;
  }
  color: @color-full;
  &[disabled] { opacity: .5; }
}

// Remove chrome/saf autofill yellow background
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px @color-empty inset;
}

// Custom checkbox
.checkbox {
  display: inline-block;
  height: 3rem;
  position: relative;
  vertical-align: middle;
  width: 44px;

  input[type="checkbox"] {
    font-size: 1em;
    visibility: hidden;

    & + span:before {
      .position(absolute, 50%, auto, auto, 50%, .85em, .85em);
      transform: translate3d(-50%, -50%, 0);
      background: transparent;
      box-shadow: #abdfe3 0 0 0 1px inset;
      content: '';
      display: block;
    }

    &:checked + span:before {
      box-shadow: none;
      color: @color-medium-rare;

      // Icon family from icon.lessimport
      font-family: 'todos';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        // Better Font Rendering
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        // Checkmark icon
      content: "\e612";
    }
  }
}

// Input with an icon
.input-symbol {
  display: inline-block;
  position: relative;

  &.error [class^="icon-"],
  &.error [class*=" icon-"] {
    color: @color-negative;
  }

  // Position & padding
  [class^="icon-"],
  [class*=" icon-"] {
    left: 1em;
  }

  input { padding-left: 3em; }

  // Styling
  input {
    width: 100%;

    &:focus {
      & + [class^="icon-"],
      & + [class*=" icon-"] {
        color: @color-primary;
      }
    }
  }

  [class^="icon-"],
  [class*=" icon-"] {
    transition: all 300ms ease-in;
    transform: translate3d(0,-50%,0);
    background: transparent;
    color: @color-medium;
    font-size: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    width: 1em;
  }
}