@c8y/style 1023.17.19 → 1023.22.2

package/styles/dashboard/_welcome-widget.scss

@@ -0,0 +1,68 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/tab-focus";
+
+/**
+ * Welcome Widget - Interactive welcome screen widget
+ *
+ * Note: Uses $size-8 for spacing. Uses color tokens and z-index variables.
+ *
+ * Intentionally hardcoded values:
+ * - Border/outline widths (1px, 2px): Standard border sizes
+ * - Outline-offset (-2px): Inset positioning
+ * - Transition durations (0.25s): Animation timing
+ */
+
+.welcome-widget {
+  height: 100%;
+  .welcome-illustration {
+    position: relative;
+    flex-grow: 1;
+    height: auto;
+    > svg {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+  > .flex-row {
+    height: 100%;
+  }
+  .card-group.interact-grid {
+    margin-bottom: 0;
+
+    .card {
+      margin-top: 1px;
+      margin-bottom: $size-8;
+      cursor: pointer;
+      outline: 1px solid $component-border-color;
+      transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+
+
+      &:hover,
+      &:focus {
+        z-index: $zindex-navbar - 1;
+        outline: 2px solid $component-brand-primary;
+        outline-offset: -2px;
+      }
+
+      &:focus {
+        @include tab-focus.c8y-focus();
+      }
+    }
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .welcome-widget {
+    padding-top: 0;
+  }
+}
+
+body:not(:has(.c8y-logo)) {
+  #c8y-mark {
+    display: none;
+  }
+}

package/styles/dashboard/_welcome.scss

@@ -0,0 +1,138 @@
+@use "../../variables/index" as *;
+
+/**
+ * Welcome - Welcome dashboard layout styles
+ *
+ * Note: Uses $size-* tokens for spacing and design tokens for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Flex basis/min-width (120px, 230px): Card size breakpoints
+ * - Percentages (33.33333%, 25%, 14.28571429%): Fractional grid layout
+ * - Min-height (130px): Help card height
+ * - Font-size (85%): Relative typography
+ * - Negative margin -15px (off-grid): Fine-tuning
+ * - Margin-bottom 27px (off-grid): Specific spacing
+ */
+
+c8y-dashboard-gridstack.welcome {
+  .grid-stack {
+    height: auto !important;
+  }
+
+  .grid-stack-item.ui-draggable-disabled:not(.grid-floater) {
+    position: relative;
+    top: inherit;
+    height: auto;
+
+    .grid-stack-item-content {
+      position: static;
+
+      .card-header-actions:after {
+        display: none;
+      }
+
+      .card-inner-scroll {
+        overflow: visible;
+        height: auto;
+
+        &:before,
+        &:after {
+          display: none;
+        }
+
+        > * {
+          margin-bottom: 0;
+        }
+
+        .card-group-block > .card {
+          border-radius: 0;
+          background-color: $component-background-default;
+        }
+
+        .quicklinks > .card {
+          flex: 1 0 120px;
+          min-width: 120px;
+
+          @media (min-width: $screen-sm-min) {
+            flex: 1 0 230px;
+            min-width: 230px;
+          }
+
+          .card-block {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .grid-floater {
+    iframe:not(.twitter-timeline) {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .grid-stack-item-content {
+      margin: 0 0 0 $size-16 !important;
+    }
+  }
+
+  @media (max-width: $screen-xs-max) {
+    .grid-floater.ui-draggable-disabled {
+      display: none;
+    }
+  }
+}
+
+[ng-controller='HelpAndSupportCtrl'] {
+  display: flex;
+  flex-flow: row wrap;
+
+  > .card {
+    flex: 0 0 33.33333%;
+
+    @media (min-width: $screen-sm-min) {
+      flex: 0 0 25%;
+    }
+
+    @media (min-width: $screen-md-min) {
+      flex: 1 0 14.28571429%;
+    }
+  }
+}
+
+a.help-and-support-doc {
+  width: 100%;
+  min-height: 130px;
+  padding-bottom: 100%;
+
+  > div {
+    justify-content: flex-start;
+    padding: $size-20 $size-10 0;
+
+    img {
+      margin-bottom: $size-10;
+      max-width: $size-24;
+      max-height: $size-24;
+    }
+
+    p {
+      color: var(--brand-primary, var(--c8y-brand-primary));
+      font-size: 85%;
+    }
+  }
+}
+
+.welcome-dont-show {
+  margin-top: -15px;
+  padding: $size-5 0;
+
+  @media (min-width: $screen-sm-min) {
+    margin-top: calc(-1 * $size-24);
+    margin-bottom: 27px;
+  }
+
+  @media (min-width: $grid-float-breakpoint) {
+    padding: $size-5 $size-16;
+  }
+}

package/styles/dashboard/welcome-widget.less

@@ -0,0 +1,50 @@
+.welcome-widget {
+  height: 100%;
+  .welcome-illustration {
+    position: relative;
+    flex-grow: 1;
+    height: auto;
+    > svg {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+  > .flex-row {
+    height: 100%;
+  }
+  .card-group.interact-grid {
+    margin-bottom: 0;
+    .card {
+      margin-bottom: 8px;
+      margin-top: 1px;
+      cursor: pointer;
+      transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+      outline: 1px solid @component-border-color;
+      
+      &:hover,
+      &:focus {
+        z-index: @zindex-navbar - 1;
+        outline: 2px solid @component-brand-primary;
+        outline-offset: -2px;
+      }
+      &:focus {
+        .c8y-focus();
+      }
+    }
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .welcome-widget {
+    padding-top: 0;
+  }
+}
+
+body:not(:has(.c8y-logo)) {
+  #c8y-mark{
+    display: none;
+  }
+}

package/styles/dashboard/welcome.less

@@ -0,0 +1,128 @@
+c8y-dashboard-gridstack.welcome {
+  .grid-stack {
+    height: auto !important;
+  }
+  .grid-stack-item.ui-draggable-disabled:not(.grid-floater) {
+    position: relative;
+    top: inherit; // padding-left: (@grid-gutter-width / 2);
+    height: auto; // padding-right: (@grid-gutter-width / 2);
+    .grid-stack-item-content {
+      position: static;
+      .card-header-actions:after {
+        display: none;
+      }
+      .card-inner-scroll {
+        overflow: visible;
+        height: auto;
+        &:before,
+        &:after {
+          display: none;
+        }
+        > * {
+          margin-bottom: 0;
+        }
+        .card-group-block > .card {
+          border-radius: 0;
+          background-color: @component-background-default;
+        }
+        .quicklinks > .card {
+          flex: 1 0 120px;
+          min-width: 120px;
+          @media (min-width: @screen-sm-min) {
+            flex: 1 0 230px;
+            min-width: 230px;
+          }
+          .card-block {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  .grid-floater iframe:not(.twitter-timeline) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+  .grid-floater .grid-stack-item-content {
+    margin: 0 !important;
+    margin-right: 15px !important;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    .grid-floater.ui-draggable-disabled {
+      display: none;
+    }
+  }
+}
+
+[ng-controller='HelpAndSupportCtrl'] {
+  display: flex;
+  flex-flow: row wrap;
+  > .card {
+    flex: 0 0 33.33333%;
+    @media (min-width: @screen-sm-min) {
+      flex: 0 0 25%;
+    }
+    @media (min-width: @screen-md-min) {
+      flex: 1 0 14.28571429%;
+    }
+  }
+}
+
+a.help-and-support-doc {
+  padding-bottom: 100%;
+  min-height: 130px;
+  width: 100%;
+  > div {
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+    padding: 20px 10px 0;
+    img {
+      margin-bottom: 10px;
+      max-width: 24px;
+      max-height: 24px;
+    }
+    p {
+      color: var(--brand-primary, var(--c8y-brand-primary));
+      font-size: 85%;
+    }
+  }
+}
+
+.quick-link-bgcolor-a,
+.quick-link-bgcolor-b .quick-link-bgcolor-c,
+.quick-link-bgcolor-d,
+.quick-link-bgcolor-e,
+.quick-link-bgcolor-f {
+  position: relative;
+  border: 0 !important;
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: @black;
+    content: '';
+    opacity: 0.05;
+
+    .transition(opacity 0.25s ease);
+  }
+  &:hover {
+    &::before {
+      opacity: 0;
+    }
+  }
+}
+
+.welcome-dont-show {
+  margin-top: -15px;
+  padding: 5px 0;
+  @media (min-width: @screen-sm-min) {
+    margin-top: -24px;
+    margin-bottom: 27px;
+  }
+  @media (min-width: @grid-float-breakpoint) {
+    padding: 5px 15px;
+  }
+}

package/styles/icons/_c8y-glyphs.scss

@@ -0,0 +1,63 @@
+@use "../../variables/index" as *;
+
+/**
+ * C8Y Glyphs - Custom icon font for glyphs (calendar, caret, check, dot)
+ *
+ * Note: Contains @font-face definition with base64-encoded font data.
+ *
+ * Intentionally hardcoded values:
+ * - Line-height (1): Unitless for proper icon alignment
+ * - Unicode content values: Icon font character codes
+ */
+
+/*!
+Force line break
+*/
+@font-face {
+  font-weight: normal;
+  font-style: normal;
+  font-family: 'c8y-glyphs';
+  src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAASQAA0AAAAABmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEdAAAABoAAAAci6ZHXk9TLzIAAAGgAAAARwAAAGBPtlyPY21hcAAAAgQAAABKAAABSuH3Ff9jdnQgAAACUAAAAAQAAAAEABEBRGdhc3AAAARsAAAACAAAAAj//wADZ2x5ZgAAAmgAAADZAAAA7I78fgNoZWFkAAABMAAAAC0AAAA2E9O5GGhoZWEAAAFgAAAAHQAAACQDcAIGaG10eAAAAegAAAAaAAAAGgTXAKVsb2NhAAACVAAAABIAAAASARwA/m1heHAAAAGAAAAAHwAAACAATABBbmFtZQAAA0QAAADsAAAB0dQuAddwb3N0AAAEMAAAADwAAABLaPeWx3jaY2BkYGAAYrc01X3x/DZfGbiZGEDgZrpNBJwWBCq5xpgN5HIwgKUB9CkIRAAAAHjaY2BkYGDMZmBg0GNiAAHGawyMDKiAFQAidgF7AAAAeNpjYGRgYOBgEGBgYgABEMnIABJzYNADCQAABbUAjgB42mNgYTzIOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGAQYECEhzTWFoYFD4yMx44P8BBj3GbIgaJCUKDIwAKFcK6AAAuwARAAAAAACqAAAAyAAAAgAAagBVACoAVQAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYGBQ+Mv//D+QrfGT4////Y34WqHogYGRjgHMYmYAEEwMqYIRYMZwBAMe9COkAAAARAUQAAAAqACoAKgAqAEYAUgBkAHYAAHjaHYwxSsRQFEXvTUx+YSEPjVNPRAIWCvPiDEiKEUFwAXEFIYJZgLgCrVLZ2MwGfpWsQ1sr7exE3IB8fLF4j8vh3oMIAuCZNWI4HA/ESTW6LXwvhjR5r8Y4soghnnAy4dGl/K1GTlxFpVA5kMe7tmUdvFDNFuEWGTfssI0dYFczPbWTuaizuNG21PCq8sMuz/PwwvLGe9sRNdb0+DIDDos54Xm99saPzPdmvsRKMxarGZ/Ow8fDxSW7s/DZr67+txm9dRywLJeL/b00r5u+afr76TXAH18eNuQAAAB42o2OPWrDQBCFv5VlQUwILlwk3RYhncTuuvDPAVSl9gWCkA1GMrIbnSC38SnS5yy5gUfSGGMIJAvDfDvzePOAJ84Yri9SNkx4UY5ICMoj3vhUjkXzpTxmyo9ywsQ8i9LED+o6sGEmNHDEI6/KI95ZKceiOSuPsXwrJ8xM1Fl9sKQlpWQv/cCWowyXbVru28NW+G5xHebUVJz63oikEOtAhpO+lvrNddjM8TJfSAVRewlKXlenvG7KwobM2bW9XZfP3KeLNDi/+kfUjeRoZLjr01nx7y5kfe+SsSma466urHM+c87Zvz0vw8dBq3jaY2BiAIP/txgkGbABDiBmZGBiYGZkYmRmZGFk5UhOzEnNS0ksYk1OLEotYU3OSE3OZk7JLwEA9IgKuAAAAAH//wACeNpjYGBgZACCG9fPrQXRN9NtImA0AFR1BtQAAA==')
+    format('woff');
+}
+/*!
+Force line break
+*/
+
+$c8y-glyph-calendar: '\f100';
+$c8y-glyph-caret: '\f101';
+$c8y-glyph-check: '\f102';
+$c8y-glyph-dot: '\f103';
+
+.c8y-glyph,
+.c8y-glyph-calendar:before,
+.c8y-glyph-caret:before,
+.c8y-glyph-check:before,
+.c8y-glyph-dot:before {
+  display: inline-block;
+  text-decoration: inherit;
+  text-transform: none;
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal;
+  font-family: 'c8y-glyphs' !important;
+  line-height: 1;
+
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c8y-glyph-calendar:before {
+  content: $c8y-glyph-calendar;
+}
+.c8y-glyph-caret:before,
+.dlt-c8y-icon-caret-down:before {
+  content: $c8y-glyph-caret;
+}
+.c8y-glyph-check:before {
+  content: $c8y-glyph-check;
+}
+.c8y-glyph-dot:before {
+  content: $c8y-glyph-dot;
+}

package/styles/{_c8y-icons.less → icons/_c8y-icons.less}

@@ -1,6 +1,6 @@
 
 /* Icon Font: c8yicon */
-@asset-directory: if(@use-relative-paths, '../assets', 'assets');
+@asset-directory: if(@use-relative-paths, '../../assets', 'assets');
 
 @font-face {
   font-family: "c8yicon-dark";
@@ -97,22 +97,22 @@
   }
   &.text-danger{
     &:before{
-      color: @status-danger;
+      color: var(--palette-status-danger, var(--c8y-palette-status-danger));
     }
   }
   &.text-warning{
     &:before{
-      color: @status-warning;
+      color: var(--palette-status-warning, var(--c8y-palette-status-warning));
     }
   }
   &.text-info{
     &:before{
-      color: @status-info;
+      color: var(--palette-status-info, var(--c8y-palette-status-info));
     }
   }
   &.text-success{
     &:before{
-      color: @status-success;
+      color: var(--palette-status-success, var(--c8y-palette-status-success));
     }
   }
   &.text-muted{
@@ -975,8 +975,8 @@
   width: 36px;
   height: 36px;
   border-radius: 4px;
-  background-color: @brand-primary-dark;
-  color: @brand-primary-light;
+  background-color: var(--brand-dark, var(--c8y-brand-dark));
+  color: var(--brand-light, var(--c8y-brand-light));
   overflow: hidden;
   margin-top: 0;
   font-size: 21px;
@@ -1070,26 +1070,26 @@
   height: 50px;
   display: inline-flex;
   border-radius: 50%;
-  background-color: @brand-primary;
+  background-color: var(--brand-primary, var(--c8y-brand-primary));
   color: @gray-100;
   font-size: 24px;
   align-items: center;
   justify-content: center;
   margin: 1px 0;
   &.dot-danger {
-    background-color: @status-danger;
+    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
   }
   &.dot-warning {
-    background-color: @status-warning;
+    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
   }
   &.dot-success {
-    background-color: @status-success;
+    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
   }
   &.dot-default{
     background-color: @gray-80;
   }
   &.dot-info{
-    background-color: @status-info;
+    background-color: var(--palette-status-info, var(--c8y-palette-status-info));
   }
 
   &.bg-primary-light{