@wavemaker/app-runtime-wm-build 12.0.0-next.45061 → 12.0.0-next.45064

app-runtime-wm-build/wmapp/styles/foundation/foundation.css

@@ -849,6 +849,28 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-message-container-loading-background: var(--wm-color-primary);
   --wm-message-container-loading-color: var(--wm-color-on-primary);
   --wm-message-container-loading-border-color: var(--wm-color-primary);
+  --wm-modal-backdrop-opacity: 50%;
+  --wm-modal-backdrop-background: color-mix(in srgb, var(--wm-color-scrim), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
+  --wm-modal-backdrop-z-index: 999;
+  --wm-modal-z-index: 1000;
+  --wm-modal-width: 600px;
+  --wm-modal-xs-width: 440px;
+  --wm-modal-sm-width: 600px;
+  --wm-modal-md-width: 900px;
+  --wm-modal-lg-width: 1200px;
+  --wm-modal-xl-width: 1536px;
+  --wm-modal-background: var(--wm-color-surface-container-high);
+  --wm-modal-radius: var(--wm-radius-lg);
+  --wm-modal-header-padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-4);
+  --wm-modal-title-gap: var(--wm-space-1);
+  --wm-modal-title-font-size: var(--wm-h3-font-size);
+  --wm-modal-title-font-family: var(--wm-h3-font-family);
+  --wm-modal-title-font-weight: var(--wm-h3-font-weight);
+  --wm-modal-title-line-height: var(--wm-h3-line-height);
+  --wm-modal-title-letter-spacing: var(--wm-h3-letter-spacing);
+  --wm-modal-body-padding: var(--wm-space-6) var(--wm-space-6);
+  --wm-modal-footer-padding: var(--wm-space-6) var(--wm-space-6);
+  --wm-modal-footer-gap: var(--wm-space-3);
   /*--Nav--*/
   --wm-nav-min-height: var(--wm-nav-item-min-height);
   --wm-nav-background: var(--wm-color-surface-container-low);
@@ -913,7 +935,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-top-nav-box-shadow: none;
   --wm-top-nav-z-index: 3;
   /*--app left panel/nav--*/
-  --wm-aside-panel-width: 260px;
+  --wm-aside-panel-width: 220px;
   --wm-aside-panel-background: var(--wm-color-surface-container-low);
   --wm-aside-panel-color: var(--wm-color-on-surface-variant);
   --wm-aside-panel-padding-top: var(--wm-space-3);
@@ -1189,6 +1211,40 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-tabs-content-background: inherit;
   --wm-tabs-body-padding: var(--wm-space-4);
   --wm-tabs-body-height: 100px;
+  --wm-tile-padding: var(--wm-space-4);
+  --wm-tile-background: var(--wm-color-surface-container-high);
+  --wm-tile-color: var(--wm-color-on-surface-variant);
+  --wm-tile-radius: var(--wm-radius-sm);
+  --wm-tile-shadow: var(--wm-elevation-shadow-1);
+  --wm-tile-primary-background: var(--wm-color-primary-container);
+  --wm-tile-primary-color: var(--wm-color-primary);
+  --wm-tile-secondary-background: var(--wm-color-secondary-container);
+  --wm-tile-secondary-color: var(--wm-color-secondary);
+  --wm-tile-tertiary-background: var(--wm-color-tertiary-container);
+  --wm-tile-tertiary-color: var(--wm-color-tertiary);
+  --wm-tile-success-background: var(--wm-color-success-container);
+  --wm-tile-success-color: var(--wm-color-success);
+  --wm-tile-info-background: var(--wm-color-info-container);
+  --wm-tile-info-color: var(--wm-color-info);
+  --wm-tile-warning-background: var(--wm-color-warning-container);
+  --wm-tile-warning-color: var(--wm-color-warning);
+  --wm-tile-danger-background: var(--wm-color-error-container);
+  --wm-tile-danger-color: var(--wm-color-error);
+  /*--filled--*/
+  --wm-tile-filled-primary-background: var(--wm-color-primary);
+  --wm-tile-filled-primary-color: var(--wm-color-on-primary);
+  --wm-tile-filled-secondary-background: var(--wm-color-secondary);
+  --wm-tile-filled-secondary-color: var(--wm-color-on-secondary);
+  --wm-tile-filled-tertiary-background: var(--wm-color-tertiary);
+  --wm-tile-filled-tertiary-color: var(--wm-color-on-tertiary);
+  --wm-tile-filled-success-background: var(--wm-color-success);
+  --wm-tile-filled-success-color: var(--wm-color-on-success);
+  --wm-tile-filled-info-background: var(--wm-color-info);
+  --wm-tile-filled-info-color: var(--wm-color-on-info);
+  --wm-tile-filled-warning-background: var(--wm-color-warning);
+  --wm-tile-filled-warning-color: var(--wm-color-on-warning);
+  --wm-tile-filled-danger-background: var(--wm-color-error);
+  --wm-tile-filled-danger-color: var(--wm-color-on-error);
   /* Timepicker styles */
   --wm-timepicker-input-font-family: var(--wm-h3-font-family);
   --wm-timepicker-input-font-size: var(--wm-h3-font-size);
