@c8y/style 1023.17.19 → 1023.22.2

package/styles/animations/_spinner-snake.scss

@@ -0,0 +1,73 @@
+@use "../../variables/index" as *;
+
+/**
+ * Spinner Snake - Rotating spinner/loader animation
+ *
+ * Note: Uses color tokens ($component-brand-primary, $body-background-color, $component-background-default).
+ * Uses $size-16 for margin.
+ *
+ * Intentionally hardcoded values:
+ * - em-based values (4em, 0.6em, 2.2em, etc.): Relative sizing for scalable spinner
+ * - Animation durations (1s, 1.95s) and delays (0.75s): Animation timing
+ * - Negative text-indent (-99999em): Text hiding technique
+ * - Rotation degrees (0deg, 360deg): Animation angles
+ * - Percentages: Keyframe positions
+ */
+
+.spinner-snake {
+  position: relative;
+  margin: $size-16 auto;
+  width: 4em;
+  height: 4em;
+  min-width: 4em;
+  min-height: 4em;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 0.6em;
+  color: $component-brand-primary;
+  text-indent: -99999em;
+  transform: translateZ(0) rotate(180deg);
+  animation: rotator 1.95s infinite linear;
+}
+
+.spinner-snake:before {
+  top: -0.1em;
+  left: -0.1em;
+  width: 2.2em;
+  height: 4.2em;
+  border-radius: 2.2em 0 0 2.2em;
+  transform-origin: 2.2em 2.1em;
+  animation: rotator 1s infinite ease 0.75s;
+}
+
+.spinner-snake:before,
+.spinner-snake:after {
+  position: absolute;
+  background: $body-background-color;
+  content: '';
+
+  .card &,
+  .modal &,
+  .table-data-grid__loading--loader & {
+    background: $component-background-default;
+  }
+}
+
+.spinner-snake:after {
+  top: -0.1em;
+  left: 2.1em;
+  width: 2.6em;
+  height: 4.6em;
+  border-radius: 0 2.2em 2.2em 0;
+  transform-origin: 0 2.1em;
+  animation: rotator 1s infinite ease;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/styles/{_spinner.less → animations/_spinner.less}

@@ -96,12 +96,10 @@ c8y-rectangle-spinner,
   40%,
   100% {
     transform: scaleY(0.4);
-    -webkit-transform: scaleY(0.4);
   }
 
   20% {
     transform: scaleY(1);
-    -webkit-transform: scaleY(1);
   }
 }
 
@@ -144,6 +142,5 @@ c8y-rectangle-spinner,
   position: relative;
   display: inline-block;
   width: 45px;
-  -webkit-transform: scale(0.5) translateY(-28px);
   transform: scale(0.5) translateY(-28px);
 }

package/styles/animations/_spinner.scss

