dev/scss/header/datepicker.scss

@charset "utf-8";
@import "../util";

$border-size: 2px;

div.datepicker {
  display: inline-block;
  position: absolute;
  z-index: 8000;
  font-size: 80%;
  padding: 4pt;
  box-shadow: $choose-box-shadow;
  border: {
    width: $border-size;
    style: solid;
    radius: $standard-border-radius;
  }
  > div {
    font-size: 120%;
    width: 45%;
  }
  > div.month {
    float: right;
  }

  @include choose-item;
  > div > span {
    display: inline-block;
    &:first-child,
    &:last-child {
      width: 15%;
      &::before {
	display: inline-block;
	text-align: center;
	cursor: pointer;
	font-family: 'FontAwesome';
	min-width: 14px;
      }
    }
    &:first-child::before {
      content: $fa-previous;
    }
    &:last-child::before {
      content: $fa-next;
    }
    overflow: hidden;
    white-space: nowrap;
    &:nth-child(2) {
      cursor: pointer;
      display: inline-block;
      width: 70%;
      text-align: center;
      text-overflow: ellipsis;
      border: {
	radius: $standard-border-radius;
	style: solid;
	width: $border-size;
	color: transparent;
      }
      &:hover {
	@include choose-hover;
      }
      &.selected {
	@include choose-active;
      }
    }
  }
  table {
    border-collapse: separate;
    border-spacing: 1px;
  }
  td {
    @include standard-text-padding;
    text-align: center;
    border: {
      style: solid;
      width: 1px;
    }
    &:not(.out) {
      cursor: pointer;
      @include choose-item;
      background-color: $nearly-white;
      &.today {
	background-color: $light-blue;
	color: $dark-blue;
	text-shadow: none;
      }
      &.selected {
	@include choose-active;
      }
      &:hover {
	@include choose-hover;
      }
    }
    &.out {
      border-color: transparent;
    }
  }
}