zui/src/less/components/input-control.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: input-control.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2016-2017 cnezsoft.com; Licensed MIT
/// ========================================================================

// Basic style

.input-control-icon-left,
.input-control-icon-right,
.input-control-label-left,
.input-control-label-right {
  position: absolute;
  top: 1px;
  height: @input-control-icon-size;
  line-height: @input-control-icon-size;
  opacity: @input-control-normal-opacity;
  z-index: 5;
}
.input-control-icon-left,
.input-control-icon-right {
  width: @input-control-icon-size;
  text-align: center;
}
.input-control-label-left,
.input-control-icon-left {left: 1px;}
.input-control-label-right,
.input-control-icon-right {right: 1px;}

.input-control-label-left,
.input-control-label-right {
  width: @input-control-label-width;
  padding: 0 @padding-small-horizontal;
  overflow: hidden;
  text-overflow: ellipsis;

  .has-label-left-sm > & {
    width: @input-control-label-width-sm;
  }

  .has-label-left-lg > & {
    width: @input-control-label-width-lg;
  }
}

.input-control {
  position: relative;

  &.has-icon-left > .form-control {
    padding-left: @input-control-icon-size;
  }
  &.has-icon-right > .form-control {
    padding-right: @input-control-icon-size;
  }

  &.has-label-left > .form-control {
    padding-left: @input-control-label-width;
  }
  &.has-label-right > .form-control {
    padding-right: @input-control-label-width;
  }

  &.has-label-left-sm > .form-control {
    padding-left: @input-control-label-width-sm;
  }
  &.has-label-right-sm > .form-control {
    padding-right: @input-control-label-width-sm;
  }

  &.has-label-left-lg > .form-control {
    padding-left: @input-control-label-width-lg;
  }
  &.has-label-right-lg > .form-control {
    padding-right: @input-control-label-width-lg;
  }

  > a:hover {
    background-color: @color-gray-pale;
    opacity: 1;
  }
}

.form-control:focus {
  + [class^="input-control-"],
  + [class^="input-control-"] + [class^="input-control-"] {
    opacity: 1;
  }

  + .input-control-label-left {
    color: @color-secondary;
  }
}


// Search box

.empty {
  + .search-clear-btn,
  + .search-icon + .search-clear-btn {
    opacity: 0 !important;
  }
}
input:placeholder-shown {
  + .search-clear-btn,
  + .search-icon + .search-clear-btn {
    opacity: 0 !important;
  }
}

.search-box-circle {
  .input-control-icon-left,
  .input-control-icon-right,
  > .form-control {
    border-radius: 16px;
  }

  + .input-group-btn > .btn {
    border-radius: 0 16px 16px 0;
  }
}