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

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

@@ -1,4 +1,5 @@
-.app-toggle-on {
+.app-toggle-on,
+.app-toggle-handle-on {
   --wm-toggle-background-color: var(--wm-color-secondary);
   --wm-toggle-handle-color: var(--wm-color-on-secondary);
 }

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

@@ -1,5 +1,7 @@
-.app-wizard-active {
+.app-wizard-active-step,
+.app-wizard-active-step-counter {
   --wm-wizard-step-indicator-background-color: var(--wm-color-secondary);
+  --wm-wizard-step-indicator-border-color: var(--wm-color-secondary);
   --wm-wizard-step-count-color: var(--wm-color-on-secondary);
   --wm-wizard-step-icon-color: var(--wm-color-on-secondary);
   --wm-wizard-step-title-color: var(--wm-color-on-surface);
@@ -12,6 +14,7 @@
 
 .app-wizard-done-step {
   --wm-wizard-step-indicator-background-color: var(--wm-color-success);
+  --wm-wizard-step-indicator-border-color: var(--wm-color-success);
   --wm-wizard-step-count-color: var(--wm-color-on-secondary);
   --wm-wizard-step-icon-color: var(--wm-color-on-secondary);
   --wm-wizard-step-title-color: var(--wm-color-on-surface);

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

@@ -1,6 +1,9 @@
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form.app-login{
-    padding-top: var(--wm-login-form-padding-top);
-    padding-right: var(--wm-login-form-padding-right);
-    padding-bottom: var(--wm-login-form-padding-bottom);
-    padding-left: var(--wm-login-form-padding-left);
+.app-form {
+    &.app-login {
+        background-color: transparent;
+        padding-top: var(--wm-login-form-padding-top);
+        padding-right: var(--wm-login-form-padding-right);
+        padding-bottom: var(--wm-login-form-padding-bottom);
+        padding-left: var(--wm-login-form-padding-left);
+    }
 }

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

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

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

@@ -1,5 +1,16 @@
 .app-anchor {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+    align-items: center;
+    justify-content: center;
+    .badge {
+        float: none !important;
+        right: 0;
+        top: -12px;
+        position: relative;
+    }
+    .app-icon {
+        font-size: var(--wm-anchor-icon-size);
+    }
+    .anchor-caption {
+        font-size: var(--wm-anchor-font-size);
+    }
+}

package/src/styles/mobile/studio/basic/{buttongroup.less → button-group.less}

@@ -2,45 +2,44 @@
 @import (optional) url('../../../../components/basic/button-group.less');
 @import (optional) url('../../../../generated/variables/mobile/components/button-group.variant.less');
 
-.wm-app {
-  .app-button-group {
-    display: inline-flex !important;
-    border-radius: var(--wm-button-group-radius) !important;
+.app-button-group {
+    display: inline-flex;
+    border-width: 0px;
+    border-radius: var(--wm-button-group-radius);
 
     .btn {
       border-radius: 0;
-      background-color: var(--wm-btn-background) !important;
+      background-color: var(--wm-btn-background);
 
       &:first-of-type {
-        border-top-left-radius: var(--wm-button-group-radius) !important;
-        border-bottom-left-radius: var(--wm-button-group-radius) !important;
+        border-top-left-radius: var(--wm-button-group-radius);
+        border-bottom-left-radius: var(--wm-button-group-radius);
       }
 
       &:last-of-type {
-        border-top-right-radius: var(--wm-button-group-radius) !important;
-        border-bottom-right-radius: var(--wm-button-group-radius) !important;
+        border-top-right-radius: var(--wm-button-group-radius);
+        border-bottom-right-radius: var(--wm-button-group-radius);
       }
     }
 
     &.btn-group-vertical {
-      flex-direction: column !important;
+      flex-direction: column;
 
       .btn {
         border-radius: 0;
-        width: 100% !important;
+        width: 100%;
 
         &:first-of-type {
-          border-top-left-radius: var(--wm-button-group-radius) !important;
-          border-top-right-radius: var(--wm-button-group-radius) !important;
-          border-bottom-left-radius: 0 !important;
+          border-top-left-radius: var(--wm-button-group-radius);
+          border-top-right-radius: var(--wm-button-group-radius);
+          border-bottom-left-radius: 0;
         }
 
         &:last-of-type {
-          border-top-right-radius: 0 !important;
-          border-bottom-left-radius: var(--wm-button-group-radius) !important;
-          border-bottom-right-radius: var(--wm-button-group-radius) !important;
+          border-top-right-radius: 0;
+          border-bottom-left-radius: var(--wm-button-group-radius);
+          border-bottom-right-radius: var(--wm-button-group-radius);
         }
       }
     }
-  }
-}
+}

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

@@ -1,3 +1,21 @@
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-button>.btn-caption:empty {
-    display: none;
+.app-button {
+    width: auto;
+    align-self: flex-start;
+    .app-icon {
+        font-size: var(--wm-btn-icon-size);
+    }
+    .btn-caption {
+        font-weight: var(--wm-btn-font-weight);
+        font-size: var(--wm-btn-font-size);
+        text-transform: capitalize;
+        &:empty {
+            display: none;
+        }
+    }
+    .badge {
+        border: 1px solid #000;
+        top: -8px;
+        margin-left: -8px;
+        right: initial;
+    }
 }

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

@@ -0,0 +1,21 @@
+.app-icon,
+.app-icon-wrapper {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  gap: var(--wm-icon-gap);
+  font-style: normal;
+  color: var(--wm-icon-color);
+  i {
+    font-style: normal;
+  }
+}
+.app-icon {
+  font-size: var(--wm-icon-font-size);
+  min-width: var(--wm-icon-min-width);
+  width: var(--wm-icon-width);
+  height: var(--wm-icon-height);
+}
+

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

@@ -0,0 +1,28 @@
+.app-label {
+    &.h1,
+    &.h2,
+    &.h3,
+    &.h4,
+    &.h5,
+    &.h6 {
+        padding-left: var(--wm-label-padding-left);
+        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);
+    }
+    border-radius: var(--wm-label-border-radius);
+
+    &.label-primary,
+    &.label-danger,
+    &.label-default,
+    &.label-success,
+    &.label-warning,
+    &.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);
+    }
+}

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

@@ -1,13 +1,42 @@
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-message button.close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.app-message {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+
+  .close {
+    position: inherit;
+    top: 3px;
+  }
+
+  span {
+    flex: 1;
+  }
+
+  .icon {
+    font-size: var(--wm-message-icon-size);
+  }
+
+  div:nth-child(2) {
+    flex: 1;
+    padding-left: 16px;
+  }
+
+  button.close {
+   // color: var(--wm-message-color); //TODO Button color missing
+    opacity: 1;
+    text-shadow: none;
     padding-left: var(--wm-message-close-btn-padding-left);
     padding-right: var(--wm-message-close-btn-padding-right);
-    border-radius: var(--wm-message-close-btn-border-radius) !important;
+    border-radius: var(--wm-message-close-btn-border-radius);
     border-color: var(--wm-message-close-btn-border-color) !important;
     background-color: var(--wm-message-close-btn-background-color) !important;
     ripple-color:var(--wm-message-close-btn-ripple-color) !important;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+  }
 }
 
 .wm-app .app-message > span {

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

@@ -0,0 +1,6 @@
+.app-progress {
+
+    &-label {
+        display: none;
+    }
+}

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

@@ -0,0 +1,9 @@
+.app-progress.circle {
+    background-color: transparent;
+    width: var(--wm-progress-circle-width) !important;
+    height: var(--wm-progress-circle-height) !important;
+    path {
+        stroke-linecap: butt;
+        stroke-width: 16px;
+    }
+}

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

@@ -1,7 +1,31 @@
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-search-button>i.app-icon.app-icon{
-    color:var(--wm-search-btn-icon-color);
-}
-
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textbox{
-    border-radius: 0px;
+.app-search {
+    .app-textbox {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        font-size: 16px;
+        border-width: var(--wm-search-border-width);
+        border-right-width: 0;
+        padding: 8px 12px;
+        border-radius: 0px;
+    }
+    &[type="autocomplete"]>input.app-textbox {
+        border-right-width: var(--wm-search-border-width);
+        border-radius: var(--wm-search-border-radius);
+    }
+    .input-group-addon {
+        height: var(--wm-search-height);
+        ripple-color: var(--wm-search-btn-ripple-color);
+        background-color: var(--wm-search-btn-background-color);
+        border-top-right-radius: var(--wm-search-border-radius);
+        border-bottom-right-radius: var(--wm-search-border-radius);
+        border-color: var(--wm-search-border-color);
+        border-width: var(--wm-search-border-width);
+        border-style: solid;
+        border-left-width: 0;
+    }
+    
+    &-button>i.app-icon.app-icon {
+        color: var(--wm-search-btn-icon-color);
+        font-size: var(--wm-search-btn-icon-size);
+    }
 }

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

@@ -0,0 +1,6 @@
+.app-spinner {
+    .spinner-message {
+        background-color: inherit;
+        border-color: transparent;
+    }
+}

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

@@ -0,0 +1,11 @@
+@import url('./anchor.less');
+@import url('./button.less');
+@import url('./button-group.less');
+@import url('./icon.less');
+@import url('./label.less');
+@import url('./message.less');
+@import url('./picture.less');
+@import url('./progress-bar.less');
+@import url('./progress-circle.less');
+@import url('./search.less');
+@import url('./spinner.less');

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

@@ -0,0 +1,26 @@
+.app-accordion{
+    .panel-heading {
+        border-bottom-width: var(--wm-accordion-header-border-bottom-width);
+        display: flex;
+        flex-direction: row;
+        align-self: center;
+        .panel-title {
+            flex: 1;
+            align-self: center;
+        }
+        .panel-actions {
+            top: auto;
+            right: auto;
+            position: static;
+            .label {
+                border-style: solid;
+            }
+            .badge {
+                line-height: var(--wm-accordion-badge-height);
+            }
+        }
+    }
+    .panel-body {
+        padding: 0px;
+    }
+}

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

@@ -0,0 +1,18 @@
+.app-page-content .app-default-container {
+          border: 1px dotted rgba(168, 168, 168, .4) !important; 
+ }
+
+ .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);
+ }

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

@@ -0,0 +1,8 @@
+.app-grid-layout {
+    .table-header-row .app-label {
+        font-weight: bold;
+    }
+    .app-grid-column {
+        background-color: transparent;
+    }
+}

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

@@ -0,0 +1,46 @@
+.app-panel {
+    .panel-heading {
+        background-color: var(--wm-panel-heading-background);
+        .app-icon.panel-icon {
+            font-size: 32px;
+        }
+        .heading {
+            font-size: var(--wm-panel-heading-font-size);
+            font-weight: var(--wm-panel-heading-font-weight);
+        }
+        .description {
+            font-size: var(--wm-panel-heading-description-font-size);
+        }
+        .panel-title {
+            display: flex;
+            align-content: center;
+            a {
+                flex: 1;
+                display: block;
+            }
+            .app-badge {
+                width: 24px;
+                height: 24px;
+                display: inline-block;
+                padding: 6px 4px;
+                border-radius: 24px;
+            }
+            .panel-actions {
+                display: block;
+                align-self: center;
+            }
+        }
+    }
+    .panel-content {
+        .panel-body {
+            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

@@ -0,0 +1,6 @@
+@import url('./accordion.less');
+@import url('./grid.less');
+@import url('./panel.less');
+@import url('./tabs.less');
+@import url('./wizard.less');
+@import url('./container.less');

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

@@ -0,0 +1,113 @@
+.app-tabs {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background: var(--wm-tabs-background);
+
+    >.tabs-list {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 121;
+        font-size: 0;
+        color: var(--wm-tabs-item-heading-text, #000);
+        background-color: var(--wm-tabs-background);
+        padding: var(--wm-tabs-border-width, 4px) 0;
+    }
+
+    >.nav-tabs {
+        display: flex;
+        align-items: stretch;
+        border-bottom: var(--wm-tabs-border-width) var(--wm-tabs-border-style) var(--wm-tabs-border-color);
+
+        >.tab-header {
+            display: inline-flex;
+            align-items: center;
+            margin: 0px;
+            background-color: var(--wm-tabs-item-heading-background);
+
+            .tab-heading {
+
+
+                background-color: transparent;
+                color: var(--wm-tabs-item-heading-text);
+
+                .app-icon {
+                    color: var(--wm-tabs-item-heading-icon);
+                }
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                min-height: var(--wm-tabs-item-heading-line-height);
+                padding: var(--wm-tabs-item-heading-padding, 8px);
+                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);
+
+                &:after {
+                    content: "";
+                    position: absolute;
+                    bottom: 0;
+                    height: var(--wm-tabs-item-heading-indicator-height);
+                    width: 100%;
+                    background: var(--wm-tabs-item-heading-indicator-background);
+                    transform: scale(0);
+                    transition: all 0.2s ease-in-out;
+                }
+            }
+
+            &.active {
+
+
+                background-color: var(--wm-tabs-item-heading-background);
+                color: var(--wm-tabs-item-heading-text);
+
+                .app-icon {
+                    color: var(--wm-tabs-item-heading-icon);
+                }
+
+                .tab-heading {
+
+
+
+                    &:after {
+                        background: var(--wm-tabs-item-heading-indicator-background);
+                        transform: scale(1);
+                        transition: all 0.2s ease-in-out;
+                    }
+                }
+            }
+
+            &.disabled {
+                .tab-heading {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    >.tab-content {
+        background: var(--wm-tabs-background);
+        padding: var(--wm-tabs-item-heading-padding, 8px);
+    }
+
+    .tab-pane {
+        .tab-body {
+            border-color: transparent;
+        }
+    }
+
+}
+
+.nav-tabs>li.active>a {
+    background-color: transparent;
+    border-color: transparent;
+}

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

@@ -0,0 +1,7 @@
+.app-tile {
+
+}
+
+.h1.app-label.tile-template-text {
+    color: var(--wm-tile-color);
+}

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

@@ -2,11 +2,13 @@
 @import (optional) url('../../../../components/container/wizard.less');
 @import (optional) url('../../../../generated/variables/mobile/components/wizard.variant.less');
 .app-wizard {
+    display: flex;
+    flex-direction: column;
   .app-wizard-actions {
     display: flex;
     flex-direction: row;
     align-items: center;
-
+    background-color: transparent;
     .btn {
       --wm-btn-min-width: 112px;
     }

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

@@ -0,0 +1,25 @@
+    .app-card {
+        &-header {
+            padding: var(--wm-card-heading-padding);
+            background-color: var(--wm-card-header-background-color);
+            width: var(--wm-card-heading-width);
+        }
+
+        &-avatar {
+            padding-top: var(--wm-card-icon-margin-top);
+            padding-right: var(--wm-card-icon-margin-right);
+        }
+        .panel-heading {
+            background-color: var(--wm-card-header-background-color);
+    }
+}
+    .card-default,
+    .card-elevated,
+    .card-filled {
+        border-width: var(--wm-card-border-width);
+        border-style: var(--wm-card-border-style);
+        border-color: var(--wm-card-border-color);
+        border-radius: var(--wm-card-border-radius);
+        background-color: var(--wm-card-background);
+        padding: var(--wm-card-padding);
+    }

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

@@ -0,0 +1,22 @@
+.app-form {
+    &.app-panel .panel-heading {
+        background-color: transparent;
+        .description{
+            white-space: nowrap;
+        }
+    }
+    .formfield-label {
+        width: 100%;
+    }
+    .live-field {
+        >div {
+            width: 100%;
+            .form-control {
+                width: 100%;
+            }
+        }
+    }
+    .form-action .app-button {
+        padding: 12px;
+    }
+}

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

@@ -0,0 +1,3 @@
+.app-list {
+
+}

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

@@ -0,0 +1,3 @@
+@import url('./card.less');
+@import url('./list.less');
+@import url('./form.less');

package/src/styles/mobile/studio/device/barcode.less

@@ -0,0 +1,23 @@
+.app-page-content .app-ng-transclude .app-barcode {
+    width: auto;
+    padding-top: var(--wm-barcodescanner-padding-top);
+    padding-left: var(--wm-barcodescanner-padding-left);
+    padding-bottom: var(--wm-barcodescanner-padding-bottom);
+    padding-right: var(--wm-barcodescanner-padding-right);
+    gap: var(--wm-space-0) !important;
+    display: grid !important;
+    justify-content: none;
+    align-items: none;
+}
+
+ .app-barcode{
+    width: auto;
+    padding-top: var(--wm-barcodescanner-padding-top);
+    padding-left: var(--wm-barcodescanner-padding-left);
+    padding-bottom: var(--wm-barcodescanner-padding-bottom);
+    padding-right: var(--wm-barcodescanner-padding-right);
+    gap: var(--wm-space-0) !important;
+    display: grid !important;
+    justify-content: none;
+    align-items: none;
+}

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

@@ -0,0 +1,4 @@
+.app-page-content .app-ng-transclude .app-camera {
+    width: auto;
+    padding: 12px;
+}