@c8y/style 1023.14.76 → 1023.14.92

package/styles/core/forms/_forms.less

@@ -1,3 +1,54 @@
+@import "../../../variables/_dlt-c8y-icons-vars.less";
+@import "../../icons/_c8y-glyphs.less";
+@import "../../mixins/_c8y-scrollbar.less";
+@import "../../mixins/_forms.less";
+@import "../../mixins/_grid.less";
+@import "../../mixins/_icon-base.less";
+
+/**
+ * Forms - Form controls, inputs, labels, and validation
+ *
+ * Note: Uses @form-control-*; @form-label-*; @form-legend-*, and @size-* tokens.
+ *
+ * Intentionally hardcoded values:
+ * - rem-based values (1rem, 0.25rem, 1.1428571429em, 1.5em, 0.9rem): Relative sizing for fieldsets
+ * - Percentages (20%, 50%, 100%): Layout calculations
+ * - Border widths (1px): Standard borders
+ * - Fine-tuning offsets (1px, 2px, 3px): Precise positioning adjustments
+ * - Decimal positions (4.4px, 3.7px, .3px): Sub-pixel positioning for checkmarks
+ * - Component-specific sizes (30px, 32px, 180px): Fixed component dimensions
+ * - Typography sizes (12px, 14px, 16px, 18px): Font sizes
+ * - Checkbox/radio mark dimensions (9px, 5px): Custom control indicators
+ * - Shadow values (0 0 0 2px, inset 0 0 0): Box-shadow specifications
+ * - Transition durations (0.15s, 0.25s, 0.35s, 0.4s, 0.5s): Animation timing
+ * - Opacity values: Visual effects
+ * - Z-index values: Layering
+ * - Transform values (rotate, translate, scale): Positioning transforms
+ * - Line-height unitless values (1, 1.2, 1.5): Relative line heights
+ * - Calculation expressions: Complex computed values
+ * - Non-standard spacing (15px): Off-token legacy spacing
+ */
+
+// Shared mixin for validation state styling with feedback icon
+.validation-state(@validation-color; @icon-content) {
+  .form-control-validation(@form-control-color-default; @validation-color; transparent);
+  .form-control-feedback-message {
+    &:before {
+      content: @icon-content;
+    }
+  }
+}
+
+// Shared mixin for form-block border line
+.form-block-border-line() {
+  align-self: center;
+  flex: 1 1 auto;
+  border-top-width: 1px;
+  border-top-style: solid;
+  content: '';
+  opacity: 0.5;
+}
+
 // Normalize non-controls
 fieldset {
   margin: 0;
@@ -10,7 +61,7 @@ fieldset.c8y-fieldset {
   display: block;
   margin: 1rem 0;
   border: solid 1px @form-control-border-color-default;
-  border-radius: @margin-8;
+  border-radius: @size-8;
   margin-inline-start: 2px;
   margin-inline-end: 2px;
   padding-block-start: 0.25rem;
@@ -32,9 +83,9 @@ fieldset.c8y-fieldset {
     margin: 0;
     width: auto;
     text-transform: none;
-    padding-inline-start: 4px;
-    padding-inline-end: 4px;
-    min-height: 24px;
+    padding-inline-start: @size-4;
+    padding-inline-end: @size-4;
+    min-height: @size-24;
     display: flex;
     align-items: center;
   }
@@ -51,14 +102,14 @@ fieldset.c8y-fieldset {
     justify-self: right;
   }
   + .c8y-fieldset {
-    margin-top: @margin-24;
+    margin-top: @size-24;
   }
 }
 
 legend,
 .legend {
   display: block;
-  margin: @margin-16 0 @margin-8 0;
+  margin: @size-16 0 @size-8 0;
   padding: 0;
   width: 100%;
   border: 0;
@@ -72,23 +123,13 @@ legend,
     align-items: center;
     flex-flow: row nowrap;
     &:after {
-      align-self: center;
-      flex: 1 1 auto;
-      margin-left: 8px;
-      border-top-width: 1px;
-      border-top-style: solid;
-      content: '';
-      opacity: 0.5;
+      .form-block-border-line();
+      margin-left: @size-8;
     }
     &.center {
       &:before {
-        align-self: center;
-        flex: 1 1 auto;
-        margin-right: 8px;
-        border-top-width: 1px;
-        border-top-style: solid;
-        content: '';
-        opacity: 0.5;
+        .form-block-border-line();
+        margin-right: @size-8;
       }
     }
     &.last-record {
@@ -102,14 +143,14 @@ legend,
     }
   }
   > .dot {
-    margin-right: 5px;
+    margin-right: @size-5;
     width: 30px;
     height: 30px;
     font-size: 14px;
     line-height: 32px;
     &--small {
-      width: 20px;
-      height: 20px;
+      width: @size-20;
+      height: @size-20;
       font-size: 12px;
       display: flex;
       align-items: center;
@@ -121,7 +162,7 @@ legend,
 
 label {
   display: inline-block;
-  margin-bottom: @margin-4;
+  margin-bottom: @size-4;
   max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
   color: @form-label-color;
   text-transform: @form-label-text-transform;
@@ -146,7 +187,7 @@ label {
       opacity: @form-control-disabled-opacity;
     }
   }
-  &:has(.btn-help){
+  &:has(.btn-help) {
     display: flex;
     align-items: center;
   }
@@ -210,7 +251,7 @@ output {
   border: 0;
   border-radius: @form-control-border-radius;
   background-color: @form-control-background-default;
-  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  background-image: none; // Reset unusual Firefox-on-Android default style,see https://github.com/necolas/normalize.css/issues/214
   box-shadow: inset 0 0 0 @form-control-border-width @form-control-border-color-default;
   color: @form-control-color-default;
   font-weight: @form-control-font-weight;
@@ -223,8 +264,8 @@ output {
 
   .form-control-focus();
   .placeholder();
-  
-  &:has(.c8y-colorpicker){
+
+  &:has(.c8y-colorpicker) {
     width: auto;
   }
   &[disabled],
@@ -260,16 +301,16 @@ textarea.form-control {
 // color picker
 .c8y-colorpicker {
   position: relative;
-  width: 20px;
-  height: 20px;
+  width: @size-20;
+  height: @size-20;
   input {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
     box-sizing: border-box;
-    width: 20px;
-    height: 20px;
+    width: @size-20;
+    height: @size-20;
     opacity: 0;
     cursor: pointer;
     + span {
@@ -313,7 +354,24 @@ input[type='search'] {
 
 select,
 select.form-control {
-  .form-control();
+  // Form control base styles (from .form-control in forms.less)
+  display: block;
+  padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal;
+  width: 100%;
+  height: @form-control-height-base;
+  border: 0;
+  border-radius: @form-control-border-radius;
+  background-color: @form-control-background-default;
+  box-shadow: inset 0 0 0 @form-control-border-width @form-control-border-color-default;
+  color: @form-control-color-default;
+  font-weight: @form-control-font-weight;
+  font-size: @font-size-base;
+  font-family: @form-control-font-family;
+  line-height: @form-control-line-height;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+
   &[multiple],
   &[size] {
     height: auto;
@@ -324,7 +382,7 @@ select.form-control {
 .c8y-select-wrapper {
   position: relative;
   select {
-    padding-right: 24px;
+    padding-right: @size-24;
     background-image: none;
 
     -webkit-appearance: none;
@@ -338,7 +396,7 @@ select.form-control {
     .c8y-glyph();
     position: absolute;
     top: 50%;
-    right: 5px;
+    right: @size-5;
     z-index: 2;
     color: @form-control-icon-color;
     content: @c8y-glyph-caret;
@@ -403,7 +461,7 @@ label.c8y-radio {
       box-shadow 0.15s ease-in-out;
     margin: 2px 0;
     + span {
-      margin-left: 8px;
+      margin-left: @size-8;
       line-height: @form-control-line-height;
     }
   }
@@ -438,8 +496,8 @@ label.c8y-radio {
     top: 50%;
     left: 50%;
     display: inline-block;
-    width: 8px;
-    height: 8px;
+    width: @size-8;
+    height: @size-8;
     border-radius: 50%;
     background-color: @form-control-border-color-focus;
     content: '';
@@ -453,9 +511,9 @@ label.c8y-radio {
   input[type='checkbox']:indeterminate + span::after {
     position: absolute;
     top: 4.4px;
-    left: 4px;
+    left: @size-4;
     display: block;
-    width: 8px;
+    width: @size-8;
     height: 5px;
     border-bottom: 2px solid;
     border-left: 0;
@@ -500,7 +558,7 @@ label.c8y-radio {
     display: inline-flex;
     padding: 0;
     &:not(:last-child) {
-      margin-right: @margin-16;
+      margin-right: @size-16;
     }
   }
   &.has-error {
@@ -513,7 +571,7 @@ label.c8y-radio {
 .form-group {
   > label + .c8y-checkbox,
   > label + .c8y-radio {
-    margin-top: @margin-8;
+    margin-top: @size-8;
   }
 }
 
@@ -545,11 +603,11 @@ c8y-messages,
   .input-group-array .has-error:hover & {
     position: absolute;
     bottom: 61px;
-    left: calc(20% - @margin-16);
+    left: calc(20% - @size-16);
     z-index: 10;
     display: block;
-    padding: 0 5px;
-    max-width: calc(100% - @margin-16);
+    padding: 0 @size-5;
+    max-width: calc(100% - @size-16);
     border-radius: @tooltip-radius;
     background-color: @form-control-validation-error;
     color: @tooltip-color-default;
@@ -597,7 +655,7 @@ c8y-messages,
   }
 }
 
-.form-control-feedback-message:has(.help-block) {
+body .form-control-feedback-message:has(.help-block) {
   padding-left: 0;
 }
 
@@ -634,44 +692,29 @@ file-picker ~ .help-block,
 c8y-field-input ~ .help-block,
 input ~ .help-block {
   position: relative;
-  padding-top: calc(@margin-base * 0.25);
-  padding-left: 20px;
+  padding-top: calc(@size-base * 0.25);
+  padding-left: @size-20;
   margin-top: 0;
 }
 
 file-picker ~ .help-block {
-  margin-top: -24px;
+  margin-top: calc(-1 * @size-24);
 }
 
 .has-success:not(.schema-form-text) {
-  .form-control-validation(@form-control-color-default; @form-control-validation-success; transparent);
-  .form-control-feedback-message {
-    &:before {
-      content: @alert-success-icon;
-    }
-  }
+  .validation-state(@form-control-validation-success; @alert-success-icon);
 }
 
 .has-warning {
-  .form-control-validation(@form-control-color-default; @form-control-validation-warning;transparent);
-  .form-control-feedback-message {
-    &:before {
-      content: @alert-warning-icon;
-    }
-  }
+  .validation-state(@form-control-validation-warning; @alert-warning-icon);
 }
 
 .has-error {
-  .form-control-validation(@form-control-color-default; @form-control-validation-error;transparent);
-  .form-control-feedback-message {
-    &:before {
-      content: @alert-danger-icon;
-    }
-  }
+  .validation-state(@form-control-validation-error; @alert-danger-icon);
 }
 
 .form-control-feedback-message.has-error {
-  margin-bottom: 8px;
+  margin-bottom: @size-8;
   line-height: 1.2;
   &:before {
     color: @form-control-validation-error;
@@ -683,12 +726,7 @@ file-picker ~ .help-block {
 }
 
 .has-info {
-  .form-control-validation(@form-control-color-default; @form-control-validation-info;transparent);
-  .form-control-feedback-message {
-    &:before {
-      content: @alert-info-icon;
-    }
-  }
+  .validation-state(@form-control-validation-info; @alert-info-icon);
 }
 
 textarea ~ .help-block:not(:empty),
@@ -761,7 +799,7 @@ c8y-field-input ~ .help-block:not(:empty),
 //
 .form-group-sm {
   .btn{
-    .btn-sm();
+    &:extend(.btn-sm);
   }
   > label {
     margin-bottom: 0;
@@ -772,10 +810,10 @@ c8y-field-input ~ .help-block:not(:empty),
 .form-group-sm .form-control,
 .form-group-sm > .form-group .form-control,
 .form-group-sm .form-control-static,
-.input-sm {
+.input-sm , .input-group-sm .form-control {
   &:not(.c8y-radio):not(.c8y-checkbox) {
     padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
-    height: @form-control-height-sm!important;
+    height: @form-control-height-sm !important;
     font-size: @font-size-small;
     line-height: @line-height-small;
   }
@@ -787,11 +825,11 @@ c8y-field-input ~ .help-block:not(:empty),
 
 .form-group-lg .form-control,
 .form-group-lg .form-control-static,
-.input-lg {
+.input-lg, .input-group-lg .form-control {
   &:not(.c8y-radio):not(.c8y-checkbox) {
     padding: @form-control-padding-large-vertical @form-control-padding-large-horizontal;
     max-height: unset !important;
-    height: @form-control-height-lg!important;
+    height: @form-control-height-lg !important;
     font-size: @font-size-large;
   }
 }
@@ -813,7 +851,7 @@ c8y-field-input ~ .help-block:not(:empty),
     margin: 0;
     label {
       margin: 0;
-      color: @form-label-color!important;
+      color: @form-label-color !important;
       opacity: 1 !important;
     }
   }
@@ -899,11 +937,11 @@ label.editable {
     }
   }
   &:has(.ng-pristine):after {
+    .dlt-c8y-icon();
     position: relative;
     display: inline-block;
     margin-top: 0.9rem;
     color: @component-brand-primary;
-    .dlt-c8y-icon();
     content: @dlt-c8y-icon-pencil;
   }
 
@@ -942,7 +980,7 @@ label.editable {
   &.updated .form-control,
   .form-control:focus,
   .form-control.ng-dirty {
-    margin-right: -24px;
+    margin-right: calc(-1 * @size-24);
     min-width: 100%;
     opacity: 1;
     transition: all 0.25s ease;
@@ -964,9 +1002,9 @@ label.editable {
   }
   .form-control.ng-invalid-required + span,
   .form-control.ng-invalid-required + span span {
-    color: @form-control-validation-error!important;
+    color: @form-control-validation-error !important;
     &:after {
-      color: @form-control-validation-error!important;
+      color: @form-control-validation-error !important;
     }
   }
 
@@ -978,7 +1016,7 @@ label.editable {
       display: none;
     }
     .form-control {
-      padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal!important;
+      padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal !important;
     }
   }
 }
@@ -1002,10 +1040,10 @@ label.editable {
       vertical-align: middle;
 
       > label {
-        margin-right: @margin-8;
+        margin-right: @size-8;
       }
       + .form-group, + .btn {
-        margin-left: @margin-8;
+        margin-left: @size-8;
       }
       
     }
@@ -1060,12 +1098,6 @@ label.editable {
       margin-left: 0;
     } // Re-override the feedback icon.
     // Removed unused logic: .has-feedback
-    //.has-feedback .form-control-feedback {
-    //  top: 0;
-    //}
-    //.has-feedback .form-control-feedback-message {
-    //  top: @form-control-height-base;
-    //}
   }
 }
 
@@ -1075,12 +1107,12 @@ label.editable {
   label {
     display: inline-flex;
     align-items: center;
-    margin: 0 0 8px 0;
+    margin: 0 0 @size-8 0;
     padding-left: 0;
     > input[type='radio'],
     > input[type='checkbox'] {
       flex-grow: 0;
-      margin: 0 8px 0 0;
+      margin: 0 @size-8 0 0;
       height: 18px;
       + span {
         flex-grow: 1;
@@ -1112,7 +1144,7 @@ label.editable {
       margin-right: 0;
       margin-left: 0;
       .form-control-feedback {
-        right: 5px;
+        right: @size-5;
       }
     }
   }
@@ -1126,10 +1158,7 @@ label.editable {
   //
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
-  // Removed unused logic: .has-feedback
-  //.has-feedback .form-control-feedback {
-  //  right: calc(@grid-gutter-width * 0.5 + 5);
-  //}
+  // Removed unused logic: .has-feedback .form-control-feedback
 
   .form-group-lg {
     @media (min-width: @screen-sm-min) {
@@ -1149,36 +1178,4 @@ label.editable {
   }
 }
 
-// Slide form action buttons into the viewport on long forms
-.btn-save-wrapper {
-  animation-duration: 0.5s;
-  &.changed-remove-active {
-    animation-duration: 0;
-  }
-}
-
-.btn-save-wrapper.changed {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: (@zindex-navbar-fixed - 1);
-  padding: 16px 48px;
-  background-color: @component-background-default;
-  transition: left 0.4s ease-in-out; //horizontal tabs
-  .mcontainerHorizontal & {
-    left: 0;
-    padding: 10px 15px;
-  }
-  .open & {
-    left: @navigatorWidth;
-  }
-}
-
-.open {
-  .has-tabs.page-tabs-vertical + .container-fluid {
-    .btn-save-wrapper.changed {
-      left: calc(@navigatorWidth + @nav-tabs-vertical-width);
-    }
-  }
-}
+// Removed unused form button wrapper class - verified 0 usages: .btn-save-wrapper