_gate.scss 586 B

123456789101112131415161718192021222324252627282930
  1. .ui-gate-layer {
  2. --len: 1;
  3. --current: 0;
  4. width: 100%;
  5. height: 100%;
  6. overflow: hidden !important;
  7. .ui-gate-slides {
  8. --content-width: calc(var(--len) * 100%);
  9. --item-width: calc(100% / var(--len));
  10. width: var(--content-width);
  11. height: 100%;
  12. transition: transform .3s ease;
  13. transform: translateX(calc(-1 * var(--current) * var(--item-width)));
  14. .ui-gate-content {
  15. width: var(--item-width);
  16. height: 100%;
  17. float: left;
  18. opacity: 0;
  19. transition: opacity .3s ease;
  20. &.active {
  21. opacity: 1;
  22. }
  23. }
  24. }
  25. }