amazeui/less/ui.datepicker.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            Datepicker
//
// Description:     Define style for Datepicker
//
// Component:       `.am-datepicker`
//
// Sub-objects:     `.am-datepicker-dropdown`
//                  `.am-datepicker-header`
//                  `.am-datepicker-day`
//                  `.am-datepicker-old`
//                  `.am-datepicker-new`
//                  `.am-datepicker-caret`
//                  `.am-datepicker-dow`
//                  `.am-datepicker-select`
//                  `.am-datepicker-next`
//                  `.am-datepicker-prev`
//                    `.am-datepicker-prev-icon`
//                    `.am-datepicker-next-icon`
//
// Modifiers:       `.am-datepicker-success`
//                  `.am-datepicker-warning`
//                  `.am-datepicker-danger`
//
// States:          `.am-active`
//                  `.am-disabled`
//
// Uses:            Icon
//
// =============================================================================


// Variables
// =============================================================================

@datepicker-primary: @global-secondary;
@datepicker-bg: @white;
@datepicker-td-height: 34px;
@datepicker-thead-height: 48px;

@datepicker-primary-light: fadeout(lighten(@datepicker-primary, 20%), 50%);
@datepicker-primary-dark: darken(@datepicker-primary, 20%);
@datepicker-td-active: darken(saturate(@datepicker-primary, 30%), 20%);
@datepicker-td-new-old: saturate(lighten(@datepicker-primary, 18%), 15%);

@datepicker-td-disable: #999;
@datepicker-td-disable-bg: rgb(250, 250, 250);

@datepicker-width: @datepicker-td-height * 7;
@datepicker-span-width: @datepicker-width / 3;

@datepicker-color: #555;
@datepicker-td-hover: #F0F0F0;

// themes
@datepicker-success-color: @global-success;
@datepicker-warning-color: @global-warning;
@datepicker-danger-color: @global-danger;

.datepicker-color-variant(@color) {
  @theme-primary: @color;
  @theme-color-light: fadeout(lighten(@color, 20%), 50%);
  @theme-color-dark: darken(@color, 20%);
  @theme-color-active: darken(saturate(@color, 30%), 20%);
  @theme-color-new-old: saturate(lighten(@color, 18%), 15%);
  @theme-color-disable: #999;

  tr.@{ns}datepicker-header {
    background: @theme-primary;
  }

  td {
    &.@{ns}datepicker-day.@{ns}disabled {
      color: @theme-color-disable;
    }
    &.@{ns}datepicker-old,
    &.@{ns}datepicker-new {
      color: @theme-color-new-old;
    }
    &.@{ns}active,
    &.@{ns}active:hover {
      color: @theme-color-active;
    }
    span {
      &.@{ns}datepicker-old {
        color: @theme-color-new-old;
      }

      &.@{ns}active {
        color: @theme-color-active;
      }
    }
  }

  .@{ns}datepicker-caret {
    border-bottom-color: @theme-primary;
  }

  .@{ns}datepicker-dow {
    color: @theme-color-dark;
  }

  .@{ns}datepicker-select,
  .@{ns}datepicker-prev-icon,
  .@{ns}datepicker-next-icon {
    &:hover {
      background: @theme-color-light;
      color: @theme-color-dark;
    }
  }
}

.@{ns}datepicker {
  top: 0;
  left: 0;
  border-radius: @global-radius;
  background: @datepicker-bg;
  box-shadow: 0 0 10px #ccc;
  padding-bottom: 10px;
  margin-top: 10px;
  width: @datepicker-width;
  color: @datepicker-color;
  display: none;
  .hook-datepicker;

  > div {
    display: none;
  }

  table {
    width: 100%;
  }

  tr.@{ns}datepicker-header {
    font-size: 1.6rem;
    color: @white;
    background: @datepicker-primary;
  }

  td,
  th {
    text-align: center;
    font-weight: normal;
    cursor: pointer;
  }

  th {
    height: @datepicker-thead-height;
  }

  td {
    font-size: 1.4rem;

    &.@{ns}datepicker-day {
      height: @datepicker-td-height;
      width: @datepicker-td-height;

      &:hover {
        background: @datepicker-td-hover;
        height: @datepicker-td-height;
        width: @datepicker-td-height;
      }
    }

    &.@{ns}datepicker-day.@{ns}disabled {
      cursor: no-drop;
      color: @datepicker-td-disable;
      background: @datepicker-td-disable-bg;
    }

    &.@{ns}datepicker-old,
    &.@{ns}datepicker-new {
      color: @datepicker-td-new-old;
    }

    &.@{ns}active,
    &.@{ns}active:hover {
      border-radius: @global-radius;
      color: @datepicker-td-active;
      background: @datepicker-td-hover;
    }

    span {
      display: block;
      width: @datepicker-span-width;
      height: 40px;
      line-height: 40px;
      float: left;
      cursor: pointer;

      &:hover {
        background: @datepicker-td-hover;
      }

      &.@{ns}active {
        color: @datepicker-td-active;
        background: @datepicker-td-hover;
      }

      &.@{ns}disabled {
        cursor: no-drop;
        color: @datepicker-td-disable;
        background: @datepicker-td-disable-bg;
      }

      &.@{ns}datepicker-old {
        color: @datepicker-td-new-old;
      }
    }
  }

  .@{ns}datepicker-dow {
    height: 40px;
    color: @datepicker-primary-dark;
  }
}

