@wavemaker/foundation-css 11.11.2-rc.6152 → 11.11.3-rc.212

package/foundation/foundation.css

@@ -303,7 +303,6 @@
   --wm-color-on-tertiary-fixed-variant: #633b48;
   --wm-color-error: #f2b8b5;
   --wm-color-error-container: #8c1d18;
-  --wm-color-error-fixed: #f9dedc;
   --wm-color-on-error: #601410;
   --wm-color-on-error-container: #f9dedc;
   --wm-color-background: #141218;
@@ -521,6 +520,10 @@
   --wm-btn-lg-height: 44px;
   --wm-btn-lg-gap: var(--wm-space-2);
   --wm-btn-lg-icon-size: var(--wm-icon-size-lg);
+  --wm-btn-elevated-shadow: var(--wm-elevation-shadow-1);
+  --wm-btn-elevated-shadow-hover: var(--wm-elevation-shadow-2);
+  --wm-btn-elevated-shadow-focus: var(--wm-elevation-shadow-1);
+  --wm-btn-elevated-shadow-active: var(--wm-elevation-shadow-1);
   --wm-card-list-gap: var(--wm-space-4);
   --wm-card-background: var(--wm-color-surface);
   --wm-card-background-active: var(--wm-color-secondary-container);
@@ -749,7 +752,8 @@
   --wm-data-table-thead-th-border-width: var(--wm-border-width-base);
   --wm-data-table-thead-th-border-style: var(--wm-border-style-base);
   --wm-data-table-thead-th-border-color: var(--wm-border-color);
-  --wm-data-table-tbody-tr-background: var(--wm-color-surface);
+  --wm-data-table-tbody-tr-background-nth-child-odd: var(--wm-color-surface);
+  --wm-data-table-tbody-tr-background-nth-child-even: var(--wm-color-surface);
   --wm-data-table-tbody-tr-background-hover: var(--wm-color-surface-variant);
   --wm-data-table-tbody-tr-background-active: var(--wm-color-surface-container-lowest);
   --wm-data-table-tbody-tr-color: var(--wm-color-on-background);
@@ -765,6 +769,7 @@
   --wm-data-table-tbody-td-border-radius: var(--wm-radius-md);
   --wm-data-table-sort-icon-size: var(--wm-icon-size-sm);
   --wm-data-table-sort-icon-color: var(--wm-data-table-thead-tr-color);
+  --wm-data-table-layout: fixed;
   --wm-datepicker-color: var(--wm-color-on-surface);
   --wm-datepicker-background: var(--wm-color-surface-container-high);
   --wm-datepicker-border-radius: var(--wm-radius-lg);
@@ -851,6 +856,16 @@
   --wm-file-upload-message-anchor-line-height: var(--wm-body-medium-line-height);
   --wm-file-upload-media-icon-size: var(--wm-icon-size);
   --wm-file-upload-media-icon-padding: var(--wm-space-1);
+  --wm-footer-height: auto;
+  --wm-footer-background: var(--wm-color-white);
+  --wm-footer-color: var(--wm-color-on-surface);
+  --wm-footer-color-muted: var(--wm-color-on-surface-variant);
+  --wm-footer-border-color: var(--wm-color-outline-variant);
+  --wm-footer-border-style: solid;
+  --wm-footer-border-width: 1px 0px 0px 0px;
+  --wm-footer-border-radius: var(--wm-radius-none);
+  --wm-footer-shadow: var(--wm-elevation-shadow-none);
+  --wm-footer-padding: var(--wm-space-0);
   --wm-icon-gap: var(--wm-space-1);
   --wm-icon-size: 24px;
   --wm-icon-size-xs: calc(var(--wm-icon-size) * 0.5);
@@ -863,6 +878,22 @@
   --wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
   --wm-grid-layout-row-gap: var(--wm-space-0);
   --wm-grid-layout-column-padding: var(--wm-space-2);
