com.googlecode.mgwt.ui.client.widget.carousel.carousel.css Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of mgwt Show documentation

using gwt to write mobile (native) apps

The newest version!

@if mgwt.css pretty {
  @external mgwt-Carousel, mgwt-Carousel-Scroller, mgwt-Carousel-Container;
  @external mgwt-Carousel-Indicator-Container, .mgwt-Carousel-Indicator;
  @external mgwt-Carousel-Indicator-active, mgwt-Carousel-Holder;
  @external mgwt-Carousel-Indicator-main;
}


@if user.agent safari {
  .mgwt-Carousel {
    display: -webkit-box; /* iOS < 7 && Android < 4.4*/
    display: -webkit-flex;
    -webkit-box-flex: 1; /* iOS < 7 && Android < 4.4*/
    -webkit-flex: 1;
  }
}

.mgwt-Carousel {
  position: relative;
  flex:1;
  flex-flow: column;
  overflow: visible;
}

@if user.agent safari {
  .mgwt-Carousel-Scroller, .mgwt-Carousel-Container  {
    -webkit-box-flex: 1; /* iOS < 7 && Android < 4.4*/
    -webkit-flex: 1;
  }
}

.mgwt-Carousel-Scroller {
  flex: 1
}

.mgwt-Carousel-Container {
  flex: 1;
}

.mgwt-Carousel-Holder {
  position: absolute;
  height: 100%;
}

.mgwt-Carousel-Indicator-main {
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 3px;
}

.mgwt-Carousel-Indicator-Container {
  background-color: #DCE0DF;
  border-radius: 5px;
}

.mgwt-Carousel-Indicator {
  width: 8px;
  height: 8px;
  background-color: #c3c3c3;
  border-radius: 4px;
  margin: 4px;
}

.mgwt-Carousel-Indicator-active {
  background-color: #757575;
}