@c8y/style 1023.14.33 → 1023.14.37

package/styles/components/specialized/_c8y-scrollbar.scss

@@ -0,0 +1,82 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/c8y-scrollbar";
+
+
+/**
+ * c8y scrolluar - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+.navigatorContent,
+.c8y-right-drawer {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    transition: all 0.5s ease;
+  }
+  &::-webkit-scrollbar-track {
+    background: $navigator-scrollbar-track-color;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $navigator-scrollbar-thumb-color;
+  }
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background: $navigator-scrollbar-thumb-color-hover;
+    }
+  }
+}
+
+.panel.panel-dashboard > .panel-heading + .panel-body,
+.panel.panel-dashboard > .panel-heading + .fixed-header + .panel-body,
+.modal-inner-scroll-sm,
+.modal-inner-scroll,
+.card-inner-scroll,
+.data-grid__dropdown,
+.dropdown-menu-action-bar,
+.user-picker-scroll,
+.multiselect-item-container,
+.c8y-list__group.dropdown-menu,
+.selectize-dropdown-content,
+.inner-scroll,
+.table-data-grid-scroll,
+.flex-scroll .flex-content-scroll,
+.card--grid__inner-scroll,
+.panel-inner-scroll {
+  overflow: auto;
+
+  @include c8y-scrollbar.c8y-scrollbar();
+}
+
+.table-responsive {
+  @include c8y-scrollbar.c8y-scrollbar();
+}
+
+// avoid double scrollbars in dashboard widgets
+.card-inner-scroll .card-inner-scroll {
+  overflow: visible;
+  padding: 0;
+  > p {
+    padding: 0;
+  }
+}
+
+/* fix for firefox position sticky bottom bug
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
+ Note: @-moz-document is not supported in Dart Sass, commented out
+*/
+// @media (min-width: $screen-md-min) {
+//   @-moz-document url-prefix() {
+//     .ff-scroll-fix {
+//       padding-bottom: 64px !important;
+//     }
+//   }
+// }

package/styles/components/specialized/_c8y-smart-rest-tab.scss

