dev/scss/header/datepicker.scss

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

/**
 * Rules for the datepicker widget
 * (used in the Virtual Collection creator)
 * in Kalamar.
 */

$border-size: 2px;

div.datepicker {
  display: inline-block;
  position: absolute;
  z-index: 8000;

  font-size: 80%;
  padding: 4pt;
  @include choose-item;
  box-shadow: $choose-box-shadow;

  border: {
    width: $border-size;
    style: solid;
    radius: $standard-border-radius;
  }
  > div {
    font-size: 120%;
    width: 45%;
    &.month {
      float: right;
    }

    > 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;
    }
  }
}