@c8y/style 1023.17.20 → 1023.22.2

package/styles/components/specialized/_search-header.scss

@@ -0,0 +1,126 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/shadows-helper";
+
+
+/**
+ * search header - 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
+ */
+// main header search component
+.search-header-menu {
+  top: 92px;
+  max-width: calc(100vw - 364px);
+  min-width: 300px;
+  width: 100vw;
+  @include shadows-helper.boxShadowHelper(md, right);
+
+  .c8y-search-form .c8y-search-dropdown {
+    .input-group {
+      padding: $size-16;
+      background-color: $component-background-default;
+
+      .input-group-btn {
+        top: $size-16;
+        right: $size-16;
+        max-height: none;
+        height: auto;
+        bottom: $size-16;
+      }
+    }
+  }
+
+  c8y-typeahead {
+    .c8y-search-dropdown.dropdown .dropdown-menu {
+      position: relative;
+      width: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      padding-top: 0;
+      max-height: calc(100vh - 240px);
+      height: auto;
+      display: block;
+      box-shadow: none;
+      background-color: $component-background-default;
+    }
+
+    .input-group-dropdown {
+      .form-control {
+        border-radius: var(--c8y-form-control-height-base)!important;
+        border: 0;
+        height: auto;
+        padding: $size-16 54px $size-16 $size-24 !important;
+        background-color: $headerColor;
+        color: $header-text-color;
+        font-size: $font-size-large;
+        max-height: unset !important;
+      }
+    }
+
+    .input-group-btn {
+      .btn {
+        font-size: $size-20;
+        height: auto !important;
+        padding: 14px 16px;
+        color: $header-text-color;
+
+        &:hover {
+          color: $header-text-color-hover;
+        }
+      }
+    }
+
+    c8y-load-more {
+      padding: 0 16px;
+
+      >.c8y-list__item {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .search-header-menu {
+    top: $header-bar-height;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+.search-header-menu {
+  .app-main-header.open & {
+    max-width: calc(100vw - 400px);
+  }
+}
+@media (min-width: $grid-float-breakpoint) {
+  .search-header-menu {
+    .app-main-header.open & {
+      max-width: 800px;
+    }
+  }
+}
+
+.search-header-inline {
+  c8y-list-group.dropdown-menu {
+    width: unset !important;
+    min-width: 100%;
+  }
+
+  .c8y-list__item {
+    padding: 0 8px !important;
+    --c8y-component-padding: 4px;
+
+    .legend {
+      margin: 0;
+    }
+  }
+}

package/styles/{_smart-list-icon-label.less → components/specialized/_smart-list-icon-label.less}

@@ -13,7 +13,7 @@
   }
 
   .dot:last-child {
-    background-color: @status-success;
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
   }
 }
 

package/styles/components/specialized/_smart-list-icon-label.scss

@@ -0,0 +1,75 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * smart list icon lauel - 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
+ */
+.smart-list-icon-label {
+  display: inline-block;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  margin: 0 2px 10px;
+
+  > i {
+    display: inline-block;
+    width: auto;
+    color: $gray-50;
+  }
+
+  .dot:last-child {
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+  }
+}
+
+.card-header-actions,
+.edit-smart-rule-details {
+  .smart-list-icon-label {
+    margin: 0 $size-10 0 0;
+
+    .dot {
+      width: 30px;
+      height: 30px;
+      font-size: 14px;
+      line-height: $size-32;
+    }
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .interact-list {
+    .smart-list-icon-label {
+      margin: 0 2px;
+
+      .dot {
+        width: 34px;
+        height: 34px;
+        font-size: $size-16;
+        line-height: 36px;
+      }
+    }
+  }
+}
+
+.smart-rule-templates-list {
+  .smart-list-icon-label {
+    margin: $size-10 2px;
+
+    .dot {
+      width: 34px;
+      height: 34px;
+      font-size: $size-16;
+      line-height: 36px;
+    }
+  }
+}

package/styles/components/specialized/_static-assets-file-picker.scss

@@ -0,0 +1,23 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * static assets file picker - 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-static-assets-file-picker{
+  display: block;
+  padding: var(--c8y-root-component-padding-default);
+  border: 1px solid var(--c8y-form-control-border-color-default);
+  img{
+    border: 1px dashed var(--c8y-root-component-border-color);
+  }
+}

package/styles/{_status.less → components/specialized/_status.less}

@@ -1,13 +1,13 @@
 .statusOk {
-  color: @status-success-dark;
+  color: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
 }
 
 .statusNok {
-  color: @status-danger;
+  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
 }
 
 .statusAlert {
-  color: @status-warning;
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
 }
 
 .statusUnknown {
@@ -20,32 +20,32 @@
 }
 
 .status.warning {
-  color: @status-info;
+  color: var(--palette-status-info, var(--c8y-palette-status-info));
 }
 .color.warning {
-  color: @status-warning;
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
 }
 .color.minor {
-  color: @status-warning-high;
+  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
 }
 .status.minor {
   --c8y-icon-stroke-color: var(--c8y-palette-orange-10);
-  color: @status-warning-high;
+  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
 }
 
 .status.major {
-  color: @status-warning;
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
 }
 .color.major {
-  color: @status-warning;
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
 }
 
 .status.critical {
-  color: @status-danger;
+  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
 }
 
 .color.critical {
-  color: @status-danger;
+  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
 }
 
 // for svg

package/styles/components/specialized/_status.scss

@@ -0,0 +1,106 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * status - 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
+ */
+.statusOk {
+  color: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
+}
+
+.statusNok {
+  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+}
+
+.statusAlert {
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+}
+
+.statusUnknown {
+  color: $gray-40;
+}
+
+.sendStatus,
+.pushStatus {
+  fill: url(#smallGradient);
+}
+
+.status.warning {
+  color: var(--palette-status-info, var(--c8y-palette-status-info));
+}
+.color.warning {
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+}
+.color.minor {
+  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
+}
+.status.minor {
+  --c8y-icon-stroke-color: var(--c8y-palette-orange-10);
+  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
+}
+
+.status.major {
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+}
+.color.major {
+  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+}
+
+.status.critical {
+  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+}
+
+.color.critical {
+  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+}
+
+// for svg
+path.statusUnknown {
+  fill: $gray-50;
+  &.pushStatus {
+    fill: $gray-40;
+  }
+}
+
+path.statusOk {
+  fill: $status-success;
+  &.pushStatus {
+    fill: $status-success-dark;
+  }
+}
+
+path.statusNok {
+  fill: $status-danger;
+  &.pushStatus {
+    fill: $status-danger-dark;
+  }
+}
+
+.fill-warning {
+  fill: $status-warning;
+}
+
+.alarm-icons {
+  position: relative;
+  font-size: $size-20;
+  width: 28px;
+  .btn-clean.severity {
+    position: absolute !important;
+    top: 0;
+    left: 50%;
+    z-index: 10;
+  }
+  .btn-clean.status {
+    margin-top: 8px;
+    font-size: $size-24;
+  }
+}

package/styles/components/specialized/_statusContainer.scss

@@ -0,0 +1,62 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * statusContainer - 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
+ */
+.statusContainer {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 14px;
+  overflow: hidden;
+  height: $size-20;
+  width: $size-20;
+  border-radius: 50%;
+  border: 0;
+  background-image: none;
+  background-color: var(--c8y-palette-high);
+  padding: 0;
+  box-shadow: inset 0 0 0 1px $component-border-color;
+  .sendStatus,
+  .pushStatus {
+    line-height: 0;
+    display: block;
+  }
+
+  .sendStatus {
+    transform: translate(0,-2px);
+  }
+
+  .pushStatus {
+    transform: translate(0,3px);
+  }
+
+  .statusUnknown {
+    color: $gray-40;
+  }
+
+  .maintenanceStatus {
+    display: block;
+    margin: 0 auto;
+    line-height: 1;
+  }
+}
+
+.status-toggle {
+  .c8y-switch+a {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 34px;
+  }
+}

package/styles/core/buttons/_button-groups.scss

@@ -0,0 +1,202 @@
+@use "../../../variables/index" as *;
+@use "../../mixins/border-radius";
+@use "../../mixins/clearfix";
+
+/**
+ * Button Groups - Grouped button layouts (horizontal, vertical, justified)
+ *
+ * Note: Uses $size-* tokens for spacing and $btn-group-border-radius. Uses CSS custom properties for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Border/outline widths (2px): Standard borders
+ * - Outline-offset (-3px, -2px): Focus indicator positioning
+ * - Negative margins (-1px, -2px): Border overlap technique
+ * - Padding 12px (off-grid): Large button split dropdown specific
+ * - Z-index (2): Button stacking order
+ */
+
+// Make the div behave like a button
+// Removed unused button group variant from selector - verified 0 usages: .btn-group-vertical
+.btn-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  > .btn {
+    position: relative;
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &.selected {
+      z-index: 2;
+    }
+  }
+}
+
+.btn-group {
+  padding: 0;
+  .c8y-toolbar & {
+    padding: $size-4 $size-16;
+  }
+  .btn {
+    display: inline-block;
+    margin: 0;
+    min-width: 0;
+    width: auto;
+    // override active states inside the btn-group to match delite guidelines
+    &.active {
+      background-color: var(--c8y-btn-default-background-active);
+      color: var(--c8y-btn-default-color-active);
+    }
+    &.partial-active {
+      background-color: var(--c8y-palette-gray-90);
+      color: var(--c8y-brand-complementary);
+    }
+    &:focus {
+      outline: 2px solid $component-color-focus;
+      outline-offset: -3px;
+    }
+  }
+  &.btn-group-sm:not(.dropdown) {
+    .btn,
+    .btn-sm {
+      border-radius: $btn-group-border-radius;
+    }
+  }
+  // Prevent double borders when buttons are next to each other
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -2px;
+  }
+
+  // also when we're using the realtime button
+  c8y-realtime-control .btn {
+    border-left: 0;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  margin-left: calc(-1 * $size-5); // Offset the first child's margin
+
+  @include clearfix.clearfix();
+  .btn,
+  .btn-group,
+  .input-group {
+    float: left;
+  }
+  > .btn,
+  > .btn-group,
+  > .input-group {
+    margin-left: $size-5;
+  }
+}
+
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+  margin-left: 0;
+  &:not(:last-child):not(.dropdown-toggle) {
+    @include border-radius.border-right-radius(0);
+  }
+}
+
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+  @include border-radius.border-left-radius(0);
+}
+
+// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+.btn-group > .btn-group {
+  float: left;
+}
+
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+
+.btn-group > .btn-group:first-child:not(:last-child) {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    @include border-radius.border-right-radius(0);
+  }
+}
+
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  @include border-radius.border-left-radius(0);
+}
+
+// On active and open, don't show outline
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+// Sizing
+// Remix the default button sizing classes into new ones for easier manipulation.
+.btn-group-xs > .btn {
+  @extend .btn-xs !optional;
+}
+
+.btn-group-sm > .btn {
+  @extend .btn-sm !optional;
+}
+
+.btn-group-lg > .btn {
+  @extend .btn-lg !optional;
+}
+
+// Split button dropdowns
+// Give the line between buttons some depth
+.btn-group > .btn + .dropdown-toggle {
+  padding-right: $size-10;
+  padding-left: $size-8;
+}
+
+.btn-group.dropdown > .btn + .dropdown-toggle {
+  padding-right: $size-8;
+  padding-left: $size-8;
+}
+
+.btn-group:not(.dropdown) > .btn-lg + .dropdown-toggle {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+// Upside down carets for .dropup
+.dropup .btn-lg .caret {
+  transform: rotate(180deg);
+}
+
+// Removed unused button group variants - verified 0 usages:
+// .btn-group-vertical, .btn-group-justified
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+[data-toggle='buttons'] {
+  > .btn,
+  > .btn-group > .btn {
+    input[type='radio'],
+    input[type='checkbox'] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}