+  --wm-header-background: var(--wm-color-white);
+  --wm-header-color: var(--wm-color-on-surface-variant);
+  --wm-header-height: 82px;
+  --wm-header-zindex: 2;
+  --wm-header-padding: var(--wm-space-2) var(--wm-space-4);
+  --wm-header-border-color: var(--wm-color-outline-variant);
+  --wm-header-border-style: solid;
+  --wm-header-border-width: 0px 0px 1px 0px;
+  --wm-header-border-radius: var(--wm-radius-none);
+  --wm-header-shadow: var(--wm-elevation-shadow-none);
+  --wm-header-logo-height: 42px;
+  --wm-header-link-size: var(--wm-h4-font-size);
+  --wm-header-link-color: var(--wm-color-secondary);
+  --wm-header-link-color-hover: var(--wm-color-secondary);
+  --wm-header-link-color-active: var(--wm-color-secondary);
+  --wm-header-leftnav-toggle-width: 50px;
   --wm-list-background: var(--wm-color-surface);
   --wm-list-min-height: 6rem;
   --wm-list-state-layer-color: var(--wm-color-on-surface);
@@ -982,6 +1013,7 @@
   --wm-nav-tabs-stacked-gap: var(--wm-space-0);
   --wm-nav-tabs-stacked-item-min-height: 48px;
   --wm-nav-tabs-stacked-indicator-width: 100%;
+  --wm-page-content-padding: var(--wm-space-0);
   --wm-app-font-family: var(--wm-body-medium-font-family);
   --wm-app-font-size: var(--wm-body-medium-font-size);
   --wm-app-font-weight: var(--wm-body-medium-font-weight);
@@ -993,27 +1025,13 @@
   --wm-app-text-transform: none;
   --wm-app-margin: 0;
   --wm-app-padding: 0;
-  --wm-header-background: var(--wm-color-white);
-  --wm-header-color: var(--wm-color-on-surface-variant);
-  --wm-header-height: 82px;
-  --wm-header-zindex: 2;
-  --wm-header-padding: var(--wm-space-2) var(--wm-space-4);
-  --wm-header-border: 1px solid var(--wm-color-outline-variant);
-  --wm-header-shadow: var(--wm-elevation-shadow-none);
-  --wm-header-logo-height: 42px;
-  --wm-header-link-size: var(--wm-h4-font-size);
-  --wm-header-link-color: var(--wm-color-secondary);
-  --wm-header-link-color-hover: var(--wm-color-secondary);
-  --wm-header-link-color-active: var(--wm-color-secondary);
-  --wm-header-leftnav-toggle-width: 50px;
-  --wm-top-nav-background: none;
-  --wm-top-nav-color: none;
-  --wm-top-nav-box-shadow: none;
-  --wm-top-nav-z-index: 3;
   --wm-aside-panel-width: 220px;
   --wm-aside-panel-background: var(--wm-color-surface);
   --wm-aside-panel-color: var(--wm-color-on-surface-variant);
-  --wm-aside-panel-border: 1px solid var(--wm-color-outline-variant);
+  --wm-aside-panel-border-color: var(--wm-color-outline-variant);
+  --wm-aside-panel-border-style: solid;
+  --wm-aside-panel-border-width: 0px 1px 0px 0px;
+  --wm-aside-panel-border-radius: var(--wm-radius-none);
   --wm-aside-panel-shadow: var(--wm-elevation-shadow-none);
   --wm-aside-panel-padding-top: var(--wm-space-5);
   --wm-aside-panel-padding-right: var(--wm-space-0);
@@ -1022,7 +1040,10 @@
   --wm-aside-panel-rail-width: 102px;
   --wm-aside-panel-rail-background: var(--wm-color-surface);
   --wm-aside-panel-rail-color: var(--wm-color-on-surface-variant);
-  --wm-aside-panel-rail-border: 1px solid var(--wm-color-outline-variant);
+  --wm-aside-panel-rail-border-color: var(--wm-color-outline-variant);
+  --wm-aside-panel-rail-border-style: solid;
+  --wm-aside-panel-rail-border-width: 0px 1px 0px 0px;
+  --wm-aside-panel-rail-border-radius: var(--wm-radius-none);
   --wm-aside-panel-rail-shadow: var(--wm-elevation-shadow-none);
   --wm-aside-panel-rail-padding-top: var(--wm-space-7);
   --wm-aside-panel-rail-padding-right: var(--wm-space-0);
@@ -1149,14 +1170,6 @@
   --wm-aside-nav-rail-submenu-item-background: var(--wm-aside-nav-rail-submenu-background);
   --wm-aside-nav-rail-submenu-item-background-active: var(--wm-color-secondary-container);
   --wm-aside-right-nav-rail-submenu-radius: var(--wm-radius-sm) var(--wm-radius-none) var(--wm-radius-none) var(--wm-radius-sm);
