maestrano/mno-enterprise

View on GitHub
frontend/app/assets/stylesheets/mno_enterprise/custom/form.less

Summary

Maintainability
Test Coverage
input.fluroblue[type=radio] {
  width   : 18px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

input.fluroblue[type=radio] + label{
  display      : inline-block;
  margin-left  : -12px;
  padding-left : 25px;
  background   : image-url('icons/radio-fluroblue.png') no-repeat 0 -18px;
  line-height  : 18px;
}

input.fluroblue[type=radio]:checked + label{
  background-position : 0 1px;
}

form label {
  color: @input-label-color;
}

.input-group-addon.select select {
  background-color: @input-bg;
}


select {
    text-indent: 1px;
    text-overflow: '';
}

// Remove dropdown arrow (Chrome, Firefox and IE)
select.unstyled {
    -webkit-appearance: none;
    -moz-appearance: none;
}

select::-ms-expand {
    display: none;
}

//----------------------------------------
// Styling for phone: select + input
//----------------------------------------
form .phone {
  select.form-control {
    width:30%;
    .border-right-radius(0px);
  }

  input.form-control[type='text'] {
    margin-left:23%;
    margin-top:-34px;
    width:77%;
    .border-left-radius(0px);
  }
}

form select.form-control  {
  height:44px;
  -webkit-appearance: none;
}

form .select.fa {
  margin: -28px 7% 0px 0px;
  float: right;
}

//----------------------------------------
// Styling for password checker
//----------------------------------------
form li.checked {
  color: lighten(@decorator-inverse-color,30%);
}

form li.unchecked {
  color: lighten(@text-strong-color,70%);
}

//----------------------------------------
// Style for forms on inverse backgrounds
//----------------------------------------
form.inverse {
  select {
    background-color: @bg-inverse-color;
    .font(16px, 300, @decorator-inverse-color);
    border:solid 1px #111c21;
    
    .border-radius(5px);
    height:44px;
    -webkit-appearance: none;
    padding-left:15px;
    width:100%;
    
    // Placeholder
    .placeholder(@decorator-inverse-color);
  }

  .select.fa {
    .font(16px,300,@decorator-inverse-color);
    margin: -28px 7% 0px 0px;
    float: right;
  }
  
  .form-control {
    // Placeholder
    .placeholder(@decorator-inverse-color);
  }
}

//------------------------------------
// Dark forms styles
//------------------------------------

form.dark {
  input[type='text'], input[type='email'], textarea {
    .border-radius(5px);
    .font(16px, 300, @bg-main-color);
    background-color: @bg-inverse-color;
    border: solid 1px @bg-inverse-color;
    line-height: 25px;
    margin-bottom: 0px;
    width: 100%;
    min-height: 42px;
    padding: 5px 5px 5px 15px;
  }

  *::-webkit-input-placeholder {
      color: @bg-main-color;
  }
  *:-moz-placeholder {
      /* FF 4-18 */
      color: @bg-main-color;
  }
  *::-moz-placeholder {
      /* FF 19+ */
      color: @bg-main-color;
  }
  *:-ms-input-placeholder {
      /* IE 10+ */
      color: @bg-main-color;
  }

  label {
    color: @bg-main-color;
  }
}

.dark {
  .bootstrap-select {
    select {
      .font(16px, 300, @bg-main-color);
      background-color: @bg-inverse-color;
    }

    .dropdown-toggle {
      height: 42px;
    }

    .dropdown-menu {
      .font(16px, 300, @bg-main-color);
      background-color: @bg-inverse-color;
    }
    .dropdown-menu > li > a {
      .font(16px, 300, @bg-main-color);
    }

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
      .font(16px, 300, @decorator-inverse-color);
      background-color: @bg-inverse-color;
    }
  }
}

// Put a dropdown inside an input-group-addon
.input-group-addon.select {
  padding:0px;
  select {
    height:100%;
    border:0px;
  }
}

//------------------------------------
// Invalid inputs (AngularJS)
//------------------------------------
input.ng-dirty.ng-invalid {
  border-color: @brand-danger;
}