omnia-sass 3.5.169 → 3.5.186

package/dist/omnia-sass.scss

@@ -8580,9 +8580,25 @@ $colors: (
     }
   }
 }
+// Generate css variables, but using :host instead of :root to ensure compatibility in shadow dom
+:host {
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $color, $value in $colors {
+    --#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$color}: #{$value};
+  }
+
+  @each $bp, $value in $grid-breakpoints {
+    --breakpoint-#{$bp}: #{$value};
+  }
+}
 
 $transition-duration: 0.1s;
 $transition-effect: ease-in-out;
+
 .sidebar-container {
   position: fixed;
   display: inline;
@@ -8596,6 +8612,7 @@ $transition-effect: ease-in-out;
   -moz-transition: width $transition-duration $transition-effect;
   -o-transition: width $transition-duration $transition-effect;
   transition: width $transition-duration $transition-effect;
+
   .sidebar {
     height: calc(100vh - #{$topbar-height});
     position: relative;
@@ -8603,6 +8620,7 @@ $transition-effect: ease-in-out;
     overflow-y: auto;
     -ms-overflow-style: -ms-autohiding-scrollbar;
   }
+
   .sidebar-entry-text {
     display: none;
   }
@@ -8618,12 +8636,14 @@ $transition-effect: ease-in-out;
   width: $side-panel-size-sm-open;
   right: 0;
   margin-top: $topbar-height;
+
   .notification-center {
     height: calc(100vh - #{$topbar-height});
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
   }
+
   &.hidden {
     width: 0;
     min-width: 0;
@@ -8632,7 +8652,12 @@ $transition-effect: ease-in-out;
 
 .content-container {
   margin-top: calc(#{$topbar-height} + #{$color-page-indicator-bar-height});
+  height: calc(100vh - (#{$topbar-height} + #{$color-page-indicator-bar-height}));
   width: 100%;
+  overflow-y: auto;
+  display: flex;
+  position: relative;
+  flex-direction: column;
 }
 
 .sidebar-opened {
@@ -8641,6 +8666,7 @@ $transition-effect: ease-in-out;
     height: 100%;
     width: $sidebar-min-size-open;
   }
+
   .content-container {
     opacity: 0.25;
     pointer-events: none;
@@ -8653,17 +8679,20 @@ $transition-effect: ease-in-out;
     width: $sidebar-min-size;
     min-width: $sidebar-min-size;
   }
+
   .notification-center-container {
     height: 100%;
     width: $side-panel-min-size-open;
     min-width: $side-panel-min-size-open;
     margin-top: $topbar-height;
   }
+
   .content-container {
     margin-left: $sidebar-min-size;
     margin-top: $topbar-height;
     width: $content-size;
   }
+
   .sidebar-opened {
     .content-container {
       pointer-events: all;
@@ -8740,6 +8769,11 @@ body.modal-scroll-fixer {
   z-index: 1020 !important;
 }
 
+//TODO: Move this to modeling styles
+.problems-panel-container {
+  z-index: 1021 !important;
+}
+
 .color-navigation-bar {
   z-index: 1035 !important;
 }
@@ -9294,12 +9328,22 @@ $breadcrumb-height: 2.5rem;
   }
 }
 
+.horizontal-layout-element {
+    display: flex;
+    width: fit-content;
+}
+
+.horizontal-layout-container {
+    display: flex;
+}
 
 .element-hidden {
   display: none;
+
   &.element-show-if-hidden {
     display: block;
     opacity: 0.5;
+
     &.element-editable-list-header,
     &.element-editable-list-cell,
     &.list-header {
@@ -9311,6 +9355,7 @@ $breadcrumb-height: 2.5rem;
 .element-dashboard {
   padding-left: 0;
   padding-right: 0;
+
   .col-form-label,
   .form-field {
     padding-left: 0;
@@ -9321,33 +9366,40 @@ $breadcrumb-height: 2.5rem;
 .element-form {
   padding-left: 0;
   padding-right: 0;
+
   .form-group {
     margin-bottom: 0.25rem;
   }
+
   .col-form-label,
   .form-field {
     padding-left: 0;
     padding-right: 0;
   }
+
   :not(.element-editable-list) > .col-form-label {
     padding-bottom: 0;
   }
+
   .element-form-footer {
     :not(.btn-group) {
       > .btn:not(:first-child) {
         margin-left: 0.2rem;
       }
+
       > .btn:not(:last-child) {
         margin-right: 0.2rem;
       }
     }
   }
+
   .react-datepicker__input {
     .react-datepicker__input_calendarIcon {
       margin-left: 0;
       margin-right: 0;
       padding-right: 2px;
     }
+
     .DateInput {
       width: calc(100% - 28px);
     }
@@ -9364,6 +9416,7 @@ tfoot .element-required-indicator-footer {
   color: $gray-600;
   padding: 0;
   border: 0;
+
   &:hover {
     color: $gray-800;
   }
@@ -9383,15 +9436,18 @@ tfoot .element-required-indicator-footer {
   .form-field-feedback-error {
     color: $danger;
   }
+
   .form-field-feedback-success {
     color: $success;
   }
+
   font-size: 1rem;
 }
 
 .tooltip-messages {
   .tooltip {
     opacity: 1;
+
     .tooltip-inner {
       display: inline-block;
       position: relative;
@@ -9446,27 +9502,34 @@ tfoot .element-required-indicator-footer {
     overflow-x: auto;
     overflow-y: visible;
   }
+
   table {
     border-bottom: $table-border-width solid $table-border-color;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);
   }
+
   .element-editable-list-cell {
     padding: 0;
+
     label:not(.form-check) {
       display: none;
     }
+
     .form-group {
       margin: 0;
+
       .form-field-date {
         .form-control,
         .form-control.disabled {
           border: none !important;
           border-radius: 0;
         }
+
         .react-datepicker-wrapper {
           .react-datepicker__input-container {
             border: none;
             background-color: transparent;
+
             .DateInput {
               background-color: transparent;
             }
@@ -9474,13 +9537,16 @@ tfoot .element-required-indicator-footer {
         }
       }
     }
+
     select {
       border: none;
       border-radius: 0px;
       background-color: transparent;
     }
+
     .form-check {
       margin-left: calc(50% - 36px / 2);
+
       .checkmark {
         height: 36px;
         width: 36px;
@@ -9489,15 +9555,18 @@ tfoot .element-required-indicator-footer {
         top: 1px;
       }
     }
+
     &.element-hidden {
       display: none;
     }
   }
+
   .element-editable-list-show-details .btn,
   .element-editable-list-cell-options .btn {
     border-color: transparent;
     border-radius: 0;
   }
+
   .element-editable-list-header {
     font-weight: normal;
     padding: 0.5rem;
@@ -9505,6 +9574,7 @@ tfoot .element-required-indicator-footer {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   .element-editable-list-header-show-details,
   .element-editable-list-show-details,
   .element-editable-list-header-options,
@@ -9512,13 +9582,16 @@ tfoot .element-required-indicator-footer {
     width: 3rem;
     max-width: 3rem;
   }
+
   .element-editable-list-show-details,
   .element-editable-list-cell-options {
     background-color: transparent;
   }
+
   .element-editable-list-cell-options .btn {
     float: right;
   }
+
   .element-editable-list-cell {
     .form-field {
       .input-group {
@@ -9529,50 +9602,63 @@ tfoot .element-required-indicator-footer {
           border-bottom: none;
           border-color: $table-border-color;
           background-color: transparent;
+
           &:hover {
             background-color: $secondary;
           }
         }
       }
+
       input {
         border-radius: 0;
         border: none;
+
         &:not(.form-field-disabled) {
           background-color: transparent;
         }
       }
     }
   }
+
   .element-editable-list-row:not(.element-editable-list-details-row) {
     .form-control {
       background-color: transparent;
     }
+
     &:hover {
       background-color: $gray-200 !important;
+
       .element-editable-list-cell .form-field-disabled,
       .checkmark.disabled {
         background-color: $gray-400 !important;
       }
+
       .checkmark {
         border-color: $gray-400;
       }
     }
   }
+
   .element-editable-list-norecords {
     display: none;
+
     td {
       padding: 0.5rem;
     }
   }
+
   .element-editable-list-row {
     background-color: $input-bg;
+
     &.element-editable-list-row-created {
       border: 3px solid $success;
     }
+
     &.element-editable-list-row-removed {
       border: 3px solid $danger;
       text-decoration: line-through;
     }
+
     > .element-editable-list-cell {
       .form-field-history {
         .input-group-append .btn {
@@ -9580,20 +9666,24 @@ tfoot .element-required-indicator-footer {
           border: none;
         }
       }
+
       .form-field-reference .form-field-history {
         > .input-group {
           flex-wrap: nowrap;
         }
       }
     }
+
     &:not(.element-editable-list-details-row) {
       .element-input-feedback {
         display: none;
       }
     }
   }
+
   .element-editable-list-empty-line {
     background-color: $input-bg;
+
     &:hover {
       .element-editable-list-cell .form-field {
         .input-group .input-group-prepend .btn,
@@ -9602,34 +9692,42 @@ tfoot .element-required-indicator-footer {
         }
       }
     }
+
     .element-editable-list-cell .form-field {
       .input-group .input-group-prepend .btn,
       .form-control {
         opacity: 0.3;
       }
     }
+
     &:not(.element-editable-list-details-row) {
       .element-input-feedback {
         display: none;
       }
     }
   }
+
   .element-editable-list-row-invalid {
     background-color: rgba($danger, 0.2) !important;
     border-bottom-color: $danger;
+
     &:hover {
       background-color: rgba($danger, 0.25) !important;
     }
+
     & > td {
       border-bottom-color: $danger;
     }
   }
+
   .element-editable-list-row-valid {
     background-color: rgba($success, 0.2) !important;
     border-bottom-color: $success;
+
     &:hover {
       background-color: rgba($success, 0.25) !important;
     }
+
     & > td {
       border-bottom-color: $success;
     }
@@ -9640,9 +9738,11 @@ tfoot .element-required-indicator-footer {
   .element-editable-list-feedback-error {
     color: $danger;
   }
+
   .element-editable-list-feedback-success {
     color: $success;
   }
+
   font-size: 1rem;
 }
 
@@ -9676,35 +9776,44 @@ tfoot .element-required-indicator-footer {
           display: none;
         }
       }
+
       input {
         pointer-events: none;
         text-overflow: ellipsis;
       }
+
       &.form-field-disabled .react-datepicker__input-container {
         background-color: transparent;
       }
     }
+
     .element-editable-list-header-show-details,
     .element-editable-list-show-details,
     .element-editable-list-header-options,
     .element-editable-list-cell-options {
       display: none;
     }
+
     .element-editable-list-empty-line {
       display: none;
     }
+
     .element-editable-list-norecords {
       display: table-row;
     }
+
     .element-editable-list-table {
       width: 100% !important;
     }
+
     .element-editable-list-details-row {
       display: none;
     }
+
     thead th {
       display: none;
     }
+
     td,
     th {
       display: block;
@@ -9712,9 +9821,11 @@ tfoot .element-required-indicator-footer {
       text-align: right;
       border: none;
     }
+
     tr {
       border: 1px solid $table-border-color;
     }
+
     td[data-label]:before {
       content: attr(data-label);
       float: left;
@@ -9729,6 +9840,7 @@ tfoot .element-required-indicator-footer {
       text-align: left;
       color: $input-color !important;
     }
+
     .element-editable-list-cell {
       .form-group {
         display: flex;
@@ -9738,9 +9850,11 @@ tfoot .element-required-indicator-footer {
             .react-datepicker__input-container {
               border: none;
               background-color: transparent;
+
               .DateInput {
                 background-color: transparent;
               }
+
               .react-datepicker__input-container_calendarIcon,
               .react-datepicker__input-container_clearDate {
                 display: none;
@@ -9748,34 +9862,41 @@ tfoot .element-required-indicator-footer {
             }
           }
         }
+
         .form-field-boolean,
         &.element-web-component {
           margin-right: 10px;
         }
       }
+
       &:first-child:not(.element-editable-list-show-details),
       &.element-editable-list-show-details + .element-editable-list-cell {
         margin-top: 1rem;
       }
     }
+
     .element-editable-list-row-messages {
       td {
         text-align: left;
         padding: calc(#{$input-padding-y} + #{$input-border-width}) $input-padding-x-sm;
+
         &:first-child {
           border-left: none;
         }
       }
     }
+
     .element-editable-list-row:nth-child(even) {
       background: $gray-100;
     }
   }
+
   .element-multiple-value-element {
     .element-editable-list-table {
       width: 100% !important;
     }
   }
+
   .element-required-indicator-footer {
     display: none;
   }
@@ -9786,11 +9907,13 @@ tfoot .element-required-indicator-footer {
     padding-left: 0;
     padding-right: 0;
   }
+
   thead th,
   tbody td {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   thead th {
     position: relative;
   }
@@ -9805,6 +9928,7 @@ tfoot .element-required-indicator-footer {
   cursor: col-resize;
   user-select: none;
   border-right: 1px dashed $table-border-color;
+
   &:hover {
     border-right: 2px dashed darken($table-border-color, 25%);
   }
@@ -9816,9 +9940,11 @@ tfoot .element-required-indicator-footer {
       color: $warning;
     }
   }
+
   .element-web-component-container {
     padding: 0;
   }
+
   .element-web-component-preview {
     height: 100px;
     width: 100%;
@@ -9831,6 +9957,7 @@ tfoot .element-required-indicator-footer {
 
 .element-container {
   padding: 0.5rem 0;
+
   .element-container-open-btn {
     display: flex;
     align-items: center;
@@ -9866,6 +9993,7 @@ tfoot .element-required-indicator-footer {
 
 .tree-node {
   color: $white;
+
   &:not(.tree-selected-node) {
     background-color: $gray-500;
   }
@@ -9875,77 +10003,15 @@ tfoot .element-required-indicator-footer {
   background-color: $gray-100;
 }
 
-.elements-row-wrapper {
-  position: relative;
-}
-
-.elements-row-wrapper-over {
-  border: 1px solid $primary;
-  padding-bottom: 30px;
-  padding-top: 30px;
-}
-
-.elements-row-wrapper-over {
-  & .elements-row-empty {
-    padding-bottom: 0px !important;
-    padding-top: 0px !important;
-  }
-}
-
-.elements-row-empty {
-  background: repeating-linear-gradient(-45deg, $white, $white 5px, lightgrey 5px, lightgrey 10px);
-  height: 90px;
-}
-
-.empty-drop-element {
-  background: repeating-linear-gradient(-45deg, $white, $white 5px, lightgrey 5px, lightgrey 10px);
-  height: 38px;
-}
-
-.empty-drop-element-over {
-  background: $primary !important;
-}
-
-.dropPosition {
-  z-index: 100;
-  background-color: $primary;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1rem;
-  text-align: center;
-  color: $white;
-  font-weight: bold;
-}
-
-.dropPositionSize {
-  background-color: gray;
-  opacity: 0.2;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-}
-
-.dropPositionIndicator {
-  width: 1rem;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background-color: $primary;
-  text-align: center;
-  color: $white;
-  font-weight: bold;
-}
-
 .element-calendar {
   .element-calendar-controls {
     border-bottom: 1px solid $border-color;
+
     .text-muted {
       color: $body-color !important;
     }
   }
+
   .element-calendar-preview {
     width: 100%;
     min-height: 250px;
@@ -9953,13 +10019,16 @@ tfoot .element-required-indicator-footer {
     color: grey;
     padding: 1rem;
   }
+
   .element-calendar-caption-entry:not(.element-calendar-caption-entry-inactive) .element-calendar-caption-entry-text {
     &:hover {
       opacity: 0.8;
     }
   }
+
   .element-calendar-caption-entry-inactive .element-calendar-caption-entry-text {
     opacity: 0.3;
+
     &:hover {
       opacity: 0.6;
     }
@@ -9971,10 +10040,12 @@ tfoot .element-required-indicator-footer {
   margin-bottom: 5px;
   margin-top: 5px;
   margin-left: 1px;
+
   &:hover {
     border-left-color: lightgrey;
     background-color: lighten(lightgrey, 10%);
   }
+
   .element-menu-entry-edit-child-details {
     padding: 0;
     border: 0;
@@ -9994,9 +10065,11 @@ tfoot .element-required-indicator-footer {
   padding-left: 1rem;
   padding-bottom: 0.25rem;
   font-size: 0.8rem;
+
   span {
     padding-left: 0.5rem;
   }
+
   &:hover {
     cursor: pointer;
   }
@@ -10005,22 +10078,28 @@ tfoot .element-required-indicator-footer {
 .element-menu {
   background-color: $sidebar-bg-color;
   border-right: 1px solid $sidebar-border-color;
+
   .row {
     margin: 0;
   }
+
   div[class^='col-'] {
     padding: 0;
   }
+
   &:first-child {
     padding-top: 0.25rem;
   }
+
   .element-menu-toggler:focus {
     box-shadow: none;
   }
+
   .element-menu-entry-container {
     .element-menu-entry {
       border: none;
     }
+
     border: none;
     border-bottom-width: 0.125rem !important;
     border-bottom-style: solid;
@@ -10029,6 +10108,7 @@ tfoot .element-required-indicator-footer {
   button.element-menu-entry {
     width: 100%;
   }
+
   .element-menu-entry,
   .element-menu-toggler {
     border-radius: 0 !important;
@@ -10039,6 +10119,7 @@ tfoot .element-required-indicator-footer {
     margin-bottom: 1px;
     border-bottom-width: 2px !important;
     border-bottom-style: solid;
+
     .element-menu-entry-icon {
       display: inline-flex;
 
@@ -10073,26 +10154,31 @@ tfoot .element-required-indicator-footer {
       text-decoration: none;
     }
   }
+
   .element-menu-toggler {
     border: none !important;
     text-align: center;
   }
+
   &.element-menu-opened {
     .element-menu-entry-container {
       &:not(:hover):not(:active):not(:focus) {
         border-bottom-color: transparent !important;
       }
     }
+
     .element-menu-entry {
       justify-content: unset !important;
       background-color: transparent !important;
       width: 80%;
+
       &:hover,
       &:active,
       &:focus {
         text-decoration: none;
       }
     }
+
     .element-menu-entry-text {
       padding-left: 0.5rem;
       display: block;
@@ -10101,8 +10187,10 @@ tfoot .element-required-indicator-footer {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .element-menu-toggler {
       text-align: left;
+
       &:hover,
       &:active,
       &:focus {
@@ -10137,6 +10225,7 @@ tfoot .element-required-indicator-footer {
     .element-menu-toggler {
       .element-menu-entry-icon {
         display: inline-block !important;
+
         i {
           display: table-cell !important;
           text-align: center !important;
@@ -10145,9 +10234,11 @@ tfoot .element-required-indicator-footer {
       }
     }
   }
+
   .element-menu-entry-highlight {
     font-weight: bold;
   }
+
   &.element-menu-editor {
     a:not(.element-menu-back-btn) {
       color: $link-color;
@@ -10160,18 +10251,22 @@ tfoot .element-required-indicator-footer {
     &:not(.element-menu-opened) {
       .element-menu-entry {
         display: flex !important;
+
         &:not(:hover):not(:active):not(:focus) {
           background-color: transparent !important;
         }
+
         &:hover,
         &:active,
         &:focus {
           text-decoration: none;
           color: white;
+
           i {
             color: white;
           }
         }
+
         .element-menu-entry-text {
           position: fixed;
           left: calc(100% - #{$content-size}) !important;
@@ -10185,6 +10280,7 @@ tfoot .element-required-indicator-footer {
           max-width: 200px;
           display: none;
           border-top: 2px solid;
+
           &.show {
             display: block;
           }
@@ -10205,12 +10301,14 @@ tfoot .element-required-indicator-footer {
   .element-container > button > button {
     width: 90%;
   }
+
   .element-editable-list-header,
   .col-form-label {
     button {
       width: 100%;
     }
   }
+
   .element-container > button,
   .element-editable-list-header,
   .col-form-label {
@@ -10218,14 +10316,17 @@ tfoot .element-required-indicator-footer {
       text-align: left;
     }
   }
+
   .element-label-container {
     display: inline-grid;
     width: 100%;
+
     .element-label-content {
       overflow-x: hidden;
       text-overflow: ellipsis;
       display: flex;
       align-items: center;
+
       .element-label-text {
         overflow-x: hidden;
         text-overflow: ellipsis;
@@ -10246,6 +10347,7 @@ tfoot .element-required-indicator-footer {
 .element-editable-list .element-editable-list-row {
   .element-input-value-changed {
     border: 2px solid lighten($warning, 25%) !important;
+
     .form-field-history {
       .form-control,
       .form-check-container .checkmark,
@@ -10263,44 +10365,6 @@ tfoot .element-required-indicator-footer {
   }
 }
 
-.editor-wrapper-unwrapped,
-.editor-wrapper-inner {
-  position: relative;
-  border: 0.15rem solid transparent;
-}
-
-.selected-element {
-  border: 0.15rem solid $primary;
-}
-
-.focused-element {
-  border: 0.15rem dashed $primary;
-}
-
-.droppable-element {
-  position: relative;
-  &.top {
-    background: linear-gradient(360deg, transparent calc(100% - 1rem), $primary 1rem);
-  }
-  &.bottom {
-    background: linear-gradient(180deg, transparent calc(100% - 1rem), $primary 1rem);
-  }
-  &.right {
-    background: linear-gradient(90deg, transparent calc(100% - 1rem), $primary 1rem);
-  }
-  &.left {
-    background: linear-gradient(270deg, transparent calc(100% - 1rem), $primary 1rem);
-  }
-}
-
-.panel-option {
-  display: block;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1009;
-}
-
 .feedback-message {
   background-color: transparent;
   border-radius: 0;
@@ -10324,24 +10388,30 @@ tfoot .element-required-indicator-footer {
 .form-field {
   .react-datepicker-wrapper {
     width: 100%;
+
     .DateInput_fang {
       display: none;
     }
+
     .react-datepicker-wrapper_picker {
       top: 40px !important;
     }
+
     .react-datepicker__input-container input {
       height: 100%;
       width: 100%;
       border-radius: $border-radius;
       display: block;
     }
+
     .DayPickerKeyboardShortcuts_show__bottomRight {
       border-right-color: $primary;
     }
+
     .DayPickerKeyboardShortcuts_show__bottomRight::before {
       border-right-color: $link-color !important;
     }
+
     .react-datepicker__input-container_picker,
     .DayPicker__withBorder,
     .CalendarMonthGrid,
@@ -10351,35 +10421,43 @@ tfoot .element-required-indicator-footer {
     .DayPickerKeyboardShortcuts_panel {
       background: $body-bg;
     }
+
     .CalendarDay__default:not(.CalendarDay__selected):hover {
       background: lighten($primary, 30%) !important;
       color: $body-bg !important;
     }
+
     .DayPickerNavigation_leftButton__horizontalDefault,
     .DayPickerNavigation_rightButton__horizontalDefault,
     .CalendarDay__default,
     .DayPickerKeyboardShortcuts_panel {
       border-color: $nav-tabs-border-color;
     }
+
     .DayPickerNavigation_svg__horizontal,
     .DayPickerKeyboardShortcuts_closeSvg {
       fill: $body-color;
     }
+
     .CalendarDay__default,
     .DayPickerKeyboardShortcuts_panel {
       color: $body-color;
     }
+
     .CalendarDay__selected {
       background: $link-color !important;
       border-color: $link-color !important;
     }
+
     .DayPicker__withBorder {
       border-radius: $border-radius;
     }
+
     .DateInput {
       line-height: 1.25;
       padding: 0;
     }
+
     .DateInput_input {
       font-size: 1rem;
       font-family: $font-family-base;
@@ -10390,23 +10468,29 @@ tfoot .element-required-indicator-footer {
       background: transparent !important;
       outline: none;
     }
+
     .DateInput_input__focused {
       background-color: transparent;
       border-radius: 0;
     }
+
     .react-datepicker-wrapper__picker {
       top: 40px;
     }
+
     .react-datepicker__input-container_clearDate {
       margin: 0;
+
       &:hover {
         background-color: transparent;
+
         .react-datepicker__input-container_clearDate_svg {
           fill: $primary;
         }
       }
     }
   }
+
   .SingleDatePickerInput_calendarIcon {
     display: inline-flex;
     margin: 0;
@@ -10415,70 +10499,87 @@ tfoot .element-required-indicator-footer {
     background-color: transparent;
     border: 0;
   }
+
   .form-field-number {
     text-align: right;
   }
+
   .form-field-disabled,
   &.form-field-date .form-control.disabled {
     background-color: $input-disabled-bg !important;
+
     .DateInput_input {
       background-color: $input-disabled-bg;
       font-style: normal;
     }
+
     .SingleDatePickerInput_calendarIcon {
       cursor: no-drop;
     }
   }
+
   &.form-field-invalid {
     .react-datepicker-wrapperInput {
       border: 1px solid $danger;
     }
+
     .element-input-feedback {
       display: block;
     }
   }
+
   &.form-field-valid {
     .react-datepicker-wrapperInput {
       border: 1px solid $success;
     }
+
     .element-input-feedback {
       display: block;
     }
   }
+
   // Placeholder text color
   ::-webkit-input-placeholder {
     /* WebKit, Blink, Edge */
     color: rgba($black, 0.35);
   }
+
   :-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */
     color: rgba($black, 0.35);
     opacity: 1;
   }
+
   ::-moz-placeholder {
     /* Mozilla Firefox 19+ */
     color: rgba($black, 0.35);
     opacity: 1;
   }
+
   :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color: rgba($black, 0.35);
   }
+
   ::-ms-input-placeholder {
     /* Microsoft Edge */
     color: rgba($black, 0.35);
   }
+
   .input-group-addon {
     padding: 0;
+
     .btn {
       border: none;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
+
   .input-group .btn {
     border-color: $input-border-color;
   }
+
   /* Checkbox: Customize the label (the container) */
   .form-check-container {
     cursor: pointer;
@@ -10487,16 +10588,19 @@ tfoot .element-required-indicator-footer {
     -ms-user-select: none;
     user-select: none;
     height: 38px; // 36px + 2px margin
+
     /* Hide the browser's default checkbox */
     input {
       position: absolute;
       opacity: 0;
       cursor: pointer;
+
       /* When the checkbox is checked, add a blue background */
       &:checked ~ .checkmark {
         background-color: white;
       }
     }
+
     /* Create a custom checkbox */
     .checkmark {
       position: absolute;
@@ -10507,6 +10611,7 @@ tfoot .element-required-indicator-footer {
       background-color: white;
       border-radius: 0.25rem;
       border: 1px solid $input-border-color;
+
       /* Create the checkmark/indicator (hidden when not checked) */
       &:after {
         content: '';
@@ -10523,24 +10628,29 @@ tfoot .element-required-indicator-footer {
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
       }
+
       &.disabled {
         background-color: $input-disabled-bg !important;
         cursor: default;
       }
     }
+
     /* On mouse-over, add a grey background color */
     &:hover input ~ .checkmark {
       background-color: #eee;
     }
+
     /* Show the checkmark when checked */
     input:checked ~ .checkmark:after {
       display: block;
     }
+
     input:focus ~ .checkmark {
       color: $input-focus-color;
       background-color: $input-focus-bg;
       border-color: $input-focus-border-color;
       outline: 0;
+
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows {
         box-shadow: $input-box-shadow, $input-focus-box-shadow;
@@ -10567,6 +10677,7 @@ tfoot .element-required-indicator-footer {
   border-radius: 0rem;
   width: auto;
 }
+
 .form-control-property-editor-checkbox {
   height: 19px !important;
   width: 19px !important;
@@ -10574,6 +10685,7 @@ tfoot .element-required-indicator-footer {
   font-size: 1rem;
   border-radius: 0rem;
 }
+
 .compact-form-field-reference-window-toggler {
   height: auto;
   padding: 0 0.2rem;
@@ -10582,6 +10694,14 @@ tfoot .element-required-indicator-footer {
   width: auto;
 }
 
+.compact-form-field-reference-window-combo {
+  height: auto;
+  padding: 0 0.2rem;
+  font-size: 0.8rem;
+  border-radius: 0rem;
+  width: 20px;
+}
+
 .DayPickerKeyboardShortcuts_show__bottomRight {
   border-right-color: $primary !important;
 }
@@ -10591,6 +10711,7 @@ tfoot .element-required-indicator-footer {
     transform-origin: 100% 100%;
     transform: rotate(0deg);
   }
+
   100% {
     transform-origin: 100% 100%;
     transform: rotate(360deg);
@@ -10603,6 +10724,7 @@ tfoot .element-required-indicator-footer {
   bottom: 2rem;
   right: 2rem;
   margin-top: 0;
+
   &:before {
     position: absolute;
     display: block;
@@ -10615,6 +10737,7 @@ tfoot .element-required-indicator-footer {
     border-radius: 50%;
     background-color: $gray-300;
   }
+
   &:after {
     position: absolute;
     display: block;
@@ -10655,11 +10778,13 @@ table .checkmark {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+
   &.form-field-history-previous {
     .form-control,
     .react-datepicker-wrapper .react-datepicker__input-container .DateInput input {
       text-decoration: line-through;
     }
+
     .form-check-container .checkmark::after {
       border-color: $gray-600;
     }
@@ -10671,18 +10796,29 @@ table .checkmark {
     border-right: 2px dotted;
     background-color: $input-bg;
   }
+
   input {
     border-left: none;
   }
 }
 
-.form-field-code {
-  .code-editor {
-    min-height: 50vh;
-    height: calc(100% - 2rem);
-    section {
-      min-height: 50vh;
-    }
+.form-field-file-upload-button {
+  background-color: $white;
+  border: 1px solid $gray-600;
+  color: $gray-600;
+  border-radius: $input-border-radius;
+  height: $input-height;
+  padding: 0 0.75rem;
+  margin-right: 0.5rem;
+
+  &:hover {
+    background-color: $gray-600;
+    color: $white;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.2rem $gray-500;
   }
 }
 
@@ -10704,40 +10840,49 @@ table .checkmark {
     }
   }
 }
+
 .react-datepicker-popper {
   &[data-placement='top-start'] {
     .react-datepicker__triangle::before {
       border-top-color: $table-border-color !important;
     }
+
     .react-datepicker__triangle::after {
       border-top-color: $body-bg !important;
     }
   }
+
   &[data-placement='bottom-start'] {
     .react-datepicker__triangle::before {
       border-bottom-color: $table-border-color !important;
     }
+
     .react-datepicker__triangle::after {
       border-bottom-color: $body-bg !important;
     }
   }
+
   .react-datepicker {
     font-family: inherit;
     background: $body-bg;
     border: 1px solid $table-border-color;
+
     .react-datepicker__triangle {
       transform: none !important;
       left: 2rem !important;
       z-index: 1 !important;
     }
+
     .react-datepicker__navigation--next,
     .react-datepicker__navigation--previous {
       color: lighten($body-color, 50%);
       margin-top: 1rem;
     }
+
     .react-datepicker__month-container {
       background: $body-bg;
       margin: 0.75rem;
+
       .react-datepicker__month,
       .react-datepicker__week {
         background: $body-bg;
@@ -10749,16 +10894,20 @@ table .checkmark {
           margin: 0px;
           border-radius: 0rem;
         }
+
         .react-datepicker__day:hover {
           color: $body-bg;
         }
+
         .react-datepicker__day--selected {
           background-color: $primary;
         }
+
         .react-datepicker__day--outside-month {
           opacity: 30%;
         }
       }
+
       .react-datepicker__header {
         background: $body-bg;
         border-bottom: none;
@@ -11381,23 +11530,6 @@ table .checkmark {
   }
 }
 
-.theme-selector {
-  white-space: normal !important;
-  .badge-primary {
-    height: fit-content;
-  }
-  .theme-identification {
-    &.active {
-      max-width: 80%;
-    }
-    small {
-      word-break: break-word;
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-    }
-  }
-}
-
 .timestamp-refuse {
   text-align: center;
   .title {
@@ -11455,6 +11587,23 @@ table .checkmark {
   }
 }
 
+.theme-selector {
+  white-space: normal !important;
+  .badge-primary {
+    height: fit-content;
+  }
+  .theme-identification {
+    &.active {
+      max-width: 80%;
+    }
+    small {
+      word-break: break-word;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+  }
+}
+
 .instances-form-container {
   &.with-history-open {
     .instances-form {

package/package.json

@@ -6,10 +6,11 @@
     "build": "scss-bundle -c scss-bundle.config.json",
     "test": "echo ok",
     "pack": "yarn pack",
-    "clean": "rimraf dist && rimraf omnia-low-code-omnia-sass*.tgz"
+    "clean": "rimraf dist && rimraf omnia-low-code-omnia-sass*.tgz",
+    "uninstall": "rimraf node_modules"
   },
   "devDependencies": {
-    "@omnia-low-code/runtime-web-app": "^3.5.169",
+    "@omnia-low-code/runtime-web-app": "^3.5.186",
     "scss-bundle": "3.1.2"
   },
   "workspaces": {
@@ -18,7 +19,7 @@
       "*@omnia-low-code/runtime-web-app*/**"
     ]
   },
-  "version": "3.5.169",
+  "version": "3.5.186",
   "author": "",
   "license": "MIT"
 }