@c8y/style 1023.17.20 → 1023.22.2

package/styles/utilities/_flex-containers.scss

@@ -0,0 +1,219 @@
+@use "../../variables/index" as *;
+
+/**
+ * Flex Container Utilities
+ *
+ * Note: Uses $screen-* tokens for responsive breakpoints.
+ *
+ * Intentionally hardcoded values:
+ * - None - uses CSS flexbox keywords only (wrap, center, stretch, etc.)
+ */
+
+// Flex wrap
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+// justify-content
+.j-c-start {
+  justify-content: flex-start !important;
+}
+.j-c-center {
+  justify-content: center !important;
+}
+.j-c-end {
+  justify-content: flex-end !important;
+}
+.j-c-around {
+  justify-content: space-around !important;
+}
+.j-c-between {
+  justify-content: space-between !important;
+}
+.j-c-evenly {
+  justify-content: space-evenly !important;
+}
+
+// align-items
+.a-i-start {
+  align-items: flex-start !important;
+}
+.a-i-center {
+  align-items: center !important;
+}
+.a-i-end {
+  align-items: flex-end !important;
+}
+.a-i-stretch {
+  align-items: stretch !important;
+}
+.a-i-baseline {
+  align-items: baseline !important;
+}
+
+@media (max-width: $screen-xs-max) {
+  .flex-wrap-xs {
+    flex-wrap: wrap !important;
+  }
+  .flex-nowrap-xs {
+    flex-wrap: nowrap !important;
+  }
+
+  .j-c-start-xs {
+    justify-content: flex-start !important;
+  }
+  .j-c-center-xs {
+    justify-content: center !important;
+  }
+  .j-c-end-xs {
+    justify-content: flex-end !important;
+  }
+  .j-c-around-xs {
+    justify-content: space-around !important;
+  }
+  .j-c-between-xs {
+    justify-content: space-between !important;
+  }
+  .j-c-evenly-xs {
+    justify-content: space-evenly !important;
+  }
+
+  .a-i-start-xs {
+    align-items: flex-start !important;
+  }
+  .a-i-center-xs {
+    align-items: center !important;
+  }
+  .a-i-end-xs {
+    align-items: flex-end !important;
+  }
+  .a-i-stretch-xs {
+    align-items: stretch !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .flex-wrap-sm {
+    flex-wrap: wrap !important;
+  }
+  .flex-nowrap-sm {
+    flex-wrap: nowrap !important;
+  }
+
+  .j-c-start-sm {
+    justify-content: flex-start !important;
+  }
+  .j-c-center-sm {
+    justify-content: center !important;
+  }
+  .j-c-end-sm {
+    justify-content: flex-end !important;
+  }
+  .j-c-around-sm {
+    justify-content: space-around !important;
+  }
+  .j-c-between-sm {
+    justify-content: space-between !important;
+  }
+  .j-c-evenly-sm {
+    justify-content: space-evenly !important;
+  }
+
+  .a-i-start-sm {
+    align-items: flex-start !important;
+  }
+  .a-i-center-sm {
+    align-items: center !important;
+  }
+  .a-i-end-sm {
+    align-items: flex-end !important;
+  }
+  .a-i-stretch-sm {
+    align-items: stretch !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .flex-wrap-md {
+    flex-wrap: wrap !important;
+  }
+  .flex-nowrap-md {
+    flex-wrap: nowrap !important;
+  }
+
+  .j-c-start-md {
+    justify-content: flex-start !important;
+  }
+  .j-c-center-md {
+    justify-content: center !important;
+  }
+  .j-c-end-md {
+    justify-content: flex-end !important;
+  }
+  .j-c-around-md {
+    justify-content: space-around !important;
+  }
+  .j-c-between-md {
+    justify-content: space-between !important;
+  }
+  .j-c-evenly-md {
+    justify-content: space-evenly !important;
+  }
+
+  .a-i-start-md {
+    align-items: flex-start !important;
+  }
+  .a-i-center-md {
+    align-items: center !important;
+  }
+  .a-i-end-md {
+    align-items: flex-end !important;
+  }
+  .a-i-stretch-md {
+    align-items: stretch !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .flex-wrap-lg {
+    flex-wrap: wrap !important;
+  }
+  .flex-nowrap-lg {
+    flex-wrap: nowrap !important;
+  }
+
+  .j-c-start-lg {
+    justify-content: flex-start !important;
+  }
+  .j-c-center-lg {
+    justify-content: center !important;
+  }
+  .j-c-end-lg {
+    justify-content: flex-end !important;
+  }
+  .j-c-around-lg {
+    justify-content: space-around !important;
+  }
+  .j-c-between-lg {
+    justify-content: space-between !important;
+  }
+  .j-c-evenly-lg {
+    justify-content: space-evenly !important;
+  }
+
+  .a-i-start-lg {
+    align-items: flex-start !important;
+  }
+  .a-i-center-lg {
+    align-items: center !important;
+  }
+  .a-i-end-lg {
+    align-items: flex-end !important;
+  }
+  .a-i-stretch-lg {
+    align-items: stretch !important;
+  }
+}

package/styles/utilities/_flex-items.scss

@@ -0,0 +1,152 @@
+@use "../../variables/index" as *;
+
+/**
+ * Flex Item Utilities
+ *
+ * Note: Uses $screen-* tokens for responsive breakpoints.
+ *
+ * Intentionally hardcoded values:
+ * - Unitless values (0, 1): Flex grow/shrink factors
+ * - 1%: Minimal flex-basis for flex-auto behavior
+ */
+
+/* SIZING */
+.flex-auto {
+  flex: 1 1 1% !important;
+}
+.flex-shrink {
+  flex-shrink: 1 !important;
+}
+.flex-no-shrink {
+  flex-shrink: 0 !important;
+}
+.flex-grow {
+  flex-grow: 1 !important;
+}
+.flex-no-grow {
+  flex-grow: 0 !important;
+}
+
+// RESPONSIVE
+@media (max-width: $screen-xs-max) {
+  .flex-auto-xs {
+    flex: 1 1 1% !important;
+  }
+  .flex-shrink-xs {
+    flex-shrink: 1 !important;
+  }
+  .flex-grow-xs {
+    flex-grow: 1 !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .flex-auto-sm {
+    flex: 1 1 1% !important;
+  }
+  .flex-shrink-sm {
+    flex-shrink: 1 !important;
+  }
+  .flex-grow-sm {
+    flex-grow: 1 !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .flex-auto-md {
+    flex: 1 1 1% !important;
+  }
+  .flex-shrink-md {
+    flex-shrink: 1 !important;
+  }
+  .flex-grow-md {
+    flex-grow: 1 !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .flex-auto-lg {
+    flex: 1 1 1% !important;
+  }
+  .flex-shrink-lg {
+    flex-shrink: 1 !important;
+  }
+  .flex-grow-lg {
+    flex-grow: 1 !important;
+  }
+}
+
+/* ALIGNMENT */
+// cross axis (align-self)
+.a-s-start {
+  align-self: flex-start !important;
+}
+.a-s-center {
+  align-self: center !important;
+}
+.a-s-end {
+  align-self: flex-end !important;
+}
+.a-s-stretch {
+  align-self: stretch !important;
+}
+
+@media (max-width: $screen-xs-max) {
+  .a-s-start-xs {
+    align-self: flex-start !important;
+  }
+  .a-s-center-xs {
+    align-self: center !important;
+  }
+  .a-s-end-xs {
+    align-self: flex-end !important;
+  }
+  .a-s-stretch-xs {
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .a-s-start-sm {
+    align-self: flex-start !important;
+  }
+  .a-s-center-sm {
+    align-self: center !important;
+  }
+  .a-s-end-sm {
+    align-self: flex-end !important;
+  }
+  .a-s-stretch-sm {
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .a-s-start-md {
+    align-self: flex-start !important;
+  }
+  .a-s-center-md {
+    align-self: center !important;
+  }
+  .a-s-end-md {
+    align-self: flex-end !important;
+  }
+  .a-s-stretch-md {
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .a-s-start-lg {
+    align-self: flex-start !important;
+  }
+  .a-s-center-lg {
+    align-self: center !important;
+  }
+  .a-s-end-lg {
+    align-self: flex-end !important;
+  }
+  .a-s-stretch-lg {
+    align-self: stretch !important;
+  }
+}

package/styles/utilities/_icon-utils.less

@@ -50,7 +50,7 @@
   font-size: 24px !important;
 }
 .icon-28 {
-  font-size: 28px;
+  font-size: 28px !important;
 }
 .icon-32 {
   font-size: 32px !important;
@@ -62,20 +62,20 @@
   font-size: 40px !important;
 }
 .icon-44 {
-  font-size: 44px;
+  font-size: 44px !important;
 }
 .icon-48 {
   font-size: 48px !important;
 }
 .icon-52 {
-  font-size: 52px;
+  font-size: 52px !important;
 }
 .icon-56 {
   font-size: 56px;
 }
 .icon-60 {
-  font-size: 60px;
+  font-size: 60px !important;
 }
 .icon-64 {
-  font-size: 64px;
+  font-size: 64px !important;
 }

package/styles/utilities/_icon-utils.scss

@@ -0,0 +1,94 @@
+@use "../../variables/index" as *;
+
+/**
+ * Icon Utility Classes
+ *
+ * Note: Uses $size-4 for spacing and var(--c8y-line-height-base) for line-height.
+ *
+ * Intentionally hardcoded values:
+ * - Font sizes (12px-64px): Icon sizing scale for utility classes
+ * - Transform values (-6px, 3px): Fine-tuning icon positioning
+ * - Negative margins (-6px): Alignment adjustments
+ */
+
+//Icon badge
+.c8y-icon-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  > [class^='dlt-c8y-icon-'],
+  > [class*=' dlt-c8y-icon-'],
+  > .c8y-icon {
+    align-self: baseline;
+    font-size: 20px;
+  }
+
+  .badge {
+    align-self: flex-start;
+    transform: translateX(-6px);
+  }
+  .c8y-list__item & {
+    margin: -6px 0;
+  }
+}
+
+// Icon alignment
+.icon-flex {
+  display: inline-flex;
+  align-items: flex-start;
+  line-height: var(--c8y-line-height-base);
+  > [class^='dlt-c8y-icon-'],
+  > [class*=' dlt-c8y-icon-'],
+  > .c8y-icon {
+    margin-right: $size-4;
+    transform: translateY(3px);
+  }
+}
+
+// Icon sizing
+
+.icon-12 {
+  font-size: 12px !important;
+}
+.icon-14 {
+  font-size: 14px !important;
+}
+.icon-16 {
+  font-size: 16px !important;
+}
+.icon-20 {
+  font-size: 20px !important;
+}
+.icon-24 {
+  font-size: 24px !important;
+}
+.icon-28 {
+  font-size: 28px !important;
+}
+.icon-32 {
+  font-size: 32px !important;
+}
+.icon-36 {
+  font-size: 36px !important;
+}
+.icon-40 {
+  font-size: 40px !important;
+}
+.icon-44 {
+  font-size: 44px !important;
+}
+.icon-48 {
+  font-size: 48px !important;
+}
+.icon-52 {
+  font-size: 52px !important;
+}
+.icon-56 {
+  font-size: 56px !important;
+}
+.icon-60 {
+  font-size: 60px !important;
+}
+.icon-64 {
+  font-size: 64px !important;
+}

package/styles/utilities/_margins-paddings.scss

@@ -0,0 +1,190 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/size";
+
+/**
+ * Margin and Padding Utility Classes
+ *
+ * Note: This file uses the size.createSizeClasses() mixin to generate utility classes
+ * based on the 8px base unit system. The mixin generates classes like .m-t-8, .p-b-16, etc.
+ *
+ * Intentionally hardcoded values:
+ * - Generated by mixin: The mixin generates hardcoded px values (e.g., 8px, 16px, 24px)
+ *   following the base unit system but not using $size-* tokens directly
+ * - Responsive breakpoints: Use $screen-* tokens for media queries
+ * - Auto values: CSS auto keyword, not numeric
+ *
+ * Note: Consider refactoring the mixin to use $size-* tokens instead of generating
+ * hardcoded pixel values for better consistency with the design token system.
+ */
+
+// Margin utility classes
+@include size.createSizeClasses(1, margin, m, 4);
+@include size.createSizeClasses(15, margin, m, 8);
+
+/* example result:
+ .m-t-8{
+   margin-top: 8px
+ }
+*/
+
+// Padding utility classes
+@include size.createSizeClasses(1, padding, p, 4);
+@include size.createSizeClasses(15, padding, p, 8);
+
+/* example result:
+ .p-t-8{
+   padding-top: 8px
+ }
+*/
+
+// Auto margins
+.m-auto {
+  margin: auto !important;
+}
+
+.m-t-auto {
+  margin-top: auto !important;
+}
+
+.m-r-auto {
+  margin-right: auto !important;
+}
+
+.m-b-auto {
+  margin-bottom: auto !important;
+}
+
+.m-l-auto {
+  margin-left: auto !important;
+}
+
+// Auto width and height
+.w-auto {
+  width: auto !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+//Media queries
+@media (max-width: $screen-xs-max) {
+  .m-auto-xs {
+    margin: auto !important;
+  }
+
+  .m-t-auto-xs {
+    margin-top: auto !important;
+  }
+
+  .m-r-auto-xs {
+    margin-right: auto !important;
+  }
+
+  .m-b-auto-xs {
+    margin-bottom: auto !important;
+  }
+
+  .m-l-auto-xs {
+    margin-left: auto !important;
+  }
+
+  .w-auto-xs {
+    width: auto !important;
+  }
+
+  .h-auto-xs {
+    height: auto !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .m-auto-sm {
+    margin: auto !important;
+  }
+
+  .m-t-auto-sm {
+    margin-top: auto !important;
+  }
+
+  .m-r-auto-sm {
+    margin-right: auto !important;
+  }
+
+  .m-b-auto-sm {
+    margin-bottom: auto !important;
+  }
+
+  .m-l-auto-sm {
+    margin-left: auto !important;
+  }
+
+  .w-auto-sm {
+    width: auto !important;
+  }
+
+  .h-auto-sm {
+    height: auto !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .m-auto-md {
+    margin: auto !important;
+  }
+
+  .m-t-auto-md {
+    margin-top: auto !important;
+  }
+
+  .m-r-auto-md {
+    margin-right: auto !important;
+  }
+
+  .m-b-auto-md {
+    margin-bottom: auto !important;
+  }
+
+  .m-l-auto-md {
+    margin-left: auto !important;
+  }
+
+  .w-auto-md {
+    width: auto !important;
+  }
+
+  .h-auto-md {
+    height: auto !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .m-auto-lg {
+    margin: auto !important;
+  }
+
+  .m-t-auto-lg {
+    margin-top: auto !important;
+  }
+
+  .m-r-auto-lg {
+    margin-right: auto !important;
+  }
+
+  .m-b-auto-lg {
+    margin-bottom: auto !important;
+  }
+
+  .m-l-auto-lg {
+    margin-left: auto !important;
+  }
+
+  .w-auto-lg {
+    width: auto !important;
+  }
+
+  .h-auto-lg {
+    height: auto !important;
+  }
+}