@@ -0,0 +1,75 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/vendor-prefixes";
+
+
+/**
+ * c8y smart rest tab - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+.c8y-smart-rest-tab {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 100%;
+  flex: 1 1 100%;
+  padding: $size-20;
+  background-color: $component-background-default;
+  box-shadow: 0 1px 1px rgba($black, 0.1);
+  @include vendor-prefixes.transition(all 0.25s ease-in-out);
+  .row {
+    display: block;
+    margin-right: calc(-1 * $size-5);
+    margin-left: calc(-1 * $size-5);
+    > [class^='col-xs-'],
+    > [class*=' col-xs'],
+    > [class^='col-sm-'],
+    > [class*=' col-sm'],
+    > [class^='col-md-'],
+    > [class*=' col-md'],
+    > [class^='col-lg-'],
+    > [class*=' col-lg'] {
+      padding-right: $size-5;
+      padding-left: 5px;
+    }
+  }
+}
+
+.smart-rest-editor {
+  @media (max-width: $screen-sm-max) {
+    position: relative;
+    .col-xs-12 {
+      position: static;
+    }
+    .c8y-smart-rest-tab {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      width: 100%;
+    }
+  }
+  @media (max-width: $screen-xs-max) {
+    .c8y-smart-rest-tab {
+      right: -15px;
+      left: -15px;
+      padding-right: 30px;
+      padding-left: 30px;
+      width: auto;
+    }
+  }
+}
+
+.smart-rest-csv-viewer,
+.smart-rest-request-editor {
+  code {
+    background-color: transparent;
+    color: $gray-50;
+  }
+}

package/styles/{_c8y-stepper.less → components/specialized/_c8y-stepper.less}

@@ -67,17 +67,17 @@
     color: @component-background-active;
   }
   &.step-done {
-    background-color: @status-success;
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
     box-shadow: none;
     color: @palette-high;
   }
   &.step-error {
-    background-color: @status-danger;
+    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
     box-shadow: none;
     color: @palette-high;
   }
   &.step-warning {
-    background-color: @status-warning;
+    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
     box-shadow: none;
     color: @palette-high;
   }

package/styles/components/specialized/_c8y-stepper.scss

@@ -0,0 +1,110 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * c8y stepper - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+.c8y-stepper {
+  position: relative;
+  display: flex;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: $size-base;
+  list-style: none;
+
+  &:before {
+    position: absolute;
+    top: 50%;
+    right: 2rem;
+    left: 2rem;
+    z-index: 0;
+    border-top: 2px solid $component-border-color;
+    content: '';
+  }
+  > li {
+    position: relative;
+    margin-right: auto;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  &:not([class*='col-']) {
+    margin: 0;
+  }
+}
+
+.c8y-step__label {
+  position: absolute;
+  left: 50%;
+  display: none;
+  overflow: hidden;
+  margin-top: 4px;
+  max-width: 120px;
+  color: $text-muted;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: $font-size-small;
+  transform: translateX(-50%);
+  @media (min-width: $screen-sm-min) {
+    display: block;
+  }
+}
+
+.active + .c8y-step__label {
+  color: $text-color;
+  font-weight: 500;
+}
+
+.c8y-step {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 50%;
+  background-color: $component-background-default;
+  background-image: none;
+  box-shadow: inset 0 0 0 1px $component-border-color;
+  &.active {
+    border-width: 3px;
+    background-color: $component-color-active;
+    box-shadow: none;
+    color: $component-background-active;
+  }
+  &.step-done {
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+    box-shadow: none;
+    color: $palette-high;
+  }
+  &.step-error {
+    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+    box-shadow: none;
+    color: $palette-high;
+  }
+  &.step-warning {
+    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+    box-shadow: none;
+    color: $palette-high;
+  }
+  &:focus {
+    outline: none;
+  }
+  .c8y-stepper--no-btns & {
+    pointer-events: none;
+  }
+}
+
+c8y-select-step-frame,
+c8y-preview-selection-frame {
+  display: contents;
+}

package/styles/{_c8y-user-roles.less → components/specialized/_c8y-user-roles.less}

@@ -7,13 +7,13 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  color: @brand-10;
+  color: var(--brand-10, var(--c8y-brand-10));
   vertical-align: middle;
   text-align: center;
   text-transform: capitalize;
   font-size: 16px;
   line-height: 1;
-  background-color: @brand-60;
+  background-color: var(--brand-60, var(--c8y-brand-60));
   .owned &,
   .list-group-item & {
     width: 30px;
@@ -66,7 +66,7 @@
     [class*=' dlt-c8y-icon-'] {
       .transition(transform 0.25s ease); //float: right;
       &.open {
-        color: @brand-primary;
+        color: var(--brand-primary, var(--c8y-brand-primary));
 
         .rotate(180deg);
       }
@@ -227,7 +227,6 @@
         z-index: -1;
         height: 10px;
         background-color: @component-background-default;
-        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
         content: '';
       }
@@ -252,7 +251,7 @@
     [class*=' dlt-c8y-icon-'] {
       .rotate(-90deg);
       &.open {
-        color: @brand-primary;
+        color: var(--brand-primary, var(--c8y-brand-primary));
 
         .rotate(0deg);
       }
@@ -271,7 +270,7 @@
     display: block;
   }
   &.selected {
-    background-color: @status-success!important;
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success))!important;
     color: @component-background-default;
     .col-expand,
     .col-expand .open[class^='dlt-c8y-icon-'],
@@ -284,7 +283,7 @@
     }
     .user-dot:not(.user-disabled) {
       background-color: @component-background-default;
-      color: @brand-primary;
+      color: var(--brand-primary, var(--c8y-brand-primary));
     }
   }
 }

package/styles/components/specialized/_c8y-user-roles.scss

@@ -0,0 +1,351 @@
+@use "../../../variables/index" as *;
+
+@use "sass:string";
+@use "../../mixins/shadows-helper";
+@use "../../mixins/vendor-prefixes";
+
+
+/**
+ * c8y user roles - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+.user-dot {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 30px;
+  margin-right: $size-10;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  color: var(--brand-10, var(--c8y-brand-10));
+  vertical-align: middle;
+  text-align: center;
+  text-transform: capitalize;
+  font-size: $size-16;
+  line-height: 1;
+  background-color: var(--brand-60, var(--c8y-brand-60));
+  .owned &,
+  .list-group-item & {
+    width: 30px;
+    height: 30px;
+    font-size: $size-16;
+    line-height: $size-32;
+  }
+  &.user-disabled {
+    background-color: $gray-80;
+  }
+}
+
+.user-list-row {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: calc($size-base * 2);
+  padding: $size-16;
+  border-radius: $component-border-radius-base;
+  background-color: $component-background-default;
+
+  @include shadows-helper.boxShadowHelper(sm);
+  @media (max-width: $screen-sm-max) {
+    box-shadow: var(--c8y-elevation-sm);
+  }
+  &:first-child {
+    margin-top: 0;
+  }
+  .col-actions .c8y-dropdown {
+    color: $component-color-actions;
+    opacity: $component-actions-opacity;
+    &:hover,
+    .open.dropdown & {
+      opacity: 1;
+    }
+  }
+  &.user-list-header {
+    display: none;
+    padding: 0;
+    min-height: $size-24;
+    background-color: transparent;
+  }
+  .col-expand {
+    order: 100;
+    width: 30px;
+    @media (max-width: $screen-sm-max) {
+      width: 100% !important;
+      text-align: center;
+    }
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      @include vendor-prefixes.transition(transform 0.25s ease); //float: right;
+      &.open {
+        color: var(--brand-primary, var(--c8y-brand-primary));
+
+        @include vendor-prefixes.rotate(180deg);
+      }
+    }
+  }
+  .col-subaccounts {
+    display: none;
+  }
+  .col-selector {
+    display: none;
+    font-size: $size-20;
+  }
+  .col-globalroles {
+    order: 10;
+    margin: $size-base 0;
+    padding: $size-4 0;
+    width: 100%;
+    .c8y-child-assets-selector .dropdown-menu.multiselect-container {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+  .col-passwordstrength,
+  .col-twofactorauth {
+    display: none;
+  }
+  .col-username {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    order: 1;
+    margin-bottom: $size-10;
+    @media (max-width: $screen-md-min) {
+      width: calc(string.unquote('100% - 24px')) !important;
+    }
+    .h4 {
+      margin: 0;
+    }
+  }
+  .col-actions {
+    order: 2;
+    margin: calc($size-16 * -1) calc($size-16 * -1) 0 0;
+    margin-left: auto;
+  }
+  .col-fullname {
+    order: 4;
+  }
+  &.owned {
+    margin-top: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  .disabled {
+    padding-right: $size-5;
+    color: $state-danger-text;
+    font-style: italic;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .user-list-row.user-list-header {
+    display: flex;
+    padding-right: $size-40;
+    box-shadow: none;
+  }
+  .user-list-row {
+    position: relative;
+    align-items: center;
+    flex-flow: row wrap;
+    margin-top: $size-base;
+    padding: 6px $size-40 $size-10 0;
+    min-height: calc($size-base * 7);
+    &.page-sticky-header {
+      padding-top: 0;
+      padding-bottom: 0;
+      min-height: calc($size-base * 6);
+    }
+
+    .col-expand {
+      order: 0;
+      text-align: center;
+      [class^='dlt-c8y-icon-'],
+      [class*=' dlt-c8y-icon-'] {
+        @include vendor-prefixes.rotate(-90deg);
+        &.open {
+          @include vendor-prefixes.rotate(0deg);
+        }
+      }
+    }
+    .col-selector {
+      display: block;
+      flex: 0 0 50px;
+    }
+    .col-username {
+      flex: 0 0 auto;
+      margin: 0;
+      padding-right: $size-10;
+      width: 250px;
+      .h4 {
+        font-size: 100%;
+      }
+    }
+    .col-subaccounts {
+      display: block;
+      flex: 0 0 30px;
+      order: 2;
+    }
+    .col-fullname {
+      flex: 0 0 auto;
+      order: 5;
+      margin: 0;
+      padding-right: $size-10;
+      width: 230px;
+    }
+    .col-globalroles {
+      flex: 0 0 240px;
+      order: 7;
+      margin: 0;
+      padding: 0;
+      max-width: 240px;
+      border: 0;
+      .c8y-child-assets-selector {
+        display: block;
+      }
+    }
+    .col-passwordstrength {
+      display: block;
+      flex: 0 0 72px;
+      order: 10;
+      margin-left: auto;
+    }
+    .col-twofactorauth {
+      display: block;
+      flex: 0 0 20px;
+      order: 10;
+    }
+    .col-actions {
+      position: absolute;
+      top: $size-4;
+      right: 0;
+      flex: 0 0 40px;
+      order: 100;
+      margin: 0 0 0 auto;
+      width: $size-40;
+    }
+    &.owns {
+      margin-bottom: calc($size-base * 2);
+      .tip {
+        position: relative;
+        flex: 0 0 100%;
+        order: 900;
+        height: 0;
+      }
+      .tip:not(.expanded):after {
+        position: absolute;
+        top: 5px;
+        right: -35px;
+        left: 5px;
+        z-index: -1;
+        height: $size-10;
+        background-color: $component-background-default;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
+        content: '';
+      }
+      + .owned {
+        margin-top: calc($size-base * -2);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+    }
+    &.owned {
+      margin-top: 1px;
+    }
+  }
+}
+
+.list-group-item.user {
+  .col-expand {
+    display: inline-block;
+    padding-right: $size-5;
+    width: $size-20;
+    text-align: center;
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      @include vendor-prefixes.rotate(-90deg);
+      &.open {
+        color: var(--brand-primary, var(--c8y-brand-primary));
+
+        @include vendor-prefixes.rotate(0deg);
+      }
+    }
+  }
+  .selection-icon {
+    display: none;
+    margin-left: auto;
+    font-size: $size-20;
+  }
+  input[type='checkbox'] {
+    width: 0;
+    opacity: 0;
+  }
+  input[type='checkbox']:checked ~ .selection-icon {
+    display: block;
+  }
+  &.selected {
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success))!important;
+    color: $component-background-default;
+    .col-expand,
+    .col-expand .open[class^='dlt-c8y-icon-'],
+    .col-expand .open[class*=' dlt-c8y-icon-'] {
+      color: $component-background-default;
+    }
+
+    .text-muted {
+      color: rgba($component-background-default, 0.5);
+    }
+    .user-dot:not(.user-disabled) {
+      background-color: $component-background-default;
+      color: var(--brand-primary, var(--c8y-brand-primary));
+    }
+  }
+}
+
+.item-list-row,
+.list-group-item.item-list-row {
+  display: flex;
+  align-items: center;
+  &:first-child {
+    border-top: 0;
+  }
+  c8y-app-icon {
+    font-size: 30px;
+    line-height: 30px;
+    .app-noicon {
+      margin-bottom: -7px;
+      width: 30px;
+      height: 30px;
+      font-size: 18px;
+      line-height: 30px;
+    }
+  }
+  > label:not(.c8y-checkbox) {
+    flex: 1 1 100%;
+    margin-bottom: 0;
+    text-transform: none;
+    letter-spacing: 0;
+    font-weight: normal;
+    font-size: 100%;
+    line-height: 1;
+    cursor: pointer;
+
+    overflow-wrap: break-word;
+  }
+}
+
+.user-picker-scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0;
+  max-height: 190px;
+
+  .list-group {
+    margin-bottom: 0;
+  }
+}

package/styles/{_c8y-utils.less → components/specialized/_c8y-utils.less}

@@ -65,9 +65,6 @@ nvd3-multi-bar-chart svg{
 
 // label inside checkbox
 .checkbox label {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }