/*create by wangzy
date:2016-03-24
desc:表单输入框样式
*/
@import url("../base.scss");
/*
外层div
*/

.wasabi-form-group {
  padding-left:0px;
  padding-right:10px;
  padding-bottom: 10px;
  position: relative;
  margin: 0px;
  display: block;
  float: left;
  white-space: nowrap;
  min-height: 45px;
}

/*
label
*/

.wasabi-form-group {
  .wasabi-form-group-label {
    padding-right: 4px;
    height: 34px;
    float: left;
    text-align: right;
    white-space: normal;
    display: table;
    label{
      vertical-align:middle;
      display: table-cell;

    }
    .help{
      margin-left: 2px;
      color: #666666;
    }
    .help:hover{
      color: #de2c3b;
    }
    .heip-text {
      display: block;
      position: absolute;
      top: 36px;
      left: 28%;
      padding: 0px;
      text-align: left;
      background: #de2c3b;
      color: #ffffff;
      z-index: 2;
      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
      border-radius: 1px;

    }
  }
}
.wasabi-form-group .wasabi-form-group-label.required  label:before {
  content: "*";
  color: #de2c3b;
  vertical-align: middle;
  font-size: 14px;


}
/*
 输入框主体
 */
.wasabi-form-group {
  .wasabi-form-group-body {

    float: left;
    position: relative;
  }
}
/*
普通input
*/
.wasabi-form-control {
  display: block;
  width:100%;
  padding: 6px;
  font-size: 12px;
  font-weight: normal!important;
  line-height: 34px;
  height: 34px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d7dde2;
  -webkit-transition: border-color ease-in-out .6s, box-shadow ease-in-out .6s;
  transition: border-color ease-in-out .6s, box-shadow ease-in-out .6s;
  outline: none;
  overflow: hidden;
  resize: none;
}
.wasabi-form-control[disabled], .wasabi-form-control[readonly]{
  background-color: #eee;
  opacity: 1;
  cursor: not-allowed;
}
.wasabi-form-control:focus {
  border-color: #25d7b9;

}

.combobox
{
  .wasabi-form-control
  {
    padding-right: 36px;
  }
}
.nice-select{
  .wasabi-form-control
  {
    padding-right: 36px;
  }
}
/*
input验证失败
*/
.wasabi-has-error .wasabi-form-control{
  border-color: #de2c3b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

}
/*
input验证失败
*/
.wasabi-has-error .checkbox-label{
  border-color: #de2c3b!important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

}

.wasabi-has-error .wasabi-radio-btn{
  border-color: #de2c3b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

}
/*
input验证通过,暂时没用
*/
.wasabi-has-success .wasabi-form-control {
  border-color: #3c763d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.wasabi-has-success input[type="checkbox"]{
  border-color: #3c763d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

}

.wasabi-has-success input[type="radio"]{
  border-color: #3c763d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

}


/*
只读
*/
.wasabi-form-control input[readonly], .wasabi-form-control textarea[readonly] {
  background-color: #eee;
  color: #f0f2f3;
  border-color: transparent;
  cursor: not-allowed;
}
/*
 错误提示信息
*/
.wasabi-help-block
{
  position: absolute;
  width: 120px;
  height: 20px;
  background: #de2c3b;
  color: #ffffff;
  border-radius: 2px;
  white-space: nowrap;
  bottom: 17px;
  left: 105%;
  overflow: visible;
  z-index: 2;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  top: 5px;

}
.wasabi-help-block .text{
  position: absolute;
  background: #de2c3b;
  width: 100%;
  white-space: pre-wrap;
}
.wasabi-help-block:before {
  content: "1111111";
  color: transparent;
  border: 5px solid transparent;
  border-right: 8px solid #de2c3b;
  width: 0px;
  height: 0px;
  position: absolute;
  top: 5px;
  left: -10px;

}
/*
靠近右侧的
*/
.wasabi-help-block.right {
  position: absolute;
  width: 120px;
  height: 20px;
  background: #de2c3b;
  color: #ffffff;
  border-radius: 2px;
  top: -28px;
  left: 85px;
  overflow: visible;
  z-index: 2;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}
.wasabi-help-block.right .text{
  bbottom: 0px;
}
.wasabi-help-block.right:before {
  content: "1111111";
  color: transparent;
  border: 5px solid transparent;
  border-top: 8px solid #de2c3b;
  width: 0px;
  height: 0px;
  position: absolute;
  top:19px;
  left: 0px;

}

/*
后台验证
 */
.wasabi-form-group-body .valid,.wasabi-form-group-body .invalid,.wasabi-form-group-body .validing{
  font-family: 'icomoon' !important;
  font-style: normal;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 10px;
  top: 8px;
  cursor: pointer;
}

/*
验证成功
*/
.wasabi-form-group-body .valid:before{
  font-size:16px;
  content: "\e95d";
  color: #25d7b9;
}
/*
验证失败
 */

.wasabi-form-group-body .invalid:before{
  font-size:16px;
  content: "\e918";
  color: #de2c3b;

}

.wasabi-form-group-body .validing {
  top: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 1px solid #3c92a7;
  border-bottom-color: transparent;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
  animation: rotate 0.75s 0s linear infinite;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1); }

  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6); }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1); } }



