@pi0/framework7/src/components/calendar/calendar-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @import (multiple) '../../less/colors-md.less';
  @import (multiple) '../../less/vars-md.less';
  .calendar-header {
    height: @navbarSize;
    background: @toolbarBg;
    font-size: 20px;
    line-height: @navbarSize;
    padding: 0 24px;
    color:#fff;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  .calendar-footer {
    position: relative;
    width: 100%;
    height: 48px;
    padding: 6px 8px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
  }
  .calendar .toolbar {
    background: none !important;
    color: #212121;
    a.link {
      .md-link-highlight(rgba(0,0,0,0.15));
      .ripple-wave {
        background: rgba(0,0,0,0.1);
      }
    }
    .icon-next, .icon-prev, .icon-forward, .icon-back {
      opacity: 0.54;
    }
  }
  .calendar-week-header {
    color: rgba(0,0,0,.54);
    height: 24px;
    .calendar-week-day {
      line-height: 24px;
    }
  }

  .calendar-day {
    &.calendar-day-today span {
      color: @themeColor;
    }
    &.calendar-day-has-events span {
      &:after {
        background: @themeColor;
      }
    }
    &.calendar-day-has-events.calendar-day-selected span:after {
      background-color: #fff;
    }
    &.calendar-day-selected span {
      background: @themeColor;
      color: #fff;
    }
    span {
      width: 36px;
      height: 36px;
      line-height: 36px;
    }
  }
  .calendar-range .calendar-day.calendar-day-selected {
    span {
      color: #fff;
    }
  }
  .calendar-month-selector, .calendar-year-selector {
    a.icon-only {
      min-width: 36px;
    }
  }
  .hairline-root('.calendar-sheet', top, #ccc);

  .color-theme-loop({
    .color-theme-@{colorThemeName}, .color-@{colorThemeName} {
      .calendar-header {
        background: @colorThemeValue;
      }
      .calendar-day {
        &.calendar-day-today span {
          color: @colorThemeValue;
        }
        &.calendar-day-has-events span {
          &:after {
            background: @colorThemeValue;
          }
        }
        &.calendar-day-selected span {
          background: @colorThemeValue;
          color: #fff;
          &:after {
            background-color: #fff;
          }
        }
      }
    }
  });
}