metro4/source/components/marquee/marquee.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.marquee {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: @white;
}

.marquee {
  .marquee__item {
    display: block;
    position: absolute;
    white-space: nowrap;
    color: inherit;

    &.moveLeftRight {
      top: 50%;
      transform: translateY(-50%);
      left: ~"calc(100% + 20px)";
    }

    &.moveUpDown {
      left: 50%;
      transform: translateX(-50%);
      top: ~"calc(100% + 20px)";
    }
  }
}