omnia-sass 3.5.72 → 3.5.101

package/src/shared/render/components/Element/style.scss

@@ -1,1005 +0,0 @@
-.element-hidden {
-  display: none;
-  &.element-show-if-hidden {
-    display: block;
-    opacity: 0.5;
-    &.element-editable-list-header,
-    &.element-editable-list-cell,
-    &.list-header {
-      display: table-cell !important;
-    }
-  }
-}
-
-.element-dashboard {
-  padding-left: 0;
-  padding-right: 0;
-  .col-form-label,
-  .form-field {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.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);
-    }
-  }
-}
-
-.element-required-indicator,
-tfoot .element-required-indicator-footer {
-  color: #b4b4b4;
-  font-size: 0.75rem;
-}
-
-.element-help-text {
-  color: $gray-600;
-  padding: 0;
-  border: 0;
-  &:hover {
-    color: $gray-800;
-  }
-}
-
-.form-field-disabled,
-.form-field-date .form-control.disabled .DateInput_input {
-  color: lighten($gray-800, 45%) !important;
-}
-
-.form-field-disabled,
-.form-check-container .checkmark.disabled {
-  cursor: no-drop !important;
-}
-
-.form-field-messages-popover .form-field-feedback {
-  .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;
-      background-color: $white;
-      border-width: 1px;
-      border-style: solid;
-      border-color: $gray-400;
-      padding: 0.5rem 0.625rem;
-      margin: 0.125rem 0 0 0;
-      max-width: 16rem;
-    }
-
-    .arrow {
-      display: none !important;
-    }
-
-    .tooltip-inner::before,
-    .tooltip-inner::after {
-      content: '';
-      display: block;
-      position: absolute;
-      bottom: 100%;
-      width: 0;
-      height: 0;
-      border-style: solid;
-    }
-
-    .tooltip-inner::after {
-      right: calc(50% - 0.4375rem);
-      border-color: transparent transparent $white transparent;
-      border-width: 0.4375rem;
-    }
-
-    .tooltip-inner::before {
-      right: calc(50% - 0.5rem);
-      border-color: transparent transparent $gray-400 transparent;
-      border-width: 0.5rem;
-    }
-  }
-}
-
-.element-editable-list-select-reference-button.multiple,
-.list-header-multiple-button {
-  box-shadow: none;
-  height: 1.5rem;
-  width: 1.5rem;
-}
-
-.element-editable-list {
-  .element-editable-list-container {
-    display: block;
-    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;
-            }
-          }
-        }
-      }
-    }
-    select {
-      border: none;
-      border-radius: 0px;
-      background-color: transparent;
-    }
-    .form-check {
-      margin-left: calc(50% - 36px / 2);
-      .checkmark {
-        height: 36px;
-        width: 36px;
-        background-color: transparent;
-        border-color: $table-border-color;
-        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;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .element-editable-list-header-show-details,
-  .element-editable-list-show-details,
-  .element-editable-list-header-options,
-  .element-editable-list-cell-options {
-    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 {
-        .input-group-prepend .btn {
-          border-radius: 0;
-          border-left: none;
-          border-top: none;
-          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 {
-          border-radius: 0;
-          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,
-        .form-control {
-          opacity: 0.7;
-        }
-      }
-    }
-    .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;
-    }
-  }
-}
-
-.element-editable-list-messages-popover .element-editable-list-feedback {
-  .element-editable-list-feedback-error {
-    color: $danger;
-  }
-  .element-editable-list-feedback-success {
-    color: $success;
-  }
-  font-size: 1rem;
-}
-
-.element-multiple-value-element {
-  .element-editable-list-table {
-    .element-selector {
-      select {
-        border-radius: 0;
-        border: none;
-      }
-    }
-  }
-}
-
-.element-selector > .form-field {
-  margin-top: 0.4rem;
-}
-
-.element-editable-list-table {
-  .table-responsive {
-    display: table;
-    border-radius: $border-radius;
-  }
-}
-
-@media (max-width: map-get($grid-breakpoints, 'lg')) {
-  .element-editable-list:not(.element-multiple-value-element) {
-    .form-field {
-      .input-group {
-        .input-group-prepend {
-          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;
-      clear: both;
-      text-align: right;
-      border: none;
-    }
-    tr {
-      border: 1px solid $table-border-color;
-    }
-    td[data-label]:before {
-      content: attr(data-label);
-      float: left;
-      font-weight: bold;
-      padding-top: calc(#{$input-padding-y} + #{$input-border-width});
-      padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
-      padding-left: $input-padding-x-sm;
-      text-overflow: ellipsis;
-      width: 100px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-align: left;
-      color: $input-color !important;
-    }
-    .element-editable-list-cell {
-      .form-group {
-        display: flex;
-
-        .form-field-date {
-          .react-datepicker-wrapper {
-            .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;
-              }
-            }
-          }
-        }
-        .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;
-  }
-}
-
-.element-list {
-  .col-form-label {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  thead th,
-  tbody td {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  thead th {
-    position: relative;
-  }
-}
-
-.column-resizer {
-  top: 0;
-  right: 0;
-  width: 3px;
-  height: 10em;
-  position: absolute;
-  cursor: col-resize;
-  user-select: none;
-  border-right: 1px dashed $table-border-color;
-  &:hover {
-    border-right: 2px dashed darken($table-border-color, 25%);
-  }
-}
-
-.element-web-component {
-  &.element-input-value-changed {
-    label {
-      color: $warning;
-    }
-  }
-  .element-web-component-container {
-    padding: 0;
-  }
-  .element-web-component-preview {
-    height: 100px;
-    width: 100%;
-    background-color: lightgrey;
-    color: grey;
-    text-align: center;
-    padding: 1rem;
-  }
-}
-
-.element-container {
-  padding: 0.5rem 0;
-  .element-container-open-btn {
-    display: flex;
-    align-items: center;
-    border-bottom: $table-border-width solid $table-border-color;
-    border-radius: 0;
-    padding-left: 0;
-    padding-right: 0;
-    text-align: left;
-  }
-}
-
-.element-button {
-  margin-top: 0.4rem;
-}
-
-.element-editable-list-cell {
-  .element-button,
-  .element-selector > .form-field {
-    margin-top: 0 !important;
-  }
-}
-
-.element-tree-node {
-  width: fit-content;
-  min-width: 100%;
-}
-
-.focused-element:hover *,
-.tree-focused-node:hover,
-.tree-selected-node:hover {
-  cursor: pointer !important;
-}
-
-.tree-node {
-  color: $white;
-  &:not(.tree-selected-node) {
-    background-color: $gray-500;
-  }
-}
-
-.sub-element-darken {
-  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;
-    background-color: lightgrey;
-    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;
-    }
-  }
-}
-
-.element-row-editor {
-  border-left: 2px solid transparent;
-  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;
-  }
-}
-
-.element-input {
-  &.element-input-value-changed {
-    label {
-      color: $warning;
-    }
-  }
-}
-
-.favorites-label,
-.menu-label {
-  padding-left: 1rem;
-  padding-bottom: 0.25rem;
-  font-size: 0.8rem;
-  span {
-    padding-left: 0.5rem;
-  }
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.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;
-  }
-
-  button.element-menu-entry {
-    width: 100%;
-  }
-  .element-menu-entry,
-  .element-menu-toggler {
-    border-radius: 0 !important;
-    color: $sidebar-color;
-    background-color: inherit;
-    padding: 0.25rem 1rem;
-    border: none;
-    margin-bottom: 1px;
-    border-bottom-width: 2px !important;
-    border-bottom-style: solid;
-    .element-menu-entry-icon {
-      display: inline-flex;
-
-      i {
-        height: 30px;
-        width: 30px;
-        color: $sidebar-icon-color;
-        padding: 2px;
-        display: inline-grid;
-        align-content: center;
-        background: transparent !important;
-      }
-    }
-  }
-
-  .element-menu-entry-favorite-btn,
-  .favorites-label,
-  .favorites-label-collapse-btn,
-  .menu-label {
-    color: $secondary;
-  }
-
-  .favorites-label-collapse-btn i {
-    font-size: 0.75rem;
-  }
-
-  .element-menu-entry-favorite-btn,
-  .favorites-label-collapse-btn {
-    &:hover,
-    &:active,
-    &:focus {
-      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;
-      padding-top: 2px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .element-menu-toggler {
-      text-align: left;
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: none !important;
-      }
-    }
-  }
-
-  &:not(.element-menu-opened) {
-    .element-menu-entry-container {
-      border-bottom-color: transparent !important;
-    }
-
-    .favorites-label,
-    .menu-label {
-      padding-left: 0 !important;
-      display: flex !important;
-      justify-content: center !important;
-
-      span,
-      .favorites-label-collapse-btn {
-        display: none !important;
-      }
-    }
-
-    .element-menu-entry-favorite-btn,
-    .element-menu-entry {
-      display: none !important;
-    }
-
-    .element-menu-entry,
-    .element-menu-toggler {
-      .element-menu-entry-icon {
-        display: inline-block !important;
-        i {
-          display: table-cell !important;
-          text-align: center !important;
-          vertical-align: middle !important;
-        }
-      }
-    }
-  }
-  .element-menu-entry-highlight {
-    font-weight: bold;
-  }
-  &.element-menu-editor {
-    a:not(.element-menu-back-btn) {
-      color: $link-color;
-    }
-  }
-}
-
-@media (min-width: map-get($grid-breakpoints, 'lg')) {
-  .element-menu {
-    &: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;
-          background-color: $sidebar-bg-color;
-          color: $sidebar-color;
-          padding-top: 6px;
-          padding-bottom: 8px;
-          padding-left: 5.5px;
-          margin-top: -4px;
-          width: 200px;
-          max-width: 200px;
-          display: none;
-          border-top: 2px solid;
-          &.show {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: map-get($grid-breakpoints, 'sm')) {
-  .element-menu .element-menu-entry-favorite-btn {
-    visibility: visible !important;
-  }
-}
-
-.element-form,
-.element-dashboard {
-  .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 {
-    button {
-      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;
-      }
-    }
-  }
-}
-
-.element-input-value-changed {
-  .form-field-history {
-    .form-control,
-    .form-check-container .checkmark {
-      border: 2px solid lighten($warning, 25%) !important;
-    }
-  }
-}
-
-.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,
-      .react-datepicker-wrapper .react-datepicker__input-container {
-        border: none !important;
-      }
-    }
-  }
-}
-
-@supports (-webkit-touch-callout: none) {
-  .form-field-disabled,
-  .form-field-date .form-control.disabled .DateInput_input {
-    color: $gray-800 !important;
-  }
-}
-
-.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;
-}