@@ -0,0 +1,165 @@
+@use "../../variables/index" as *;
+@use "../mixins/vendor-prefixes";
+
+/**
+ * Spinner - Rectangle bar spinner/loader animation
+ *
+ * Note: Uses color tokens ($text-muted, $spinner-color) and $size-* tokens where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Spinner dimensions (50px, 40px, 30px, 60px, 45px): Component-specific sizes
+ * - Padding values (45px, 35px, 11px): Component-specific positioning offsets
+ * - Negative margins (-25px, -15px, -28px): Centering calculations (half of width/height)
+ * - Bar width (6px): Spinner bar width (off-grid)
+ * - Animation duration (1.2s) and delays (-1.1s to -0.8s): Animation timing
+ * - Transform scale (0.5): Size reduction for button variant
+ * - RGBA background: Semi-transparent overlay
+ * - Percentages and unitless scale values: Animation and transform values
+ */
+
+c8y-rectangle-spinner,
+.c8y-rectangle-spinner {
+  position: relative;
+  display: block;
+  padding-top: 45px;
+  min-width: 50px;
+  min-height: 40px;
+  color: $text-muted;
+  text-align: center;
+  font-size: $font-size-base;
+
+  .spinner {
+    left: 50%;
+    margin-left: -25px;
+  }
+
+  &.spinner-xs {
+    padding-top: 35px;
+    min-width: 30px;
+    min-height: 30px;
+
+    .spinner {
+      margin-left: -15px;
+    }
+  }
+
+  &.spinner-inline {
+    display: inline-block;
+    padding-top: 11px;
+    padding-left: 50px;
+    vertical-align: middle;
+    text-align: left;
+
+    .spinner {
+      left: 0;
+      margin-left: 0;
+    }
+
+    &.spinner-xs {
+      padding-top: $size-5;
+      padding-left: 35px;
+    }
+  }
+}
+
+.spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0 auto;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: $size-10;
+  opacity: 0.5;
+
+  &.spinner-xs,
+  .spinner-xs & {
+    width: 30px;
+    height: 30px;
+
+    > div {
+      margin: 0;
+      width: $size-4;
+    }
+  }
+}
+
+.spinner > div {
+  display: inline-block;
+  margin-right: 1px;
+  width: 6px;
+  height: 100%;
+  background-color: $spinner-color;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  animation-delay: -1s;
+}
+
+.spinner .rect4 {
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  animation-delay: -0.8s;
+}
+
+@keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+  }
+
+  20% {
+    transform: scaleY(1);
+  }
+}
+
+.spinner-panel-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.7);
+
+  .grid-stack-item & {
+    right: $size-10;
+    left: $size-10;
+  }
+
+  .spinner {
+    top: 0;
+    left: 50%;
+    margin-left: -25px;
+  }
+}
+
+.spinner-inline-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  vertical-align: middle;
+
+  .spinner {
+    transform: translateY(-50%);
+  }
+}
+
+.spinner-btn {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  transform: scale(0.5) translateY(-28px);
+}

package/styles/base/_normalize.scss