@@ -1263,7 +1319,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   /*--Icon--*/
   --wm-icon-gap: var(--wm-space-1);
   /*--Grid Layout--*/
-  --wm-grid-layout-row-gap: var(--wm-space-2);
+  --wm-grid-layout-row-gap: var(--wm-space-0);
   --wm-grid-layout-column-padding: var(--wm-space-2);
   --wm-scroll-bar-width: 6px;
   --wm-scroll-bar-height: 6px;
@@ -9547,7 +9603,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   user-select: none;
   touch-action: manipulation;
 }
-.wm-app .close,
 .wm-app .note-popover .note-popover-content .note-color-palette,
 .wm-app .note-toolbar .note-color-palette {
   line-height: 1;
@@ -9619,26 +9674,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app input[type="button"].note-btn-block {
   width: 100%;
 }
-.wm-app button.close {
-  padding: 0;
-  cursor: pointer;
-  background: 0 0;
-  border: 0;
-  -webkit-appearance: none;
-}
-.wm-app .close {
-  font-size: 21px;
-  color: #000;
-  opacity: 0.2;
-}
-.wm-app .close:hover {
-  -webkit-opacity: 1;
-  -khtml-opacity: 1;
-  -moz-opacity: 1;
-  opacity: 1;
-  -ms-filter: alpha(opacity=100);
-  filter: alpha(opacity=100);
-}
 .wm-app .note-dropdown-menu {
   position: absolute;
   top: 100%;
@@ -11297,107 +11332,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   cursor: not-allowed;
   z-index: 1;
 }
-.wm-app .dialog-view {
-  width: 100%;
-  height: 100%;
-  position: absolute !important;
-  top: 0;
-  right: 0;
-  z-index: 100;
-}
-.wm-app .app-dialog,
-.wm-app .app-dialog-body,
-.wm-app .app-dialog-footer,
-.wm-app .app-dialog-header {
-  position: relative;
-}
-.wm-app .app-dialog-header .wm-icon24 {
-  top: 5px;
-}
-.wm-app .app-dialog-header .wms-delete-datamodel {
-  top: 0;
-}
-.wm-app .app-dialog-header .app-dialog-title .wi {
-  vertical-align: baseline;
-}
-.wm-app .app-dialog-header .app-dialog-title .dialog-heading:before {
-  content: " ";
-}
-.wm-app .app-dialog-body {
-  min-height: 100px;
-  overflow: auto;
-}
-.wm-app .app-dialog-body.noscroll {
-  overflow: inherit;
-}
-.wm-app .app-dialog-body .app-content-column {
-  padding: 0;
-}
-.wm-app .app-page-dialog .app-dialog-body .app-form {
-  border-color: transparent;
-}
-.wm-app .app-alert-dialog .app-dialog-message.text-error {
-  color: #af4565;
-}
-.wm-app .app-alert-dialog .app-dialog-message.text-information {
-  color: #479ed6;
-}
-.wm-app .app-alert-dialog .app-dialog-message.text-success {
-  color: #6a8969;
-}
-.wm-app .app-alert-dialog .app-dialog-message.text-warning {
-  color: #caad16;
-}
-.wm-app .app-confirm-dialog .app-dialog-title .sl-check {
-  font-size: 0.8em;
-}
-.wm-app .app-confirm-dialog .app-dialog-message.warning {
-  color: red;
-  opacity: 0.8;
-}
-.wm-app .app-iframe-dialog .app-dialog-body.modal-body {
-  padding: 0;
-}
-.wm-app .app-iframe-dialog .app-dialog-body.modal-body .app-iframe iframe {
-  height: 100%;
-  width: 100%;
-  border: 0;
-}
-.wm-app .app-login-dialog .app-dialog-body .app-login-dialog-message {
-  padding: 8px;
-  margin-bottom: 8px;
-}
-.wm-app .app-login-dialog .app-dialog-body .app-form {
-  box-shadow: none;
-}
-.wm-app .app-login-dialog .app-dialog-body .app-form .panel-body {
-  padding: 0;
-}
-.wm-app .app-dialog .app-dialog-form {
-  box-shadow: none;
-  border-color: transparent;
-}
-.wm-app .app-dialog .app-dialog-form .panel-body {
-  padding: 0;
-}
-.wm-app .app-dialog .app-form {
-  box-shadow: none !important;
-  border-color: transparent;
-  margin-bottom: 0;
-}
-.wm-app body.modal-open {
-  margin-right: 0;
-  overflow: hidden;
-}
-.wm-app body.modal-open .modal {
-  overflow: auto;
-  will-change: transform;
-}
-.wm-app .modal-backdrop {
-  height: 100%;
-  bottom: 0;
-  position: fixed !important;
-}
 .wm-app .app-prefab {
   min-height: 1em;
   position: relative;
@@ -11468,14 +11402,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .note-modal .note-modal-footer > button {
   float: none;
 }
-.wm-app .app-tile {
-  padding: 1em;
-  margin: 0;
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-}
 .wm-app .app-chart .app-chart-inner.loading svg,
 .wm-app .app-picker .app-picker-empty-option {
   visibility: hidden;
@@ -13136,7 +13062,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   height: auto;
 }
 .wm-app .app-view {
-  position: absolute;
+  position: relative;
   min-height: 100%;
   height: inherit;
   top: 0;
@@ -13145,6 +13071,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 }
 .wm-app .app-view .app-dialog {
   z-index: 1000;
+  position: relative;
+  margin: 0;
 }
 .wm-app .app-view .app-dialog.app-page-dialog .app-dialog-body {
   padding: 0;
@@ -14131,8 +14059,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-color: var(--wm-btn-background);
   background: none !important;
   border: none !important;
+  --wm-btn-padding: var(--wm-space-2) var(--wm-space-3);
   --wm-btn-state-layer-color: var(--wm-btn-background);
 }
+.wm-app .btn-text .app-icon,
+.wm-app button-text .app-icon {
+  margin: 0;
+}
 .wm-app .btn-elevated,
 .wm-app button-elevated {
   box-shadow: var(--wm-btn-elevated);
@@ -15823,6 +15756,98 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-message-container-background: var(--wm-message-container-loading-background);
   --wm-message-container-border-color: var(--wm-message-container-loading-border-color);
 }
+.wm-app .modal-backdrop {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--wm-modal-backdrop-z-index);
+  background: var(--wm-modal-backdrop-background);
+  opacity: 0;
+}
+.wm-app .modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wm-modal-z-index);
+  display: none;
+}
+.wm-app .modal.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+.wm-app .modal.fade.in {
+  opacity: 1;
+  display: flex !important;
+}
+.wm-app .modal-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--wm-modal-backdrop-background);
+  padding: var(--wm-space-6);
+  margin: var(--wm-space-0);
+}
+.wm-app .modal-content {
+  display: flex;
+  flex-direction: column;
+  width: var(--wm-modal-width);
+  max-width: 100%;
+  max-height: 100%;
+  background: var(--wm-modal-background);
+  border-radius: var(--wm-modal-radius);
+}
+.wm-app .modal-content .modal-header {
+  padding: var(--wm-modal-header-padding);
+}
+.wm-app .modal-content .modal-header .app-dialog-close {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.wm-app .modal-content .modal-header .modal-title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--wm-modal-title-gap);
+  word-break: break-word;
+}
+.wm-app .modal-content .modal-header .modal-title:has(>.app-icon) {
+  flex-direction: column;
+  --wm-modal-title-gap: var(--wm-space-4);
+}
+.wm-app .modal-content .modal-header + .modal-body {
+  padding-top: var(--wm-space-0);
+}
+.wm-app .modal-content .modal-body {
+  height: 100%;
+  overflow: auto;
+  padding: var(--wm-modal-body-padding);
+}
+.wm-app .modal-content .modal-body > .app-grid-layout {
+  padding: 0;
+  margin: 0 calc(var(--wm-grid-layout-column-padding) * -1);
+  width: calc(100% + calc(var(--wm-grid-layout-column-padding) * 2));
+}
+.wm-app .modal-content .modal-body:has( + .modal-footer:not([hidden])) {
+  padding-bottom: var(--wm-space-0);
+}
+.wm-app .modal-content .modal-footer {
+  padding: var(--wm-modal-footer-padding);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: var(--wm-modal-footer-gap);
+}
+.wm-app .modal-content .modal-footer .btn {
+  margin: 0;
+}
 .wm-app .app-navbar {
   position: relative;
   border: none;
@@ -15834,12 +15859,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-navbar > .container-fluid {
   display: flex;
   width: 100%;
+  padding: 0;
 }
 .wm-app .app-navbar > .container-fluid > .navbar-collapse {
   width: 100%;
-  display: flex;
+  display: flex !important;
   justify-content: space-between;
   flex-wrap: wrap;
+  padding: 0;
 }
 .wm-app .app-navbar > .container-fluid > .navbar-collapse > .app-nav {
   display: flex;
@@ -15849,6 +15876,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-navbar > .container-fluid > .navbar-collapse > .app-nav + .app-nav {
   justify-content: flex-end;
 }
+.wm-app .app-navbar > .container-fluid > .navbar-collapse > .app-nav::before,
+.wm-app .app-navbar > .container-fluid > .navbar-collapse > .app-nav::after {
+  display: none;
+}
 @media (min-width: 768px) {
   .wm-app .app-navbar > .container-fluid > .navbar-header {
     display: none;
@@ -17142,6 +17173,70 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .textarea-count:not(:empty) {
   margin-top: var(--wm-space-1);
 }
+.wm-app .app-tile {
+  width: 100%;
+  padding: var(--wm-tile-padding);
+  background: var(--wm-tile-background);
+  color: var(--wm-tile-color);
+  border-radius: var(--wm-tile-radius);
+  box-shadow: var(--wm-tile-shadow);
+}
+.wm-app .app-tile.bg-primary {
+  --wm-tile-background: var(--wm-tile-primary-background);
+  --wm-tile-color: var(--wm-tile-primary-color);
+}
+.wm-app .app-tile.bg-secondary {
+  --wm-tile-background: var(--wm-tile-secondary-background);
+  --wm-tile-color: var(--wm-tile-secondary-color);
+}
+.wm-app .app-tile.bg-tertiary {
+  --wm-tile-background: var(--wm-tile-tertiary-background);
+  --wm-tile-color: var(--wm-tile-tertiary-color);
+}
+.wm-app .app-tile.bg-success {
+  --wm-tile-background: var(--wm-tile-success-background);
+  --wm-tile-color: var(--wm-tile-success-color);
+}
+.wm-app .app-tile.bg-info {
+  --wm-tile-background: var(--wm-tile-info-background);
+  --wm-tile-color: var(--wm-tile-info-color);
+}
+.wm-app .app-tile.bg-warning {
+  --wm-tile-background: var(--wm-tile-warning-background);
+  --wm-tile-color: var(--wm-tile-warning-color);
+}
+.wm-app .app-tile.bg-danger {
+  --wm-tile-background: var(--wm-tile-danger-background);
+  --wm-tile-color: var(--wm-tile-danger-color);
+}
+.wm-app .app-tile.bg-primary-filled {
+  --wm-tile-background: var(--wm-tile-filled-primary-background);
+  --wm-tile-color: var(--wm-tile-filled-primary-color);
+}
+.wm-app .app-tile.bg-secondary-filled {
+  --wm-tile-background: var(--wm-tile-filled-secondary-background);
+  --wm-tile-color: var(--wm-tile-filled-secondary-color);
+}
+.wm-app .app-tile.bg-tertiary-filled {
+  --wm-tile-background: var(--wm-tile-filled-tertiary-background);
+  --wm-tile-color: var(--wm-tile-filled-tertiary-color);
+}
+.wm-app .app-tile.bg-success-filled {
+  --wm-tile-background: var(--wm-tile-filled-success-background);
+  --wm-tile-color: var(--wm-tile-filled-success-color);
+}
+.wm-app .app-tile.bg-info-filled {
+  --wm-tile-background: var(--wm-tile-filled-info-background);
+  --wm-tile-color: var(--wm-tile-filled-info-color);
+}
+.wm-app .app-tile.bg-warning-filled {
+  --wm-tile-background: var(--wm-tile-filled-warning-background);
+  --wm-tile-color: var(--wm-tile-filled-warning-color);
+}
+.wm-app .app-tile.bg-danger-filled {
+  --wm-tile-background: var(--wm-tile-filled-danger-background);
+  --wm-tile-color: var(--wm-tile-filled-danger-color);
+}
 .wm-app bs-dropdown-container {
   z-index: 2000;
 }