@c8y/style 1024.10.8 → 1024.14.0

package/styles/components/data-input/_c8y-ai-chat.less

@@ -1,258 +0,0 @@
-@import "../../mixins/_tab-focus.less";
-/**
- * C8Y AI Chat - AI chat widget component
- *
- * Note: Uses @size-* tokens for spacing and @font-size-* tokens for typography.
- *
- * Intentionally hardcoded values:
- * - Component-specific dimensions (400px): Minimum chat height
- * - Border radius (20px): Pill-shaped input and list items
- * - Border widths (1px): Standard borders
- * - Percentages (85%, 100%): Layout and width constraints
- * - Negative calc expressions: Complex computed heights
- * - Font-size em values (1.2em, 1.5em, 2em): Relative heading sizes
- * - Line-height values (1.7): Unitless ratio
- * - Z-index values: Stacking order
- */
-
-c8y-widget-ai-chat-section {
-  display: flex;
-  max-height: calc(100vh - 400px);
-  min-height: 400px;
-  background-color: @component-background-default;
-  border: 1px solid var(--c8y-root-component-border-color);
-  border-radius: @size-base;
-  padding: 0;
-
-  .chat-input {
-    border-bottom-left-radius: @size-base;
-    border-bottom-right-radius: @size-base;
-  }
-}
-
-c8y-agent-chat {
-  width: 100%;
-}
-
-.chat-input {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: @size-8;
-  padding: @size-16 @size-16 @size-4 @size-16;
-  background-color: @component-background-default;
-  border-top: 1px solid var(--c8y-root-component-border-color);
-  margin-top: auto;
-  position: sticky;
-  bottom: 0;
-
-  .chat-input-group {
-    position: relative;
-    width: 100%;
-
-    textarea {
-      border-radius: 20px !important;
-      min-height: @size-40;
-      padding-top: @size-10;
-      padding-right: @size-40;
-      padding-bottom: @size-10;
-      padding-left: @size-16;
-
-      &::-webkit-scrollbar {
-        width: unset;
-        /* for vertical scrollbars */
-        height: unset;
-        /* for horizontal scrollbars */
-      }
-
-      &::-webkit-scrollbar-track {
-        background: unset;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        width: unset;
-        border-radius: unset;
-        background: unset;
-      }
-
-      &:hover {
-        &::-webkit-scrollbar-thumb {
-          background: unset;
-        }
-      }
-    }
-
-    .chat-input-group-btn {
-      position: absolute;
-      right: @size-4;
-      bottom: @size-4;
-
-      .btn-dot {
-        margin: 0 !important;
-        height: @form-control-height-base !important;
-        border-radius: 50%;
-      }
-    }
-  }
-}
-
-.chat-message {
-  line-height: 1.7;
-
-  .message-content {
-    overflow-wrap: break-word;
-    word-break: break-word;
-    max-width: 100%;
-    min-width: 0;
-
-    p {
-      margin-bottom: @size-8;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-.agent-message {
-  align-self: flex-start;
-  min-width: 0;
-  width: 100%;
-  margin-top: @size-16;
-  padding: @size-16 @size-24 @size-16 @size-16;
-
-  h1 {
-    margin-top: @size-24;
-    margin-bottom: @size-16;
-    font-size: 2em;
-    font-weight: 600;
-  }
-
-  h2 {
-    margin-top: @size-24;
-    margin-bottom: @size-16;
-    font-size: 1.5em;
-    font-weight: 600;
-  }
-
-  h3 {
-    margin-top: @size-16;
-    margin-bottom: @size-16;
-    font-size: 1.2em;
-    font-weight: 600;
-  }
-}
-
-.user-message {
-  background-color: var(--c8y-brand-70);
-  color: var(--c8y-palette-low);
-  align-self: flex-end;
-  border-radius: @size-base;
-  max-width: 85%;
-  min-width: 0;
-  padding: @size-base @size-16;
-  order: 2;
-}
-
-.message-action {
-  display: flex;
-  align-items: center;
-  gap: @size-base;
-  padding: @size-base 0 @size-16 0;
-
-  &:empty {
-    display: none;
-  }
-
-  &.user-action {
-    display: inline-block;
-    align-self: flex-end;
-    width: auto;
-    padding: 0;
-    margin-top: 0;
-    margin-right: 0;
-    order: 1;
-  }
-
-  &.agent-action {
-    justify-content: flex-start;
-    border-top: 1px dashed var(--c8y-root-component-border-color);
-  }
-
-  .btn-dot {
-    margin: 0 !important;
-    height: @form-control-height-base !important;
-    border-radius: 50% !important;
-  }
-}
-
-.message-timestamp {
-  display: block;
-  font-size: @font-size-xs;
-  color: var(--c8y-text-muted);
-
-  .user-message & {
-    text-align: right;
-  }
-}
-
-
-c8y-ai-chat {
-
-  // Visually hidden label included when users copy-paste from the chat, e.g. to report issues.
-  .hidden-copy-label {
-    display: block;
-    font-size: 0;
-    line-height: 0;
-    user-select: text;
-  }
-
-  .ai-tool-call {
-    &__fieldset {
-      display: inline-flex;
-      max-inline-size: min-content;
-      flex-direction: column;
-      max-width: 100%;
-      min-inline-size: 1rem;
-      transition: all .35s ease;
-
-      &:has([aria-expanded="true"]) {
-        min-inline-size: 100%;
-        transition: all .35s ease;
-      }
-
-      &:focus-within {
-        .c8y-focus-inset();
-        border-radius: var(--c8y-unit-base) !important;
-      }
-    }
-
-    &__btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-
-      &:focus {
-        outline: 0;
-        box-shadow: none;
-      }
-    }
-  }
-
-  .reasoning-content {
-    font-style: italic;
-    font-size: @font-size-small;
-
-    p {
-      margin-bottom: @size-4;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-  }
-
-
-}

package/styles/components/data-input/_static-assets-file-picker.less

@@ -1,22 +0,0 @@
-
-
-/**
- * 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/components/navigation-and-layout/_c8y-scrollbar.less

@@ -1,118 +0,0 @@
-
-@import "../../mixins/_c8y-scrollbar.less";
-
-
-/**
- * c8y scrolluar - 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
- */
-.navigatorContent,
-.c8y-right-drawer {
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-    transition: all 0.5s ease;
-  }
-  &::-webkit-scrollbar-track {
-    background: @navigator-scrollbar-track-color;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: @navigator-scrollbar-thumb-color;
-  }
-  scrollbar-width: thin; /* for Firefox */
-  scrollbar-color: @navigator-scrollbar-thumb-color transparent;
-  transition: scrollbar-color .2s ease;
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      background: @navigator-scrollbar-thumb-color-hover;
-    }
-    scrollbar-color: @navigator-scrollbar-thumb-color-hover transparent;
-  }
-}
-
-.panel.panel-dashboard > .panel-heading + .panel-body,
-.panel.panel-dashboard > .panel-heading + .fixed-header + .panel-body,
-.modal-inner-scroll-sm,
-.modal-inner-scroll,
-.card-inner-scroll,
-.data-grid__dropdown,
-.dropdown-menu-action-bar,
-.user-picker-scroll,
-.multiselect-item-container,
-.c8y-list__group.dropdown-menu,
-.selectize-dropdown-content,
-.inner-scroll,
-.table-data-grid-scroll,
-.flex-scroll .flex-content-scroll,
-.card--grid__inner-scroll,
-.panel-inner-scroll {
-  overflow: auto;
-
-  .c8y-scrollbar();
-
-  &.scrollbar-only-on-hover {
-    // Force scrollbar space to always be present
-    overflow-y: scroll;
-    scrollbar-width: thin; // Firefox
-    scrollbar-color: transparent transparent; // Firefox - invisible by default
-
-    &::-webkit-scrollbar {
-      width: 8px; // Webkit browsers - always reserve space
-    }
-
-    // Hide scrollbar thumb when not hovering
-    &::-webkit-scrollbar-thumb {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &:hover {
-      scrollbar-color: @component-scrollbar-thumb-hover transparent; // Firefox
-
-      &::-webkit-scrollbar-thumb {
-        background-color: @component-scrollbar-thumb-hover;
-        border-radius: 4px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: @component-scrollbar-track;
-      }
-    }
-  }
-}
-
-.table-responsive {
-  .c8y-scrollbar();
-}
-
-// avoid double scrollbars in dashboard widgets
-.card-inner-scroll .card-inner-scroll {
-  overflow: visible;
-  padding: 0;
-  > p {
-    padding: 0;
-  }
-}
-
-/* fix for firefox position sticky bottom bug
- https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
- Note: @-moz-document is not supported in Dart Sass, commented out
-*/
-// @media (min-width: @screen-md-min) {
-//   @-moz-document url-prefix() {
-//     .ff-scroll-fix {
-//       padding-bottom: 64px !important;
-//     }
-//   }
-// }

package/styles/components/navigation-and-layout/navigation/_breadcrumbs.less

@@ -1,60 +0,0 @@
-
-@import "../../../mixins/_shadows-helper.less";
-
-/**
- * Breadcrumbs - Navigation breadcrumb trail component
- *
- * Note: Uses @size-* tokens where applicable and @breadcrumb-* variables for colors.
- *
- * Intentionally hardcoded values:
- * - Percentages (100%): Layout
- * - Opacity values: Visual effects
- */
-
-.breadcrumbs-container {
-  display: block;
-  overflow: visible;
-  color: @breadcrumb-text-color;
-  font-size: @breadcrumbs-font-size;
-  
-  .breadcrumbs.text-muted {
-    color: inherit;
-  }
-  .text-muted {
-    opacity: 1 !important;
-  }
-}
-
-.breadcrumbs {
-  overflow: hidden;
-  margin: 0 !important;
-  padding: 0 !important;
-  list-style: none;
-  font-size: @breadcrumbs-font-size;
-  display: flex;
-  align-items: center;
-  > li {
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis ;
-    white-space: nowrap;
-    display: inline-flex;
-    align-items: center;
-
-    > a, > span {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: inline-block;
-      min-width: @font-size-base;
-      vertical-align: top;
-      text-align: center;
-    }
-    > a{
-      color: @breadcrumb-text-color;
-      &:hover {
-        color: @breadcrumb-text-color-hover;
-        text-decoration: underline;
-      }
-    }
-  }
-}

package/styles/components/status-feedback-and-notifications/_c8y-message-banner.less

@@ -1,46 +0,0 @@
-
-
-/**
- * c8y message uanner - 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-message-banner{
-  position: fixed;
-  z-index: 10000;
-  width: 100%;
-  pointer-events: none;
-  .alert{
-    margin: @size-16 auto;
-    box-shadow: var(--c8y-elevation-lg);
-    pointer-events: auto;
-    .close{
-      margin: calc(-1 * @size-4) calc(-1 * @size-4) 0 @size-8;
-    }
-    > span{
-      white-space: normal;
-    }
-    &.alert-info{
-      border: 2px solid var(--palette-status-info, var(--c8y-palette-status-info));
-    }
-    &.alert-warning{
-      border: 2px solid var(--palette-status-warning, var(--c8y-palette-status-warning));
-    }
-    &.alert-danger{
-      border: 2px solid var(--palette-status-danger, var(--c8y-palette-status-danger));
-    }
-    &.alert-success{
-      border: 2px solid var(--palette-status-success, var(--c8y-palette-status-success));
-    }
-    &.alert-system{
-      border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
-    }
-  }
-}