@@ -0,0 +1,309 @@
+@use "../../variables/index" as *;
+
+/**
+ * Normalize.css v3.0.3 - Third-party CSS reset library
+ *
+ * Note: This file is intentionally left unmodified from the original normalize.css.
+ * All hardcoded values are part of the standard CSS reset specification.
+ *
+ * Intentionally hardcoded values (as per normalize.css specification):
+ * - All margin/padding values (0, em-based, px-based): Standard reset values
+ * - Relative units (em, %): Proportional scaling for cross-browser consistency
+ * - 1px and 2px values: Standard border and spacing values for reset
+ * - Line-height values: Typography reset specifications
+ */
+
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom.
+
+html {
+  font-family: sans-serif;
+
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// Remove the gray background color from active links in IE 10.
+
+a {
+  background-color: transparent;
+}
+
+// Improve readability of focused elements when they are also in an
+// active/hover state.
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// Text-level semantics
+// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+b,
+strong {
+  font-weight: bold;
+}
+
+// Address styling not present in Safari and Chrome.
+dfn {
+  font-style: italic;
+}
+
+// Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome.
+h1 {
+  margin: 0.67em 0;
+  font-size: 2em;
+}
+
+// Address styling not present in IE 8/9.
+mark {
+  background: var(--palette-pear-8);
+  color: $black;
+}
+
+// Address inconsistent and variable font size in all browsers.
+small {
+  font-size: 80%;
+}
+
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+sub,
+sup {
+  position: relative;
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// Remove border when inside `a` element in IE 8/9/10.
+
+img {
+  border: 0;
+}
+
+// Correct overflow not hidden in IE 9/10/11.
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// Address margin not present in IE 8/9 and Safari.
+figure {
+  margin: 1em 40px;
+}
+
+// Address differences between Firefox and other browsers.
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+// Contain overflow in all browsers.
+pre {
+  overflow: auto;
+}
+
+// Address odd `em`-unit font size rendering in all browsers.
+code,
+kbd,
+pre,
+samp {
+  font-size: 1em;
+  font-family: monospace, monospace;
+}
+
+// Forms
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+
+// 1. Correct color not being inherited. Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0; // 3
+  color: inherit; // 1
+  font: inherit; // 2
+}
+
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+button {
+  overflow: visible;
+}
+
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+button,
+select {
+  text-transform: none;
+}
+
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type `input` and others.
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer; // 3
+
+  -webkit-appearance: button; // 2
+}
+
+// Re-set default cursor for disabled elements.
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+// Remove inner padding and border in Firefox 4+.
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
+input {
+  line-height: normal;
+}
+
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`.
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+input[type='search'] {
+  box-sizing: content-box; //2
+
+  -webkit-appearance: textfield; // 1
+}
+
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance).
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// Define consistent border, margin, and padding.
+fieldset {
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+  border: 1px solid $gray-70;
+}
+
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+legend {
+  padding: 0; // 2
+  border: 0; // 1
+}
+
+// Remove default vertical scrollbar in IE 8/9/10/11.
+textarea {
+  overflow: auto;
+}
+
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// Remove most spacing between table cells.
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: 0;
+}

package/styles/base/_print.scss

@@ -0,0 +1,159 @@
+@use "../../variables/index" as *;
+
+/**
+ * Print Styles - Media query for print layouts
+ *
+ * Note: Most spacing values use $size-* tokens from the 8px base unit system.
+ *
+ * Intentionally hardcoded values:
+ * - transform: scale(0.97): Scale factor, not spacing
+ * - 1px borders: Standard border widths for print
+ * - z-index values: Stacking context for print layout
+ * - 100vw/99vh: Full viewport dimensions
+ * - orphans/widows: Typography print control
+ */
+
+@media print {
+  body {
+    --c8y-elevation-sm: 0 0 0 1px rgba(var(--c8y-elevation-color), 0.1);
+    transform: scale(0.97);
+  }
+
+  *,
+  *:before,
+  *:after {
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href^='#']:after,
+  a[href^='javascript:']:after {
+    content: '';
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid $gray-60;
+    page-break-inside: avoid;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+
+  // Bootstrap components
+  .navbar {
+    display: none;
+  }
+
+  .btn,
+  .dropup > .btn {
+    > .caret {
+      border-top-color: $black !important;
+    }
+  }
+
+  .table {
+    border-collapse: collapse !important;
+
+    td,
+    th {
+      background-color: $component-background-default !important;
+    }
+  }
+
+  .table-bordered {
+    th,
+    td {
+      border: 1px solid $gray-90 !important;
+    }
+  }
+
+  .navigator,
+  .app-main-header {
+    display: none !important;
+  }
+
+  .c8y-ui-action-bar {
+    position: static !important;
+  }
+
+  .mcontainer {
+    all: unset;
+    margin-top: 0;
+    margin-left: 0 !important;
+    padding: 0 $size-24 !important;
+
+    &:has(.dashboard) {
+      padding: 0 !important;
+    }
+
+    > .container-fluid {
+      padding-bottom: 0;
+    }
+  }
+
+  .c8y-ui-action-bar {
+    top: 0 !important;
+    left: 0 !important;
+    box-shadow: none !important;
+  }
+
+  .dashboard {
+    top: 0;
+    left: 0;
+    z-index: 1085 !important;
+    overflow-y: auto;
+    margin: 0 !important;
+    padding-top: calc($size-base * 4) !important;
+    padding-bottom: $size-24 !important;
+    width: 100vw;
+    height: 99vh;
+    @extend c8y-scrollbar !optional;
+
+    .dashboard {
+      padding-bottom: 0 !important;
+      all: unset !important;
+    }
+
+    .dashboard-container {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .page-tabs:not(.c8y-top-drawer--tabs) {
+    display: none !important;
+  }
+
+  .dashboard, body, html {
+    overflow: unset !important;
+    min-height: unset !important;
+  }
+  
+}