@import 'variable';

.v-form-design-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  & > .v-form-design-header {
    height: @header-height;
    line-height: @header-height;
    background: @primary-color;
    text-align: center;
    font-size: 20px;
    color: #fff;
  }
  & > .content {
    margin-top: 5px;
    display: flex;
    height: 100%;
    .left,
    .right {
      width: @left-right-width;
      height: 100%;
      box-shadow: 0 0 1px 1px #ccc;
      & > div {
        height: 100%;
      }
      .ant-tabs {
        height: 100%;
        .ant-tabs-nav .ant-tabs-tab {
          margin: 0;
        }
        .ant-tabs-content {
          height: 100%;

          .ant-tabs-tabpane {
            height: calc(100% - 100px);
            overflow: auto;
          }
        }
      }
    }
    & > .right {
      width: 280px;
      .properties-content {
        height: 100%;
        overflow: hidden;
        background: #fff;
        .properties-body {
          overflow: auto;
          height: 100%;
          padding: 8px 16px;
          .hint-box {
            margin-top: 200px;
          }
          .ant-form-item {
            width: 100%;
            margin-bottom: 0;
            padding: 6px 0;
            border-bottom: 1px solid @border-color;
            .ant-form-item-label {
              line-height: 2;
              vertical-align: text-top;
            }
          }
        }
      }
    }
    .left {
      .ant-collapse {
        border: 0;
        .ant-collapse-header {
          padding: 7px 0 7px 40px;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
      }

      ul {
        padding: 5px;
        list-style: none;
        display: flex;
        margin-bottom: 0;
        flex-wrap: wrap;
        // background: #efefef;

        li {
          padding: 8px 12px;
          transition: all 0.3s;
          width: calc(50% - 6px);
          margin: 2.7px;
          height: 36px;
          line-height: 20px;
          cursor: move;
          border: 1px solid @border-color;
          border-radius: 3px;
          &:hover {
            color: @primary-color;
            border: 1px solid @primary-color;
            position: relative;
            z-index: 1;
            box-shadow: 0 2px 6px @primary-color;
          }
        }
      }
    }
    .node-panel {
      box-shadow: 0 0 1px 1px #ccc;
      flex: 1;
      margin: 0 8px;
      overflow: hidden;

      .draggable-box {
        height: 100%;
        overflow: auto;

        .list-main {
          overflow: hidden;
          min-height: 100%;
          padding: 5px;
          position: relative;
          background: #fafafa;
          // border    : 1px #ccc dashed;

          .moving {
            // 拖放移动中
            // outline-width: 0;
            min-height: 35px;
            box-sizing: border-box;
            overflow: hidden;
            padding: 0 !important;
            // margin       : 3px 0;
            position: relative;

            &::before {
              content: '';
              height: 5px;
              width: 100%;
              background: @primary-color;
              position: absolute;
              top: 0;
              right: 0;
            }
          }

          .drag-move-box {
            position: relative;
            box-sizing: border-box;
            padding: 8px;
            overflow: hidden;
            transition: all 0.3s;
            min-height: 36px;

            &:hover {
              background: @primary-hover-bg-color;
            }

            // 选择时 start
            &::before {
              content: '';
              height: 5px;
              width: 100%;
              background: @primary-color;
              position: absolute;
              top: 0;
              right: -100%;
              transition: all 0.3s;
            }

            &.active {
              &::before {
                right: 0;
              }

              background: @primary-hover-bg-color;
              outline-offset: 0;
            }

            // 选择时 end
            .form-item-box {
              position: relative;
              box-sizing: border-box;
              word-wrap: break-word;

              &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 888;
              }

              .ant-form-item {
                // 修改ant form-item的margin为padding
                margin: 0;
                padding-bottom: 6px;
              }
            }

            .show-key-box {
              // 显示key
              position: absolute;
              bottom: 2px;
              right: 5px;
              font-size: 14px;
              z-index: 999;
              color: @primary-color;
            }

            .copy,
            .delete {
              position: absolute;
              top: 0;
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              color: #fff;
              z-index: 989;
              transition: all 0.3s;

              &.unactivated {
                opacity: 0 !important;
                pointer-events: none;
              }

              &.active {
                opacity: 1 !important;
              }
            }

            .copy {
              border-radius: 0 0 0 8px;
              right: 30px;
              background: @primary-color;
            }

            .delete {
              right: 0;
              background: @primary-color;
            }
          }

          .grid-box {
            position: relative;
            box-sizing: border-box;
            padding: 5px;
            background: @layout-background-color;
            width: 100%;
            transition: all 0.3s;
            overflow: hidden;
            .form-item-box {
              position: relative;
              box-sizing: border-box;
              .ant-form-item {
                // 修改ant form-item的margin为padding
                margin: 0;
                padding-bottom: 15px;
              }
            }

            .grid-row {
              background: @layout-background-color;
              .grid-col {
                .draggable-box {
                  min-height: 60px;
                  min-width: 50px;
                  border: 1px #ccc dashed;
                  background: #fff;

                  .list-main {
                    min-height: 83px;
                    position: relative;
                    border: 1px #ccc dashed;
                  }
                }
              }
            }

            // 选择时 start
            &::before {
              content: '';
              height: 5px;
              width: 100%;
              background: transparent;
              position: absolute;
              top: 0;
              right: -100%;
              transition: all 0.3s;
            }

            &.active {
              &::before {
                background: @layout-color;
                right: 0;
              }

              background: @layout-hover-bg-color;
              outline-offset: 0;
            }
            // 选择时 end
            > .copy-delete-box {
              > .copy,
              > .delete {
                position: absolute;
                top: 0;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;
                z-index: 989;
                transition: all 0.3s;

                &.unactivated {
                  opacity: 0 !important;
                  pointer-events: none;
                }

                &.active {
                  opacity: 1 !important;
                }
              }
              > .copy {
                border-radius: 0 0 0 8px;
                right: 30px;
                background: @layout-color;
              }

              > .delete {
                right: 0;
                background: @layout-color;
              }
            }
          }
        }
      }
    }
  }

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
    scrollbar-arrow-color: red;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    scrollbar-arrow-color: red;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}

// code盒子样式
.v-json-box {
  height: 570px;
  overflow: auto;

  .vue-codemirror-wrap {
    height: 100%;

    .CodeMirror-wrap {
      height: 100%;
      background: #f6f6f6;

      .CodeMirror-scroll {
        height: 100%;
        width: 100%;
      }

      pre.CodeMirror-line,
      .CodeMirror-linenumber {
        min-height: 21px;
        line-height: 21px;
      }
    }
  }
}

// code-modal盒子样式
.v-code-modal {
  .ant-modal-body {
    padding: 12px;
  }
}

.v-form-container {

  // 内联布局样式
  .ant-form-inline {
    .list-main {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;

      .layout-width {
        width: 100%;
      }
    }

    .ant-form-item-control-wrapper {
      min-width: 175px !important;
    }
  }
}