/*
  hx表单行模块: 标签为label元素 和 编辑区域内容为.pad-edit的 div 元素
  hx-row 包含自身多种扩展样式 以及 其pad-edit中定义了多种元素的默认样式
  * 自身样式：
    .null     无内边距
    .center   内部组件居中
   Date: 2017-08-02
 */

@import "./../variable.scss";

$width-label: 120px;
$width-label-sm: 80px;
$width-label-md: 160px;
$width-label-bg: 200px;
.hx-row {
  width: 100%;
  padding: 0;
  margin-bottom: $pm-sm * 1.5;
  color: $color-dark;
  // 无内边距样式
  &.null {  padding: 0!important; }
  &.half { 
    font-size: 0;
    width: 50%;
    float: left;
    label, .content {
      font-size: $font-md;
    }
  }
  // 居中样式
  &.center { text-align: center; }
  // 没有label文本的情况下
  &.no-label, &.null-label {
    label { display: none; }
    .content {
      width: 100%;
      max-width: 100%;
      display: block;
    }
    .text-tips { padding-left: $pm-sm; }
  }
  &.bg-label {
    label { width: $width-label-bg; }
    .content { width: calc(100% - #{$width-label-bg + $pm-sm}); }
    .text-tips { padding-left: $width-label-bg + $pm-sm; }
  }
  &.md-label {
    label { width: $width-label-md; }
    .content { width: calc(100% - #{$width-label-md + $pm-sm}); }
    .text-tips { padding-left: $width-label-md + $pm-sm; }
  }
  &.sm-label {
    label { width: $width-label-sm; }
    .content { width: calc(100% - #{$width-label-sm + $pm-sm}); }
    .text-tips { padding-left: $width-label-sm + $pm-sm; }
  }
  // 缩小规格
  &.short {  
    .content {
      width: 200px;
    }
  }
  label, .content{
    min-height: $height-regular;
    display: inline-block;
    font-size: $font-md;
    vertical-align: top;
  }
  // 左侧表单内容文案
  label{
    line-height: $height-regular;
    width: $width-label;
    color: $color-heavy;
    font-weight: 500;
    &.title {
      font: {
        size: $font-md;
        weight: 800;
      }
    }
    .tip {
      color: $color-main;
      font-size: $font-sm;
      line-height: $height-regular;
    }
    .label-tips {
      color: $color-gray-deep;
      font-size: $font-sm;
      line-height: 1.4;
      display: block;
    }
  }

  // 地图模块
  .map {
    display: inline-block;
    height: 280px;
    @include wcalc(calc(45% - 58px));
    background-color: $color-gray-light;
    border-radius: $border-radius-md;
  }
  // 富文本模块
  div.rich-content {
    display: inline-block;
    position: relative;
    padding: 0;
    width: 100%;
    vertical-align: top;
    @include wcalc(calc(100% - 125px));
    .rich-editor  {
      height: 389px;
      border: 1px solid $color-gray;
      padding: $pm-md;
      border-radius: $border-radius-md;
      overflow-x: hidden;
      overflow-y: auto;
      p {
        margin: 0;
      }
    }

    .btn-to-edit {
      position: absolute;
      top: $pm-sm;
      right: $pm-sm;
    }
  }
  // 右侧区域
  div.content {
    display: inline-block;
    position: relative;
    padding: 0;
    vertical-align: top;
    // 缩小规格
    &.short {  width: 200px;  }
    .hx-switch {
      @include centerVertical;
    }
    // 不可编辑文本组件样式
    a.text, section.text, strong.text, span.text {
      padding: $pm-sm;
      font-size: $font-md;
      width: 100%;
      height: auto;
      min-height: $height-regular;
      line-height: $height-regular - $pm-sm * 2;
      text-align: justify;
      word-break: break-all;
      display: block;
      border-radius: $border-radius-md;
      &.border {
        border: 1px solid $color-gray;
      }
      &.disabled {
        border: 1px solid $color-gray-light;
        background-color: $color-gray-light;
      }
      &.tip {
        font: {
          size: $font-sm;
          weight: 300;
        }
        color: $color-gray-deep;
        line-height:  $font-sm;
        height:  $font-sm;
        margin-top: $pm-sm;
      }
    }
    // 提示信息
    .degree, .unit {
      position: absolute;
      right: 0;
      text-align: center;
      top: 0;
      display: inline-block;
      width: auto;
      cursor: default;
    }
    .error + .degree {
      color: $color-red;
    }
    .degree {
      color: $color-gray-deep;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: -1px;
      @include centerVertical;
      right: $pm-md;
      & + .btn-clear {
        right: $pm-lg + $pm-md;
      }
    }
    // 错误提示信息
    .tips {
      $height-tips: 26px;
      color: $color-white;
      background-color: $color-red;
      height: $height-tips;
      font-size: 12px;
      line-height: $height-tips + 1px;
      padding: 0 $pm-sm;
      border-radius: $height-navbar/2;
      top: ($height-regular - $height-tips)/2;
      visibility: hidden;
      transition: all .4s;
      @include transform(scale(.0, .0));
      &.show {
        visibility: visible;
        @include transform(scale(1.0, 1.0));
      }
    }

    img { 
      display: block;
    }
    
    input [type='file'] {
      position: absolute;
      visibility: hidden;
    }

    textarea {
      display: block;
      line-height: 24px;
      padding: 5px $pm-sm;
      height: auto;
    }

    textarea + .degree {
      top: auto;
      bottom: 0;
      height: $height-regular;
      line-height: $height-regular;
    }

    .pad-dropdown {
      position: absolute;
      top: $height-regular + $pm-sm;
      left: 0;
      width: 100%;
      padding: $pm-md;
      z-index: 123;
      display: inline-block;
      background-color: white;
      opacity: .0;
      visibility: hidden;
      box-shadow: 0 5px 20px -6px rgba(0,0,0,.3);
      transition: all .4s;
      &.show {
        visibility: visible;
        opacity: 1.0;
      }
    }

    img.img {
      height: $height-upload-button;
      margin: 0 $pm-sm/2 0 0;
      border: 1px solid $color-gray;
      border-radius: $border-radius-md;
      transition: all .4s;
    }
  }
  // 附加提示文本
  & > .text-tips {
    font-size: $font-sm;
    line-height: 2;
    display: block;
    color: #aaa;
    width: 100%;
    padding-left: $width-label + 4px;
  }
}

@media screen and (min-width: 640px) {
  .hx-row {
    .content {
      width: calc(100% - #{$width-label + 10px});
      max-width: calc(100% - #{$width-label + 10px});
    }
  }
}

@media screen and (max-width: 640px) {
  .hx-row {
    border-bottom: 1px solid $color-gray-light;
    padding: $pm-sm/2 0!important;
    margin: 0!important;
    &.oneline {
      border-bottom: none;
      & > label {
        width: 100%;
      }
      & > .content {
        width: 100%;
        max-width: 100%;
      }
    }
    label {
      width: 100px;
      position: relative;
      
      &.full {
        width: 100%;
        line-height: $pm-bg;
        margin-bottom: $pm-sm;
      }
    }
    .content {
      width: calc(100% - 108px);
      max-width: calc(100% - 108px);
      padding-left: 0;
      input, select, textarea {
        border: none!important;
        &:hover {
          border: none;
        }
      }
      input, textarea {
        padding-left: $pm-sm/2!important;
      }
      input:disabled, textarea:disabled {
        background-color: transparent;
        color: $color-gray-deep;
      }
      select {
        padding-left: 0!important;
      }
      &.for-switch {
        width: 150px !important;
      }
      .for-image {
        height: auto!important;
        display: block!important;
        .preview {
          height: auto!important;
        }
        img {
          width: 100%!important;
          height: auto!important;
        }
        &+button {
          margin-bottom: $pm-sm;
        }
      }
      button.btn-upload-image {
        height: $height-navbar * 1.5 ;
        line-height: $height-navbar * 1.5;
        width: 100%;
      }
      // 单位
      .degree {
        color: $color-gray-deep;
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        width: auto;
      }
      .tips {
        right: 0!important;
        line-height: 25px;
      }
    }
    #map-preview {
      margin-left: 0;
      margin-bottom: $pm-sm;
      width: 100%;
    }
  }
}