vxe-pc-ui/es/backtop/style.css

A vue based PC component library

.vxe-backtop {
  display: inline-flex;
  flex-direction: column;
  position: absolute;
  right: var(--vxe-ui-backtop-right);
  bottom: var(--vxe-ui-backtop-bottom);
  color: var(--vxe-ui-font-color);
  font-family: var(--vxe-ui-font-family);
  cursor: pointer;
  z-index: 9;
}
.vxe-backtop.is--visible .vxe-backtop--content-wrapper {
  opacity: 1;
}
.vxe-backtop.is--fixed {
  position: fixed;
}
.vxe-backtop.is--absolute {
  position: absolute;
}

.vxe-backtop .vxe-button.type--button:not(.is--circle) {
  min-width: 2.8em;
  min-height: 2.8em;
  padding: 0.6em;
}
.vxe-backtop .vxe-button.type--button:not(.is--circle) i {
  font-size: 1.3em;
}
.vxe-backtop .vxe-button.type--button.is--circle {
  min-width: 2.8em;
  min-height: 2.8em;
}
.vxe-backtop .vxe-button.type--button.is--circle i {
  font-size: 1.4em;
}

.vxe-backtop--top-wrapper {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 0.8em;
}

.vxe-backtop--bottom-wrapper {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.8em;
}

.vxe-backtop--content-wrapper {
  opacity: 0;
  transition: all 0.3s;
}

.vxe-backtop--icon {
  font-size: 1.4em;
}

.vxe-backtop {
  font-size: var(--vxe-ui-font-size-default);
}
.vxe-backtop.size--medium {
  font-size: var(--vxe-ui-font-size-medium);
}
.vxe-backtop.size--small {
  font-size: var(--vxe-ui-font-size-small);
}
.vxe-backtop.size--mini {
  font-size: var(--vxe-ui-font-size-mini);
}