@meve/ui/es/swipe/swipe.less

Argon design system components library

@swipe-indicator-color: #fff;
@swipe-indicators-offset: 14px;
@swipe-indicator-offset: 4px;
@swipe-indicator-width: 12px;
@swipe-indicator-height: 8px;
@swipe-indicator-border-radius: 2px;

.m-swipe {
  position: relative;
  overflow: hidden;
  user-select: none;

  &__track {
    width: 100%;
    height: 100%;
    display: flex;
    transition-property: transform;
  }

  &__indicators {
    position: absolute;
    display: flex;
    bottom: @swipe-indicators-offset;
    left: 50%;
    transform: translateX(-50%);
  }

  &__indicator {
    width: @swipe-indicator-width;
    height: @swipe-indicator-height;
    border-radius: @swipe-indicator-border-radius;
    background: @swipe-indicator-color;
    opacity: 0.3;
    margin: 0 @swipe-indicator-offset;
    transition: opacity 0.3s;

    &:hover {
      cursor: pointer;
    }
  }

  &--vertical {
    flex-direction: column;
  }

  &--indicators-vertical {
    flex-direction: column;
    left: @swipe-indicators-offset;
    bottom: 50%;
    transform: translateY(50%);
  }

  &--indicator-active {
    opacity: 1;
  }

  &--indicator-vertical {
    margin: @swipe-indicator-offset 0;
  }
}