choerodon-ui/es/spin/style/index.css

An enterprise-class UI design language and React-based implementation

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
.c7n-spin {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  display: none;
  color: #3f51b5;
  text-align: center;
  vertical-align: middle;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.c7n-spin-spinning {
  position: static;
  display: inline-block;
  opacity: 1;
}
.c7n-spin-nested-loading {
  position: relative;
}
.c7n-spin-nested-loading > .c7n-spin {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  max-height: 3.2rem;
}
.c7n-spin-nested-loading > .c7n-spin .c7n-spin-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: calc(-1 * 0.3rem / 2);
}
.c7n-spin-nested-loading > .c7n-spin .c7n-spin-text {
  position: absolute;
  top: 50%;
  width: 100%;
  padding-top: calc((0.3rem - 0.13rem) / 2 + 0.02rem);
  text-shadow: 0 0.01rem 0.02rem #fff;
}
.c7n-spin-nested-loading > .c7n-spin.c7n-spin-show-text .c7n-spin-dot {
  margin-top: calc(-1 * 0.3rem / 2 - 0.1rem);
}
.c7n-spin-nested-loading > .c7n-spin-sm .c7n-spin-dot {
  margin: calc(-1 * 0.2rem / 2);
}
.c7n-spin-nested-loading > .c7n-spin-sm .c7n-spin-text {
  padding-top: calc((0.2rem - 0.13rem) / 2 + 0.02rem);
}
.c7n-spin-nested-loading > .c7n-spin-sm.c7n-spin-show-text .c7n-spin-dot {
  margin-top: calc(-1 * 0.2rem / 2 - 0.1rem);
}
.c7n-spin-nested-loading > .c7n-spin-lg .c7n-spin-dot {
  margin: calc(-1 * 0.5rem / 2);
}
.c7n-spin-nested-loading > .c7n-spin-lg .c7n-spin-text {
  padding-top: calc((0.5rem - 0.13rem) / 2 + 0.02rem);
}
.c7n-spin-nested-loading > .c7n-spin-lg.c7n-spin-show-text .c7n-spin-dot {
  margin-top: calc(-1 * 0.5rem / 2 - 0.1rem);
}
.c7n-spin-container {
  position: relative;
  zoom: 1;
}
.c7n-spin-container::before,
.c7n-spin-container::after {
  display: table;
  white-space: initial;
  content: ' ';
}
.c7n-spin-container::after {
  clear: both;
  height: 0;
  font-size: 0;
  visibility: hidden;
}
.c7n-spin-blur {
  clear: both;
  overflow: hidden;
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.c7n-spin-blur::after {
  opacity: 0.4;
  pointer-events: auto;
}
.c7n-spin-tip {
  color: rgba(0, 0, 0, 0.45);
}
.c7n-spin-dot {
  position: relative;
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
}
.c7n-spin-sm .c7n-spin-dot {
  width: 0.2rem;
  height: 0.2rem;
}
.c7n-spin-lg .c7n-spin-dot {
  width: 0.5rem;
  height: 0.5rem;
}
.c7n-spin.c7n-spin-show-text .c7n-spin-text {
  display: block;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ */
  .c7n-spin-blur {
    background: #fff;
    opacity: 0.5;
  }
}
@-webkit-keyframes antSpinMove {
  to {
    opacity: 1;
  }
}
@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}
@-webkit-keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}
@keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}