element-ui/packages/theme-default/src/carousel-item.css

A Component Library for Vue.js.

@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {

  @b carousel {
    @e item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: inline-block;
      overflow: hidden;
      z-index: calc(var(--index-normal) - 1);

      @when active {
        z-index: calc(var(--index-normal) + 1);
      }

      @when animating {
        transition: transform .4s ease-in-out;
      }

      @modifier card {
        width: 50%;
        transition: transform .4s ease-in-out;
        &.is-in-stage {
          cursor: pointer;
          z-index: var(--index-normal);
          &:hover .el-carousel__mask,
          &.is-hover .el-carousel__mask {
            opacity: 0.12;
          }
        }
        &.is-active {
          z-index: calc(var(--index-normal) + 1);
        }
      }
    }

    @e mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: var(--color-white);
      opacity: 0.24;
      transition: .2s;
    }
  }
}