air-datepicker/src/sass/datepicker.scss

@import "datepicker-config";

/* -------------------------------------------------
    Datepicker
   ------------------------------------------------- */

.datepickers-container {
  position: absolute;
  left: 0;
  top: 0;
}

.datepicker {
  background: #fff;
  border: 1px solid $borderColor;
  border-radius: $datepickerBorderRadius;
  box-sizing: content-box;
  font-family: $fontFamily, sans-serif;
  font-size: $fontSize;
  color: map_get($textColor, common);
  width: $datepickerWidth;
  position: absolute;
  left: -100000px;
  opacity: 0;
  transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s $transitionSpeed;

  &.-from-top- {
    transform: translateY(-$transitionOffset);
  }
  &.-from-right- {
    transform: translateX($transitionOffset);
  }
  &.-from-bottom- {
    transform: translateY($transitionOffset);
  }
  &.-from-left- {
    transform: translateX(-$transitionOffset);
  }


  &.active {
    opacity: 1;
    transform: translate(0);
    transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s 0s;
  }
}

.datepicker-inline {
  .datepicker {
    position: static;
    left: auto;
    right: auto;
    opacity: 1;
    transform: none;
  }

  .datepicker--pointer {
    display: none;
  }
}

.datepicker--content {
  padding: $datepickerPadding;
}

//  Pointer
// -------------------------------------------------
$pointerHalfSize: $pointerSize / 2 - 1;

.datepicker--pointer {
  position: absolute;
  background: #fff;
  border-top: 1px solid $borderColor;
  border-right: 1px solid $borderColor;
  width: $pointerSize;
  height: $pointerSize;
  z-index: -1;

  //  Main axis
  // -------------------------

  .-top-left- &, .-top-center- &, .-top-right- & {
    top: calc(100% - #{$pointerHalfSize});
    transform: rotate(135deg);
  }

  .-right-top- &, .-right-center- &, .-right-bottom- & {
    right: calc(100% - #{$pointerHalfSize});
    transform: rotate(225deg);
  }

  .-bottom-left- &, .-bottom-center- &, .-bottom-right- & {
    bottom: calc(100% - #{$pointerHalfSize});
    transform: rotate(315deg);
  }

  .-left-top- &, .-left-center- &, .-left-bottom- & {
    left: calc(100% - #{$pointerHalfSize});
    transform: rotate(45deg);
  }

  //  Secondary axis
  // -------------------------

  .-top-left- &, .-bottom-left- & {
    left: $pointerOffset;
  }
  .-top-right- &, .-bottom-right- & {
    right: $pointerOffset;
  }
  .-top-center- &, .-bottom-center- & {
    left: calc(50% - #{$pointerSize} / 2);
  }

  .-left-top- &, .-right-top- & {
    top: $pointerOffset;
  }
  .-left-bottom- &, .-right-bottom- & {
    bottom: $pointerOffset;
  }
  .-left-center- &, .-right-center- & {
    top: calc(50% - #{$pointerSize} / 2);
  }

}

//  Body
// -------------------------------------------------

.datepicker--body {
  display: none;

  &.active {
    display: block;
  }
}