@wavemaker/foundation-css 12.0.0-next.25480 → 12.0.0-next.28533

package/src/styles/mobile/components/variables/carousel.variant.less

@@ -1,4 +1,12 @@
 .app-carousel-active-dot {
   --wm-carousel-dots-background: var(--wm-color-primary-container);
   --wm-carousel-dots-opacity: 1px;
+  --wm-carousel-dots-width: 10px;
+  --wm-carousel-dots-height: 10px;
+  --wm-carousel-dots-border-color: var(--wm-color-primary-container);
+  --wm-carousel-dots-border-radius: 5px;
+  --wm-carousel-dots-border-width: var(--wm-border-width-base);
+  --wm-carousel-dots-margin-left: var(--wm-radius-xxs);
+  --wm-carousel-dots-margin-right: var(--wm-radius-xxs);
+  --wm-carousel-slide-padding-horizontal: var(--wm-space-4);
 }

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

@@ -1,21 +1,44 @@
 .app-default-container {
   --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width: var(--wm-border-width-0);
+  --wm-container-border-width-top: var(--wm-border-width-0);
+  --wm-container-border-width-bottom: var(--wm-border-width-0);
+  --wm-container-border-width-left: var(--wm-border-width-0);
+  --wm-container-border-width-right: var(--wm-border-width-0);
   --wm-container-border-color: transparent;
   --wm-container-border-radius: var(--wm-radius-none);
+  --wm-container-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-container-padding-top: var(--wm-space-0);
+  --wm-container-padding-bottom: var(--wm-space-0);
+  --wm-container-padding-left: var(--wm-space-0);
+  --wm-container-padding-right: var(--wm-space-0);
 }
 
 .app-outlined-container {
   --wm-container-border-style: var(--wm-border-style-base);
-  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-width-top: var(--wm-border-width-base);
+  --wm-container-border-width-bottom: var(--wm-border-width-base);
+  --wm-container-border-width-left: var(--wm-border-width-base);
+  --wm-container-border-width-right: var(--wm-border-width-base);
   --wm-container-border-color: var(--wm-color-outline-variant);
   --wm-container-border-radius: 1px;
+  --wm-container-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-container-padding-top: var(--wm-space-0);
+  --wm-container-padding-bottom: var(--wm-space-0);
+  --wm-container-padding-left: var(--wm-space-0);
+  --wm-container-padding-right: var(--wm-space-0);
 }
 
 .app-elevated-container {
   --wm-container-box-shadow: var(--wm-elevation-shadow-1);
   --wm-container-border-style: var(--wm-border-style-base);
   --wm-container-border-color: transparent;
-  --wm-container-border-width: var(--wm-border-width-base);
+  --wm-container-border-width-top: var(--wm-border-width-base);
+  --wm-container-border-width-bottom: var(--wm-border-width-base);
+  --wm-container-border-width-left: var(--wm-border-width-base);
+  --wm-container-border-width-right: var(--wm-border-width-base);
   --wm-container-border-radius: var(--wm-radius-sm);
+  --wm-container-padding-top: var(--wm-space-0);
+  --wm-container-padding-bottom: var(--wm-space-0);
+  --wm-container-padding-left: var(--wm-space-0);
+  --wm-container-padding-right: var(--wm-space-0);
 }

package/src/styles/mobile/components/variables/form-controls.variant.less

