pickup.styl

/**
 * @package   PickMeUp
 * @author    Nazar Mokrynskyi <[email protected]>
 * @author    Stefan Petre <www.eyecon.ro>
 * @copyright Copyright (c) 2013-2016, Nazar Mokrynskyi
 * @copyright Copyright (c) 2008-2009, Stefan Petre
 * @license   MIT License, see license.txt
 */
$__border-radius = 0
$__border-color = #e0e0e0;
$__background = white
$__color = black
$__background-hover = $viol-hover // my variable
$__color-hover = white
$__nav-color = $__color
$__nav-color-hover = $__color-hover
$__not-in-month = $placeholder-text-color // my variable
$__not-in-month-hover = #999999
$__disabled = lighten($placeholder-text-color, 50%) // my variable
$__selected = white
$__selected-background = $viol-hover // my variable
$__not-in-month-selected-background = #17384d
$__day-of-week = $__not-in-month-hover
$__today-background = $__not-in-month-selected-background
$__today-color = $__color-hover
.pickmeup
  background: $__background
  border-radius: $__border-radius
  border: solid 1px $__border-color
  -moz-box-sizing: content-box
  box-sizing: content-box
  display: inline-block
  position: absolute
  z-index: 6000
  touch-action: manipulation
  *
    -moz-box-sizing: border-box
    box-sizing: border-box
  &.pmu-flat
    position: relative
  &.pmu-hidden
    display: none
  .pmu-instance
    display: inline-block
    height: 16.8em
    padding: .5em
    text-align: center
    width: 15em
    .pmu-button
      color: $__color
      cursor: pointer
      outline: none
      text-decoration: none
    .pmu-today
      background: $__today-background
      color: $__today-color
      border-radius: 1em
    .pmu-button:hover
      background: $__background-hover
      color: $__color-hover
      border-radius: 1em
    .pmu-not-in-month
      color: $__not-in-month
    .pmu-disabled,
        .pmu-disabled:hover
      color: $__disabled
      cursor: default
    .pmu-selected
      background: $__selected-background
      color: $__selected
      border-radius: 1em
    .pmu-not-in-month.pmu-selected
      background: $__not-in-month-selected-background
    nav
      color: $__nav-color
      display: -ms-flexbox
      display: -webkit-flex
      display: flex
      line-height: 2em
      *:first-child :hover
        color: $__nav-color-hover
      .pmu-prev,
            .pmu-next
        display: none
        height: 2em
        width: 1em
      .pmu-month
        width: 14em
    .pmu-years,
        .pmu-months
      *
        display: inline-block
        line-height: 3.6em
        width: 3.5em
    .pmu-day-of-week
      color: $__day-of-week
      cursor: default
    .pmu-day-of-week,
        .pmu-days
      *
        display: inline-block
        line-height: 2em
        width: 2em
    .pmu-day-of-week *
      line-height: 1.8em
  .pmu-instance:first-child .pmu-prev,
    .pmu-instance:last-child .pmu-next
    display: block
  .pmu-instance:first-child,
    .pmu-instance:last-child
    .pmu-month
      width: 13em
  .pmu-instance:first-child:last-child .pmu-month
    width: 12em
  &:not(.pmu-view-days) .pmu-days,
    &:not(.pmu-view-days) .pmu-day-of-week,
    &:not(.pmu-view-months) .pmu-months,
    &:not(.pmu-view-years) .pmu-years
    display: none
    
.choose-date
  position: relative
  &__datepickerbox
    position: absolute
    top: 45px