vaadin-framework/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss

/**
 * Outputs the selectors and properties for the DateField component.
 *
 * @param {string} $primary-stylename (v-datefield) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group datefield
 */
@mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) {

  .#{$primary-stylename} {
    position: relative;
    width: $v-default-field-width;
    @include valo-datefield-style;
  }

  .#{$primary-stylename}-error {
    .#{$primary-stylename}-textfield {
      @include valo-textfield-error-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-color;
      border-color: $v-error-indicator-color;
    }
  }

  .#{$primary-stylename}-error-info {
    .#{$primary-stylename}-textfield {
      @include valo-textfield-error-level-info-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-info-color;
      border-color: $v-error-indicator-level-info-color;
    }
  }

  .#{$primary-stylename}-error-warning {
    .#{$primary-stylename}-textfield {
      @include valo-textfield-error-level-warning-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-warning-color;
      border-color: $v-error-indicator-level-warning-color;
    }
  }

  .#{$primary-stylename}-error-error {
    .#{$primary-stylename}-textfield {
      @include valo-textfield-error-level-error-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-error-color;
      border-color: $v-error-indicator-level-error-color;
    }
  }

  .#{$primary-stylename}-error-critical {
    .#{$primary-stylename}-textfield {
      @include valo-textfield-error-level-critical-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-critical-color;
      border-color: $v-error-indicator-level-critical-color;
    }
  }

  .#{$primary-stylename}-error-system {
    .#{$primary-stylename}-textfield {
      @include valo-textfield-error-level-system-style;
    }

    .#{$primary-stylename}-button {
      color: $v-error-indicator-level-system-color;
      border-color: $v-error-indicator-level-system-color;
    }
  }

  // Different widths for different resolutions
  .#{$primary-stylename}-full {
    width: round($v-font-size * 15);
  }

  .#{$primary-stylename}-day {
    width: $v-default-field-width;
  }

  .#{$primary-stylename}-month {
    width: round($v-font-size * 7.5);
  }

  .#{$primary-stylename}-year {
    width: round($v-font-size * 6.5);
  }

  .#{$primary-stylename}-popup {
    @include valo-datefield-popup-style;
  }

  @include valo-datefield-calendarpanel-style;


  @if $include-additional-styles {
    .#{$primary-stylename}-borderless {
      .#{$primary-stylename}-textfield {
        @include valo-textfield-borderless-style;
      }
      .#{$primary-stylename}-button {
        border: none;
        color: inherit;
        @include opacity(.5);
      }
    }

    .#{$primary-stylename}-align-right input {
      text-align: right;
    }

    .#{$primary-stylename}-align-center input {
      text-align: center;
    }

    .#{$primary-stylename}-tiny {
      @include valo-datefield-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
      font-size: $v-font-size--tiny;
    }

    .#{$primary-stylename}-compact,
    .#{$primary-stylename}-small {
      @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
    }

    .#{$primary-stylename}-small {
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-large {
      @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
      font-size: $v-font-size--large;
    }

    .#{$primary-stylename}-huge {
      @include valo-datefield-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
      font-size: $v-font-size--huge;
    }
  }

}


/**
 * Outputs the selectors and properties for the InlineDateField component.
 *
 * @param {string} $primary-stylename (v-inline-datefield) - the primary style name for the selectors
 *
 * @group datefield
 */
@mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) {
  @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);

  .#{$primary-stylename}-calendarpanel {
    position: relative;
    background: $v-overlay-background-color;
    padding: round($v-unit-size/6);
  }
}


/**
 * Outputs the styles for a date field variant.
 *
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
 * @param {size} $unit-size ($v-unit-size) - The sizing of the datefield, which corresponds its height
 * @param {list} $border ($v-textfield-border) - The border of the datefield
 * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the datefield
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the datefield
 * @param {list} $states (normal focus disabled) - The datefield states for which to output corresponding styles
 *
 * @group datefield
 */
@mixin valo-datefield-style (
    $bevel             : $v-textfield-bevel,
    $shadow            : $v-textfield-shadow,
    $unit-size         : $v-unit-size,
    $border            : $v-textfield-border,
    $border-radius     : $v-textfield-border-radius,
    $background-color  : $v-textfield-background-color,
    $states            : normal focus disabled
  ) {

  height: $unit-size;
  border-radius: $border-radius;

  [class*="textfield"] {
    box-sizing: border-box;
    @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color, $states: $states) ;
    padding-left: $unit-size * 1.2;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  &[class*="prompt"] > [class*="textfield"] {
    @include valo-textfield-prompt-style($background-color);
  }

  [class*="button"] {
    @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
  }

  &.v-disabled {
    @include opacity($v-disabled-opacity);

    [class*="button"] {
      cursor: default;
      pointer-events: none;
      &:active:after {
        display: none;
      }
    }
  }

  &.v-readonly {
    [class*="textfield"] {
      @include valo-textfield-readonly-style;
    }

    [class*="button"] {
      cursor: default;
      pointer-events: none;
      &:active:after {
        display: none;
      }
    }

    &.borderless {
      [class*="textfield"] {
        @include valo-textfield-borderless-style;
      }
    }
  }
}


