@wavemaker/foundation-css 11.14.3-rc.6401 → 11.14.4-rc.647538

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavemaker/foundation-css",
-  "version": "11.14.3-rc.6401",
+  "version": "11.14.4-rc.647538",
   "description": "Foundation of CSS used in WaveMaker with custom widgets.",
   "main": "foundation.css",
   "type": "module",

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

@@ -8,10 +8,6 @@
     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);
@@ -19,4 +15,8 @@
     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,6 +1,8 @@
 @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 {
@@ -12,8 +14,6 @@
     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,7 +1,5 @@
 
 .app-progress-circle {
-    width: var(--wm-progress-circle-width);
-    height: var(--wm-progress-circle-height);
 }
 
 .app-progress-circle-text {
@@ -10,7 +8,6 @@
 .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-button {
+.app-search-clear-btn {
     border-color: transparent;
     ripple-color: transparent;
 }
 
-.app-search-btn .app-button-icon .app-icon-shape {
+.app-search-btn-icon{
     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-button{
+.app-search-btn{
     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,67 +12,46 @@
     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-color: var(--wm-accordion-header-border-color);
+    border-style: var(--wm-accordion-border-style);
+    border-color: var(--wm-accordion-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 {
+.app-accordion-active {
     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-color: var(--wm-accordion-header-border-color);
+    border-style: var(--wm-accordion-border-style);
+    border-color: var(--wm-accordion-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-header-expand-icon .app-icon-shape {
+.app-accordion-icon-icon {
     color: var(--wm-accordion-icon-color);
     font-size: var(--wm-accordion-icon-font-size);
     font-weight: var(--wm-accordion-icon-font-weight);
@@ -112,7 +91,4 @@
     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,8 +2,6 @@
 .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;
 }
@@ -12,7 +10,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-panel-heading-font-weight);
+    font-weight: var(--wm-font-weight-700);
 }
 
 .app-panel-header {
@@ -38,7 +36,6 @@
 }
 
 .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,17 +21,20 @@
     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-text);
+    color: var(--wm-tabs-item-heading-color);
 }
 .app-tabheader-active-item-text {
     color: var(--wm-tabs-item-heading-text);
 }
 
-.app-tabheader-active-item-icon .app-icon-shape {
+.app-tabheader-item-icon-text {
+    color: var(--wm-tabs-item-heading-icon);
+}
+.app-tabheader-active-item-icon-text {
     color: var(--wm-tabs-item-heading-icon);
 }
 
-.app-tabheader-item-icon .app-icon-shape {
+.app-tabheader-item-icon-icon {
     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 .app-text{
+.tile-template-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 .app-icon-text {
+.app-wizard-step-icon.text {
   color: var(--wm-wizard-step-icon-color);
   font-size: var(--wm-wizard-step-icon-size);
 }
 
-.app-wizard-step-icon .app-icon {
+.app-wizard-step-icon.icon {
   color: var(--wm-wizard-step-icon-color);
 }
 

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

@@ -1,62 +1,23 @@
 .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-width: var(--wm-container-border-width);
     border-color: var(--wm-container-border-color);
-    opacity: var(--wm-container-opacity);
+    border-width: var(--wm-container-border-width);
+    border-style: var(--wm-container-border-style);
 }
 
 .app-elevated-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-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-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);
+}
 
+.app-outlined-container .app-container {
     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);
+    border-width: var(--wm-container-border-width);
+    border-style: var(--wm-container-border-style);
 }
 
 @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-header-background-color);
+    background-color: var(--wm-card-heading-background-color);
     width: var(--wm-card-header-width);
     padding: var(--wm-card-header-padding);
 }
@@ -12,6 +12,11 @@
     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);