-  --wm-page-content-padding: var(--wm-space-0);
-  --wm-footer-height: auto;
-  --wm-footer-background: var(--wm-color-white);
-  --wm-footer-color: var(--wm-color-on-surface);
-  --wm-footer-color-muted: var(--wm-color-on-surface-variant);
-  --wm-footer-border: 1px solid var(--wm-color-outline-variant);
-  --wm-footer-shadow: var(--wm-elevation-shadow-none);
-  --wm-footer-padding: var(--wm-space-0);
   --wm-pagination-item-padding: var(--wm-space-1) var(--wm-space-1);
   --wm-pagination-item-gap: var(--wm-space-1);
   --wm-pagination-page-item-link-color: var(--wm-color-on-surface);
@@ -1596,6 +1609,10 @@
   --wm-wizard-vertical-heading-radius: var(--wm-wizard-radius) var(--wm-radius-none) var(--wm-radius-none) var(--wm-wizard-radius);
   --wm-wizard-vertical-heading-padding: var(--wm-space-7) var(--wm-space-7) var(--wm-space-0) var(--wm-space-7);
   --wm-wizard-vertical-connector-height: 100%;
+  --wm-top-nav-background: none;
+  --wm-top-nav-color: none;
+  --wm-top-nav-box-shadow: none;
+  --wm-top-nav-z-index: 3;
   --wm-note-editor-toolbar-border: var(--wm-border-color-translucent);
   --wm-note-editor-toolbar-border-style: var(--wm-border-style-base);
   --wm-note-editor-toolbar-border-width: var(--wm-border-width-base);
@@ -5091,21 +5108,21 @@
   --wm-btn-color: var(--wm-btn-default-color);
   --wm-btn-state-layer-color: var(--wm-btn-default-color);
 }
