kalendae.less

@import "../../../modules/formFunnel/style/variables";

@color: @white;
@selection-color: @blue;
@border-color: @grey;

/** Base container **/
.kalendae {
  background: @color;
  padding: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  font-size: 11px;
  cursor: default;
  position: relative;

  /** Popup Container for Kalendae.Input **/
  &.k-floating {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  }

  /** Month Container **/
  .k-calendar {
    display: inline-block;
    width: 180px;
  }

  /** Month Separator **/
  .k-separator {
    display: inline-block;
    zoom: 1;
    width: 2px;
    vertical-align: top;
    margin: 0 8px;
  }

  /** Force specific width for month container contents **/
  .k-title,
  .k-header,
  .k-days {
    display: block;
    overflow: hidden;
  }

  /** Month Title Row **/
  .k-title {
    background: @selection-color;
    text-align: center;
    white-space: nowrap;
    position: relative;
    padding: 10px 0;
    color: @color;
  }

  .k-header {
    padding: 10px 10px 0 10px;
    border-width: 0 1px;
    border-color: @border-color;
    border-style: solid;
  }

  .k-days {
    padding: 10px;
    border: 1px solid @border-color;
    border-top-width: 0;
  }


  /** Kalendae.Input's popup close button **/
  .k-btn-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background: white;
    border: 2px solid #ccc;
    color: #999;
    line-height: 17px;
    text-align: center;
    font-size: 13px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    cursor: pointer;
    text-decoration: none;
    &:after {
      content: "\2716";
    }
    &:hover {
      color: #7EA0E2;
      background: white;
      border-color: #7EA0E2;
    }
  }

  .k-caption {
    font-size: 12px;
    line-height: 18px;
  }

  /** Month and Year Buttons **/
  .k-btn-previous-month,
  .k-btn-next-month,
  .k-btn-previous-year,
  .k-btn-next-year {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    top: 8px;
    color: @color;
    font-size: 26px;
    line-height: 18px;
    font-weight: bold;
    text-decoration: none;
  }

  .k-btn-previous-year {
    left: 0;
  }
  .k-btn-previous-month {
    left: 16px;
  }
  .k-btn-next-month {
    right: 16px;
  }
  .k-btn-next-year {
    right: 0;
  }

  .k-btn-previous-month:after {
    content: "\2039";
  }
  .k-btn-next-month:after {
    content: "\203A";
  }

  .k-btn-previous-year:after {
    content: "\00AB";
  }
  .k-btn-next-year:after {
    content: "\00BB";
  }

  .k-btn-previous-month:hover,
  .k-btn-next-month:hover {
    color: @color;
  }

  .k-btn-previous-year:hover,
  .k-btn-next-year:hover {
    color: #6FDF81;
  }

  /** Remove extra buttons when calendar shows multiple months **/
  .k-first-month .k-btn-next-month,
  .k-middle-month .k-btn-next-month,
  .k-middle-month .k-btn-previous-month,
  .k-last-month .k-btn-previous-month,
  .k-first-month .k-btn-next-year,
  .k-middle-month .k-btn-next-year,
  .k-middle-month .k-btn-previous-year,
  .k-last-month .k-btn-previous-year {
    display: none;
  }

  /** Disable year nav option **/
  .k-title.k-disable-year-nav .k-btn-next-year,
  .k-title.k-disable-year-nav .k-btn-previous-year {
    display: none;
  }
  .k-title.k-disable-year-nav .k-btn-next-month {
    right: 0;
  }
  .k-title.k-disable-year-nav .k-btn-previous-month {
    left: 0;
  }

  /** Hide unusable buttons **/
  &.k-disable-next-month-btn .k-btn-next-month,
  &.k-disable-previous-month-btn .k-btn-previous-month,
  &.k-disable-next-year-btn .k-btn-next-year,
  &.k-disable-previous-year-btn .k-btn-previous-year {
    display: none;
  }

  /** Week columns and day cells **/
  .k-header span,
  .k-days span {
    float: left;
  }

  .k-header span {
    text-align: center;
    font-weight: bold;
    width: 22px;
    padding: 1px 0;
    color: #666;
  }

  .k-days span {

    text-align: center;
    width: 22px;
    line-height: 1em;
    padding: 4px;
    color: #999;

    /** Days outside of the month view (before the first day of the month, after the last day of the month) **/
    &.k-out-of-month {
      color: #ddd;

      &.k-range {}
    }

    /** Days inside of the month view  not necassiarly after today **/
    &.k-in-month {
      color: #ddd;

      /** Days inside of the month view after today **/
      &.k-active {
        color: black;
        cursor: pointer;

        /** Days between the start and end points on a range, inside of the selectable area **/
        /** Selected day, when outside the selectable area **/
        &.k-range, &.k-selected {
          background: @selection-color;
          color: @color;
        }
      }
    }

    /** Today **/
    &.k-today {
      text-decoration: underline;
    }
  }

  /** Selectable week, hovered **/
  .k-week:hover span.k-active {
    border-color:#666;
  }

  .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
}