@@ -1,13 +1,19 @@
 .app-input-focused {
   --wm-form-controls-border-color: var(--wm-color-primary);
-  --wm-form-controls-border-width: var(--wm-border-width-base);
+  --wm-form-controls-border-top-width: var(--wm-border-width-1);
+  --wm-form-controls-border-left-width: var(--wm-border-width-1);
+  --wm-form-controls-border-right-width: var(--wm-border-width-1);
+  --wm-form-controls-border-bottom-width: var(--wm-border-width-1);
   --wm-form-controls-background: var(--wm-color-outline-variant);
   --wm-form-controls-color: var(--wm-color-black);
 }
 
 .app-input-disabled {
   --wm-form-controls-border-color: var(--wm-color-shadow);
-  --wm-form-controls-border-width: var(--wm-border-width-base);
+  --wm-form-controls-border-top-width: var(--wm-border-width-1);
+  --wm-form-controls-border-left-width: var(--wm-border-width-1);
+  --wm-form-controls-border-right-width: var(--wm-border-width-1);
+  --wm-form-controls-border-bottom-width: var(--wm-border-width-1);
   --wm-form-controls-background: var(--wm-color-surface-dim);
   --wm-form-controls-color: var(--wm-color-scrim);
   --wm-form-controls-opacity: 0.67;

package/src/styles/mobile/components/variables/label.variant.less

@@ -1,41 +1,57 @@
+.p {
+  --wm-label-font-size: var(--wm-p-font-size);
+  --wm-label-font-weight: var(--wm-p-font-weight);
+  --wm-label-font-family: var(--wm-p-font-family);
+  --wm-label-line-height: var(--wm-p-line-height);
+  --wm-label-letter-spacing: var(--wm-p-letter-spacing);
+}
+
 .h1 {
   --wm-label-font-size: var(--wm-h1-font-size);
   --wm-label-font-weight: var(--wm-h1-font-weight);
   --wm-label-font-family: var(--wm-h1-font-family);
+  --wm-label-line-height: var(--wm-h1-line-height);
+  --wm-label-letter-spacing: var(--wm-h1-letter-spacing);
 }
 
 .h2 {
   --wm-label-font-size: var(--wm-h2-font-size);
   --wm-label-font-weight: var(--wm-h2-font-weight);
   --wm-label-font-family: var(--wm-h2-font-family);
+  --wm-label-line-height: var(--wm-h2-line-height);
+  --wm-label-letter-spacing: var(--wm-h2-letter-spacing);
 }
 
 .h3 {
   --wm-label-font-size: var(--wm-h3-font-size);
   --wm-label-font-weight: var(--wm-h3-font-weight);
   --wm-label-font-family: var(--wm-h3-font-family);
+  --wm-label-line-height: var(--wm-h3-line-height);
+  --wm-label-letter-spacing: var(--wm-h3-letter-spacing);
 }
 
 .h4 {
   --wm-label-font-size: var(--wm-h4-font-size);
   --wm-label-font-weight: var(--wm-h4-font-weight);
   --wm-label-font-family: var(--wm-h4-font-family);
+  --wm-label-line-height: var(--wm-h4-line-height);
+  --wm-label-letter-spacing: var(--wm-h4-letter-spacing);
 }
 
 .h5 {
   --wm-label-font-size: var(--wm-h5-font-size);
   --wm-label-font-weight: var(--wm-h5-font-weight);
   --wm-label-font-family: var(--wm-h5-font-family);
+  --wm-label-line-height: var(--wm-h5-line-height);
+  --wm-label-letter-spacing: var(--wm-h5-letter-spacing);
 }
 
 .h6 {
   --wm-label-font-size: var(--wm-h6-font-size);
   --wm-label-font-weight: var(--wm-h6-font-weight);
   --wm-label-font-family: var(--wm-h6-font-family);
-}
-
-.p {
-  --wm-label-font-size: var(--wm-body-small-font-size);
+  --wm-label-line-height: var(--wm-h6-line-height);
+  --wm-label-letter-spacing: var(--wm-h6-letter-spacing);
 }
 
 .media-heading {
@@ -50,6 +66,10 @@
   --wm-label-color: var(--wm-color-secondary);
 }
 
+.text-tertiary {
+  --wm-label-color: var(--wm-color-tertiary);
+}
+
 .text-success {
   --wm-label-color: var(--wm-color-success);
 }
@@ -92,6 +112,17 @@
   --wm-label-color: var(--wm-color-on-secondary);
 }
 
