@wavemaker/foundation-css 11.15.1-rc.6451 → 11.15.2-rc.64737

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

@@ -5,7 +5,6 @@
 .app-form {
     background-color: var(--wm-form-background);
     padding: var(--wm-form-padding);
-    margin: var(--wm-form-margin);
     border-radius: var(--wm-form-border-radius);
     border-width: var(--wm-form-border-width);
     border-style: var(--wm-form-border-style);
@@ -142,15 +141,9 @@
 
 .app-input {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
@@ -170,10 +163,7 @@
 }
 
 .app-input-focused {
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     background-color: var(--wm-form-controls-background);
     // color: var(--wm-form-controls-color);
@@ -182,15 +172,9 @@
 
 .app-input-focused {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
@@ -204,15 +188,9 @@
 
 .app-input-disabled {
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     border-radius: var(--wm-form-controls-border-radius);
     background-color: var(--wm-form-controls-background);
@@ -230,15 +208,9 @@
 
 .app-select-disabled{
     min-height: var(--wm-form-controls-min-height);
-    padding-top: var(--wm-form-controls-padding-top);
-    padding-bottom: var(--wm-form-controls-padding-bottom);
-    padding-left: var(--wm-form-controls-padding-left);
-    padding-right: var(--wm-form-controls-padding-right);
+    padding: var(--wm-form-controls-padding);
     border-style: var(--wm-form-controls-border-style);
-    border-top-width: var(--wm-form-controls-border-top-width);
-    border-left-width: var(--wm-form-controls-border-left-width);
-    border-right-width: var(--wm-form-controls-border-right-width);
-    border-bottom-width: var(--wm-form-controls-border-bottom-width);
+    border-width: var(--wm-form-controls-border-width);
     border-color: var(--wm-form-controls-border-color);
     background-color: var(--wm-form-controls-background);
     color: var(--wm-form-controls-color);
@@ -257,6 +229,140 @@
 .app-input.activeFloatingLabel {
     // color: green;
 }
+.app-text-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-text-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-number-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-number-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-currency-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-currency-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-textarea-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-textarea-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-date-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-date-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-time-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-time-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+.app-datetime-with-label .app-text-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+
+}
+.app-datetime-with-label .app-text-active-flotaing-label {
+    padding: var(--wm-form-controls-floating-padding);
+    left: var(--wm-form-controls-floating-left);
+    top: var(--wm-form-controls-floating-top);
+    color: var(--wm-form-controls-floating-color);
+    font-size: var(--wm-form-controls-floating-font-size);
+    font-family: var(--wm-form-controls-floating-font-family);
+    font-weight: var(--wm-form-controls-floating-font-weight);
+}
+//date, time, datetime floating label class is .app-text-with-label .app-text-flotaing-label
+//no floating label for select and select locale
 
 .app-form-footer{
     padding-left: var(--wm-form-footer-padding-horizontal);

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

@@ -1,10 +1,7 @@
 .app-list {
   border-style: var(--wm-list-border-style);
   background-color: var(--wm-list-background-color);
-  padding-right: var(--wm-list-padding-right);
-  padding-left: var(--wm-list-padding-left);
-  padding-bottom: var(--wm-list-padding-bottom);
-  padding-top: var(--wm-list-padding-top);
+  padding: var(--wm-list-padding);
   border-radius: var(--wm-list-border-radius);
   border-color: var(--wm-list-border-color);
   border-width: var(--wm-list-border-width);

package/src/styles/mobile/components/device/barcodescanner.less

@@ -1,13 +1,10 @@
 .app-barcodescanner {
     background-color: var(--wm-barcodescanner-background);
-    padding-top: var(--wm-barcodescanner-padding-top);
-    padding-left: var(--wm-barcodescanner-padding-left);
+    padding: var(--wm-barcodescanner-padding);
     min-height: var(--wm-barcodescanner-min-height);
-    padding-bottom: var(--wm-barcodescanner-padding-bottom);
     border-width: var(--wm-barcodescanner-border-width);
     border-color: var(--wm-barcodescanner-border-color);
     border-style: var(--wm-barcodescanner-border-style);
-    padding-right: var(--wm-barcodescanner-padding-right);
     border-radius: var(--wm-barcodescanner-border-radius);
     min-width: var(--wm-barcodescanner-min-width);
     ripple-color: var(--wm-barcodescanner-ripple-color);
@@ -19,7 +16,7 @@
 .app-barcodescanner-text {
     color: var(--wm-barcodescanner-text-color);
     font-size: var(--wm-barcodescanner-text-font-size);
-    padding-left: var(--wm-barcodescanner-text-padding-left);
+    padding: var(--wm-barcodescanner-text-padding);
     line-height: var(--wm-barcodescanner-text-font-size);
 }
 .app-barcodescanner-icon {

package/src/styles/mobile/components/device/camera.less

@@ -6,10 +6,7 @@
     background-color: var(--wm-camera-background);
     min-height: var(--wm-camera-min-height);
     min-width: var(--wm-camera-min-width);
-    padding-top: var(--wm-camera-padding-top);
-    padding-bottom: var(--wm-camera-padding-bottom);
-    padding-left: var(--wm-camera-padding-left);
-    padding-right: var(--wm-camera-padding-right);;
+    padding: var(--wm-camera-padding);
 }
 
 .app-camera-text {

package/src/styles/mobile/components/dialogs/dialog.less

@@ -3,14 +3,17 @@
     border-radius: var(--wm-modal-radius);
     padding: var(--wm-modal-body-padding);
     min-width: var(--wm-modal-min-width);
-    margin-top: var(--wn-modal-margin);
-    margin-bottom: var(--wn-modal-margin);
 }
 
 .app-dialogcontent{
     padding: var(--wn-modal-body-padding);
 }
 
+.app-dialog-modal {
+    background-color: var(--wm-modal-dialog-overlay-background);
+
+}
+
 .btn-only-label.text {
     color: var(--wm-color-primary);
 }
@@ -76,18 +79,28 @@
     border-color: var(--wm-color-primary);
 }
 
-.app-confirmdialog-message{
+.app-confirmdialog-message {
     font-weight: var(--wm-modal-description-font-weight);
     font-family: var(--wm-modal-description-font-family);
     color: var(--wm-modal-description-color);
     font-size: var(--wm-modal-description-font-size);
+    padding: var(--wm-modal-description-padding);
+    border-style: var(--wm-modal-description-border-style);
+    border-width: var(--wm-modal-description-border-width);
+    border-color: var(--wm-modal-description-border-color);
+    background-color: var(--wm-modal-description-background);
 }
 
-.app-alertdialog-message{
+.app-alertdialog-message {
     font-weight: var(--wm-modal-description-font-weight);
     font-family: var(--wm-modal-description-font-family);
     color: var(--wm-modal-description-color);
     font-size: var(--wm-modal-description-font-size);
+    padding: var(--wm-modal-description-padding);
+    border-style: var(--wm-modal-description-border-style);
+    border-width: var(--wm-modal-description-border-width);
+    border-color: var(--wm-modal-description-border-color);
+    background-color: var(--wm-modal-description-background);
 }
 
 .btn-only-label .app-button{

package/src/styles/mobile/components/input/calendar.less

@@ -5,49 +5,57 @@
 }
 
 .app-calendar-text {
-    color: var(--wm-color-black);
+
 }
 
 .app-calendar-wrapper {
-    box-shadow: var(--wm-calendar-view-shadow);
-    border-style: var(--wm-calendar-view-border-style);
-    border-radius: var(--wm-calendar-view-radius);
-    border-color: var(--wm-calendar-day-border-color);
-    background-color: var(--wm-calendar-header-background-color);
+    box-shadow: var(--wm-calendar-wrapper-shadow);
+    border-style: var(--wm-calendar-wrapper-border-style);
+    border-radius: var(--wm-calendar-wrapper-border-radius);
+    border-color: var(--wm-calendar-wrapper-border-color);
+    border-width: var(--wm-calendar-wrapper-border-width);
+    background-color: var(--wm-calendar-wrapper-background);
 }
 
 .app-calendar-header {
     box-shadow: none;
-    border-radius: var(--wm-calendar-view-radius);
-    padding-top: var(--wm-calendar-fc-header-vertical-padding);
-    padding-bottom: var(--wm-calendar-fc-header-vertical-padding);
+    border-radius: var(--wm-calendar-header-border-radius);
+    padding: var(--wm-calendar-header-padding);
     background-color: var(--wm-calendar-header-background-color);
-    border-color: var(--wm-calendar-header-background-color);
-    border-bottom-width: var(--wm-calendar-header-border-bottom-width);
+    border-color: var(--wm-calendar-header-border-color);
+    border-width: var(--wm-calendar-header-border-width);
     border-style: var(--wm-calendar-header-border-style);
 }
 
 .app-calendar-week-day {
-    border-bottom-width: var(--wm-calendar-weekday-border-bottom-width);
+    border-width: var(--wm-calendar-weekday-border-width);
     border-style: var(--wm-calendar-weekday-border-style);
     padding: var(--wm-calendar-weekday-padding);
-    background-color: var(--wm-calendar-header-background-color);
-    border-color: var(--wm-calendar-header-background-color);
+    background-color: var(--wm-calendar-weekday-background-color);
+    border-color: var(--wm-calendar-weekday-border-color);
 }
 
 .app-calendar-week-day-text {
-    color: var(--wm-calendar-fc-anchor-color);
-    font-weight: var(--wm-calendar-fc-header-text-font-weight);
+    color: var(--wm-calendar-weekday-text-color);
+    font-weight: var(--wm-calendar-weekday-text-font-weight);
     font-family: var(--wm-calendar-weekday-text-font-family);
     font-size: var(--wm-calendar-weekday-text-font-size);
 }
 
+.app-calendar-day-wrapper{
+    background-color: var(--wm-calendar-daywrapper-background);
+    border-color: var(--wm-calendar-daywrapper-border-color);
+    border-width: var(--wm-space-1);
+    border-style: var(--wm-border-style-solid);
+}
+
 .app-calendar-day {
-    color: var(--wm-calendar-fc-anchor-color);
-    font-size: var(--wm-calendar-weekday-text-font-size);
-    font-weight: var(--wm-calendar-fc-header-text-font-weight);
-    font-family: var(--wm-calendar-weekday-text-font-family);
+    color: var(--wm-calendar-day-color);
+    font-size: var(--wm-calendar-day-font-size);
+    font-weight: var(--wm-calendar-day-font-weight);
+    font-family: var(--wm-calendar-day-font-family);
     border-color: var(--wm-calendar-day-border-color);
+    background-color: var(--wm-calendar-day-background);
 }
 
 .app-calendar-not-day-of-month {
@@ -56,20 +64,24 @@
 }
 
 .app-calendar-month-text {
-    color: var(--wm-color-on-surface);
-    font-weight: var(--wm-font-weight-800);
-    font-family: var(--wm-calendar-weekday-text-font-family);
+    color: var(--wm-calendar-month-text-color);
+    font-weight: var(--wm-calendar-month-text-font-weight);
+    font-family: var(--wm-calendar-month-text-font-family);
 }
 
 .app-calendar-year-text {
-    color: var(--wm-color-on-surface);
-    font-weight: var(--wm-font-weight-800);
-    font-family: var(--wm-calendar-weekday-text-font-family);
+    color: var(--wm-calendar-year-text-color);
+    font-weight: var(--wm-calendar-year-text-font-weight);
+    font-family: var(--wm-calendar-year-text-font-family);
 }
 
 .app-calendar-today {
-    border-color: var(--wm-form-control-border-color);
-    background-color: var(--wm-calendar-header-background-color);
+    border-color: var(--wm-calendar-today-border-color);
+    background-color: var(--wm-calendar-today-background-color);
+}
+
+.app-calendar-today-text{
+    background-color: var(--wm-calendar-today-text-background-color);
 }
 
 .app-calendar-eventDay1 {
@@ -85,18 +97,14 @@
 }
 
 .app-calendar-selected-day {
-    background-color: var(--wm-calendar-fc-event-background);
-    border-color: var(--wm-calendar-fc-event-background);
+    background-color: var(--wm-calendar-selected-day-background);
+    border-color: var(--wm-calendar-selected-day-background);
 }
 
 .app-calendar-selected-day-text {
-    background-color: var(--wm-calendar-fc-event-background);
-    border-color: var(--wm-calendar-fc-event-background);
-    color: var(--wm-calendar-header-background-color);
-    font-weight: var(--wm-font-weight-700);
+    background-color: var(--wm-calendar-selected-day-text-background);
+    border-color: var(--wm-calendar-selected-day-text-background);
+    color: var(--wm-calendar-selected-day-text-color);
+    font-weight: var(--wm-calendar-selected-day-text-font-weight);
 }
 
-.app-calendar-header-skeleton {
-    width: var(--wm-calendar-header-skeleton-width);
-    margin-bottom: var(--wm-calendar-header-skeleton-margin-bottom);
-}

package/src/styles/mobile/components/input/checkboxset.less

@@ -3,8 +3,7 @@
 .app-checkboxset-group-title {
     color: var(--wm-checkboxset-title-color);
     background-color: var(--wm-checkboxset-title-background-color);
-    padding-left: var(--wm-checkboxset-title-padding-left);
-    padding-right: var(--wm-checkboxset-title-padding-right);
+    padding: var(--wm-checkboxset-title-padding);
     font-size: var(--wm-checkboxset-title-font-size);
     font-family: var(--wm-checkboxset-title-font-family);
 }

package/src/styles/mobile/components/input/chips.less

@@ -1,9 +1,6 @@
 @import (optional) url('../variables/chips.variant.less');
 .app-chips {
-  padding-top: var(--wm-chips-list-padding-top);
-  padding-bottom: var(--wm-chips-list-padding-bottom);
-  padding-left: var(--wm-chips-list-padding-left);
-  padding-right: var(--wm-chips-list-padding-right);
+  padding: var(--wm-chips-list-padding);
   background-color: var(--wm-chips-list-background-color);
   border-width: var(--wm-chips-list-border-width);
   border-style: var(--wm-chips-list-border-style);
@@ -27,10 +24,7 @@
   gap: var(--wm-chips-item-gap);
   min-height: var(--wm-chips-item-height);
   height: var(--wm-chips-item-height);
-  padding-top: var(--wm-chips-item-padding-top);
-  padding-bottom: var(--wm-chips-item-padding-bottom);
-  padding-left: var(--wm-chips-item-padding-left);
-  padding-right: var(--wm-chips-item-padding-right);
+  padding: var(--wm-chips-item-padding);
   background-color: var(--wm-chips-background-color);
   border-radius: var(--wm-chips-item-border-radius);
   border-width: var(--wm-chips-border-width);
@@ -48,10 +42,7 @@
   gap: var(--wm-chips-item-gap);
   min-height: var(--wm-chips-item-height);
   height: var(--wm-chips-item-height);
-  padding-top: var(--wm-chips-item-padding-top);
-  padding-bottom: var(--wm-chips-item-padding-bottom);
-  padding-left: var(--wm-chips-item-padding-left);
-  padding-right: var(--wm-chips-item-padding-right);
+  padding: var(--wm-chips-item-padding);
   color: var(--wm-chips-color);
   background-color: var(--wm-chips-background-color);
   border-radius: var(--wm-chips-item-border-radius);
@@ -73,6 +64,7 @@
 .app-chips-active-item {
   background-color: var(--wm-chips-background-color);
   border-color: var(--wm-chips-item-border-color);
+  border-width: var(--wm-chips-border-width);
 }
 
 .app-chips-active-item-text {
@@ -80,29 +72,26 @@
 }
 
 .app-chips-search-text {
-  padding-top: var(--wm-chips-input-padding-top);
-  padding-bottom: var(--wm-chips-input-padding-bottom);
-  padding-left: var(--wm-chips-input-padding-left);
-  padding-right: var(--wm-chips-input-padding-right);
+  padding: var(--wm-chips-input-padding);
 }
 
 .app-chips-search.placeholderText {
   color: var(--wm-chips-list-place-holder-color);
 }
 
-.app-chips-done-icon .app-icon {
+.app-chips-done-icon .app-icon-shape {
   font-size: var(--wm-chips-item-icon-size);
   padding-left: var(--wm-chips-item-icon-gap);
   color: var(--wm-chips-item-icon-color);
 }
 
-.app-chips-clear-icon .app-icon {
+.app-chips-clear-icon .app-icon-shape {
   font-size: var(--wm-chips-item-icon-size);
   padding-right: var(--wm-chips-item-icon-gap);
   color: var(--wm-chips-item-icon-color);
 }
 
-.app-chips-picture {
+.app-chips-picture .app-picture {
   width: var(--wm-chips-item-avatar-size);
   height: var(--wm-chips-item-avatar-size);
   border-radius: var( --wm-chips-item-avatar-radius);

package/src/styles/mobile/components/input/currency.less

@@ -19,12 +19,13 @@
 //     padding-right: var(--wm-currency-input-padding-right);
 // }
 
-// .app-currency-label {
-//     background-color: var(--wm-color-primary);
-//     font-weight: var(--wm-currency-inputgroup-addon-font-weight);
-//     font-family: var(--wm-font-family-plain);
-//     font-size: var(--wm-currency-inputgroup-addon-font-size);
-// }
+.app-currency-label {
+    background-color: var(--wm-currency-labelwrapper-background);
+    font-weight: var(--wm-currency-label-font-weight);
+    font-family: var(--wm-currency-label-font-family);
+    font-size: var(--wm-currency-label-font-size);
+    color: var(--wm-currency-label-color);
+}
 
 // .app-currency-flotaing-label {
 // }
@@ -54,17 +55,13 @@
 //     min-height: var(--wm-currency-container-min-height);
 // }
 
-// .app-currency-label-wrapper {
-//     background-color: var(--wm-color-primary);
-//     min-height: var(--wm-currency-container-min-height);
-//     border-top-left-radius: var(--wm-currency-container-border-radius);
-//     border-bottom-left-radius: var(--wm-currency-container-border-radius);
-//     padding-top: var(--wm-currency-input-padding-top);
-//     padding-bottom: var(--wm-currency-input-padding-bottom);
-//     padding-left: var(--wm-currency-input-padding-left);
-//     padding-right: var(--wm-currency-input-padding-right);
-//     width: var(--wm-currency-label-wrapper-width);
-// }
+.app-currency-label-wrapper {
+    background-color: var(--wm-currency-labelwrapper-background);
+    min-height: var(--wm-currency-labelwrapper-min-height);
+    border-radius: var(--wm-currency-labelwrapper-border-radius);
+    padding: var(--wm-currency-labelwrapper-padding);
+    width: var(--wm-currency-labelwrapper-width);
+}
 
 // .app-currency-input-wrapper {
 //     width: var(--wm-currency-skeleton-text-input-wrapper-width);

package/src/styles/mobile/components/input/radioset.less

@@ -13,8 +13,7 @@
   color: var(--wm-radiobutton-title-color);
   background-color: var(--wm-radiobutton-title-background-color);
   line-height: var(--wm-radiobutton-title-line-height);
-  padding-left: var(--wm-radiobutton-title-padding-left);
-  padding-right: var(--wm-radiobutton-title-padding-right);
+  padding: var(--wm-radiobutton-title-padding);
   font-size: var(--wm-radiobutton-title-font-size);
   font-family: var(--wm-radiobutton-title-font-family);
 }

package/src/styles/mobile/components/input/rating.less

@@ -4,7 +4,7 @@
     opacity: var(--wm-rating-opacity);
 }
 .app-rating-text {
-    padding-left: var(--wm-rating-text-padding-left);
+    padding: var(--wm-rating-text-padding);
     color: var(--wm-rating-text-color);
     font-size: var(--wm-rating-text-size);
 }