/**
 * Outputs the styles for a date field variant button element.
 *
 * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
 * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
 * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button
 *
 * @group datefield
 */
@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
  $border-width: first-number($border) or 0;
  @include valo-tappable;
  -webkit-appearance: none;
  background: transparent;
  padding: 0;
  position: absolute;
  z-index: 10;
  width: $unit-size;
  line-height: $unit-size - ($border-width*2);
  text-align: center;
  font: inherit;
  outline: none;
  margin: 0;

  @if $border and $border != none {
    top: $border-width;
    bottom: $border-width;
    left: $border-width;
  }

  @if $border {
    border: none;
  }

  @if type-of($background-color) == color {
    @if $border {
      border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
    }
    color: mix($background-color, valo-font-color($background-color));

    &:hover {
      color: valo-font-color($background-color);
    }
  }

  @if $border-radius > 0 {
    $br: max(0, $border-radius - $border-width);
    border-radius: $br 0 0 $br;
  }

  &:before {
    @include valo-datefield-button-icon-style;
    @if $v-animations-enabled {
      @include transition(color 140ms);
    }
  }

  &:active:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @if type-of($background-color) == color {
      @include valo-button-active-style($background-color);
    }
    border-radius: inherit;
  }
}


/**
 * Outputs the font icon styles for the date field drop down button.
 *
 * @group datefield
 */
@mixin valo-datefield-button-icon-style {
  font-family: ThemeIcons;
  content: "\f073";
}


/**
 * Outputs the styles for a date field popup.
 *
 * @group datefield
 */
@mixin valo-datefield-popup-style {
  @include valo-overlay-style;

  margin-top: ceil($v-unit-size/8) !important;
  margin-bottom: ceil($v-unit-size/8) !important;
  margin-right: ceil($v-unit-size/8) !important;
  cursor: default;
  width: auto;

   table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
  }

  td {
    padding: round($v-unit-size/20);
  }

  @include valo-datefield-calendarpanel-style;
}