+.label-tertiary {
+  --wm-label-padding-left: var(--wm-space-8);
+  --wm-label-padding-right: var(--wm-space-8);
+  --wm-label-padding-top: var(--wm-space-4);
+  --wm-label-padding-bottom: var(--wm-space-4);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-tertiary);
+  --wm-label-color: var(--wm-color-on-tertiary);
+}
+
 .label-success {
   --wm-label-padding-left: var(--wm-space-8);
   --wm-label-padding-right: var(--wm-space-8);

package/src/styles/mobile/components/variables/navitem.variant.less

@@ -0,0 +1,14 @@
+.app-navitem-active,
+.app-navitem-active.app-navitem-anchor {
+  --wm-navitem-color: var(--wm-color-on-secondary-fixed);
+  --wm-navitem-icon-size: var(--wm-icon-size);
+  --wm-navitem-icon-color: var(--wm-color-on-secondary-container);
+  --wm-navitem-border-radius: var(--wm-radius-pill);
+  --wm-navitem-background: var(--wm-color-secondary-fixed);
+  --wm-navitem-badge-font-size: var(--wm-label-large-font-size);
+  --wm-navitem-badge-font-family: var(--wm-label-large-font-family);
+  --wm-navitem-badge-font-weight: var(--wm-font-weight-600);
+  --wm-navitem-badge-border-radius: var(--wm-radius-circle);
+  --wm-navitem-badge-background: var(--wm-color-secondary-fixed-dim);
+  --wm-navitem-caret-color: var(--wm-color-on-secondary-fixed);
+}

package/src/styles/mobile/components/variables/toggle.variant.less

@@ -1,7 +1,15 @@
 .app-toggle-on,
 .app-toggle-handle-on {
   --wm-toggle-background-color: var(--wm-color-secondary);
+  --wm-toggle-border-color: var(--wm-color-secondary);
+  --wm-toggle-border-radius: 18px;
+  --wm-toggle-border-width: 2px;
   --wm-toggle-handle-color: var(--wm-color-on-secondary);
+  --wm-toggle-handle-width: 16px;
+  --wm-toggle-handle-height: 16px;
+  --wm-toggle-handle-radius: 18px;
+  --wm-toggle-handle-margin-left: 8px;
+  --wm-toggle-handle-margin-right: 1px;
 }
 
 .app-toggle-disabled {

package/src/styles/mobile/studio/advanced/styles.less

@@ -1,2 +1,3 @@
 @import url('./carousel.less');
 @import url('./login.less');
+@import url('./webview.less');

package/src/styles/mobile/studio/advanced/webview.less

@@ -0,0 +1,7 @@
+.app-iframe {
+    background-color: var(--wm-webview-background-color);
+    padding-right: var(--wm-webview-padding-right);
+    padding-left: var(--wm-webview-padding-left);
+    padding-bottom: var(--wm-webview-padding-bottom);
+    padding-top: var(--wm-webview-padding-top);
+}

package/src/styles/mobile/studio/basic/label.less

@@ -1,4 +1,6 @@
 .app-label {
+    display: block;
+    width: max-content;
     &.h1,
     &.h2,
     &.h3,
@@ -9,8 +11,14 @@
         padding-right: var(--wm-label-padding-right);
         padding-top: var(--wm-label-padding-top);
         padding-bottom: var(--wm-label-padding-bottom);
-        margin: var(--wm-label-margin);
+        margin-top: var(--wm-label-margin-top);
+        margin-bottom: var(--wm-label-margin-bottom);
+        margin-left: var(--wm-label-margin-left);
+        margin-right: var(--wm-label-margin-right);
+        line-height: var(--wm-label-line-height);
+        letter-spacing: var(--wm-label-letter-spacing);
     }
+
     border-radius: var(--wm-label-border-radius);
 
     &.label-primary,
@@ -18,11 +26,18 @@
     &.label-default,
     &.label-success,
     &.label-warning,
+    &.label-secondary,
+    &.label-tertiary,
     &.label-info {
-        padding-top: var(--wm-label-padding-top);
-        padding-bottom: var(--wm-label-padding-bottom);
-        padding-left: var(--wm-label-padding-left);
-        padding-right: var(--wm-label-padding-right);
-        margin: var(--wm-label-margin);
+        padding-top: var(--wm-label-padding-top) !important;
+        padding-bottom: var(--wm-label-padding-bottom) !important;
+        padding-left: var(--wm-label-padding-left) !important;
+        padding-right: var(--wm-label-padding-right) !important;
+        margin-top: var(--wm-label-margin-top);
+        margin-bottom: var(--wm-label-margin-bottom);
+        margin-left: var(--wm-label-margin-left);
+        margin-right: var(--wm-label-margin-right);
+        line-height: var(--wm-label-line-height);
+        letter-spacing: var(--wm-label-letter-spacing);
     }
-}
+}

package/src/styles/mobile/studio/basic/picture.less

@@ -1,4 +1,10 @@
 .img-thumbnail.app-picture {
   background-color: var(--wm-picture-background);
   border-color: var(--wm-picture-border-color);
+}
+
+.app-picture {
+  // can be added to picture foundation styles by mapping to design tokens like did it in web and exposing the same in style workspace
+    width: 270px; 
+    height: 270px;
 }

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

