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

foundation-css/foundation/foundation.css

@@ -1189,6 +1189,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 +1297,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;
@@ -11468,14 +11502,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;
@@ -17142,6 +17168,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;
 }