/**
 * Outputs the styles for calendar panel (i.e. month view).
 *
 * @param {string} $primary-stylename (v-datefield-calendarpanel) - the primary style name for the selectors
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) {
  .#{$primary-stylename} {
    font-size: $v-font-size;
    text-align: center;

    &:focus {
      outline: none;
    }
  }

  .#{$primary-stylename}-day {
    @include valo-datefield-calendarpanel-day-style;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
      @include valo-datefield-calendarpanel-day-hover-style;
    }
  }

  .#{$primary-stylename}-day-offmonth {
    @include valo-datefield-calendarpanel-day-offmonth-style;
  }

  .#{$primary-stylename}-day-today {
    @include valo-datefield-calendarpanel-day-today-style;
  }

  .#{$primary-stylename}-day.#{$primary-stylename}-day-selected,
  .#{$primary-stylename}-day.#{$primary-stylename}-day-selected:hover {
    @include valo-datefield-calendarpanel-day-selected-style
  }

  .#{$primary-stylename}-day.#{$primary-stylename}-day-focused {
    @include valo-datefield-calendarpanel-day-focused-style;
  }

  .#{$primary-stylename}-day.#{$primary-stylename}-day-outside-range,
  .#{$primary-stylename}-day.#{$primary-stylename}-day-outside-range:hover {
    @include valo-datefield-calendarpanel-outside-range-style;
  }

  .#{$primary-stylename}-weekdays {
    height: round($v-unit-size * 0.7);
    color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7));

    strong {
      font: inherit;
      font-size: ceil($v-font-size * 0.86);
    }
  }

  .#{$primary-stylename}-header {
    white-space: nowrap;
  }

  td[class*="year"],
  td[class*="month"] {
    button {
      @include appearance(none);
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      color: transparent;
      font-size: 0; // For IE8, where transparent text is not possible
      width: round($v-unit-size * 0.5);
      height: round($v-unit-size * 0.67);
      outline: none;
      position: relative;
      vertical-align: middle;

      &:before {
        color: mix($v-background-color, valo-font-color($v-background-color));
        font-size: round($v-font-size * 1.3);
        line-height: round($v-font-size * 1.5);

        @if $v-animations-enabled {
          @include transition(color 200ms);
        }
      }

      &:hover:before {
        color: $v-focus-color;
      }

      &.outside-range {
        cursor: default;
        @include opacity(.3);

        &:hover:before {
          color: mix($v-background-color, valo-font-color($v-background-color));
        }
      }
    }
  }

  .v-button-prevyear:before {
    @include valo-datefield-calendarpanel-prevyear-icon-style;
  }

  .v-button-prevmonth:before {
    @include valo-datefield-calendarpanel-prevmonth-icon-style;
  }

  .v-button-nextyear:before {
    @include valo-datefield-calendarpanel-nextyear-icon-style;
  }

  .v-button-nextmonth:before {
    @include valo-datefield-calendarpanel-nextmonth-icon-style;
  }

  td.#{$primary-stylename}-month {
    width: round($v-unit-size * 4);
    cursor:default;
    @include valo-datefield-calendarpanel-month-style;
  }
  td.#{$primary-stylename}-month.header-month-year{
    cursor:pointer;
  }

  .#{$primary-stylename}-year td.#{$primary-stylename}-month {
    width: round($v-unit-size * 2);
  }

  .#{$primary-stylename}-weeknumber,
  .#{$primary-stylename}-weekdays.#{$primary-stylename}-weeknumbers td:first-child {
    width: round($v-unit-size * 0.8);
    color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7));
    font-size: ceil($v-font-size * 0.86);
    display: inline-block;
    text-align: left;
  }

  .#{$primary-stylename}-weeknumber {
    position: relative;
  }

  .#{$primary-stylename}-weeknumbers .v-first:before {
    content: "";
    position: absolute;
    top: round($v-unit-size * 0.7) + round($v-unit-size/10)*2 + $v-overlay-padding-vertical;
    bottom: 0;
    left: 0;
    width: round($v-unit-size * 0.7) + $v-overlay-padding-horizontal*2;
    border-top: valo-border($color: $v-app-background-color, $strength: 0.3);
    border-right: valo-border($color: $v-app-background-color, $strength: 0.3);
    border-top-right-radius: $v-border-radius;
    border-bottom-left-radius: $v-border-radius;
    background: $v-app-background-color;
  }

  td.#{$primary-stylename}-time {
    width: 100%;
    font-size: ceil($v-font-size * 0.86);

    .v-label {
      display: inline;
      margin: 0 0.1em;
      font-weight: 400;
    }
  }

}


/**
 * Outputs the styles for an individual day element in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-day-style {
  box-sizing: border-box;
  width: round($v-unit-size * 0.8);
  height: round($v-unit-size * 0.7);
  border: first-number(valo-border()) solid transparent;
  line-height: round($v-unit-size * 0.7);
  text-align: center;
  font-size: ceil($v-font-size * 0.86);
  background: $v-background-color;

  @if $v-border-radius > 0 {
    border-radius: ceil($v-border-radius/2);
  }
  @if $v-animations-enabled {
    @include transition(color 200ms);
  }
}


/**
 * Outputs the hover state styles for an individual day element in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-day-hover-style {
  color: $v-selection-color;
}


/**
 * Outputs the styles for an individual day element, which are not part of the current month, in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-day-offmonth-style {
  color: mix(valo-font-color($v-background-color), $v-background-color);
  background: transparent;
}

/**
 * Outputs the styles for an individual day element, which are outside available range.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-outside-range-style {
  color: mix(valo-font-color($v-background-color), $v-background-color);
  cursor: not-allowed;
}

/**
 * Outputs the styles for todays day element in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-day-today-style {
  color: valo-font-color($v-background-color, 0.9);
  font-weight: max(600, $v-font-weight + 100);
  border-color: valo-font-color($v-background-color, 0.3);
}


/**
 * Outputs the styles for the selected day element in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-day-selected-style {
  color: valo-font-color($v-selection-color);
  @include valo-gradient($v-selection-color);
  border: none;
  font-weight: max(600, $v-font-weight + 100);
}


/**
 * Outputs the focus state styles for an individual day element in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-day-focused-style {
  @include valo-focus-style;
  position: relative; // Show above other cells

}


/**
 * Outputs the font icon styles for the next month button in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-nextmonth-icon-style {
  font-family: ThemeIcons;
  content: "\f105";
}


/**
 * Outputs the font icon styles for the previous month button in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-prevmonth-icon-style {
  font-family: ThemeIcons;
  content: "\f104";
}


/**
 * Outputs the font icon styles for the next year button in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-nextyear-icon-style {
  font-family: ThemeIcons;
  content: "\f101";
}


/**
 * Outputs the font icon styles for the previous year button in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-prevyear-icon-style {
  font-family: ThemeIcons;
  content: "\f100";
}


/**
 * Outputs the styles for the current month and year title element in a calendar panel.
 *
 * @group datefield
 */
@mixin valo-datefield-calendarpanel-month-style {
  color: $v-selection-color;
}