@c8y/style/styles/_bs-datepicker.less

Styles for Cumulocity IoT applications

.bs-datepicker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;
  background: @component-background-default;

  .boxShadowHelper(md);

  &:after {
    display: block;
    clear: both;
    content: '';
  }

  bs-day-picker {
    float: left;
  }

  button:hover,
  button:focus,
  button:active,
  input:hover,
  input:focus,
  input:active,
  &-btns button:hover,
  &-btns button:focus,
  &-btns button:active,
  &-predefined-btns button:active,
  &-predefined-btns button:focus {
    outline: none;
  }

  /* .bs-datepicker-head */
  &-head {
    padding: 8px;
    min-width: 270px;
    height: 50px;
    border-radius: 0;
    text-align: justify;

    &:after {
      display: inline-block;
      width: 100%;
      content: '';
      vertical-align: top;
    }

    /* .bs-datepicker-head button */
    button {
      display: inline-block;
      padding: 0;
      height: 32px;
      border: 0;
      background: transparent;
      color: @component-color-actions;
      vertical-align: top;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
      transition: 0.3s;

      &[disabled],
      &[disabled]:hover,
      &[disabled]:active {
        color: @component-color-disabled;
        opacity: @component-disabled-opacity;
        cursor: not-allowed;
      }

      &.next,
      &.previous {
        .dlt-c8y-icon();
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 0;
        color: @component-brand-primary;
        font-size: 24px;

        span {
          display: none;
        }
      }
      &.next:before {
        content: @dlt-c8y-icon-chevron-right;
      }
      &.previous:before {
        content: @dlt-c8y-icon-chevron-left;
      }

      &.current {
        padding: 0 13px;
        max-width: 155px;
        border-radius: 0;
      }
    }
  }

  &-head {
    button {
      color: @component-color-actions;
      font-weight: 500;
      font-size: 16px;
      &:hover {
        color: @component-color-actions-hover;
      }
      &:active:not(.previous):not(.next) {
        .darken(@component-brand-primary, 0.3);
        color: @palette-high;
      }
    }
  }

  /* .bs-datepicker-body */
  &-body {
    padding: 10px;
    min-width: 278px;
    min-height: 232px;
    border-radius: 0;

    .days.weeks {
      position: relative;
      z-index: 1;
    }

    /* .bs-datepicker-body table */
    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: separate;

      th {
        color: @component-color-default;
        text-align: center;
        font-weight: 500;
        font-size: 13px;
      }

      td {
        position: relative;
        padding: 0;
        color: @component-color-default;
        text-align: center;

        span {
          position: relative;
          display: block;
          margin: 0 auto;
          border-radius: 0;
          font-size: 13px;

          user-select: none;
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
        }
        &.week {
          span {
            color: @component-color-text-muted;
            font-weight: 500;
          }
        }
        // todo: check first :not(.disabled) usage
        &:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) {
          cursor: pointer;
        }

        &.is-highlighted:not(.disabled):not(.selected) span,
        span.is-highlighted:not(.disabled):not(.selected) {
          background: transparent;
          box-shadow: inset 0 0 0 2px @component-brand-primary;
          transition: 0s;
        }

        &.is-active-other-month:not(.disabled):not(.selected) span,
        span.is-active-other-month:not(.disabled):not(.selected) {
          background-color: @component-color-accent;
          cursor: pointer;
          transition: 0s;
        }

        span.disabled,
        &.disabled span {
          color: @component-color-disabled;
        }

        .today {
          font-weight: 600;
          &:after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            content: '•';
            line-height: 1;
          }
        }

        span.selected,
        &.selected span {
          background-color: @component-brand-primary;
          color: @palette-high;
        }

        span.is-other-month,
        &.is-other-month span {
          color: @gray-50;
        }

        &.active {
          position: relative;

          &.select-start:before {
            left: 35%;
          }

          &.select-end:before {
            left: -85%;
          }
        }

        span.active.select-start:after,
        span.active.select-end:after,
        &.active.select-start span:after,
        &.active.select-end span:after {
          position: absolute;
          top: 0;
          z-index: -1;
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          content: '';
          transition: 0.3s;
        }

        &:before,
        span:before {
          position: absolute;
          top: 0;
          right: -2px;
          bottom: 0;
          left: -2px;
          z-index: -1;
          display: block;
          box-sizing: content-box;
          background: transparent;
          content: '';
        }

        &.active.select-start + td.active:before {
          left: -20%;
        }

        &:last-child.active:before {
          left: -25%;
          width: 125%;
          border-radius: 0;
        }

        span[class*='select-'],
        &[class*='select-'] span {
          border-radius: 0;
          color: @component-background-default;
        }
      }

      /* .bs-datepicker-body table.days */
      &.days {
        td,
        span {
          &.active:not(.select-start):before,
          &.in-range:not(.select-start):before {
            background: @brand-70;
          }
        }

        span {
          width: 32px;
          height: 32px;
          line-height: 32px;

          &.select-start {
            z-index: 2;
            border-radius: 50% 0 0 50%;
          }
          &.select-end {
            z-index: 2;
            border-radius: 0 50% 50% 0;
          }
          &.is-highlighted.in-range:before,
          &.in-range.select-end:before {
            right: 0;
            left: 0;
            background: none;
          }
        }

        td {
          &.select-start + td.select-end:before,
          &.select-start + td.is-highlighted:before,
          &.active + td.is-highlighted:before,
          &.active + td.select-end:before,
          &.in-range + td.is-highlighted:before,
          &.in-range + td.select-end:before {
            //background:@component;
            width: 100%;
          }
        }
      }

      /* .bs-datepicker-body table.weeks */
      &.weeks {
        tr {
          td {
            &:nth-child(2).active:before {
              left: 0;
              width: 100%;
              border-radius: 0;
            }
          }
        }
      }

      &:not(.weeks) {
        tr {
          td {
            &:first-child:before {
              border-radius: 0;
            }
          }
        }
      }

      &.years {
        td {
          span {
            margin: 0 auto;
            width: 46px;
            height: 46px;
            line-height: 45px;
          }
        }

        tr:not(:last-child) {
          td {
            span {
              margin-bottom: 8px;
            }
          }
        }
      }

      &.months {
        td {
          height: 52px;

          span {
            padding: 6px;
            border-radius: 0;
          }
        }
      }
    }
  }

  /* .current-timedate */
  .current-timedate {
    margin-bottom: 10px;
    height: 30px;
    border: 1px solid @component-border-color;
    border-radius: 0;
    color: @component-color-default;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 30px;
    cursor: pointer;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    span:not(:empty):before {
      display: inline-block;
      margin-right: 4px;
      width: 15px;
      height: 16px;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC);
      content: '';
      vertical-align: text-bottom;
    }
  }

  /* .bs-datepicker-multiple */
  &-multiple {
    border-radius: 0;

    & + & {
      margin-left: 10px;
    }

    .bs-datepicker {
      position: relative;
      box-shadow: none;

      &:not(:last-child) {
        padding-right: 10px;
      }

      & + .bs-datepicker:after {
        position: absolute;
        top: 25px;
        left: -8px;
        display: block;
        width: 14px;
        height: 10px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
        content: '';
      }

      .left {
        float: left;
      }

      .right {
        float: right;
      }
    }
  }

  /* .bs-datepicker-btns */
  &-container {
    padding: 0;
  }

  .bs-media-container {
    display: flex;
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }

  /*.bs-datepicker-custom-range */
  &-custom-range {
    background: @component-background-odd;
  }

  /* .bs-datepicker-predefined-btns */
  &-predefined-btns {
    button {
      display: block;
      margin-bottom: 10px;
      padding: 0 18px;
      width: 100%;
      height: 32px;
      border: 0;
      border-radius: 0;
      background-color: @component-background-default;
      color: @component-color-default;
      text-align: left;
      transition: 0.3s;

      &:active,
      &:hover {
        background-color: @component-background-active;
      }
    }
  }

  /* .bs-datepicker-buttons */
  &-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid @component-border-color;

    .btn-default {
      margin-left: 10px;
    }
  }
}

