index.scss

@import '../../../../styles-var/devui-var.scss';

$panel-width: 230px;
$panel-height: 210px;
$panel-padding: 5px;
$panel-row-height: 24px;
$panel-cell-bg: transparent;
$panel-cell-color: $devui-text;
$panel-cell-active-bg: $devui-list-item-active-bg;
$panel-cell-active-color: $devui-list-item-active-text;
$panel-cell-active-hover-bg: $devui-list-item-active-bg;
$panel-cell-active-hover-color: $devui-list-item-active-text;

.#{$devui-prefix}-calendar-panel {
  width: $panel-width;
  padding: $panel-padding;
  box-sizing: border-box;
  overflow: hidden;

  .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: $panel-row-height;

    .cell {
      width: 100%;
      text-align: center;
      flex-grow: 1;
      flex-shrink: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: $devui-border-radius;
      background-color: $panel-cell-bg;
      color: $panel-cell-color;

      &:hover {
        background-color: $devui-range-item-hover-bg;
      }

      &.selected {
        background-color: $panel-cell-active-bg;
        color: $panel-cell-active-color;

        &:hover {
          background-color: $panel-cell-active-hover-bg;
          color: $panel-cell-active-hover-color;
        }
      }

      &.innerday {
        background-color: $devui-disabled-bg;
      }

      &.disabled,
      &.not-current {
        color: $devui-disabled-text;
      }

      &.disabled {
        cursor: not-allowed;
      }
    }
  }

  .head {
    cursor: default;
    padding: 0;
    margin: 0;
  }

  .body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    list-style: none;
  }

  .today-container {
    padding: 8px 8px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    &.disabled {
      .today-button {
        cursor: not-allowed;
      }
    }

    .today-button {
      border-radius: 3px;
      padding: 2px 20px;
      font-size: 12px;
      color: $devui-brand-active;
    }
  }
}