xdesign-vue-next/es/back-top/style/index.css

XDesign Component for vue-next

.x-back-top {
  position: fixed;
  z-index: 300;
  overflow: hidden;
  outline: none;
  border-color: transparent;
  background-color: transparent;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  border-width: 0.5px;
  border-style: solid;
  transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear;
  touch-action: manipulation;
  box-shadow: var(--td-shadow-3);
  visibility: hidden;
  opacity: 0;
}
.x-back-top__text {
  font: var(--td-font-body-small);
  text-align: center;
  margin-top: var(--td-comp-margin-xxs);
}
.x-back-top__icon {
  font-size: var(--td-font-headline-small);
}
.x-back-top.x-size-m .x-back-top__icon {
  margin-top: 2px;
}
.x-back-top--show {
  visibility: visible;
  opacity: 1;
}
.x-back-top--theme-light {
  border-color: var(--td-component-border);
  background-color: var(--td-bg-color-container);
}
.x-back-top--theme-light:hover {
  border-color: var(--td-bg-color-container-hover);
  background-color: var(--td-bg-color-container-hover);
}
.x-back-top--theme-light .x-back-top__text {
  color: var(--td-text-color-secondary);
}
.x-back-top--theme-light .x-back-top__icon {
  color: var(--td-text-color-primary);
}
.x-back-top--theme-primary {
  border-color: var(--td-brand-color);
  background-color: var(--td-brand-color);
}
.x-back-top--theme-primary:hover {
  border-color: var(--td-brand-color-hover);
  background-color: var(--td-brand-color-hover);
}
.x-back-top--theme-primary .x-back-top__text {
  color: var(--td-text-color-anti);
}
.x-back-top--theme-primary .x-back-top__icon {
  color: var(--td-text-color-anti);
}
.x-back-top--theme-dark {
  border-color: rgba(0, 0, 0, 0.9);
  background-color: rgba(0, 0, 0, 0.9);
}
.x-back-top--theme-dark:hover {
  border-color: rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.6);
}
.x-back-top--theme-dark .x-back-top__text {
  color: var(--td-text-color-anti);
}
.x-back-top--theme-dark .x-back-top__icon {
  color: var(--td-text-color-anti);
}
.x-back-top.x-size-s {
  width: var(--td-comp-size-xxl);
  height: var(--td-comp-size-xxl);
}
.x-back-top.x-size-s .x-back-top__text {
  display: none;
}
.x-back-top.x-size-m {
  width: var(--td-comp-size-xxxxl);
  height: var(--td-comp-size-xxxxl);
}
.x-back-top.x-size-m .x-back-top__text {
  display: block;
}
.x-back-top--circle {
  border-radius: var(--td-radius-circle);
}
.x-back-top--square {
  border-radius: var(--td-radius-medium);
}