@c8y/style 1023.97.7 → 1024.0.0

package/styles/vendor/datepicker/_bs-datepicker.less

@@ -1,626 +0,0 @@
-
-@import "../../mixins/_color-mixins.less";
-@import "../../mixins/_icon-base.less";
-@import "../../mixins/_shadows-helper.less";
-@import "../../mixins/_buttons.less";
-
-.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;
-        }
-        &.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: var(--brand-70, var(--c8y-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;
-
-    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{
-      &:extend(.btn-sm);
-      padding-right: 8px;
-      padding-left: 8px;
-    }
-
-  }
-  &.form-group-lg{
-    .btn-default{
-      &:extend(.btn-lg);
-    }
-    
-  }
-}
-
-.datetime-picker {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  .datepicker {
-    flex-basis: 0;
-    flex-shrink: 0;
-    margin-right: 8px;
-    margin-bottom: 0;
-  }
-  timepicker,
-  c8y-time-picker {
-    flex-grow: 0;
-    margin-bottom: 0;
-    &.form-group-sm{
-      .btn{
-         .button-size(@btn-padding-small-vertical; @btn-padding-small-horizontal; @btn-font-size-small;
-    @btn-line-height-small; @btn-border-radius-small; @form-control-height-sm);
-      }
-  
-    }
-    &.form-group-lg{
-      .btn{
-         .button-size(@btn-padding-large-vertical; @btn-padding-large-horizontal; @btn-font-size-large; @btn-line-height-large;
-    @btn-border-radius-large; @form-control-height-lg);
-      }
-    }
-  }
-
-}