@@ -28,4 +28,12 @@
         color: var(--wm-search-btn-icon-color);
         font-size: var(--wm-search-btn-icon-size);
     }
+}
+
+
+.app-search[type=autocomplete]>input.app-textbox {
+  width: var(--wm-form-controls-min-width);
+}
+.app-search>input.app-textbox{
+  width: 100%;
 }

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

@@ -1,5 +1,5 @@
 .app-page-content .app-default-container {
-          border: 1px dotted rgba(168, 168, 168, .4) !important; 
+         //  border: 1px dotted rgba(168, 168, 168, .4) !important; 
  }
 
  .app-container{
@@ -12,7 +12,14 @@
     padding-top: var(--wm-container-padding-top);
 
     border-radius: var(--wm-container-border-radius);
-    border-width: var(--wm-container-border-width);
+    border-top-width: var(--wm-container-border-width-top);
+    border-bottom-width: var(--wm-container-border-width-bottom);
+    border-left-width: var(--wm-container-border-width-left);
+    border-right-width: var(--wm-container-border-width-right);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
- }
+ }
+
+ .app-container .app-textbox {
+    min-height: inherit;
+}

package/src/styles/mobile/studio/container/linearlayout.less

@@ -0,0 +1,8 @@
+.app-linear-layout {
+    &:not(.app-linear-layout-item > .app-linear-layout) {
+    border: none;
+ }
+  > .app-linear-layout-item {
+    border: none;
+  }
+}

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