/* .bs-timepicker */
.bs-timepicker {
  &-container {
    padding: 10px 0;
  }

  &-label {
    margin-bottom: 10px;
    color: @component-color-default;
  }

  &-controls {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;

    button {
      padding: 0;
      width: 20px;
      height: 20px;
      border: 0;
      border-radius: 50%;
      background-color: @component-brand-primary;
      color: @palette-high;
      vertical-align: middle;
      font-weight: 700;
      font-size: 16px;
      line-height: 0;
      transition: 0.3s;

      &:hover {
        .darken(@component-brand-primary, 0.3);
      }
    }

    input {
      width: 35px;
      height: 25px;
      border: 1px solid @component-border-color;
      border-radius: 13px;
      text-align: center;
    }
  }

  .switch-time-format {
    min-width: 54px;
    height: 25px;
    border: 1px solid @component-border-color;
    border-radius: 20px;
    background: @component-background-default;
    color: @component-color-default;
    text-transform: uppercase;
    font-size: 13px;

    img {
      margin-left: 4px;
      vertical-align: initial;
    }
  }
}

bs-datepicker-container,
bs-daterangepicker-container {
  z-index: 1080;
}

/* screen size < 1024px */
@media (max-width: 768px) {
  .bs-datepicker {
    &-multiple {
      display: flex;

      & + & {
        margin-top: 10px;
        margin-left: 0;
      }
    }
  }
}

timepicker table,
c8y-time-picker table {
  background-color: transparent;
  .bs-timepicker-field {
    width: 5ch !important;
  }
  .btn-default {
    padding-right: 8px;
    padding-left: 8px;
  }
}

timepicker, c8y-time-picker{
  &.form-group-sm{
    .btn-default{
      .btn-sm();
      padding-right: 8px;
      padding-left: 8px;
    }
   
  }
  &.form-group-lg{
    .btn-default{
      .btn-lg();
    }
    
  }
}

.datetime-picker {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  .datepicker {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    margin-right: 8px;
    margin-bottom: 0;
  }
  timepicker,
  c8y-time-picker {
    flex-grow: 0;
    margin-bottom: 0;
  }
}