@enact/sandstone/PageViews/PageViews.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.pageViews {
  height: 100%;
  width: 100%;
  display: inline-flex;
  flex-direction: column;
}
.pageViews .navButton {
  text-align: center;
  display: flex;
  align-items: center;
  width: 4.5rem;
  justify-content: center;
}
.pageViews .navButtonContainer {
  position: absolute;
  width: 100%;
  height: 3rem;
  top: calc(50% - 3rem / 2 );
  z-index: 10;
  pointer-events: none;
}
.pageViews .navButtonContainer [role='button'] {
  pointer-events: auto;
}
.pageViews.number .navButton {
  width: 2.25rem;
}
.pageViews .stepsRow {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pageViews .stepsRow.hidden {
  min-height: 2.75rem;
  visibility: hidden;
}
.pageViews.number .stepsRow {
  min-height: 5.25rem;
}
.pageViews.number .stepsRow .pageNumber {
  width: 2.625rem;
}
.pageViews.number .stepsRow .separator {
  width: 1.25rem;
}
.pageViews.dot .steps {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}
.pageViews.fullContents .stepsRow {
  position: absolute;
  align-self: center;
  bottom: 0;
  min-height: 2.75rem;
  pointer-events: none;
}
.pageViews.fullContents .stepsRow [role='button'] {
  pointer-events: auto;
}
.pageViews .contentsArea {
  position: relative;
  overflow: hidden;
}
.pageViews .viewManager {
  overflow: hidden;
}
.pageViews .horizontalLayout {
  height: 100%;
}