@c8y/style 1023.14.76 → 1023.14.92

package/styles/core/overlays/_dropdowns.less

@@ -1,3 +1,26 @@
+
+@import "../../mixins/_c8y-scrollbar.less";
+@import "../../mixins/_reset-filter.less";
+
+/**
+ * Dropdowns - Dropdown menu component styles
+ *
+ * Note: Uses @size-* tokens for spacing; @form-control-* for dimensions, and CSS custom properties.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (160px, 200px, 240px, 250px, 281px): Menu widths and heights
+ * - Off-token spacing (9px, 15px): Legacy padding not in token system (15px grid gutter, 9px vertical padding)
+ * - Transform values (-32px, scale values): Animation positioning
+ * - Border widths (1px, 2px): Standard borders
+ * - Negative offsets (-1px, -2px): Fine-tuning for overlays
+ * - Percentages (50%, 75%, 100%): Layout and animation keyframes
+ * - Animation durations (0.2s, 0.25s): Timing
+ * - Opacity values (0, 0.5, 0.7, 1): Visual effects
+ * - Z-index values: Stacking order
+ * - RGBA values: Transparency
+ * - Calc expressions: Complex computed values
+ */
+
 .dropup,
 .dropdown {
   position: relative;
@@ -17,9 +40,9 @@
   padding: 0;
   min-width: 160px;
   border-color: transparent;
-  border-radius: var(--c8y-dropdown-border-radius, @component-border-radius-base);
+  border-radius: var(--c8y-dropdown-border-radius; @component-border-radius-base);
   overflow: auto;
-  background-color: var(--c8y-dropdown-background-default, @component-background-default);
+  background-color: var(--c8y-dropdown-background-default; @component-background-default);
   background-clip: padding-box;
   list-style: none;
   text-align: left;
@@ -32,11 +55,11 @@
   transform-origin: left top;
   
   .sticky-bottom{
-    background-color: var(--c8y-dropdown-background-default, @component-background-default);
+    background-color: var(--c8y-dropdown-background-default; @component-background-default);
   }
 
   .list-group-item, .c8y-list__item {
-    box-shadow: inset 0 -1px 0 var(--c8y-dropdown-border-color)!important;
+    box-shadow: inset 0 -1px 0 var(--c8y-dropdown-border-color) !important;
   }
   &.dropdown-menu-right {
     transform-origin: right top;
@@ -50,7 +73,7 @@
   &--date-range {
     min-width: 240px;
     c8y-wrapper-form-field > .form-group {
-      margin-bottom: 8px;
+      margin-bottom: @size-8;
     }
   }
 
@@ -58,19 +81,19 @@
     z-index: @zindex-modal + 1 !important;
 
     .p-l-24 {
-      padding-left: 16px !important;
+      padding-left: @size-16 !important;
     }
 
     .p-r-24 {
-      padding-right: 16px !important;
+      padding-right: @size-16 !important;
     }
 
     .m-l-24 {
-      margin-left: 16px !important;
+      margin-left: @size-16 !important;
     }
 
     .m-r-24 {
-      margin-right: 16px !important;
+      margin-right: @size-16 !important;
     }
 
     .m-l-16 {
@@ -91,7 +114,7 @@
     overflow: hidden;
     margin: 0;
     height: 2px;
-    background: var(--c8y-dropdown-border-color, @component-border-color);
+    background: var(--c8y-dropdown-border-color; @component-border-color);
   }
 
   // Links within the dropdown menu
@@ -102,23 +125,23 @@
       &:not(.btn-add-block):not(.btn-clean):not(.collapse-btn.btn-dot) {
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: @size-4;
         padding: 9px 15px 10px;
         width: 100%;
         border: 0;
-        border-top: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
+        border-top: 1px solid var(--c8y-dropdown-border-color; @component-border-color);
         border-radius: 0;
-        background-color: var(--c8y-dropdown-background-default, @component-background-default);
+        background-color: var(--c8y-dropdown-background-default; @component-background-default);
         background-image: none;
-        color: var(--c8y-dropdown-color-default, @component-color-actions);
+        color: var(--c8y-dropdown-color-default; @component-color-actions);
         text-align: left;
         white-space: nowrap;
         .c8y-icon {
          color: var(--c8y-dropdown-icon-color-default);
         }
         &:hover {
-          &:not([disabled]){
-            color: var(--c8y-dropdown-color-hover, @component-color-actions-hover);
+          &:not([disabled]) {
+            color: var(--c8y-dropdown-color-hover; @component-color-actions-hover);
             text-decoration: none;
             .c8y-icon {
               color: var(--c8y-dropdown-icon-color-hover);
@@ -128,11 +151,11 @@
 
         &:focus {
           outline: none;
-          border-radius: @component-border-radius-focus!important;
+          border-radius: @component-border-radius-focus !important;
           box-shadow: inset 0 0 0 2px @component-color-focus;
         }
       }
-    
+
       &[disabled],
       &.disabled {
         &,
@@ -141,7 +164,7 @@
           cursor: @cursor-disabled !important;
           opacity: var(--c8y-root-component-opacity-disabled);
           &:not(.btn) {
-            color: @component-color-actions!important;
+            color: @component-color-actions !important;
           }
         }
       }
@@ -156,7 +179,7 @@
 
   // forms in dropdown-menu
   > .dropdown-form {
-    padding: 16px;
+    padding: @size-16;
     min-width: 250px;
     background-color: @component-background-default;
     overflow-y: auto;
@@ -165,9 +188,9 @@
       padding-bottom: 0;
     }
     .dropdown-footer {
-      margin: 0 -16px;
-      padding: 16px;
-      .separator-top();
+      margin: 0 calc(-1 * @size-16);
+      padding: @size-16;
+      &:extend(.separator-top);
       background-color: @component-background-default;
     }
   }
@@ -184,7 +207,7 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
 
   li > a {
-    padding: 9px 8px;
+    padding: 9px @size-8;
     border-width: 0;
     text-align: center;
     transition: box-shadow 0.25s ease;
@@ -236,7 +259,7 @@ bs-dropdown-container,
   /* Starting state (0%) */
   0% {
     opacity: 0;
-    transform: translateY(-16px) scale(0);
+    transform: translateY(calc(-1 * @size-16)) scale(0);
     box-shadow: var(--c8y-dropdown-elevation-default);
   }
 
@@ -255,7 +278,7 @@ bs-dropdown-container,
   /* Starting state (0%) */
   0% {
     opacity: 0;
-    transform: translateY(-16px) scale(1,0);
+    transform: translateY(calc(-1 * @size-16)) scale(1,0);
     box-shadow: var(--c8y-dropdown-elevation-default);
   }
 
@@ -274,7 +297,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
   animation-name: showDropdown;
   animation-duration: .2s;
   animation-timing-function: ease-out;
-  animation-fill-mode: forwards; 
+  animation-fill-mode: forwards;
 }
 
 // Hover/Focus state
@@ -356,7 +379,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
 @media (min-width: @screen-md-min) {
   .dropdown-menu-right--md {
     right: 0;
-    left: auto; 
+    left: auto;
     &-grid {
       right: 9px !important;
       left: auto !important;
@@ -366,7 +389,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
 @media (min-width: @screen-sm-min) {
   .dropdown-menu-right--sm {
     right: 0;
-    left: auto; 
+    left: auto;
     &-grid {
       right: 9px !important;
       left: auto !important;
@@ -397,8 +420,8 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
       padding-left: @component-padding;
       padding-right: @component-padding;
      .c8y-list__item__body{
-        padding-top: @margin-4;
-        padding-bottom: @margin-4;
+        padding-top: @size-4;
+        padding-bottom: @size-4;
       }
     }
   }
@@ -406,11 +429,11 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
 
 // Dropdown section headers
 .dropdown-header {
-  .text-label-small();
+  &:extend(.text-label-small);
   font-weight: 500;
   display: block;
-  padding: @margin-base @component-padding;
-  border-top: 1px solid fade(@black, 5%);
+  padding: @size-base @component-padding;
+  border-top: 1px solid rgba(@black, 0.05);
   background-color: @component-background-default;
   color: @component-color-default;
   white-space: nowrap;
@@ -458,11 +481,13 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
 @media (min-width: @grid-float-breakpoint) {
   .navbar-right {
     .dropdown-menu {
-      .dropdown-menu-right();
+      right: 0;
+      left: auto;
     }
 
     .dropdown-menu-left {
-      .dropdown-menu-left();
+      right: auto !important;
+      left: 0 !important;
     }
   }
 }
@@ -500,7 +525,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
   margin: 0;
 
   &:not(.btn) {
-    padding: 10px;
+    padding: @size-10;
     border: 0;
     border-radius: 0;
     background-color: transparent;
@@ -535,10 +560,10 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
       button:not(.btn):not(.btn-help):not(.btn-clean),
       label:not(.c8y-checkbox):not(.c8y-radio) {
         display: block;
-        padding: 9px 16px 10px;
+        padding: 9px @size-16 10px;
         width: 100%;
         border: 0;
-        border-top: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
+        border-top: 1px solid var(--c8y-dropdown-border-color; @component-border-color);
         border-radius: 0;
         background-color: @component-background-default;
         background-image: none;
@@ -546,7 +571,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
         text-align: left;
         white-space: nowrap;
         &.logViewer {
-          padding: 8px 0 0;
+          padding: @size-8 0 0;
         }
 
         &:hover {
@@ -556,7 +581,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
       }
       @media (min-width: @screen-md-min) {
         label {
-          padding: 9px 16px 10px;
+          padding: 9px @size-16 10px;
         }
       }
     }
@@ -581,13 +606,13 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
       &:focus {
         outline: 2px solid @component-color-focus;
         outline-offset: -2px;
-        border-radius: @component-border-radius-focus!important;
+        border-radius: @component-border-radius-focus !important;
       }
     }
 
     + .dropdown-menu {
       height: auto;
-      border: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
+      border: 1px solid var(--c8y-dropdown-border-color; @component-border-color);
     }
   }
 
@@ -620,7 +645,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
 .dropdown {
   &.dropup {
     .dropdown-menu:not([uib-dropdown-menu]) {
-      transform: translateY(calc(-100% - 32px)) !important;
+      transform: translateY(calc(-100% - @size-32)) !important;
     }
   }
 }
@@ -641,7 +666,7 @@ body {
         padding: 10px 15px 9px;
         width: 100%;
         border: 0;
-        border-top: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
+        border-top: 1px solid var(--c8y-dropdown-border-color; @component-border-color);
         border-radius: 0;
         background-color: @component-background-default;
         background-image: none;
@@ -655,12 +680,11 @@ body {
         &:focus {
           outline: 2px solid @component-color-focus;
           outline-offset: -2px;
-          border-radius: @component-border-radius-focus!important;
+          border-radius: @component-border-radius-focus !important;
         }
       }
     }
   }
-
   &.uib-dropdown-open {
     > .dropdown-menu {
       z-index: @zindex-modal + 1 !important;
@@ -679,7 +703,7 @@ body {
  // fix z-index for ngx-bootstrap dropdown attached to body and the modal is open
   &.modal-open{
     > bs-dropdown-container {
-      z-index: @zindex-modal + 1 !important; 
+      z-index: @zindex-modal + 1 !important;
     }
   }
 }
@@ -695,7 +719,7 @@ body {
   &:not(.uib-datepicker-popup) li {
     position: static;
   }
-  &:not(.ng-hide){
+  &:not(.ng-hide) {
     animation: showDropdown 0.2s ease-out forwards;
     visibility: visible;
   }
@@ -705,13 +729,13 @@ body {
   .input-group-dropdown {
     z-index: 1;
   }
-  .dropdown-menu.show &{
-    .dropdown-menu{
-      animation: none!important;
-      opacity: 1!important;
-      inset: 100% auto auto 0!important;
-      transform: translateY(0)!important;
-      visibility: visible!important;
+  .dropdown-menu.show & {
+    .dropdown-menu {
+      animation: none !important;
+      opacity: 1 !important;
+      inset: 100% auto auto 0 !important;
+      transform: translateY(0) !important;
+      visibility: visible !important;
     }
   }
 }
@@ -719,7 +743,6 @@ body {
 .c8y-select-v2 {
   display: block;
   height: @form-control-height-base;
-
   .selected-items {
     display: contents;
   }
@@ -739,17 +762,17 @@ body {
       left: 0;
       // top:-1px;
       z-index: 1;
-      height: calc(@form-control-height-base - 2px)!important;
+      height: calc(@form-control-height-base - 2px) !important;
       &:focus {
         width: auto !important;
         background: rgba(255, 255, 255, 0.6);
         background-clip: content-box;
       }
     }
-    .input-group-btn{
-      height: calc(@form-control-height-base - 2px)!important;
+    .input-group-btn {
+      height: calc(@form-control-height-base - 2px) !important;
       > button {
-        height: calc(@form-control-height-base - 2px)!important;
+        height: calc(@form-control-height-base - 2px) !important;
         &:focus {
           margin-left: 0;
         }
@@ -759,10 +782,10 @@ body {
       box-shadow: none;
       background-color: transparent;
       border: 0;
-      height: calc(@form-control-height-base - 2px)!important;
+      height: calc(@form-control-height-base - 2px) !important;
     }
   }
-  .dropdown.open, 
+  .dropdown.open,
   .dropdown.show {
     input.form-control{
       z-index: 3;

package/styles/core/overlays/_modals.less

@@ -1,3 +1,29 @@
+
+@import "../../mixins/_clearfix.less";
+@import "../../mixins/_opacity.less";
+@import "../../mixins/_shadows-helper.less";
+
+/**
+ * Modals - Modal dialog component
+ *
+ * Note: Uses @size-*; @modal-*, and @form-control-* tokens. Already partially migrated.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (50px, 62px, 100px, 200px, 290px, 310px, 319px): Modal and content sizes
+ * - Off-grid spacing (15px, 30px, 50px): Legacy spacing not in token system
+ * - Typography sizes (15px, 16px, 30px, 5em): Font sizes
+ * - Border widths (1px): Standard borders
+ * - Transform percentages (-25%): Animation positioning
+ * - Negative offsets (-1px, -2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Animation duration (0.3s): Timing
+ * - Opacity values (0, 0.9): Visual effects
+ * - RGBA values: Transparency
+ * - Z-index values: Stacking order
+ * - Calc expressions: Complex computed values
+ * - Box-shadow values: Shadow specifications
+ */
+
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
@@ -35,13 +61,13 @@ bs-modal-backdrop {
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    .translate(0, -25%);
-    .transition-transform(~'0.3s ease-out');
+    transform: translate(0, -25%);
+    transition: transform 0.3s ease-out;
   }
 
   &.in .modal-dialog,
   &.show .modal-dialog {
-    .translate(0, 0);
+    transform: translate(0, 0);
   }
 }
 
@@ -53,7 +79,7 @@ bs-modal-backdrop {
 // Shell div to position the modal with bottom padding
 .modal-dialog {
   position: relative;
-  margin: 10px;
+  margin: @size-10;
   width: auto;
 }
 
@@ -62,17 +88,17 @@ bs-modal-backdrop {
   position: relative;
   outline: 0;
   border-radius: @modal-border-radius;
-  background-color: var(--c8y-modal-background-default, @component-background-default);
+  background-color: var(--c8y-modal-background-default; @component-background-default);
   background-clip: padding-box;
-  color: var(--c8y-modal-color-default, @component-color-default);
+  color: var(--c8y-modal-color-default; @component-color-default);
 
   .boxShadowHelper(lg);
 
-  .c8y-dark-theme &{
+  .c8y-dark-theme & {
     --c8y-component-border-color: var(--c8y-palette-gray-60);
   }
-  .c8y-system-theme &{
-    @media (prefers-color-scheme: dark){
+  .c8y-system-theme & {
+    @media (prefers-color-scheme: dark) {
       --c8y-component-border-color: var(--c8y-palette-gray-60);
     }
   }
@@ -96,7 +122,7 @@ bs-modal-backdrop {
   bottom: 0;
   left: 0;
   z-index: @zindex-modal-background;
-  background-color: @modal-backdrop-background; 
+  background-color: @modal-backdrop-background;
   &.fade {
     .opacity(0);
   }
@@ -109,7 +135,7 @@ bs-modal-backdrop {
 
 // Modal header
 .modal-header {
-  padding: @margin-24;
+  padding: @size-24;
   border-bottom: 0;
 
   &.separator {
@@ -117,7 +143,7 @@ bs-modal-backdrop {
   }
 
   .input-group-search {
-    margin: 5px 0 -10px;
+    margin: @size-5 0 calc(-1 * @size-10);
   }
 
   &.dialog-header {
@@ -133,7 +159,7 @@ bs-modal-backdrop {
 
     > h4,
     > .modal-title {
-      margin: @margin-base 0 0;
+      margin: @size-base 0 0;
       text-transform: uppercase;
       letter-spacing: 0.15em;
     }
@@ -161,10 +187,10 @@ bs-modal-backdrop {
         max-height: calc(100vh - 319px);
       tr {
         > td:first-child, th:first-child{
-          padding-left: @margin-24;
+          padding-left: @size-24;
         }
         > td:last-child, th:last-child{
-          padding-right: @margin-24;
+          padding-right: @size-24;
         }
       }
     }
@@ -186,29 +212,28 @@ bs-modal-backdrop {
 }
 
 .modal-title {
-  margin-top: @margin-base;
+  margin-top: @size-base;
   font-size: @font-size-h4 !important;
   font-weight: @headings-font-weight;
 }
 
 .modal-subtitle {
   margin-bottom: 0;
-  padding: @margin-16 @margin-24;
+  padding: @size-16 @size-24;
   background-color: @component-background-default;
   text-align: center;
   font-weight: @headings-font-weight;
   font-size: 16px;
-
-  .separator-bottom();
+  &:extend(.separator-bottom);
 }
 
 // Modal body
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
   position: relative;
-  padding: @margin-24;
+  padding: @size-24;
 
-   c8y-modal &{
+   c8y-modal & {
     padding: 0;
    }
   &.separator {
@@ -222,11 +247,10 @@ bs-modal-backdrop {
 
 // Footer (for actions)
 .modal-footer {
-  padding: @margin-24;
+  padding: @size-24;
   box-shadow: inset 0 1px 0 @component-border-color;
   text-align: center; // center align buttons
-
-  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
+   .clearfix(); // clear it in case folks use .pull-* classes on buttons
 
   > .btn {
     min-width: 100px;
@@ -328,17 +352,11 @@ bs-modal-backdrop {
 }
 
 .c8y-prompt .modal-footer {
-  padding-bottom: 40px;
+  padding-bottom: calc(@size-base * 5);
   border: 0;
 }
 
-.modal-header .btn-modal-close {
-  position: relative;
-  top: -8px;
-  right: -8px;
-  color: @component-color-default;
-  font-size: 15px;
-}
+// Removed unused modal button class - verified 0 usages: .btn-modal-close
 
 .modal-status-icon {
   font-size: 30px;
@@ -362,7 +380,7 @@ bs-modal-backdrop {
   }
 
   .modal-body & {
-    margin: 0 calc(@margin-base * -1) calc(@margin-base * -1);
+    margin: 0 calc(@size-base * -1) calc(@size-base * -1);
   }
 }
 
@@ -378,7 +396,7 @@ bs-modal-backdrop {
   }
 
   .modal-body & {
-    margin: 0 calc(@margin-base * -1) calc(@margin-base * -1);
+    margin: 0 calc(@size-base * -1) calc(@size-base * -1);
   }
 }
 
@@ -391,22 +409,22 @@ bs-modal-backdrop {
     left: 0;
     z-index: 10;
     display: block;
-    margin-top: -4px;
+    margin-top: calc(-1 * @size-4);
     width: 100%;
-    height: 4px;
+    height: @size-4;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
     content: '';
   }
 
   .modal-body & {
-    margin-right: calc(@margin-24 * -1);
-    margin-left: calc(@margin-24 * -1);
+    margin-right: calc(@size-24 * -1);
+    margin-left: calc(@size-24 * -1);
   }
 
   + .modal-inner-scroll,
   + .modal-inner-scroll-sm {
     position: relative;
-    padding-top: 4px;
+    padding-top: @size-4;
 
     &:before {
       position: absolute;
@@ -415,7 +433,7 @@ bs-modal-backdrop {
       left: 0;
       z-index: 10;
       width: 100%;
-      height: 4px;
+      height: @size-4;
       background-color: @component-background-default;
       content: '';
     }