.@{ns}datepicker-caret {
  display: block!important;
  .caret-up(7px, @datepicker-primary);
  position: absolute;
  top: -7px;
  left: 6px;

  .hook-datepicker-creat;

  .@{ns}datepicker-right & {
    left: auto;
    right: 7px;
  }

  .@{ns}datepicker-up & {
    top: auto;
    bottom: -7px;
    .caret-down(7px, #fff);
  }
}

.@{ns}datepicker-select {
  height: @datepicker-td-height;
  line-height: @datepicker-td-height;
  text-align: center;
  transition: background-color 300ms ease-out;

  &:hover {
    background: @datepicker-primary-light;
    color: @datepicker-primary-dark;
  }
}

.@{ns}datepicker-prev,
.@{ns}datepicker-next {
  width: @datepicker-td-height;
  height: @datepicker-td-height;
}

.@{ns}datepicker-prev-icon,
.@{ns}datepicker-next-icon {
  width: @datepicker-td-height;
  height: @datepicker-td-height;
  line-height: @datepicker-td-height;
  display: inline-block;
  transition: background-color 300ms ease-out;

  &:hover {
    background: @datepicker-primary-light;
    color: @datepicker-primary-dark;
  }
}

.@{ns}datepicker-prev-icon {
  &:before {
    .am-icon-font;
    content: @fa-var-chevron-left;
  }
}

.@{ns}datepicker-next-icon {
  &:before {
    .am-icon-font;
    content: @fa-var-chevron-right;
  }
}

.@{ns}datepicker-dropdown {
  position: absolute;
  z-index: @z-index-datepicker;
}

@media @small-only {
  .@{ns}datepicker {
    width: 100%;
    td {
      span {
        width: 33.33%;
      }
    }
  }

  .@{ns}datepicker-caret {
    display: none!important;
  }

  .@{ns}datepicker-prev,
  .@{ns}datepicker-next {
    width: 44px;
    height: 44px;
  }
}

// Modifiers
// =============================================================================

.@{ns}datepicker-success {
  .datepicker-color-variant(@datepicker-success-color);
  .hook-datepicker-success;
}

.@{ns}datepicker-danger {
  .datepicker-color-variant(@datepicker-danger-color);
  .hook-datepicker-danger;
}

.@{ns}datepicker-warning {
  .datepicker-color-variant(@datepicker-warning-color);
  .hook-datepicker-warning;
}


// for React version
// =============================================================================

@datepicker-time-span-width: @datepicker-width / 4;

.@{ns}datepicker > div {
  display: block;

  span.@{ns}datepicker-hour {
    width: @datepicker-time-span-width;
  }
}

.@{ns}datepicker-date {
  display: block;

  &.@{ns}input-group {
    display: table;
  }
}

.@{ns}datepicker-time-box {
  padding: 30px 0 30px 0;

  strong {
    font-size: 5.2rem;
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    font-weight: normal;

    &:hover {
      border-radius: 4px;
      background: #ECECEC;
    }
  }

  em {
    display: inline-block;
    height: 70px;
    width: 20px;
    line-height: 70px;
    font-size: 5.2rem;
    font-style: normal;
  }
}

.@{ns}datepicker-toggle {
  text-align: center;
  cursor: pointer;
  padding: 10px 0;

  &:hover {
    background: #f0f0f0;
  }
}


// Hooks
// =============================================================================

.hook-datepicker() {}
.hook-datepicker-creat() {}
.hook-datepicker-success() {}
.hook-datepicker-danger() {}
.hook-datepicker-warning() {}