@alauda-fe/dynamic-plugin-shared 0.0.1-alpha.9 → 0.0.3-alpha.0

package/styles/global.scss

@@ -1,904 +0,0 @@
-// stylelint-disable no-descending-specificity
-
-@use 'sass:math';
-// tailwind preset must be the lowest priority
-@import './tailwind-preset';
-@import './reset-browser';
-@import 'node_modules/@alauda/ui/theme/style';
-@import './var';
-@import './mixins';
-@import './ansi-color';
-@import './markdown-body'; // todo: 因为aui-code-editor 中也使用的 https://github.com/sindresorhus/github-markdown-css。未来迁移过去
-
-@include page-color-definition;
-
-.d-block {
-  display: block;
-}
-
-.d-flex {
-  display: flex;
-}
-
-.align-center {
-  align-items: center;
-}
-
-@for $i from 1 through 8 {
-  .flex-#{$i} {
-    flex: $i !important;
-  }
-}
-
-@for $i from 0 through 12 {
-  .ml-#{$i * 2} {
-    margin-left: #{$i * 2}px !important;
-  }
-  .mr-#{$i * 2} {
-    margin-right: #{$i * 2}px !important;
-  }
-  .mt-#{$i * 2} {
-    margin-top: #{$i * 2}px !important;
-  }
-  .mb-#{$i * 2} {
-    margin-bottom: #{$i * 2}px !important;
-  }
-
-  .mx-#{$i * 2} {
-    @extend .ml-#{$i * 2};
-    @extend .mr-#{$i * 2};
-  }
-  .my-#{$i * 2} {
-    @extend .mt-#{$i * 2};
-    @extend .mb-#{$i * 2};
-  }
-
-  .m-#{$i * 2} {
-    @extend .mx-#{$i * 2};
-    @extend .my-#{$i * 2};
-  }
-
-  .pl-#{$i * 2} {
-    padding-left: #{$i * 2}px !important;
-  }
-  .pr-#{$i * 2} {
-    padding-right: #{$i * 2}px !important;
-  }
-  .pt-#{$i * 2} {
-    padding-top: #{$i * 2}px !important;
-  }
-  .pb-#{$i * 2} {
-    padding-bottom: #{$i * 2}px !important;
-  }
-
-  .px-#{$i * 2} {
-    @extend .pl-#{$i * 2};
-    @extend .pr-#{$i * 2};
-  }
-  .py-#{$i * 2} {
-    @extend .pt-#{$i * 2};
-    @extend .pb-#{$i * 2};
-  }
-
-  .p-#{$i * 2} {
-    @extend .px-#{$i * 2};
-    @extend .py-#{$i * 2};
-  }
-}
-
-.mr-auto {
-  margin-right: auto;
-}
-
-.ml-auto {
-  margin-left: auto;
-}
-
-.ng-animate .ng-hide-add {
-  &,
-  &-active {
-    display: none;
-  }
-}
-
-.sk-folding-cube {
-  width: 40px;
-  height: 40px;
-  position: relative;
-  transform: rotateZ(45deg);
-
-  &.index-loading-spinner {
-    position: fixed;
-    top: calc(50% - 20px);
-    left: calc(50% - 20px);
-  }
-
-  .sk-cube {
-    float: left;
-    width: 50%;
-    height: 50%;
-    position: relative;
-    transform: scale(1.1);
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: use-rgb(primary);
-      animation: sk-fold-cube-angle 2.4s infinite linear both;
-      transform-origin: 100% 100%;
-    }
-  }
-
-  .sk-cube2 {
-    transform: scale(1.1) rotateZ(90deg);
-
-    &:before {
-      animation-delay: 0.3s;
-    }
-  }
-
-  .sk-cube3 {
-    transform: scale(1.1) rotateZ(180deg);
-
-    &:before {
-      animation-delay: 0.6s;
-    }
-  }
-
-  .sk-cube4 {
-    transform: scale(1.1) rotateZ(270deg);
-
-    &:before {
-      animation-delay: 0.9s;
-    }
-  }
-}
-
-@keyframes sk-fold-cube-angle {
-  0%,
-  10% {
-    transform: perspective(140px) rotateX(-180deg);
-    opacity: 0;
-  }
-
-  25%,
-  75% {
-    transform: perspective(140px) rotateX(0deg);
-    opacity: 1;
-  }
-
-  90%,
-  100% {
-    transform: perspective(140px) rotateY(180deg);
-    opacity: 0;
-  }
-}
-
-.acl-inline-select {
-  .date-range-picker {
-    border: none;
-  }
-
-  &--large {
-    @include inline-select;
-
-    > label {
-      font-size: use-var(font-size-l);
-    }
-
-    .aui-input {
-      &--large,
-      &-group--large {
-        height: calc(#{use-var(inline-height-l)} - 2px);
-      }
-    }
-  }
-
-  &,
-  &--medium {
-    @include inline-select;
-
-    > label {
-      font-size: use-var(font-size-m);
-    }
-
-    .aui-input {
-      &--medium,
-      &-group--medium {
-        height: calc(#{use-var(inline-height-m)} - 2px);
-      }
-    }
-  }
-
-  &--small {
-    @include inline-select;
-
-    > label {
-      font-size: use-var(font-size-m);
-    }
-
-    .aui-input {
-      &--small,
-      &-group--small {
-        height: calc(#{use-var(inline-height-s)} - 2px);
-      }
-    }
-  }
-
-  &--mini {
-    @include inline-select;
-
-    > label {
-      font-size: use-var(font-size-s);
-    }
-
-    .aui-input {
-      &--mini,
-      &-group--mini {
-        height: calc(#{use-var(inline-height-xs)} - 2px);
-      }
-    }
-  }
-}
-
-// auiTable 独立存在或不依赖于其他组件， 吸附 table 列头
-.sticky-table-header {
-  @include sticky-header(calc(#{$page-top}));
-}
-
-// auiTable 包含在 auiCard 中，同时吸附卡片头部和 table 列头
-.sticky-card_table-header {
-  @include sticky-header(calc(#{$page-top}));
-
-  &.aui-card__header {
-    margin-top: -12px;
-    padding: 12px 0;
-    background-color: use-rgb(n-10);
-
-    + .aui-card__content {
-      margin: 0;
-
-      @include sticky-table-header(calc(#{$page-top} + 56px));
-    }
-  }
-}
-
-.aui-dialog {
-  aui-dialog-content.platform-about-dialog {
-    &:first-child,
-    &:last-child {
-      .aui-dialog__content {
-        padding: 0;
-      }
-    }
-  }
-}
-
-aui-search,
-aui-select,
-aui-multi-select,
-aui-tree-select,
-aui-input-group,
-aui-number-input,
-aui-tags-input,
-aui-time-picker,
-aui-date-picker,
-aui-range-picker,
-aui-radio-group,
-aui-radio-button,
-acl-disabled-container,
-.acl-disabled-container,
-.acl-notification-disabled-container {
-  // 解决父元素为 flex 布局时的高度问题
-  line-height: 0;
-
-  > * {
-    line-height: 1.43;
-  }
-}
-
-html {
-  --acl-page-header-height: 60px;
-
-  &[lang|='zh'] {
-    --acl-form-item-label-width: 114px;
-  }
-
-  &:not([lang|='zh']) {
-    --acl-form-item-label-width: 144px;
-  }
-}
-
-.aui-form-item
-  .aui-form-item__label-wrapper:not(.aui-form-item__label-wrapper--top) {
-  width: var(--acl-form-item-label-width);
-}
-
-.fancy-scrollbar {
-  @include scroll-bar;
-}
-
-.card-shadow {
-  @include card-shadow;
-}
-
-.popper-shadow {
-  @include popper-shadow;
-}
-
-.ellipsis-dialog-header {
-  display: flex;
-  max-width: 464px;
-
-  .extra {
-    &:first-child {
-      margin-right: 4px;
-    }
-
-    &:last-child {
-      margin-left: 4px;
-    }
-  }
-}
-
-.text-overflow {
-  max-width: 100%;
-  @include text-overflow;
-}
-
-.ellipsis-dialog-header,
-.text-ellipsis {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  overflow-wrap: break-word;
-}
-
-.text-btn:hover {
-  color: use-rgb(primary);
-  cursor: pointer;
-}
-
-.card-second-title {
-  &,
-  &.aui-card__header {
-    font-weight: use-var(font-weight-bolder);
-    font-size: use-var(font-size-l);
-    margin-bottom: 12px;
-  }
-}
-
-// 默认列表页的搜索框的宽度是 260px
-.aui-card__header {
-  aui-search {
-    width: 260px;
-  }
-
-  .acl-inline-select {
-    font-weight: normal;
-  }
-
-  aui-icon {
-    font-size: initial;
-  }
-
-  .display-name {
-    display: flex;
-    align-items: center;
-    font-size: use-var(font-size-m);
-    font-weight: use-var(font-weight-normal);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: use-text-color(help);
-
-    button {
-      margin-left: 4px;
-    }
-  }
-}
-
-@include array-form-table;
-
-@include table-placeholder('.empty-placeholder');
-
-@include acl-select-prefix;
-
-.aui-table__row + acl-k8s-resource-list-footer {
-  .empty-placeholder,
-  .table-placeholder {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-.aui-table.acl-compact-table,
-.aui-dialog .aui-table {
-  .aui-table__row {
-    min-height: 50px;
-
-    .aui-checkbox {
-      height: unset;
-    }
-  }
-
-  .empty-placeholder,
-  .table-placeholder {
-    min-height: 52px;
-  }
-}
-
-a {
-  &.no-underline,
-  &:has(button) {
-    text-decoration: none;
-
-    &:hover,
-    &:active,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
-.tooltip-host {
-  font-size: use-var(icon-size-m);
-  color: use-text-color(help);
-
-  &:not(:first-child) {
-    margin-left: use-var(spacing-m);
-  }
-
-  &:hover,
-  &.isActive {
-    color: use-rgb(primary);
-  }
-}
-
-acl-field-set-item label .tooltip-host {
-  &:not(:first-child) {
-    margin-left: use-var(spacing-s);
-  }
-}
-
-.detail-page-fullheight {
-  @include detail-page-fullheight;
-}
-
-.yaml-form-page-fullheight {
-  @include detail-page-fullheight(28px); // 28px 是 yaml样例这行的盒子高度
-}
-
-aui-tooltip {
-  .acl-page-header__tooltip {
-    margin-top: 18px;
-
-    &--small {
-      margin-top: 20px;
-    }
-  }
-
-  .aui-tooltip.tooltip-single-line {
-    max-width: unset;
-    white-space: nowrap;
-  }
-}
-
-@include acl-table-in-table;
-
-.acl-info-table {
-  flex: 1;
-  width: 100%;
-  border-spacing: 0;
-
-  > tr > td {
-    vertical-align: middle;
-    padding: 4px;
-    line-height: 20px;
-    border: 12px solid use-rgb(n-9);
-
-    &:first-child {
-      padding-left: 8px;
-      width: 120px;
-      vertical-align: middle;
-      background-color: use-rgb(n-9);
-      text-align: center;
-      font-weight: use-var(font-weight-bold);
-      color: use-rgb(n-1);
-    }
-
-    &:last-child {
-      padding: 12px;
-    }
-  }
-
-  &.plain {
-    > tr > td:first-child {
-      background-color: white;
-    }
-  }
-}
-
-.icon--error {
-  color: use-rgb(red);
-}
-
-.icon--warning {
-  color: use-rgb(yellow);
-}
-
-.icon {
-  &--help {
-    color: use-text-color(help);
-
-    &:hover {
-      color: use-rgb(primary);
-    }
-  }
-
-  &--secondary {
-    color: use-text-color(secondary);
-
-    &:hover {
-      color: use-rgb(primary);
-    }
-  }
-}
-
-.acl-colorful-icon {
-  @include colorful-icon;
-
-  &.highlight {
-    @include colorful-icon-highlight;
-  }
-
-  &.plain {
-    @include colorful-icon-plain;
-  }
-}
-
-.c-list > li:before {
-  content: '\26AC';
-}
-
-.d-list > li:before {
-  content: '\2022';
-}
-
-.s-list > li:before {
-  content: '\25AA';
-}
-
-.c,
-.d,
-.s {
-  &-list {
-    list-style: none;
-
-    > li {
-      display: flex;
-
-      &:before {
-        margin-right: 8px;
-      }
-    }
-  }
-}
-
-.last-form-item-no-margin > aui-form-item:last-of-type > .aui-form-item {
-  margin-bottom: 0;
-}
-
-aui-form-item.last-form-item-no-margin:last-of-type > .aui-form-item {
-  margin-bottom: 0;
-}
-
-aui-form-item.form-item-no-margin > .aui-form-item {
-  margin-bottom: 0;
-}
-
-aui-form-item {
-  &.plain-text .aui-form-item {
-    &__label-wrapper {
-      &,
-      &.hasLabel:after {
-        line-height: 20px;
-      }
-    }
-
-    &__content {
-      min-height: unset;
-      line-height: 20px;
-    }
-
-    &__addon-wrapper {
-      height: unset;
-    }
-  }
-}
-
-// remove unexpected empty margin-top
-.aui-form-item {
-  &__hint-wrapper,
-  &__error-wrapper {
-    acl-errors-mapper:empty {
-      margin-top: calc(0px - use-var(spacing-s));
-    }
-  }
-}
-
-.aui-table {
-  & &__cell,
-  & &__header-cell {
-    flex: 1 0 100px;
-
-    &-checkbox {
-      height: 44px;
-    }
-  }
-
-  & &__header-cell aui-icon[icon='question_circle'] {
-    margin-left: 4px;
-  }
-
-  & &__cell > span:not(:first-child, :empty) {
-    margin-left: 8px;
-  }
-
-  & &__cell {
-    &__name {
-      display: flex;
-      align-items: center;
-      width: fit-content;
-      max-width: 100%;
-
-      > {
-        a,
-        button,
-        div,
-        span {
-          flex: 1;
-          max-width: 240px;
-          @include text-overflow;
-        }
-      }
-
-      > :not(:first-child, :empty) {
-        margin-left: 4px;
-      }
-    }
-
-    &__display-name {
-      margin-top: 2px;
-      max-width: 100%;
-
-      @include text-overflow;
-      @include text-set(s, help);
-    }
-
-    &-expand-panel {
-      flex: 1;
-    }
-  }
-
-  & &__column {
-    &-name,
-    &-belonging_app,
-    &-references_cron_job &-storageclass,
-    &-belonged_vm {
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      flex: 2 0 140px;
-
-      > {
-        a,
-        button,
-        div,
-        span {
-          @include text-overflow;
-        }
-      }
-    }
-
-    &-created_at,
-    &-updated_at {
-      display: flex;
-      flex: 0 0 108px;
-
-      @include lang-not-zh {
-        flex: 0 0 125px;
-      }
-    }
-
-    &-ip_address {
-      flex: 1 0 132px;
-    }
-
-    &-resource_limit {
-      flex: 1 0 112px;
-    }
-
-    &-action {
-      flex: 0 0 48px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &-checkbox {
-      flex: 0 0 36px;
-      align-items: center;
-      overflow: hidden;
-      display: flex;
-
-      .aui-checkbox {
-        margin-right: 0;
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-}
-
-.aui-option.isDisabled {
-  .tw-text-n-4 {
-    color: use-rgb(n-6);
-  }
-}
-
-aui-form-item,
-.aui-section,
-.aui-dialog {
-  .acl-array-form-table {
-    &__readonly-mode {
-      tbody {
-        tr {
-          height: 50px;
-        }
-      }
-    }
-  }
-}
-
-aui-form-item.form-item {
-  &__no-label .aui-form-item {
-    &__label-wrapper {
-      display: none;
-    }
-  }
-
-  &__no-mb .aui-form-item {
-    margin-bottom: 0;
-  }
-
-  &__td-control {
-    .aui-form-item {
-      margin-bottom: 0;
-
-      &__label-wrapper,
-      &__addon-wrapper {
-        display: none;
-      }
-    }
-  }
-}
-
-// 使用 flex 布局进行列宽控制
-.form-table__flex-layout {
-  .acl-array-form-table {
-    tr {
-      display: flex;
-    }
-
-    th,
-    td {
-      flex: 1;
-
-      &.acl-array-form-table__action-col {
-        // 单个操作符时的 cell 容器宽度，其他定制情况应当覆盖此 flexBasis
-        flex: 0 0 48px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-
-  &.inline-action-col .acl-array-form-table {
-    th,
-    td {
-      &.acl-array-form-table__action-col {
-        align-items: flex-start;
-      }
-    }
-  }
-}
-
-.acl-secondary-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: use-var(spacing-xl);
-  @include text-set(l, main, bold);
-
-  &:before {
-    content: '';
-    display: block;
-    margin-right: use-var(spacing-m);
-    height: 16px;
-    width: 4px;
-    border-radius: 2px;
-    background-color: use-rgb(primary);
-  }
-}
-
-.check-triangle-badge {
-  display: block;
-  position: absolute;
-  bottom: 1px;
-  right: 1px;
-  width: 24px;
-  height: 24px;
-  font-size: 14px;
-  color: use-rgb(primary);
-  background-image: linear-gradient(
-    to bottom right,
-    transparent 50%,
-    white 50%
-  );
-  border-bottom-right-radius: use-var(border-radius-l);
-  overflow: hidden;
-
-  .aui-icon {
-    position: absolute;
-    right: 1px;
-    bottom: 1px;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.animate-spin-icon {
-  .aui-icon {
-    animation: spin 2s linear infinite;
-  }
-}
-
-ul.acl-tooltip-ul {
-  li {
-    display: flex;
-
-    &:before {
-      content: '';
-      display: block;
-      flex-shrink: 0;
-      width: 4px;
-      height: 4px;
-      margin-top: calc((var(--aui-line-height-s) / 2) - 2px);
-      margin-right: 8px;
-      border-radius: 50%;
-      background-color: currentcolor;
-    }
-  }
-
-  li + li {
-    margin-top: 4px;
-  }
-}
-
-.aui-code-editor-toolbar {
-  .aui-checkbox {
-    height: use-var(line-height-m);
-  }
-}