-.wm-app .btn-elevated,
-.wm-app button-elevated {
-  box-shadow: var(--wm-btn-elevated);
+.wm-app .btn-elevated-shadow,
+.wm-app button-elevated-shadow {
+  box-shadow: var(--wm-btn-elevated-shadow);
 }
-.wm-app .btn-elevated:hover,
-.wm-app button-elevated:hover {
-  box-shadow: var(--wm-btn-elevated-hover);
+.wm-app .btn-elevated-shadow:hover,
+.wm-app button-elevated-shadow:hover {
+  box-shadow: var(--wm-btn-elevated-shadow-hover);
 }
-.wm-app .btn-elevated:focus,
-.wm-app button-elevated:focus {
-  box-shadow: var(--wm-btn-elevated-focus);
+.wm-app .btn-elevated-shadow:focus,
+.wm-app button-elevated-shadow:focus {
+  box-shadow: var(--wm-btn-elevated-shadow-focus);
 }
-.wm-app .btn-elevated:active,
-.wm-app button-elevated:active {
-  box-shadow: var(--wm-btn-elevated-active);
+.wm-app .btn-elevated-shadow:active,
+.wm-app button-elevated-shadow:active {
+  box-shadow: var(--wm-btn-elevated-shadow-active);
 }
 .wm-app .btn-icon,
 .wm-app button-icon {
@@ -6505,7 +6522,7 @@
 .wm-app .app-grid .table {
   width: 100%;
   display: table;
-  table-layout: fixed;
+  table-layout: var(--wm-data-table-layout);
   border-collapse: var(--wm-data-table-border-collapse);
   border-spacing: var(--wm-data-table-border-spacing);
 }
@@ -6597,7 +6614,12 @@
   letter-spacing: var(--wm-data-table-tbody-tr-letter-spacing);
   line-height: var(--wm-data-table-tbody-tr-line-height);
   color: var(--wm-data-table-tbody-tr-color);
-  background: var(--wm-data-table-tbody-tr-background);
+}
+.wm-app .app-grid .table > tbody > tr:nth-child(odd) {
+  background: var(--wm-data-table-tbody-tr-background-nth-child-odd);
+}
+.wm-app .app-grid .table > tbody > tr:nth-child(even) {
+  background: var(--wm-data-table-tbody-tr-background-nth-child-even);
 }
 .wm-app .app-grid .table > tbody > tr td {
   border-bottom: var(--wm-data-table-tbody-td-border-width) var(--wm-data-table-tbody-td-border-style) var(--wm-data-table-tbody-td-border-color);
@@ -6617,6 +6639,12 @@
   --wm-data-table-thead-th-padding: var(--wm-data-table-padding-condensed);
   --wm-data-table-tbody-td-padding: var(--wm-data-table-padding-condensed);
 }
+.wm-app .app-grid .table.table-row-striped-even {
+  --wm-data-table-tbody-tr-background-nth-child-even: var(--wm-color-surface-container-lowest);
+}
+.wm-app .app-grid .table.table-row-striped-odd {
+  --wm-data-table-tbody-tr-background-nth-child-odd: var(--wm-color-surface-container-lowest);
+}
 .wm-app .app-grid[multiselect="true"] .table tr th:first-child,
 .wm-app .app-grid[radioselect="true"] .table tr th:first-child,
 .wm-app .app-grid[multiselect="true"] .table tr td:first-child,
@@ -7165,7 +7193,6 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
   gap: var(--wm-grid-layout-row-gap);
   padding: var(--wm-grid-layout-column-padding);
 }
@@ -8002,7 +8029,9 @@
   min-height: var(--wm-header-height);
   z-index: var(--wm-header-zindex);
   padding: var(--wm-header-padding);
-  border-bottom: var(--wm-header-border);
+  border-color: var(--wm-header-border-color);
+  border-style: var(--wm-header-border-style);
+  border-width: var(--wm-header-border-width);
   box-shadow: var(--wm-header-shadow);
 }
 .wm-app .app-header .app-header-menu,
@@ -8076,12 +8105,16 @@
   width: var(--wm-aside-panel-width);
   background: var(--wm-aside-panel-background);
   color: var(--wm-aside-panel-color);
-  border-right: var(--wm-aside-panel-border);
+  border-color: var(--wm-aside-panel-border-color);
+  border-style: var(--wm-aside-panel-border-style);
+  border-width: var(--wm-aside-panel-border-width);
   box-shadow: var(--wm-aside-panel-shadow);
   padding-top: var(--wm-aside-panel-padding-top);
   padding-right: var(--wm-aside-panel-padding-right);
   padding-bottom: var(--wm-aside-panel-padding-bottom);
   padding-left: var(--wm-aside-panel-padding-left);
+  border-radius: var(--wm-aside-panel-border-radius);
+  overflow: hidden;
 }
 .wm-app .app-left-panel.app-nav-drawer .app-nav,
 .wm-app .app-right-panel.app-nav-drawer .app-nav {
@@ -8382,12 +8415,16 @@
   width: var(--wm-aside-panel-rail-width);
   background: var(--wm-aside-panel-rail-background);
   color: var(--wm-aside-panel-rail-color);
-  border-right: var(--wm-aside-panel-rail-border);
+  border-color: var(--wm-aside-panel-rail-border-color);
+  border-style: var(--wm-aside-panel-rail-border-style);
+  border-width: var(--wm-aside-panel-rail-border-width);
   box-shadow: var(--wm-aside-panel-rail-shadow);
   padding-top: var(--wm-aside-panel-rail-padding-top);
   padding-right: var(--wm-aside-panel-rail-padding-right);
   padding-bottom: var(--wm-aside-panel-rail-padding-bottom);
   padding-left: var(--wm-aside-panel-rail-padding-left);
+  border-radius: var(--wm-aside-panel-rail-border-radius);
+  overflow: hidden;
 }
 .wm-app .app-left-panel.app-nav-rail .app-nav,
 .wm-app .app-right-panel.app-nav-rail .app-nav {
@@ -8797,7 +8834,9 @@
   background: var(--wm-footer-background);
   color: var(--wm-footer-color);
   --wm-text-muted-color: var(--wm-footer-color-muted);
-  border-top: var(--wm-footer-border);
+  border-color: var(--wm-footer-border-color);
+  border-style: var(--wm-footer-border-style);
+  border-width: var(--wm-footer-border-width);
   box-shadow: 0 -1px 0 0 var(--wm-footer-separator-color);
   padding: var(--wm-footer-padding);
 }
@@ -16453,6 +16492,11 @@
   -ms-flex: 1 1 auto !important;
   flex: 1 1 auto !important;
 }
+.wm-app .flex-fill-item {
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 1 auto !important;
+  flex: 1 1 0 !important;
+}
 .wm-app .flex-row {
   -webkit-box-orient: horizontal !important;
   -webkit-box-direction: normal !important;