index.module.less 2.28 KB
@prefix-cls: ~'qx-data-flow__header';

.qx-data-flow__container {
  height: 100%;

  :global {
    .qx-flow-wrap {
      height: calc(100% - 57px);

      &.is-full {
        height: 100%;
      }
    }
  }
}

.@{prefix-cls} {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  width: 100%;
  height: 57px;
  background-color: #fff;
  border-bottom: 1px solid @N4;
  box-sizing: border-box;
}

.@{prefix-cls}__left {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  color: @N9;
  cursor: pointer;

  :global {
    .anticon {
      font-size: 16px;
    }
  }
}

.@{prefix-cls}__left-return {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transform: rotate(90deg);
  color: @N9;
  cursor: pointer;
}

.@{prefix-cls}__left-title {
  margin: 0 8px;
  font-size: 16px;
  color: @N9;
  font-weight: 600;
}

.@{prefix-cls}__left-custom {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
}

.@{prefix-cls}__left-custom__opt {
  margin-right: 16px;

  :global {
    .ant-btn-icon-only {
      width: 24px;
      height: 24px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .anticon {
      font-size: 16px;
      color: @N7;
      cursor: pointer;

      &:hover {
        color: @B8;
      }
    }
  }
}

.@{prefix-cls}__right {
  :global {
    .ant-btn-text {
      &:focus,
      &:hover {
        background-color: transparent;
      }
    }

    .ant-btn-default {
      color: @N8;
      border-color: @N4;

      &:focus,
      &:hover {
        color: @N8;
      }

      &:hover {
        color: @B8;
        border-color: @B8;
      }
    }

    .ant-btn-primary {
      &:focus,
      &:hover {
        background-color: transparent;
      }

      &:hover {
        background-color: @B7;
      }
    }
  }
}

.qx-data-flow__modal-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  :global {
    .anticon {
      font-size: 12px !important;
      color: @N7;
    }
  }

  &:hover {
    :global {
      .anticon {
        color: @N9;
      }
    }
  }
}