@c8y/style 1023.14.33 → 1023.14.36

package/styles/utilities/_borders.scss

@@ -0,0 +1,137 @@
+@use "../../variables/index" as *;
+
+/**
+ * Border Utility Classes
+ *
+ * Note: Uses $size-* tokens for border-radius and $component-border-color for colors.
+ *
+ * Intentionally hardcoded values:
+ * - 1px border widths: Standard border width, not spacing
+ */
+
+.border-all {
+  border: 1px solid $component-border-color !important;
+  border-radius: $size-4 !important;
+}
+.border-top {
+  border-top: 1px solid $component-border-color !important;
+}
+.border-bottom {
+  border-bottom: 1px solid $component-border-color !important;
+}
+.border-left {
+  border-left: 1px solid $component-border-color !important;
+}
+.border-right {
+  border-right: 1px solid $component-border-color !important;
+}
+.border-all {
+  border: 1px solid $component-border-color !important;
+  border-radius: $size-4 !important;
+}
+
+//media queries
+@media (max-width: $screen-xs-max) {
+  .border-all-xs {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+  .border-top-xs {
+    border-top: 1px solid $component-border-color !important;
+  }
+  .border-bottom-xs {
+    border-bottom: 1px solid $component-border-color !important;
+  }
+  .border-left-xs {
+    border-left: 1px solid $component-border-color !important;
+  }
+  .border-right-xs {
+    border-right: 1px solid $component-border-color !important;
+  }
+  .border-all-xs {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .border-all-sm {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+  .border-top-sm {
+    border-top: 1px solid $component-border-color !important;
+  }
+  .border-bottom-sm {
+    border-bottom: 1px solid $component-border-color !important;
+  }
+  .border-left-sm {
+    border-left: 1px solid $component-border-color !important;
+  }
+  .border-right-sm {
+    border-right: 1px solid $component-border-color !important;
+  }
+  .border-all-sm {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .border-all-md {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+  .border-top-md {
+    border-top: 1px solid $component-border-color !important;
+  }
+  .border-bottom-md {
+    border-bottom: 1px solid $component-border-color !important;
+  }
+  .border-left-md {
+    border-left: 1px solid $component-border-color !important;
+  }
+  .border-right-md {
+    border-right: 1px solid $component-border-color !important;
+  }
+  .border-all-md {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .border-all-lg {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+  .border-top-lg {
+    border-top: 1px solid $component-border-color !important;
+  }
+  .border-bottom-lg {
+    border-bottom: 1px solid $component-border-color !important;
+  }
+  .border-left-lg {
+    border-left: 1px solid $component-border-color !important;
+  }
+  .border-right-lg {
+    border-right: 1px solid $component-border-color !important;
+  }
+  .border-all-lg {
+    border: 1px solid $component-border-color !important;
+    border-radius: $size-4 !important;
+  }
+}
+
+.borderless {
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+
+// Removed unused border-radius utilities - verified 0 usages:
+// .b-r-8, .b-r-24, .b-r-32, .b-r-40
+
+.b-r-16 {
+  border-radius: $size-16 !important;
+}

package/styles/utilities/_caret.scss

@@ -0,0 +1,50 @@
+@use "../../variables/index" as *;
+
+@use "../icons/c8y-glyphs";
+@use "../mixins/icon-base";
+
+/**
+ * Caret Icons - Dropdown arrow indicators
+ *
+ * Note: Uses $size-4, $size-5 for positioning and $form-control-icon-color for color.
+ *
+ * Intentionally hardcoded values:
+ * - -2px margin: Fine-tuning vertical alignment
+ * - 0.8em width: Relative sizing for icon container
+ * - 18px font-size: Icon size
+ * - Transform values: Positioning calculations
+ */
+
+// Dropdown arrow caret
+.caret {
+  position: relative;
+  display: inline-block;
+  margin-top: -2px;
+  width: 0.8em;
+  vertical-align: inherit;
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: $size-4;
+    z-index: 2;
+    color: $form-control-icon-color;
+    content: c8y-glyphs.$c8y-glyph-caret;
+    font-size: 18px;
+    transform: translate(0, -50%);
+    pointer-events: none;
+    @include icon-base.c8y-glyph;
+  }
+}
+
+.dropdown-caret:after {
+  position: absolute;
+  top: 50%;
+  right: $size-5;
+  z-index: 2;
+  color: $form-control-icon-color;
+  content: c8y-glyphs.$c8y-glyph-caret;
+  font-size: 18px;
+  transform: translate(0, -50%);
+  pointer-events: none;
+  @include icon-base.c8y-glyph;
+}

package/styles/utilities/_container-queries.scss

@@ -0,0 +1,113 @@
+@use "../../variables/index" as *;
+
+/**
+ * Container Query Utilities
+ *
+ * Note: Uses $font-size-xs and $text-muted tokens.
+ *
+ * Intentionally hardcoded values:
+ * - 350px, 440px, 500px: Container query breakpoints
+ * - 100%: Full width for responsive columns
+ */
+
+//********************
+// 350px
+//********************
+
+.c8y-cq-350 {
+  container-type: inline-size;
+  container-name: c8y-cq-350;
+}
+
+@container c8y-cq-350 (max-width: 350px) {
+
+  .c8y-list--timeline__item .d-flex {
+    flex-direction: column !important;
+  }
+
+  .c8y-list--timeline__item [class^='col-'],
+  .c8y-list--timeline__item [class*=' col-'] {
+    float: none;
+    width: 100% !important;
+
+    &:before {
+      display: block;
+      content: attr(data-label) !important;
+      font-size: $font-size-xs;
+      text-transform: uppercase;
+      color: $text-muted;
+    }
+  }
+
+  .hidden-cq {
+    display: none !important;
+  }
+}
+
+//********************
+// 440px
+//********************
+
+.c8y-cq-440 {
+  container-type: inline-size;
+  container-name: c8y-cq-440;
+}
+
+@container c8y-cq-440 (max-width: 440px) {
+
+  .c8y-list--timeline__item .d-flex {
+    flex-direction: column !important;
+  }
+
+  .c8y-list--timeline__item [class^='col-'],
+  .c8y-list--timeline__item [class*=' col-'] {
+    float: none;
+    width: 100% !important;
+
+    &:before {
+      display: block;
+      content: attr(data-label) !important;
+      font-size: $font-size-xs;
+      text-transform: uppercase;
+      color: $text-muted;
+    }
+  }
+
+  .hidden-cq {
+    display: none !important;
+  }
+}
+
+//********************
+// 500px
+//********************
+
+.c8y-cq-500 {
+  container-type: inline-size;
+  container-name: c8y-cq-500;
+}
+
+@container c8y-cq-500 (max-width: 500px) {
+
+  .c8y-list--timeline__item .d-flex {
+    flex-direction: column !important;
+  }
+
+  .c8y-list--timeline__item [class^='col-'],
+  .c8y-list--timeline__item [class*=' col-'] {
+    float: none;
+    width: 100% !important;
+
+    &:before {
+      display: block;
+      content: attr(data-label) !important;
+      font-size: $font-size-xs;
+      text-transform: uppercase;
+      color: $text-muted;
+    }
+  }
+
+  .hidden-cq {
+    display: none !important;
+  }
+}

package/styles/utilities/_contextual-colors.less

@@ -17,102 +17,74 @@
 .text-primary {
   .text-emphasis-variant(var(--c8y-root-component-brand-primary,@brand-primary));
 }
-.text-primary-light {
-  .text-emphasis-variant(@brand-primary-light);
-}
-.text-primary-dark {
-  .text-emphasis-variant(@brand-primary-dark);
-}
+//.text-primary-light {
+//  .text-emphasis-variant(@brand-primary-light);
+//}
+//.text-primary-dark {
+//  .text-emphasis-variant(@brand-primary-dark);
+//}
 
 // Accent text colors
 .text-accent {
   .text-emphasis-variant(@brand-accent);
 }
-.text-accent-light {
-  .text-emphasis-variant(@brand-accent-light);
-}
-.text-accent-dark {
-  .text-emphasis-variant(@brand-accent-dark);
-}
+//.text-accent-light {
+//  .text-emphasis-variant(@brand-accent-light);
+//}
+//.text-accent-dark {
+//  .text-emphasis-variant(@brand-accent-dark);
+//}
 
 // Success text colors
 .text-success {
   .text-emphasis-variant(@status-success);
 }
-.text-success-light {
-  .text-emphasis-variant(@status-success-light);
-}
-.text-success-dark {
-  .text-emphasis-variant(@status-success-dark);
-}
+//.text-success-light {
+//  .text-emphasis-variant(@status-success-light);
+//}
+//.text-success-dark {
+//  .text-emphasis-variant(@status-success-dark);
+//}
 
 // Info text colors
 .text-info {
   .text-emphasis-variant(@status-info);
 }
-.text-info-light {
-  .text-emphasis-variant(@status-info-light);
-}
-.text-info-dark {
-  .text-emphasis-variant(@status-info-dark);
-}
+//.text-info-light {
+//  .text-emphasis-variant(@status-info-light);
+//}
+//.text-info-dark {
+//  .text-emphasis-variant(@status-info-dark);
+//}
 
 // Warning text colors
 .text-warning {
   .text-emphasis-variant(@status-warning);
 }
-.text-warning-light {
-  .text-emphasis-variant(@status-warning-light);
-}
-.text-warning-high {
-  .text-emphasis-variant(@status-warning-high);
-}
-.text-warning-dark {
-  .text-emphasis-variant(@status-warning-dark);
-}
+//.text-warning-light {
+//  .text-emphasis-variant(@status-warning-light);
+//}
+//.text-warning-high {
+//  .text-emphasis-variant(@status-warning-high);
+//}
+//.text-warning-dark {
+//  .text-emphasis-variant(@status-warning-dark);
+//}
 
 // Danger text colors
 .text-danger {
   .text-emphasis-variant(@status-danger);
 }
-.text-danger-light {
-  .text-emphasis-variant(@status-danger-light);
-}
-.text-danger-dark {
-  .text-emphasis-variant(@status-danger-dark);
-}
+//.text-danger-light {
+//  .text-emphasis-variant(@status-danger-light);
+//}
+//.text-danger-dark {
+//  .text-emphasis-variant(@status-danger-dark);
+//}
 
 // Gray text colors
-.text-gray-10{
-  .text-emphasis-variant(@gray-10);
-}
-.text-gray-20{
-  .text-emphasis-variant(@gray-20);
-}
-.text-gray-30{
-  .text-emphasis-variant(@gray-30);
-}
-.text-gray-40{
-  .text-emphasis-variant(@gray-40);
-}
-.text-gray-50{
-  .text-emphasis-variant(@gray-50);
-}
-.text-gray-60{
-  .text-emphasis-variant(@gray-60);
-}
-.text-gray-70{
-  .text-emphasis-variant(@gray-70);
-}
-.text-gray-80{
-  .text-emphasis-variant(@gray-80);
-}
-.text-gray-90{
-  .text-emphasis-variant(@gray-90);
-}
-.text-gray-100{
-  .text-emphasis-variant(@gray-100);
-}
+// Removed unused gray text colors - verified 0 usages:
+// .text-gray-10...100
 
 // backwards compatibility
 
@@ -124,27 +96,29 @@
   .text-emphasis-variant(@gray-30);
 }
 
-.text-gray-medium-dark,
-.text-gray-medium {
-  .text-emphasis-variant(@gray-40);
-}
+//.text-gray-medium-dark {
+//  .text-emphasis-variant(@gray-40);
+//}
+//
+//.text-gray-medium {
+//  .text-emphasis-variant(@gray-40);
+//}
 
 .text-gray {
   .text-emphasis-variant(@gray-50);
 }
 
-.text-gray-light {
-  .text-emphasis-variant(@gray-80);
-}
+//.text-gray-light {
+//  .text-emphasis-variant(@gray-80);
+//}
 
 .text-gray-lighter {
   .text-emphasis-variant(@gray-90);
 }
 
-.text-gray-white {
-  .text-emphasis-variant(@gray-100);
-}
-
+//.text-gray-white {
+//  .text-emphasis-variant(@gray-100);
+//}
 
 //================================
 // Contextual backgrounds
@@ -157,36 +131,36 @@
   .bg-variant(@brand-primary-light);
 }
 
-.bg-complementary {
-  .bg-variant(@brand-complementary);
-}
-
-.bg-accent {
-  .bg-variant(@brand-accent);
-}
-.bg-accent-dark {
-  .bg-variant(@brand-accent-dark);
-}
-.bg-accent-light {
-  .bg-variant(@brand-accent-light);
-}
-
-.bg-success {
-  .bg-variant(@status-success);
-}
-.bg-success-light {
-  .bg-variant(@status-success-light);
-}
-.bg-success-dark {
-  .bg-variant(@status-success-dark);
-}
+//.bg-complementary {
+//  .bg-variant(@brand-complementary);
+//}
+
+//.bg-accent {
+//  .bg-variant(@brand-accent);
+//}
+//.bg-accent-dark {
+//  .bg-variant(@brand-accent-dark);
+//}
+//.bg-accent-light {
+//  .bg-variant(@brand-accent-light);
+//}
+
+//.bg-success {
+//  .bg-variant(@status-success);
+//}
+//.bg-success-light {
+//  .bg-variant(@status-success-light);
+//}
+//.bg-success-dark {
+//  .bg-variant(@status-success-dark);
+//}
 
 .bg-info {
   .bg-variant(@status-info);
 }
-.bg-info-dark {
-  .bg-variant(@status-info-dark);
-}
+//.bg-info-dark {
+//  .bg-variant(@status-info-dark);
+//}
 .bg-info-light {
   .bg-variant(@status-info-light);
 }
@@ -194,30 +168,29 @@
 .bg-warning {
   .bg-variant(@status-warning);
 }
-.bg-warning-light {
-  .bg-variant(@status-warning-light);
-}
-.bg-warning-lightest {
-  .bg-variant(@status-warning-high);
-}
-.bg-warning-dark {
-  .bg-variant(@status-warning-dark);
-}
-
-
-.bg-danger {
-  .bg-variant(@status-danger);
-}
-.bg-danger-light {
-  .bg-variant(@status-danger-light);
-}
-.bg-danger-dark {
-  .bg-variant(@status-danger-dark);
-}
+//.bg-warning-light {
+//  .bg-variant(@status-warning-light);
+//}
+//.bg-warning-lightest {
+//  .bg-variant(@status-warning-high);
+//}
+//.bg-warning-dark {
+//  .bg-variant(@status-warning-dark);
+//}
+
+//.bg-danger {
+//  .bg-variant(@status-danger);
+//}
+//.bg-danger-light {
+//  .bg-variant(@status-danger-light);
+//}
+//.bg-danger-dark {
+//  .bg-variant(@status-danger-dark);
+//}
 
 .bg-checkered{
   background-image:
-    linear-gradient(45deg, var(--c8y-level-2) 25%, transparent 25%), 
+    linear-gradient(45deg, var(--c8y-level-2) 25%, transparent 25%),
     linear-gradient(135deg, var(--c8y-level-2) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, var(--c8y-level-2) 75%),
     linear-gradient(135deg, transparent 75%, var(--c8y-level-2) 75%);
@@ -228,13 +201,13 @@
 
 // Levels
 
-.bg-level-4 {
-  .bg-variant(var(--c8y-level-4));
-}
-
-.bg-level-3 {
-  .bg-variant(var(--c8y-level-3));
-}
+//.bg-level-4 {
+//  .bg-variant(var(--c8y-level-4));
+//}
+//
+//.bg-level-3 {
+//  .bg-variant(var(--c8y-level-3));
+//}
 
 .bg-level-2 {
   .bg-variant(var(--c8y-level-2));
@@ -248,43 +221,15 @@
   .bg-variant(var(--c8y-level-0));
 }
 
-.bg-transparent {
-  box-shadow: none;
-  .bg-variant(transparent);
-}
+//.bg-transparent {
+//  box-shadow: none;
+//  .bg-variant(transparent);
+//}
 
 // Grays
 
-.bg-gray-10{
-  .bg-variant(var(--c8y-palette-gray-10));
-}
-.bg-gray-20{
-  .bg-variant(var(--c8y-palette-gray-20));
-}
-.bg-gray-30{
-  .bg-variant(var(--c8y-palette-gray-30));
-}
-.bg-gray-40{
-  .bg-variant(var(--c8y-palette-gray-40));
-}
-.bg-gray-50{
-  .bg-variant(var(--c8y-palette-gray-50));
-}
-.bg-gray-60{
-  .bg-variant(var(--c8y-palette-gray-60));
-}
-.bg-gray-70{
-  .bg-variant(var(--c8y-palette-gray-70));
-}
-.bg-gray-80{
-  .bg-variant(var(--c8y-palette-gray-80));
-}
-.bg-gray-90{
-  .bg-variant(var(--c8y-palette-gray-90));
-}
-.bg-gray-100{
-  .bg-variant(var(--c8y-palette-gray-100));
-}
+// Removed unused gray bg colors - verified 0 usages:
+// .bg-gray-10...100
 
 .bg-inherit {
   .bg-variant(inherit);