@@ -1,8 +1,9 @@
 .app-panel {
     .panel-heading {
         background-color: var(--wm-panel-heading-background);
-        .app-icon.panel-icon {
-            font-size: 32px;
+        .panel-icon {
+            font-size: var(--wm-panel-heading-icon-size);
+            color: var(--wm-panel-heading-icon-color);
         }
         .heading {
             font-size: var(--wm-panel-heading-font-size);
@@ -36,11 +37,6 @@
             padding: 0px;
         }
     }
-    .app-panel-footer {
-        min-height: 64px; //TODO Add styling tokens
-        margin-top: 8px; //TODO Add styling tokens
-        border-radius: 6px; //TODO Add styling tokens
-    }
 }
 
 

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

@@ -3,4 +3,5 @@
 @import url('./panel.less');
 @import url('./tabs.less');
 @import url('./wizard.less');
-@import url('./container.less');
+@import url('./container.less');
+@import url('./linearlayout.less');

package/src/styles/mobile/studio/container/tabs.less

@@ -96,7 +96,8 @@
 
     >.tab-content {
         background: var(--wm-tabs-background);
-        padding: var(--wm-tabs-item-heading-padding, 8px);
+        // padding: var(--wm-tabs-item-heading-padding, 0px);
+        padding: 0px; // replace with appropriate token for 0px.
     }
 
     .tab-pane {

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

@@ -1,3 +1,25 @@
 .app-list {
+  .panel-heading {
+    background-color: var(--wm-card-header-background-color);
+  }
+}
+
+.app-livelist {
+ width: 100%;
+}
 
+.app-livelist.app-panel.media-list,
+.app-livelist.app-panel.app-default-list {
+  box-shadow: none;
+  margin-bottom: 16px;
 }
+
+.app-livelist.app-panel.media-list[groupby],
+.app-livelist.app-panel.app-default-list[groupby] {
+  box-shadow: none;
+  margin-bottom: 0px;
+}
+
+.app-list-item{
+  min-height: auto;
+}

package/src/styles/mobile/studio/dialogs/base-dialog.less

@@ -3,9 +3,15 @@
     background-color: transparent;
     .app-dialog-title {
         text-align: left;
-
+        font-size: var(--wm-modal-title-font-size);
+        font-weight: var(--wm-modal-title-font-weight);
+        color: var(--wm-modal-title-color);
+        letter-spacing: var(--wm-modal-title-letter-spacing);
+        line-height: var(--wm-modal-title-line-height);
+        font-family: var(--wm-modal-title-font-family);
         i {
-            font-size: 24px;
+            font-size: var(--wm-modal-icon-font-size);
+            color: var(--wm-modal-icon-color);
         }
 
         // span {
@@ -22,10 +28,153 @@
     }
 
     .modal-content {
-        background-color: var(--wm-dialog-background-color);
+        background-color: var(--wm-modal-background);
+        border-radius: var(--wm-modal-radius);
+        padding: var(--wm-modal-body-padding) !important;
+        min-width: var(--wm-modal-min-width);
+        margin-top: var(--wn-modal-margin);
+        margin-bottom: var(--wn-modal-margin);
         padding: 24px;
         .app-dialog-header {
             border-color: transparent;
         }
     }
+}
+.app-dialog .modal-content .app-dialog-header{
+    //header
+    padding: var(--wm-modal-header-padding);
+    border-style: var(--wm-modal-header-border-style);
+    border-color: var(--wm-modal-header-border-color);
+    border-width: var(--wm-modal-header-border-width);
+    background-color: var(--wm-modal-header-background);
+}
+
+.app-dialog .app-dialog-close{
+    border-width: var(--wm-modal-header-close-btn-border-width);
+    border-color: var(--wm-modal-header-close-btn-border-color);
+    border-style: var(--wm-modal-header-close-btn-border-style);
+    background-color: var(--wm-modal-header-close-btn-background);
+    width: auto;
+    height: auto;
+}
+
+.app-dialog .app-dialog-close .app-icon::before{
+    font-size: var(--wm-modal-header-close-btn-font-size);
+    color: var(--wm-modal-header-close-btn-color);
+    width: auto;
+    height: auto;
+}
+
+.app-alert-dialog .app-dialog-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);
+}
+
+.app-alert-dialog .app-dialog-footer .ok-action.app-button{
+    background-color: var(--wm-modal-btn-ok-background);
+    color: var(--wm-modal-btn-ok-color);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-confirm-dialog .app-dialog-footer .app-button:last-child{
+    background-color: var(--wm-modal-btn-ok-background);
+    color: var(--wm-modal-btn-ok-color);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-confirm-dialog .app-dialog-footer .app-button:first-child {
+    background-color: var(--wm-modal-btn-cancel-background);
+    color: var(--wm-modal-btn-cancel-background);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-dialog-footer {
+    padding: var(--wm-modal-footer-padding);  
+}
+
+//styleWorkspace Template
+.native_mobile-dialog {
+        background-color: var(--wm-modal-background);
+        border-radius: var(--wm-modal-radius);
+        padding: var(--wm-modal-body-padding) !important;
+        min-width: var(--wm-modal-min-width);
+        margin-top: var(--wn-modal-margin);
+        margin-bottom: var(--wn-modal-margin);
+.dialog-header{
+    padding: var(--wm-modal-header-padding);
+    border-style: var(--wm-modal-header-border-style);
+    border-color: var(--wm-modal-header-border-color);
+    border-width: var(--wm-modal-header-border-width);
+    background-color: var(--wm-modal-header-background);
+}
+
+.dialog-icon .wi-check:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);
+} 
+
+.dialog-icon .wi-file:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);
+} 
+
+.dialog-icon .wi-alert:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);   
+}
+
+.dialog-title {
+        font-size: var(--wm-modal-title-font-size);
+        font-weight: var(--wm-modal-title-font-weight);
+        color: var(--wm-modal-title-color);
+        letter-spacing: var(--wm-modal-title-letter-spacing);
+        line-height: var(--wm-modal-title-line-height);
+        font-family: var(--wm-modal-title-font-family);
+}
+.dialog-close{
+    border-width: var(--wm-modal-header-close-btn-border-width);
+    border-color: var(--wm-modal-header-close-btn-border-color);
+    border-style: var(--wm-modal-header-close-btn-border-style);
+    background-color: var(--wm-modal-header-close-btn-background);
+    width: auto;
+    height: auto;
+}
+
+.dialog-close .wi-close:before{
+    font-size: var(--wm-modal-header-close-btn-font-size);
+    color: var(--wm-modal-header-close-btn-color);
+    width: auto;
+    height: auto;
+}
+
+.dialog-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);   
+}
+
+.dialog-actions {
+    padding: var(--wm-modal-footer-padding) !important; 
+}
+
+.dialog-btn.cancel-btn{
+    background-color: var(--wm-modal-btn-cancel-background) !important;
+    color: var(--wm-modal-btn-cancel-color) !important;
+    border-width: 0px !important;
+    border-style: none !important;
+}
+
+.dialog-btn.confirm-btn{
+    background-color: var(--wm-modal-btn-ok-background) !important;
+    color: var(--wm-modal-btn-ok-color) !important;
+    border-width: 0px !important;
+    border-style: none !important;
+}
+
 }