@wavemaker/foundation-css 12.0.0-next.45062 → 12.0.0-next.45064

foundation-css/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);
@@ -9581,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;
@@ -9653,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%;
@@ -11331,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;
@@ -13162,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;
@@ -13171,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;
@@ -14157,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);
@@ -15849,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;
@@ -15860,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;
@@ -15875,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;