@c8y/style 1023.14.33 → 1023.14.36

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

@@ -0,0 +1,628 @@
+@use "../../../variables/index" as *;
+
+@use "../../../variables/dlt-c8y-icons-vars";
+@use "../../mixins/color-mixins";
+@use "../../mixins/icon-base";
+@use "../../mixins/shadows-helper";
+@use "../../mixins/buttons";
+
+.bs-datepicker {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: stretch;
+  flex-flow: row wrap;
+  background: $component-background-default;
+
+  @include shadows-helper.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 {
+        @include icon-base.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-icons-vars.$dlt-c8y-icon-chevron-right;
+      }
+      &.previous:before {
+        content: dlt-c8y-icons-vars.$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) {
+        @include color-mixins.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 {
+        @include color-mixins.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 !optional;
+      padding-right: 8px;
+      padding-left: 8px;
+    }
+
+  }
+  &.form-group-lg{
+    .btn-default{
+      @extend .btn-lg !optional;
+    }
+    
+  }
+}
+
+.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{
+         @include buttons.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{
+         @include buttons.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);
+      }
+    }
+  }
+
+}

package/styles/{_datepicker.less → vendor/datepicker/_uib-datepicker.less}

@@ -38,12 +38,7 @@
   }
 }
 
-.c8y-datetime-picker {
-  .form-inline .form-group {
-    display: inline-block;
-    vertical-align: top;
-  }
-}
+// Removed unused deprecated component class - verified 0 usages: .c8y-datetime-picker
 
 .form-group.datepicker {
   position: relative;