@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/foundation-css",
-  "version": "11.14.1-rc.6311",
+  "version": "11.14.2-1.6423",
   "description": "Foundation of CSS used in WaveMaker with custom widgets.",
   "main": "foundation.css",
   "type": "module",

package/src/styles/mobile/components/basic/icon.less

@@ -8,6 +8,10 @@
     margin: 0;
     font-size: var(--wm-icon-font-size);
     color: var(--wm-icon-color);
+}
+
+.app-icon-shape {
+    padding: 0;
     min-width: var(--wm-icon-min-width);
     width: var(--wm-icon-width);
     height: var(--wm-icon-height);
@@ -15,8 +19,4 @@
     line-height: var(--wm-icon-font-size);
 }
 
-.app-icon-shape {
-    padding: 0;
-}
-
 @import (optional) url('../variables/icon.variant.less');

package/src/styles/mobile/components/basic/progress-bar.less

@@ -1,8 +1,6 @@
 @import (optional) url('../variables/progress-bar.variant.less');
 
 .app-progress-bar {
-    height: var(--wm-progress-bar-height);
-    margin: var(--wm-progress-bar-margin);
 }
 
 .app-progress-bar-text {
@@ -14,6 +12,8 @@
     border-bottom-left-radius: var(--wm-progress-bar-radius);
     border-top-right-radius: var(--wm-progress-bar-radius);
     border-bottom-right-radius: var(--wm-progress-bar-radius);
+    height: var(--wm-progress-bar-height);
+    margin: var(--wm-progress-bar-margin);
 }
 
 .app-progress-bar-value {

package/src/styles/mobile/components/basic/progress-circle.less

@@ -1,5 +1,7 @@
 
 .app-progress-circle {
+    width: var(--wm-progress-circle-width);
+    height: var(--wm-progress-circle-height);
 }
 
 .app-progress-circle-text {
@@ -8,6 +10,7 @@
 .app-progress-circle-bg {
     background-color: var(--wm-progress-circle-stroke-inactive);
     stroke: var(--wm-progress-circle-stroke-inactive);
+    stroke-width: 16px;
 }
 
 .app-progress-circle-value {

package/src/styles/mobile/components/basic/search.less

@@ -26,12 +26,12 @@
     border-color: var(--wm-search-invalid-color);
 }
 
-.app-search-clear-btn {
+.app-search-clear-btn .app-button {
     border-color: transparent;
     ripple-color: transparent;
 }
 
-.app-search-btn-icon{
+.app-search-btn .app-button-icon .app-icon-shape {
     background-color: transparent;
     color:var(--wm-search-btn-icon-color);
     font-size: var(--wm-search-btn-icon-size);
@@ -86,7 +86,7 @@
     border-color: transparent;
 }
 
-.app-search-btn{
+.app-search-btn .app-button{
     height: var(--wm-search-height);
     ripple-color: var(--wm-search-btn-ripple-color);
     background-color: var(--wm-search-btn-background-color);

package/src/styles/mobile/components/container/accordion.less

@@ -12,46 +12,67 @@
     font-size: var(--wm-accordion-text-font-size);
 }
 
-.app-accordion-first-header {
-    border-top-left-radius: var(--wm-accordion-border-radius);
-    border-top-right-radius: var(--wm-accordion-border-radius);
-}
-
-.app-accordion-last-header {
-    border-bottom-left-radius: var(--wm-accordion-border-radius);
-    border-bottom-right-radius: var(--wm-accordion-border-radius);
-    border-bottom-width: 0;
-}
-
 .app-accordion-header {
     background-color: var(--wm-accordion-header-background-color);
     padding: var(--wm-accordion-header-padding);
     border-bottom-width: var(--wm-accordion-header-border-bottom-width);
-    border-style: var(--wm-accordion-border-style);
-    border-color: var(--wm-accordion-border-color);
+    border-color: var(--wm-accordion-header-border-color);
     border-top-left-radius: var(--wm-accordion-border-radius);
     border-top-right-radius: var(--wm-accordion-border-radius);
     color: var(--wm-accordion-text-color);
 }
 
-.app-accordion-active {
+.app-accordion-active-header {
     background-color: var(--wm-accordion-header-background-color);
     padding: var(--wm-accordion-header-padding);
     border-bottom-width: var(--wm-accordion-header-border-bottom-width);
-    border-style: var(--wm-accordion-border-style);
-    border-color: var(--wm-accordion-border-color);
+    border-color: var(--wm-accordion-header-border-color);
     border-top-left-radius: var(--wm-accordion-border-radius);
     border-top-right-radius: var(--wm-accordion-border-radius);
     color: var(--wm-accordion-text-color);
 }
 
+.app-accordion-active-header-title {
+    color: var(--wm-accordion-text-color);
+    font-size: var(--wm-accordion-text-font-size);
+}
+
+.app-accordion-header-collapse-icon .app-icon-shape {
+    color: var(--wm-accordion-icon-color);
+    font-size: var(--wm-accordion-icon-font-size);
+    font-weight: var(--wm-accordion-icon-font-weight);
+}
+
+.app-accordion-title-icon .app-icon-shape {
+    color: var(--wm-accordion-title-icon-color);
+    font-size: var(--wm-accordion-title-icon-size);
+}
+
+.app-accordion-active-title-icon .app-icon-shape {
+    color: var(--wm-accordion-title-icon-color);
+}
+
+.app-accordion-active-header-badge {
+    font-size: var(--wm-accordion-badge-font-size);
+    margin-right: var(--wm-accordion-badge-margin-right);
+    width: var(--wm-accordion-badge-width);
+    height: var(--wm-accordion-badge-height);
+    border-radius: var(--wm-accordion-badge-border-radius);
+    border-style: var(--wm-accordion-border-style);
+    border-width: var(--wm-accordion-badge-border-width);
+    border-color: var(--wm-accordion-badge-border-color);
+    color: var(--wm-accordion-badge-color);
+    background-color: var(--wm-accordion-badge-background-color);
+    align-self: stretch;
+}
+
 .app-accordion-header-subtitle {
     font-size: var(--wm-accordion-header-subtitle-font-size);
     margin-top: var(--wm-accordion-header-subtitle-margin-top);
     color: var(--wm-accordion-text-color);
 }
 
-.app-accordion-icon-icon {
+.app-accordion-header-expand-icon .app-icon-shape {
     color: var(--wm-accordion-icon-color);
     font-size: var(--wm-accordion-icon-font-size);
     font-weight: var(--wm-accordion-icon-font-weight);
@@ -91,4 +112,7 @@
     background-color: var(--wm-color-primary);
 }
 
+.app-accordion-header-default-badge{
+    background-color: var(--wm-accordion-badge-background-color);
+}
 @import (optional) url('../variables/accordion.variant.less');

package/src/styles/mobile/components/container/panel.less

@@ -2,6 +2,8 @@
 .app-panel {
     background-color: var(--wm-panel-background);
     border-radius: var(--wm-panel-radius);
+    border-color: var(--wm-panel-border-color);
+    border-width: var(--wm-panel-border-width);
     box-shadow: var(--wm-panel-shadow);
     padding: 0;
 }
@@ -10,7 +12,7 @@
     font-family: var(--wm-panel-heading-font-family);
     font-size: var(--wm-panel-heading-font-size);
     color: var(--wm-panel-heading-color);
-    font-weight: var(--wm-font-weight-700);
+    font-weight: var(--wm-panel-heading-font-weight);
 }
 
 .app-panel-header {
@@ -36,6 +38,7 @@
 }
 
 .app-panel-footer {
+    background-color: var(--wm-panel-footer-background);
     padding-inline: var(--wm-panel-footer-padding);
     padding-block: var(--wm-panel-footer-padding);
     border-style: var(--wm-panel-footer-border-style);

package/src/styles/mobile/components/container/tabs/tab-header.less

@@ -21,20 +21,17 @@
     font-size: var(--wm-tabs-item-heading-font-size);
     font-weight: var(--wm-tabs-item-heading-font-weight);
     line-height: var(--wm-tabs-item-heading-line-height);
-    color: var(--wm-tabs-item-heading-color);
+    color: var(--wm-tabs-item-heading-text);
 }
 .app-tabheader-active-item-text {
     color: var(--wm-tabs-item-heading-text);
 }
 
-.app-tabheader-item-icon-text {
-    color: var(--wm-tabs-item-heading-icon);
-}
-.app-tabheader-active-item-icon-text {
+.app-tabheader-active-item-icon .app-icon-shape {
     color: var(--wm-tabs-item-heading-icon);
 }
 
-.app-tabheader-item-icon-icon {
+.app-tabheader-item-icon .app-icon-shape {
     color: var(--wm-tabs-item-heading-icon);
     font-size: var(--wm-tabs-item-heading-font-size);
     height: var(--wm-tabs-item-heading-icon-height);

package/src/styles/mobile/components/container/tile.less

@@ -13,7 +13,7 @@
   border-style: solid;
 }
 
-.tile-template-text{
+.tile-template-text .app-text{
   color: var(--wm-tile-color);
 }
 

package/src/styles/mobile/components/container/wizard.less

@@ -77,12 +77,12 @@
   line-height: var(--wm-wizard-step-count-line-height);
 }
 
-.app-wizard-step-icon.text {
+.app-wizard-step-icon .app-icon-text {
   color: var(--wm-wizard-step-icon-color);
   font-size: var(--wm-wizard-step-icon-size);
 }
 
-.app-wizard-step-icon.icon {
+.app-wizard-step-icon .app-icon {
   color: var(--wm-wizard-step-icon-color);
 }
 

package/src/styles/mobile/components/container.less

@@ -1,23 +1,62 @@
 .app-default-container .app-container {
+    border-style: var(--wm-container-border-style);
+    box-shadow: var(--wm-container-box-shadow);
+    background-color: var(--wm-container-background-color);
+    padding-right: var(--wm-container-padding-right);
+    padding-left: var(--wm-container-padding-left);
+    padding-bottom: var(--wm-container-padding-bottom);
+    padding-top: var(--wm-container-padding-top);
+
     border-radius: var(--wm-container-border-radius);
-    border-color: var(--wm-container-border-color);
     border-width: var(--wm-container-border-width);
-    border-style: var(--wm-container-border-style);
+    border-color: var(--wm-container-border-color);
+    opacity: var(--wm-container-opacity);
 }
 
 .app-elevated-container .app-container {
-    border-radius: var(--wm-container-border-radius);
-    border-color: var(--wm-container-border-color);
-    border-width: var(--wm-container-border-width);
     border-style: var(--wm-container-border-style);
     box-shadow: var(--wm-container-box-shadow);
+    background-color: var(--wm-container-background-color);
+    padding-right: var(--wm-container-padding-right);
+    padding-left: var(--wm-container-padding-left);
+    padding-bottom: var(--wm-container-padding-bottom);
+    padding-top: var(--wm-container-padding-top);
+
+    border-radius: var(--wm-container-border-radius);
+    border-width: var(--wm-container-border-width);
+    border-color: var(--wm-container-border-color);
+    opacity: var(--wm-container-opacity);
 }
 
 .app-outlined-container .app-container {
+    border-style: var(--wm-container-border-style);
+    opacity: var(--wm-container-opacity);
+    box-shadow: var(--wm-container-box-shadow);
+    background-color: var(--wm-container-background-color);
+    padding-right: var(--wm-container-padding-right);
+    padding-left: var(--wm-container-padding-left);
+    padding-bottom: var(--wm-container-padding-bottom);
+    padding-top: var(--wm-container-padding-top);
+
     border-radius: var(--wm-container-border-radius);
-    border-color: var(--wm-container-border-color);
     border-width: var(--wm-container-border-width);
+    border-color: var(--wm-container-border-color);
+    opacity: var(--wm-container-opacity);
+}
+
+ .app-container{
     border-style: var(--wm-container-border-style);
+    box-shadow: var(--wm-container-box-shadow);
+    background-color: var(--wm-container-background-color);
+    padding-right: var(--wm-container-padding-right);
+    padding-left: var(--wm-container-padding-left);
+    padding-bottom: var(--wm-container-padding-bottom);
+    padding-top: var(--wm-container-padding-top);
+
+    border-radius: var(--wm-container-border-radius);
+    border-width: var(--wm-container-border-width);
+    border-color: var(--wm-container-border-color);
+    opacity: var(--wm-container-opacity);
 }
 
 @import (optional) url('./variables/container.variant.less');

package/src/styles/mobile/components/data/card.less

@@ -1,5 +1,5 @@
 .app-card-header {
-    background-color: var(--wm-card-heading-background-color);
+    background-color: var(--wm-card-header-background-color);
     width: var(--wm-card-header-width);
     padding: var(--wm-card-header-padding);
 }
@@ -12,11 +12,6 @@
     background-color: var(--wm-card-background);
 }
 
-.app-vertical-list-item {
-    background-color: transparent;
-    border-radius: var(--wm-card-border-radius);
-}
-
 .card-default {
     border-width: var(--wm-card-border-width);
     border-style: var(--wm-card-border-style);