.wasabi-form-group-body .timeer
{
  background-color: transparent;
  box-shadow: inset 0px 0px 0px 2px #3c92a7;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: relative;
}
.timeer:after, .timeer:before{
  position: absolute;
  content:"";
  background-color: #3c92a7;
}
.timeer:after{
  width: 6px;
  height: 2px;
  top: 6px;
  left: 6px;
  background-color: #3c92a7;
  -webkit-transform-origin: 1px 1px;
  -moz-transform-origin: 1px 1px;
  transform-origin: 1px 1px;
  -webkit-animation: minhand 2s linear infinite;
  -moz-animation: minhand 2s linear infinite;
  animation: minhand 2s linear infinite;
}
.timeer:before{
  width: 5px;
  height: 2px;
  top: 6px;
  left: 6px;
  background-color: #3c92a7;
  -webkit-transform-origin: 1px 1px;
  -moz-transform-origin: 1px 1px;
  transform-origin: 1px 1px;
  -webkit-animation: hrhand 8s linear infinite;
  -moz-animation: hrhand 8s linear infinite;
  animation: hrhand 8s linear infinite;
}
@-webkit-keyframes minhand{
  0%{-webkit-transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
  0%{-moz-transform:rotate(0deg)}
  100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

@-webkit-keyframes hrhand{
  0%{-webkit-transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
  0%{-moz-transform:rotate(0deg)}
  100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}






/*
提交表单,注意此处不方便媒体查询，因为弹出层，与滑动面板都有嵌套
*/
/*
一列
(min-width: 300px ) and (max-width:610px)
*/

.wasabi-form.oneline,.wasabi-searchbar.oneline {
  .wasabi-form-group.default {
    width: 100%;
  }
  .wasabi-form-group.default .wasabi-form-group-label {
    width:24%;
  }
  .wasabi-form-group.default .wasabi-form-group-body {
    width:76%;
  }


  .wasabi-form-group.large {
    width:100%;
  }
  .wasabi-form-group.large .wasabi-form-group-label {
    width:24%;
  }
  .wasabi-form-group.large .wasabi-form-group-body {
    width:76%;
  }

  .wasabi-form-group.onlyline {
    width:100%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-label {
    width:24%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-body {
    width:76%;
  }


}

/*
两列
(min-width: 611px) and (max-width:909px)
*/

.wasabi-form.twoline ,.wasabi-searchbar.twoline{
  .wasabi-form-group.default {
    width: 50%;
  }
  .wasabi-form-group.default .wasabi-form-group-label {
    width:23%;
  }
  .wasabi-form-group.default .wasabi-form-group-body {
    width: 77%;
  }


  .wasabi-form-group.large {
    width:100%;
  }
  .wasabi-form-group.large .wasabi-form-group-label {
    width:11.4%;
  }
  .wasabi-form-group.large .wasabi-form-group-body {
    width: 88.6%;
  }

  .wasabi-form-group.two {
    width:100%;
  }
  .wasabi-form-group.two .wasabi-form-group-label {
    width:11.4%;
  }
  .wasabi-form-group.two .wasabi-form-group-body {
    width: 88.6%;
  }

  .wasabi-form-group.onlyline {
    width:100%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-label {
    width:11.4%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-body {
    width: 88.6%;
  }

}

/*
三列
(min-width: 910px) and  (max-width:1229px)
*/

.wasabi-form.threeline,.wasabi-searchbar.threeline {
  .wasabi-form-group.default {
    width: 33.333333333%;
  }
  .wasabi-form-group.default .wasabi-form-group-label {
    width:28%;
  }
  .wasabi-form-group.default .wasabi-form-group-body {
    width: 71%;
  }
  .wasabi-form-group.large {
    width: 66.626%;
  }
  .wasabi-form-group.large .wasabi-form-group-label {
    width:13.8%;
  }
  .wasabi-form-group.large .wasabi-form-group-body {
    width: 85.9%;
  }

  .wasabi-form-group.two {
    width: 66.626%;
  }
  .wasabi-form-group.two .wasabi-form-group-label {
    width:13.8%;
  }
  .wasabi-form-group.two .wasabi-form-group-body {
    width: 85.9%;
  }

  .wasabi-form-group.onlyline {
    width:100%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-label {
    width:8%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-body {
    width: 92%;
  }
}

/*
四列
(min-width: 1230px)
*/
.wasabi-form.fourline,.wasabi-searchbar.fourline{
  .wasabi-form-group.default {
    width: 25%;
  }
  .wasabi-form-group.default .wasabi-form-group-label {
    width:24%;
  }
  .wasabi-form-group.default .wasabi-form-group-body {
    width: 76%;
  }

  .wasabi-form-group.large {
    width: 50%;
  }
  .wasabi-form-group.large .wasabi-form-group-label {
    width:11.8%;
  }
  .wasabi-form-group.large .wasabi-form-group-body {
    width: 88.2%;
  }

  .wasabi-form-group.two {
    width: 50%;
  }
  .wasabi-form-group.two .wasabi-form-group-label {
    width:11.8%;
  }
  .wasabi-form-group.two .wasabi-form-group-body {
    width: 88.2%;
  }

  .wasabi-form-group.onlyline {
    width: 100%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-label {
    width:6%;
  }
  .wasabi-form-group.onlyline .wasabi-form-group-body {
    width: 94%;
  }

}