@c8y/style 1023.14.33 → 1023.14.37

package/styles/components/specialized/_c8y-message-banner.scss

@@ -0,0 +1,52 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * c8y message uanner - 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-message-banner{
+  position: fixed;
+  z-index: 10000;
+  width: 100%;
+  pointer-events: none;
+  .alert{
+    margin: $size-16 auto;
+    box-shadow: var(--c8y-elevation-lg);
+    pointer-events: auto;
+    .close{
+      margin: calc(-1 * $size-4) calc(-1 * $size-4) 0 $size-8;
+    }
+    > span{
+      white-space: normal;
+    }
+    &.alert-info{
+      background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
+      border: 2px solid var(--palette-status-info, var(--c8y-palette-status-info));
+    }
+    &.alert-warning{
+      background-color: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
+      border: 2px solid var(--palette-status-warning, var(--c8y-palette-status-warning));
+    }
+    &.alert-danger{
+      background-color: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
+      border: 2px solid var(--palette-status-danger, var(--c8y-palette-status-danger));
+    }
+    &.alert-success{
+      background-color: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
+      border: 2px solid var(--palette-status-success, var(--c8y-palette-status-success));
+    }
+    &.alert-system{
+      background-color: var(--brand-80, var(--c8y-brand-80));
+      border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/vendor-prefixes";
+
+
+/**
+ * c8y pulse - 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-pulse {
+  position: relative;
+  display: inline-block !important;
+  margin: 0 5px 0 0 !important;
+  width: $size-8;
+  height: 8px;
+  border-radius: 50%;
+  background: $component-pulse-color;
+  &.inactive{
+    &::before{
+      background: $component-color-disabled;
+    }
+  }
+  &:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: 50%;
+    background-color: $component-pulse-color;
+    content: '';
+    transform: rotateZ(360deg);
+  }
+  &.active{
+    border: 1px solid $component-background-default;
+    background-color: $component-pulse-color;
+    &:before {
+      animation: c8ypulse 2s infinite;
+    }
+  }
+  &--md{
+    width: $size-16;
+    height: $size-16;
+    &.active {
+      border: 1px solid $component-background-default;
+      background-color: $component-pulse-color;
+      &:before {
+        animation: c8ypulse 2s infinite;
+      }
+    }
+  }
+  &--lg{
+    width: $size-24;
+    height: $size-24;
+    &.active {
+      border: 1px solid $component-background-default;
+      background-color: $component-pulse-color;
+      &:before {
+        animation: c8ypulse 2s infinite;
+      }
+    }
+  }
+}
+
+.c8y-realtime {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+  .c8y-pulse.inactive {
+    border: 1px solid $component-color-disabled;
+    background-color: $component-color-disabled;
+    animation: none;
+
+    @include vendor-prefixes.transition(border 0.25s ease);
+    &:before {
+      display: none;
+    }
+  }
+  .c8y-pulse.active {
+    border: 1px solid $component-background-default;
+    background-color: $component-pulse-color;
+    &:before {
+      animation: c8ypulse 2s infinite;
+    }
+  }
+}
+
+
+
+
+
+@keyframes c8ypulse {
+  0% {
+    opacity: 1;
+    transform: rotateZ(360deg);
+    transform: scale(1);
+  }
+  70% {
+    opacity: 0;
+    transform: rotateZ(0);
+    transform: scale(3);
+  }
+  100% {
+    opacity: 0;
+    transform: rotateZ(0);
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,237 @@
+@use "sass:math";
+@use "../../../variables/index" as *;
+
+@use "../../mixins/shadows-helper";
+@use "../../mixins/tab-focus";
+
+
+/**
+ * c8y range - 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
+ */
+@mixin track() {
+  width: $track-width;
+  height: $track-height;
+  border-radius: $track-radius;
+  box-shadow: inset 0 0 0 1px $form-control-border-color-default;
+  cursor: pointer;
+}
+
+@mixin thumb() {
+  width: $thumb-width;
+  height: $thumb-height;
+  border: 0;
+  border-radius: $thumb-radius;
+  background: $component-background-default;
+  box-shadow:
+    inset 0 0 0 1px $form-control-border-color-default,
+    1px 1px 1px rgba(0, 0, 0, 0.1),
+    0 0 1px rgba(13, 13, 13, 0.1);
+  cursor: pointer;
+  .range-wrap.inline & {
+    opacity: 0;
+  }
+}
+
+// Generic input type="range" styling
+input[type='range'] {
+  margin: 0;
+  width: $track-width;
+  height: $track-height;
+  border-radius: $track-radius;
+  box-shadow: inset 0 0 0 1px $form-control-border-color-default;
+  -webkit-appearance: none;
+  appearance: none;
+  align-self: center;
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  // webkit
+  &::-webkit-slider-runnable-track {
+    @include track();
+    border: 0;
+    background: linear-gradient(
+      90deg,
+      $component-brand-primary var(--track-width, 0),
+      $component-background-default var(--track-width, 0)
+);
+    transition: all 0.2s ease;
+  }
+
+  &::-webkit-slider-thumb {
+    margin-top: math.div((-$track-border-width * 2 + $track-height), 2) - math.div($thumb-height, 2);
+
+    @include thumb();
+    -webkit-appearance: none;
+  }
+
+  &:focus::-webkit-slider-thumb {
+    box-shadow: inset 0 0 0 2px $track-focus-color;
+  }
+
+  // Mozilla
+  &::-moz-range-track {
+    @include track();
+    border: 0;
+    background: linear-gradient(
+      90deg,
+      $component-brand-primary var(--track-width, 0),
+      $component-background-default var(--track-width, 0)
+);
+    transition: all 0.2s ease;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb();
+  }
+
+  &:focus::-moz-range-thumb {
+    box-shadow: inset 0 0 0 2px $track-focus-color;
+  }
+
+  //Internet explorer
+  &::-ms-track {
+    @include track();
+    border-width: $thumb-width 0;
+    border-color: transparent;
+    background: transparent;
+    color: transparent;
+  }
+
+  &::-ms-fill-lower {
+    border: 0;
+    border-radius: $track-radius*2;
+    background: $component-brand-primary;
+    box-shadow: inset 0 1px 2px $component-border-color;
+  }
+
+  &::-ms-fill-upper {
+    border: $track-border-width solid $track-border-color;
+    border-radius: $track-radius*2;
+    background: $track-color;
+    box-shadow: inset 0 1px 2px $component-border-color;
+  }
+
+  &::-ms-thumb {
+    @include thumb();
+  }
+}
+
+// disabled
+input[type='range'][disabled] {
+  opacity: 0.5;
+  cursor: not-allowed !important;
+}
+
+.range-wrap {
+  position: relative;
+  height: $form-control-height-base;
+  display: flex;
+  align-items: center;
+  .form-group-sm & {
+    height: $form-control-height-sm;
+  }
+  &.start,
+  &.end {
+    display: flex;
+    flex-direction: row;
+    gap: $size-base;
+  }
+  &.inline:has(input[type='range']:focus) {
+    .range-value > span {
+      @include tab-focus.c8y-focus-inset();
+    }
+  }
+}
+
+.range-wrap input[type='range'] {
+  width: 100%;
+}
+
+.range-value {
+  position: absolute;
+  height: calc($size-base * 3);
+  top: 0;
+  transform: translateY(-19px);
+
+  .range-wrap.inline & {
+    top: 50%;
+    transform: translateY(calc(-50% + -1px));
+  }
+  .range-wrap:not(.start):not(.end) & {
+    > span,
+    > div {
+      position: absolute;
+      left: 50%;
+      display: block;
+      padding: 0 8px;
+      width: auto;
+      height: calc($size-base * 3);
+      border: 1px solid $popover-border-color;
+      border-radius: 4px;
+      background: $component-background-default;
+      text-align: center;
+      white-space: nowrap;
+      font-size: $font-size-small;
+      line-height: 23px;
+      transform: translate(-50%, 0);
+      @include shadows-helper.boxShadowHelper(sm);
+      pointer-events: none;
+    }
+  }
+  .range-wrap.start &,
+  .range-wrap.end & {
+    position: static;
+    flex-shrink: 0;
+    height: auto;
+    transform: none;
+    > span:after,
+    > span:before {
+      display: none;
+    }
+  }
+  .range-wrap.start & {
+    order: 0;
+  }
+  .range-wrap.end & {
+    order: 10;
+  }
+}
+
+.range-value > span:after,
+.range-value > span:before {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-top: -1px;
+  width: 0;
+  height: 0;
+  border-top: 6px solid $component-background-default;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  content: '';
+  transform: translateX(-50%);
+  .range-wrap.inline & {
+    display: none;
+  }
+}
+
+.range-value > span:before {
+  margin-top: 0;
+  border-top: 6px solid $popover-border-color;
+}
+

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

@@ -18,11 +18,7 @@
     top: 0;
     right: 0;
   }
-  .bottom-right-info {
-    position: absolute;
-    right: 20px;
-    bottom: 20px;
-  }
+  // Removed unused positioning utility - verified 0 usages: .bottom-right-info
 }
 
 .card-row-add-remove {
@@ -42,23 +38,7 @@
     left: 100%;
     min-width: 80px;
   }
-  .btn-add,
-  .btn-remove {
-    padding: 6px 10px;
-    width: 40px;
-    font-size: 16px;
-  }
-  .btn-remove:hover .text-muted {
-    color: @status-danger;
-  }
-  .btn-add {
-    display: none;
-  }
-  &:last-child {
-    .btn-add {
-      display: inline-block;
-    }
-  }
+  // Removed unused button selectors - verified 0 usages: .btn-add, .btn-remove
   @media (min-width: @grid-float-breakpoint) {
     .form-group + .form-group {
       margin-left: 10px;

package/styles/components/specialized/_c8y-role-card.scss

@@ -0,0 +1,68 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/vendor-prefixes";
+
+
+/**
+ * c8y role card - 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
+ */
+.role-card {
+  position: relative;
+  padding-bottom: $size-40;
+
+  @include vendor-prefixes.transition(all 0.25s ease-in-out);
+  &:hover {
+    z-index: 1;
+    box-shadow: 0 $size-20 15px rgba(0, 0, 0, 0.1);
+    transform: scale(1.05);
+  }
+  h4 {
+    margin: 0;
+    letter-spacing: -0.03em;
+    font-weight: 200;
+  }
+  .card-actions {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  // Removed unused positioning utility - verified 0 usages: .bottom-right-info
+}
+
+.card-row-add-remove {
+  position: relative;
+  margin-right: 80px;
+  margin-bottom: 1px;
+  padding: $size-10 $component-padding;
+  min-height: 54px;
+  background-color: $component-background-default;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  label {
+    margin-bottom: 0;
+  }
+  .add-remove-btns {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    min-width: 80px;
+  }
+  // Removed unused button selectors - verified 0 usages: .btn-add, .btn-remove
+  @media (min-width: $grid-float-breakpoint) {
+    .form-group + .form-group {
+      margin-left: $size-10;
+    }
+    .add-remove-btns {
+      top: $size-10;
+      display: flex;
+    }
+  }
+}

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

@@ -146,11 +146,7 @@ c8y-schema-form.generic-ui {
     }
   }
 
-  .c8y-checkbox.no-label {
-    span + span {
-      display: none;
-    }
-  }
+  // Removed unused label utility - verified 0 usages: .no-label
 }
 
 .schema-form-grid {

package/styles/components/specialized/_c8y-schema-form.scss

@@ -0,0 +1,193 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * c8y schema form - 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-schema-form.widget {
+  padding-top: $size-16;
+
+  // Note: list-group() mixin doesn't exist, removed during LESS to SCSS migration
+  // @include list-group();
+  bootstrap-decorator,
+  sf-decorator {
+    display: block;
+    margin-bottom: 0;
+    .form-group,
+    .legend,
+    .help-block {
+      padding-right: $size-16;
+      padding-left: $size-16;
+    }
+    .form-group {
+      margin-bottom: -1px;
+      padding: 3px $size-16 $size-20;
+
+      .form-control[disabled],
+      .form-control[readonly],
+      fieldset[disabled] .form-control {
+        color: $text-color;
+      }
+    }
+  }
+  bootstrap-decorator + ng-form {
+    display: block;
+    margin-bottom: 0; //.list-group-item();
+    > .form-group {
+      margin-bottom: 0;
+      padding: 3px $size-16 $size-20;
+      .form-control[disabled],
+      .form-control[readonly],
+      fieldset[disabled] .form-control {
+        color: $text-color;
+      }
+    }
+  }
+  bootstrap-decorator {
+    .legend {
+      margin-top: $size-20;
+      margin-bottom: $size-8;
+    }
+  }
+  sf-decorator {
+    .legend {
+      margin-top: 0;
+      margin-bottom: 7px;
+      padding-top: 8px;
+      background-color: $component-background-default;
+      color: $form-label-color;
+      &.form-block {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.form-read-only {
+    sf-decorator,
+    bootstrap-decorator {
+      min-height: 0;
+      height: auto;
+    }
+    .form-group {
+      display: flex;
+      align-items: center;
+      flex-flow: row wrap;
+      padding: 3px $size-16;
+      label {
+        flex: 1 0 30%;
+        margin: 0 $size-8 0 0;
+        line-height: 1.3;
+        align-self: flex-start;
+      }
+      label + div,
+      .form-control,
+      .text-pre-wrap {
+        flex: 1 1 60%;
+        padding: 0 !important;
+        height: auto;
+        background-color: transparent;
+        text-overflow: ellipsis;
+        .dashboard & {
+          color: inherit;
+        }
+      }
+      .help-block {
+        margin: 0;
+        width: 100%;
+      }
+
+      &.datepicker {
+        padding: 0;
+        .form-control {
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+        [uib-datepicker-popup-wrap] {
+          display: none;
+        }
+      }
+      &.timepicker {
+        padding: 0;
+        .form-group.uib-time {
+          padding: 0;
+          .form-control {
+            width: $size-20;
+            cursor: not-allowed;
+            pointer-events: none;
+          }
+        }
+      }
+    }
+    .schema-form-checkbox {
+      padding: 0 0 $size-16 16px !important;
+    }
+    .schema-form-textarea {
+      padding: $size-16;
+    }
+    .c8y-schema-form-empty {
+      display: none;
+    }
+  }
+  bootstrap-decorator > fieldset > sf-decorator:last-child {
+    padding-bottom: 0;
+    border-bottom: 0;
+    & .schema-form-checkbox {
+      padding: 0 0 $size-16 16px !important;
+    }
+  }
+}
+
+c8y-schema-form.generic-ui {
+  .form-group {
+    margin-bottom: 0;
+    .help-block {
+      margin: 0;
+    }
+  }
+  .c8y-checkbox {
+    display: flex;
+    input + span {
+      margin-right: $size-base;
+    }
+  }
+
+  // Removed unused label utility - verified 0 usages: .no-label
+}
+
+.schema-form-grid {
+  display: grid;
+  margin: 0 -1rem;
+  > div,
+  > div > ng-form {
+    display: contents;
+  }
+  bootstrap-decorator {
+    padding: 0 1rem;
+  }
+
+  bootstrap-decorator:first-child:last-child {
+    display: contents;
+    padding: 0;
+    > fieldset {
+      display: contents;
+    }
+    sf-decorator {
+      padding: 0 1rem;
+    }
+  }
+}
+
+.schema-form-checkbox {
+  padding-bottom: $size-base;
+}