@oceanbase/ui 1.0.0-alpha.4 → 1.0.0-alpha.5

package/lib/Ranger/index.less

@@ -1,57 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-ranger;
-
-.@{prefix} {
-  .@{prefixCls}-space-item:nth-child(2) {
-    flex: 1;
-    width: 100%;
-
-    .@{prefixCls}-picker,
-    .@{prefixCls}-picker-range,
-    .ob-ranger-range-picker {
-      width: 100%;
-      // 去掉左侧圆角，以与下拉选择紧密组合在一起
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      input {
-        text-align: center;
-      }
-    }
-  }
-
-  .ob-ranger-date-picker {
-    .@{prefixCls}-select-selector {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      &:hover {
-        z-index: 1;
-      }
-    }
-
-    .@{prefixCls}-select-arrow {
-      z-index: 1;
-    }
-  }
-}
-
-.@{prefix}-show-range {
-  .ob-ranger-quick-picker.ob-ranger-quick-picker-select {
-    margin-right: -1px;
-
-    .@{prefixCls}-select-selector {
-      border-top-right-radius: 0 !important;
-      border-bottom-right-radius: 0 !important;
-
-      &:hover {
-        z-index: 1;
-      }
-    }
-
-    .@{prefixCls}-select-arrow {
-      z-index: 1;
-    }
-  }
-}

package/lib/SideTip/index.less

@@ -1,180 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-sidetip;
-
-.@{prefix}-container {
-  position: fixed;
-  z-index: 0;
-  font-size: 14px;
-  cursor: pointer;
-  inset-inline-end: 24px;
-  inset-block-end: 24px;
-
-  &.@{prefix}-container-dragged {
-    cursor: grab;
-  }
-
-  &.@{prefix}-container-hide {
-    transition: all 0.3s;
-  }
-
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-
-  &.@{prefix}-container-hide-not-dragged:hover {
-    inset-inline-end: 0 !important;
-  }
-
-  .@{prefix}-hide {
-    position: absolute;
-    z-index: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 20px;
-    transform: scale(0);
-    cursor: pointer;
-    opacity: 0;
-    transition: all 0.18s ease-out 0.18s;
-    inset-block-start: 0;
-    inset-inline-end: -22px;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.35);
-    }
-
-    .@{prefix}-hide-icon {
-      width: 6px;
-      height: 2px;
-      background: #fff;
-      border-radius: 4px;
-    }
-
-    &.@{prefix}-hide-hovered {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  .@{prefix}-button {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 56px;
-    height: 56px;
-    background-color: #fff;
-    border-radius: 50%;
-    box-shadow: @boxShadowSecondary;
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease 0.1s,
-      opacity 0.2s ease 0s,
-      transform 0.2s ease 0.1s;
-    user-select: none;
-
-    &.@{prefix}-button-primary {
-      background-color: #006aff;
-    }
-
-    &.@{prefix}-button-small {
-      width: 40px;
-      height: 40px;
-    }
-
-    &.@{prefix}-button-disabled {
-      background-color: @colorTextQuaternary;
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-
-    .@{prefix}-button-loading {
-      position: absolute;
-      width: 56px;
-      height: 56px;
-      color: #006aff;
-      font-size: 56px;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-
-      &.@{prefix}-button-loading-primary {
-        color: #fff;
-      }
-
-      &.@{prefix}-button-loading-small {
-        width: 40px;
-        height: 40px;
-        font-size: 40px;
-      }
-    }
-
-    .@{prefix}-button-close {
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      color: @colorTextSecondary;
-      font-size: 24px;
-      transform: translateY(-50%) scale(0.4) rotate(-45deg);
-      opacity: 0;
-      transition: all 0.3s linear;
-      user-select: none;
-      inset-block-start: 50%;
-
-      &.@{prefix}-button-close-primary {
-        color: #fff;
-      }
-
-      &.@{prefix}-button-close-show {
-        transform: translateY(-50%);
-        opacity: 1;
-      }
-
-      &.@{prefix}-button-close-small {
-        width: 16px;
-        height: 16px;
-        font-size: 16px;
-        line-height: 16px;
-      }
-    }
-
-    .@{prefix}-button-icon {
-      position: absolute;
-      width: 24px;
-      height: 24px;
-      color: @colorTextSecondary;
-      font-size: 24px;
-      line-height: 24px;
-      transform: translateY(-50%);
-      opacity: 1;
-      transition: all 0.3s linear;
-      user-select: none;
-      inset-block-start: 50%;
-
-      &.@{prefix}-button-icon-open {
-        transform: translateY(-50%) scale(0.4) rotate(45deg);
-        opacity: 0;
-      }
-
-      &.@{prefix}-button-icon-disabled {
-        color: @colorTextQuaternary;
-      }
-
-      &.@{prefix}-button-icon-primary {
-        color: #fff;
-      }
-
-      &.@{prefix}-button-icon-small {
-        width: 16px;
-        height: 16px;
-        font-size: 16px;
-        line-height: 16px;
-      }
-    }
-  }
-}

package/lib/TaskGraph/graph.less

@@ -1,23 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-task-graph-item;
-
-.@{prefix}-menu {
-  // 设置 fixed，避免下拉菜单占据空间导致底部出现白色方块
-  position: fixed;
-
-  .@{prefix}-task-id-wrapper {
-    padding: 5px 12px;
-
-    .@{prefixCls}-typography {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      color: @colorTextTertiary;
-
-      .@{prefixCls}-typography-copy {
-        color: @colorTextTertiary;
-      }
-    }
-  }
-}

package/lib/TaskGraph/index.less

@@ -1,117 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-task-graph;
-
-.container {
-  position: relative;
-  padding-bottom: 0 !important;
-
-  .@{prefixCls}-page-header {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-
-  .tech-page-container-header-inner {
-    background-color: #fafbff;
-
-    .@{prefixCls}-page-header-heading .@{prefixCls}-page-header-heading-title {
-      font-size: 16px;
-    }
-  }
-
-  .@{prefix}-split-pane {
-    top: auto !important;
-    height: calc(100% - 36px) !important;
-    min-height: calc(100% - 36px) !important;
-    margin: -24px;
-
-    .@{prefix}-tabs-wrapper {
-      width: 100%;
-    }
-
-    .@{prefixCls}-tabs {
-      height: 100%;
-
-      .@{prefixCls}-tabs-nav-container {
-        height: 32px;
-        padding-top: 4px;
-      }
-
-      .@{prefixCls}-tabs-bar {
-        margin-bottom: 0;
-        background-color: #fff;
-        border-bottom: none;
-      }
-
-      .@{prefixCls}-tabs-tab {
-        min-width: 120px;
-        height: 28px;
-        margin: 0;
-        padding: 0;
-        font-size: 12px;
-        line-height: 28px;
-        background-color: #fff;
-        border: none;
-        border-bottom: 1px solid #e8e8e8;
-        border-radius: 0;
-        transition: none;
-
-        &:hover {
-          color: @colorTextSecondary;
-        }
-
-        div {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          height: 20px;
-          margin-top: 4px;
-          padding: 0 8px;
-          border-left: 1px solid #e8e8e8;
-        }
-      }
-
-      .@{prefixCls}-tabs-tab:last-child {
-        div {
-          border-left: none;
-        }
-      }
-
-      .@{prefixCls}-tabs-tab-active {
-        color: @colorText;
-        font-weight: @fontWeight;
-        background-color: #f7f8fc;
-        border-bottom: none;
-        border-left: none;
-        border-radius: 2px;
-
-        div {
-          border-left: none;
-        }
-
-        & + .@{prefixCls}-tabs-tab {
-          div {
-            border-left: none;
-          }
-        }
-      }
-
-      .@{prefixCls}-tabs-extra-content {
-        margin-right: 16px;
-        line-height: 32px;
-      }
-
-      .@{prefixCls}-tabs-content {
-        // TODO: 需要减去 64px，否则部分结尾的日志看不到，原因待排查
-        height: calc(100% - 64px);
-        padding: 16px;
-        overflow: scroll;
-        color: @colorTextSecondary;
-        line-height: 22px;
-        white-space: pre-wrap;
-        word-break: break-all;
-        background-color: #f7f8fc;
-      }
-    }
-  }
-}

package/lib/Welcome/index.less

@@ -1,185 +0,0 @@
-@import '../variable.less';
-
-@prefix: ob-welcome;
-
-.@{prefix}-container {
-  height: 100%;
-  padding-bottom: 0 !important;
-  background-color: @colorBgContainer;
-
-  .tech-page-container-content {
-    // 由于 umi 的本地开发和线上打包的 CSS 样式优先级不一致，导致下列样式在线上环境不生效，因此先加上 !important
-    // issue: https://github.com/umijs/umi/issues/5741
-    padding: 0 !important;
-  }
-
-  .@{prefix}-page-header {
-    height: 272px;
-    padding-top: 72px;
-    padding-left: 100px;
-    color: @colorBgContainer;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-
-    p {
-      text-align: justify;
-    }
-
-    img {
-      width: 80px;
-    }
-
-    .@{prefix}-title {
-      font-size: 32px;
-      font-family: SFProText-Medium;
-    }
-
-    .@{prefix}-description {
-      margin-top: 16px;
-      margin-bottom: 32px;
-      font-family: SFProText-Regular;
-      opacity: 0.85;
-    }
-  }
-
-  .@{prefix}-introduce {
-    margin: 0 32px;
-    margin-top: -48px;
-    margin-bottom: 40px;
-
-    .@{prefixCls}-card-body {
-      padding: 48px 68px;
-      box-shadow: 0 1px 40px 2px rgba(28, 116, 230, 0.1);
-    }
-
-    .@{prefix}-item {
-      display: flex;
-
-      img {
-        margin-right: 12px;
-      }
-
-      .title {
-        color: @colorText;
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-      }
-
-      .description {
-        margin-top: 4px;
-        color: @colorTextSecondary;
-        font-family: SFProText-Regular;
-      }
-    }
-  }
-
-  .@{prefix}-content {
-    padding: 0 32px;
-    padding-bottom: 90px;
-
-    .@{prefix}-left {
-      padding: 0 36px;
-      border-right: 1px solid #e8e8e8;
-
-      .@{prefix}-item {
-        display: flex;
-        padding: 24px 24px;
-
-        .@{prefix}-order-wrapper {
-          .@{prefix}-order {
-            width: 24px;
-            height: 24px;
-            margin-right: 12px;
-            color: @colorTextQuaternary;
-            text-align: center;
-            border: 1px solid @colorTextQuaternary;
-            border-radius: 24px;
-          }
-        }
-
-        .@{prefix}-title {
-          margin-top: 0;
-          color: @colorText;
-          font-size: 16px;
-        }
-
-        .@{prefix}-description {
-          margin-top: 8px;
-          color: @colorTextTertiary;
-        }
-      }
-
-      .@{prefix}-btn-wrapper {
-        margin-right: 24px;
-        margin-left: 60px;
-      }
-    }
-
-    .@{prefix}-right {
-      padding: 24px 64px;
-
-      .@{prefix}-title {
-        margin-bottom: 16px;
-        color: @colorText;
-        font-size: 16px;
-        font-family: PingFangSC-Medium;
-      }
-
-      .@{prefixCls}-btn {
-        margin-right: 12px;
-        margin-bottom: 12px;
-        background: rgba(24, 144, 255, 0.06);
-        border: none;
-      }
-
-      .@{prefix}-more {
-        background: rgba(0, 0, 0, 0.04);
-      }
-    }
-  }
-}
-
-.@{prefix}-step {
-  display: flex;
-  // margin-right: 30px;
-  margin-bottom: 30px;
-  padding: 20px 30px 20px 0;
-  background: @colorBgContainer;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: 2px;
-
-  &:hover {
-    box-shadow: 0 4px 16px 0;
-    cursor: pointer;
-  }
-
-  &:nth-child(even) {
-    margin-right: 0;
-  }
-
-  .@{prefix}-step-left {
-    padding: 0 20px;
-  }
-
-  .@{prefix}-step-right {
-    .@{prefix}-step-title {
-      color: @colorText;
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    .@{prefix}-step-description {
-      color: @colorTextTertiary;
-    }
-  }
-
-  .@{prefix}-step-operations {
-    color: @colorPrimary;
-    font-size: 14px;
-    line-height: 22px;
-  }
-}
-
-.borderRight {
-  border-right: 1px solid #e8e8e8;
-}

package/lib/index.less

@@ -1 +0,0 @@
-@import './variable.less';

package/lib/variable.less

@@ -1,54 +0,0 @@
-@import '~@oceanbase/design/es/theme/index.less';
-
-// 限制最大宽度，避免页面被无限拉伸
-// 暂时去除最大宽度限制
-@maxWidth: 8192px;
-@prefixCls: ant;
-@iconPrefixCls: anticon;
-
-// 边框渐变
-.border-gradient
-  (
-    // 背景色，默认为透明色
-    @background-color: transparent,
-    // 边框色
-    @border-color,
-    // 边框宽度
-    @border-width: 1px, 
-    // 边框样式
-    @border-style: solid,
-    // 边框圆角
-    @border-radius: 0px
-  ) {
-  background-image: @background-color, @border-color;
-  background-clip: padding-box, border-box;
-  background-origin: padding-box, border-box;
-  border: @border-width @border-style transparent;
-  border-radius: @border-radius;
-  transition: border-width 0.3s;
-}
-
-@keyframes activeGradientAnimation {
-  0% {
-    background-repeat: no-repeat;
-    background-size: 0% 100%;
-  }
-  100% {
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-}
-
-@keyframes selectedGradientAnimation {
-  0% {
-    background-repeat: no-repeat;
-    background-size: 0% 100%;
-    // 选中态有圆角渐变动画
-    border-radius: 0;
-  }
-  100% {
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    border-radius: 8px;
-  }
-}