All Downloads are FREE. Search and download functionalities are using the official Maven repository.

public.components.flat-ui.less.modules.input-icons.less Maven / Gradle / Ivy

There is a newer version: 0.2.5
Show newest version
//
// Input Icons
// --------------------------------------------------

.form-group {
  position: relative;
}

.form-control {
  & + .input-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    line-height: 37px;
    vertical-align: middle;
    font-size: @input-icon-font-size;
    color: desaturate(lighten(@brand-primary, 45%), 15%);
    background-color: @inverse;
    padding: 0 12px 0 0;
    border-radius: @input-border-radius;
  }
}

// Icons sizing
// ---------------------------

// Huge
.input-hg + .input-icon {
  line-height: 49px;
  padding: 0 16px 0 0;
}

//Large
.input-lg + .input-icon {
  line-height: 41px;
  padding: 0 15px 0 0;
}

// Small
.input-sm + .input-icon {
  font-size: @font-size-base;
  line-height: 30px;
  padding: 0 10px 0 0;
}


// Icons states
// ---------------------------

.has-success {
  .input-icon {
    color: @brand-success;
  }
}
.has-warning {
  .input-icon {
    color: @brand-warning;
  }  
}
.has-error {
  .input-icon {
    color: @brand-danger;
  }  
}
.form-control[disabled] + .input-icon,
.form-control[readonly] + .input-icon,
fieldset[disabled] .form-control + .input-icon,
.form-control.disabled + .input-icon {
  color: mix(@gray, white, 40%);
  background-color: transparent;
  .opacity(.7);
}




© 2015 - 2024 Weber Informatics LLC | Privacy Policy