ionic-framework/ionic/components/picker/picker.scss

@import "../../globals.core";

// Picker
// --------------------------------------------------

$picker-width:                             100% !default;
$picker-max-width:                         500px !default;


ion-picker-cmp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: $z-index-overlay;
  display: block;

  width: $picker-width;
  height: $picker-width;
}

.picker-toolbar {
  z-index: 1;
}

.picker-wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-overlay-wrapper;
  display: flex;

  overflow: hidden;

  flex-direction: column;

  margin: auto;

  width: $picker-width;
  max-width: $picker-max-width;

  transform: translate3d(0, 100%, 0);
}

.picker-columns {
  position: relative;
  display: flex;

  overflow: hidden;

  justify-content: center;
}

.picker-col {
  position: relative;
  display: flex;

  max-height: 100%;
}

.picker-opts {
  position: relative;

  width: 100%;
  min-width: 50px;
  max-width: 100%;
}

.picker-prefix {
  position: relative;

  flex: 1;

  min-width: 50px;
  min-width: 45%;

  text-align: right;
  white-space: nowrap;
}

.picker-suffix {
  position: relative;

  flex: 1;

  min-width: 50px;
  min-width: 45%;

  text-align: left;
  white-space: nowrap;
}

.picker-opt {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;

  flex: 1;

  width: 100%;
}

.picker-opt .button-inner {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  transition: opacity 150ms ease-in-out;
}

.picker-opt.picker-opt-disabled {
  pointer-events: none;
}

.picker-opt-disabled .button-inner {
  opacity: 0;
}

.picker-opts-left .button-inner {
  justify-content: flex-start;
}

.picker-opts-right .button-inner {
  justify-content: flex-end;
}

.picker-above-highlight,
.picker-below-highlight {
  display: none;

  pointer-events: none;
}