datePicker.scss

/** Styles for mdDatepicker. */
$md-datepicker-button-gap: 12px !default;  // Space between the text input and the calendar-icon button.
$md-datepicker-border-bottom-gap: 5px !default;  // Space between input and the grey underline.
$md-date-arrow-size: 5px !default; // Size of the triangle on the right side of the input.
$md-datepicker-open-animation-duration: 0.2s !default;
$md-datepicker-triangle-button-width: 36px !default;
$md-datepicker-input-mask-height: 40px !default;
$md-datepicker-button-padding: 8px !default;


md-datepicker {
  // Don't let linebreaks happen between the open icon-button and the input.
  white-space: nowrap;
  overflow: hidden;

  // Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft.
  // This prevents the element from shifting right when opening via the triangle button.
  @include rtl-prop(padding-right, padding-left, $md-datepicker-triangle-button-width / 2, 0);
  @include rtl-prop(margin-right, margin-left, -$md-datepicker-triangle-button-width / 2, auto);

  vertical-align: middle;
}

.md-inline-form {
  md-datepicker {
    margin-top: 12px;
  }
}

// The calendar icon button used to open the calendar pane.
.md-datepicker-button {
  display: inline-block;
  box-sizing: border-box;
  background: none;
  vertical-align: middle;
  position: relative;

  // Captures any of the click events. This is necessary, because the button has a SVG
  // icon which doesn't propagate the focus event, causing inconsistent behaviour.
  &:before {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    content: '';
    speak: none;
  }
}

// The input into which the user can type the date.
.md-datepicker-input {
  @include md-flat-input();
  min-width: 120px;
  max-width: $md-calendar-width - $md-datepicker-button-gap;
  padding: 0 0 $md-datepicker-border-bottom-gap;
}

// If the datepicker is inside of a md-input-container
._md-datepicker-floating-label {
  > md-datepicker {
    // Prevents the ripple on the triangle from being clipped.
    overflow: visible;

    .md-datepicker-input-container {
      border: none;
    }

    .md-datepicker-button {
      // Prevents the button from wrapping around, as well as it pushing
      // down the error messages more than they should be.
      @include rtl(float, left, right);
      margin-top: $button-left-right-padding * -2;
      top: $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap / 2;
    }
  }

  .md-input {
    float: none;
  }

  &._md-datepicker-has-calendar-icon {
    > label:not(.md-no-float):not(.md-container-ignore) {
      $width-offset: $md-datepicker-triangle-button-width * 2 + $md-datepicker-button-gap;
      $offset: $md-datepicker-triangle-button-width / 2;
      @include rtl(right, $offset, auto);
      @include rtl(left, auto, $offset);
      width: calc(100% - #{$width-offset});
    }

    .md-input-message-animation {
      $margin: $md-datepicker-triangle-button-width + $md-datepicker-button-padding * 2 + $md-datepicker-button-gap;
      @include rtl-prop(margin-left, margin-right, $margin, auto);
    }
  }
}


// Container for the datepicker input.
.md-datepicker-input-container {
  // Position relative in order to absolutely position the down-triangle button within.
  position: relative;

  border-bottom-width: 1px;
  border-bottom-style: solid;

  display: inline-block;
  width: auto;

  .md-icon-button + & {
    @include rtl-prop(margin-left, margin-right, $md-datepicker-button-gap, auto);
  }

  &.md-datepicker-focused {
    border-bottom-width: 2px;
  }
}

// Floating pane that contains the calendar at the bottom of the input.
.md-datepicker-calendar-pane {
  z-index: $z-index-calendar-pane;
  border-width: 1px;
  border-style: solid;
  background: transparent;

  transform: scale(0);
  transform-origin: 0 0;
  transition: transform $md-datepicker-open-animation-duration $swift-ease-out-timing-function;

  &.md-pane-open {
    transform: scale(1);
  }
}

// Portion of the floating panel that sits, invisibly, on top of the input.
.md-datepicker-input-mask {
  height: $md-datepicker-input-mask-height;
  width: $md-calendar-width;
  position: relative;
  overflow: hidden;
}

// The calendar portion of the floating pane (vs. the input mask).
.md-datepicker-calendar {
  // Use a modified timing function (from swift-ease-out) so that the opacity part of the
  // animation doesn't come in as quickly so that the floating pane doesn't ever seem to
  // cover up the trigger input.
  transition: opacity $md-datepicker-open-animation-duration cubic-bezier(0.5, 0, 0.25, 1);
  opacity: 0;

  .md-pane-open & {
    opacity: 1;
  }

  md-calendar:focus {
    outline: none;
  }
}

// Down triangle/arrow indicating that the datepicker can be opened.
// We can do this entirely with CSS without needing to load an icon.
// See https://css-tricks.com/snippets/css/css-triangle/
.md-datepicker-expand-triangle {
  // Center the triangle inside of the button so that the
  // ink ripple origin looks correct.
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 0;
  height: 0;
  border-left: $md-date-arrow-size solid transparent;
  border-right: $md-date-arrow-size solid transparent;
  border-top: $md-date-arrow-size solid;
}

// Button containing the down "disclosure" triangle/arrow.
.md-datepicker-triangle-button {
  position: absolute;
  @include rtl-prop(right, left, 0, auto);
  top: $md-date-arrow-size / 2;

  // TODO(jelbourn): This position isn't great on all platforms.
  @include rtl(transform, translateY(-25%) translateX(45%), translateY(-25%) translateX(-45%));
}

// Need crazy specificity to override .md-button.md-icon-button.
// Only apply this high specificity to the property we need to override.
.md-datepicker-triangle-button.md-button.md-icon-button {
  height: $md-datepicker-triangle-button-width;
  width: $md-datepicker-triangle-button-width;
  position: absolute;
  padding: $md-datepicker-button-padding;
}

// Disabled state for all elements of the picker.
md-datepicker[disabled] {
  .md-datepicker-input-container {
    border-bottom-color: transparent;
  }

  .md-datepicker-triangle-button {
    display: none;
  }
}

// Open state for all of the elements of the picker.
.md-datepicker-open {
  overflow: hidden;

  .md-datepicker-input-container,
  input.md-input {
    border-bottom-color: transparent;
  }

  .md-datepicker-triangle-button,
  &.md-input-has-value > label,
  &.md-input-has-placeholder > label {
    display: none;
  }
}

// When the position of the floating calendar pane is adjusted to remain inside
// of the viewport, hide the inputput mask, as the text input will no longer be
// directly underneath it.
.md-datepicker-pos-adjusted .md-datepicker-input-mask {
  display: none;
}

// Animate the calendar inside of the floating calendar pane such that it appears to "scroll" into
// view while the pane is opening. This is done as a cue to users that the calendar is scrollable.
.md-datepicker-calendar-pane {
  .md-calendar {
    transform: translateY(-85px);
    transition: transform 0.65s $swift-ease-out-timing-function;
    transition-delay: 0.125s;
  }

  &.md-pane-open .md-calendar {
    transform: translateY(0);
  }
}