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

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

@@ -1,5 +1,4 @@
-.app-toggle-on,
-.app-toggle-handle-on {
+.app-toggle-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,7 +1,5 @@
-.app-wizard-active-step,
-.app-wizard-active-step-counter {
+.app-wizard-active {
   --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);
@@ -14,7 +12,6 @@
 
 .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,9 +1,6 @@
-.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);
-    }
+.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);
 }

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

@@ -1,16 +1,5 @@
 .app-anchor {
-    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);
-    }
-}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -1,21 +1,3 @@
-.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;
-    }
+.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;
 }

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

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

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

@@ -1,42 +1,13 @@
-.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;
+.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;
     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);
+    border-radius: var(--wm-message-close-btn-border-radius) !important;
     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/search.less

@@ -1,31 +1,7 @@
-.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);
-    }
+.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;
 }

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

@@ -0,0 +1,34 @@
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-tabs .nav-tabs .tab-header.active a{
+    color: var(--wm-tabs-item-heading-text);
+    background-color: var(--wm-tabs-item-heading-background);
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-tabs {
+    background-color: var(--wm-tabs-background);
+    border-radius: var(--wm-tabs-border-radius);
+    border-style: var(--wm-tabs-border-style);
+    border-width: var(--wm-tabs-border-width);
+    border-bottom-width: var(--wm-tabs-border-width);
+    border-color: var(--wm-tabs-border-color);
+}
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-tabs .nav-tabs {
+     background-color: var(--wm-tabs-heading-background);
+    border-radius: var(--wm-tabs-heading-border-radius);
+    border-style: var(--wm-tabs-heading-border-style);
+    border-width: var(--wm-tabs-heading-border-width);
+    border-color: var(--wm-tabs-heading-border-color);
+}
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-tabs .nav-tabs .tab-header a {
+    background-color:var(--wm-tabs-item-heading-background);
+    padding-bottom:var(--wm-tabs-item-heading-padding);
+    padding-top: var(--wm-tabs-item-heading-padding);
+    padding-bottom: var(--wm-tabs-item-heading-padding);
+    background-color: var(--wm-tabs-item-heading-background);
+    padding-top:var(--wm-tabs-item-heading-padding);
+}
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-tabs .nav-tabs .tab-header a .tab-heading{
+        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);
+}

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

@@ -2,13 +2,11 @@
 @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/cards.less

@@ -0,0 +1,36 @@
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-card .app-card-header {
+    padding: var(--wm-card-header-padding) !important;
+    background-color: var(--wm-card-header-background-color) !important;
+    width: var(--wm-card-header-width);
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .card-default {
+    border-width: var(--wm-card-border-width);
+    border-style: var(--wm-card-border-style);
+    border-color: var(--wm-card-border-color) !important;
+    border-radius: var(--wm-card-border-radius);
+    background-color: var(--wm-card-background);
+    padding: var(--wm-card-padding);
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .card-elevated {
+    border-width: var(--wm-card-border-width);
+    border-style: var(--wm-card-border-style);
+    border-color: var(--wm-card-border-color) !important;
+    border-radius: var(--wm-card-border-radius);
+    background-color: var(--wm-card-background);
+    padding: var(--wm-card-padding);
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .card-filled {
+    border-width: var(--wm-card-border-width);
+    border-style: var(--wm-card-border-style);
+    border-color: var(--wm-card-border-color) !important;
+    border-radius: var(--wm-card-border-radius);
+    background-color: var(--wm-card-background);
+    padding: var(--wm-card-padding);
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-panel .panel-heading {
+  border-color: transparent !important;
+}

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

@@ -0,0 +1,3 @@
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-barcode{
+    padding-right: var(--wm-barcodescanner-padding-right) !important;
+}

package/src/styles/mobile/studio/input/checkbox.less

@@ -1,77 +1,102 @@
-.app-checkbox {
+/* Checkbox component styles and tokens */
+@import (optional) url('../../../../components/input/checkbox.less');
+@import (optional) url('../../../../generated/variables/mobile/components/checkbox.variant.less');
 
-    input[type="checkbox"] {
-        appearance: none;
-        margin: 0 8px 0 0;
-        cursor: pointer;
-        transition: all 0.2s ease;
+.wm-app {
+    .app-checkbox {
+        position: relative;
 
-        // root box
-        & {
-            width: var(--wm-checkbox-width);
-            height: var(--wm-checkbox-height);
-            background-color: var(--wm-checkbox-background-color);
-            border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
-            border-radius: var(--wm-checkbox-border-radius);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        // checked state
-        &:checked {
-            background-color: var(--wm-checkbox-background-color);
-            border-color: var(--wm-checkbox-border-color);
+        &.checkbox {
+            display: inline-block;
 
-            &::after {
-                content: "";
-                display: block;
-                width: calc(var(--wm-checkbox-icon-size)/3);
-                height: calc(var(--wm-checkbox-icon-size)/1.5);
-                border-right: 3px solid var(--wm-checkbox-icon-color);
-                border-bottom: 3px solid var(--wm-checkbox-icon-color);
-                transform: rotate(45deg);
-                top: 3px;
-                left: 6px;
-            }
-        }
+            >label {
+                padding: 0; 
+                display: inline-flex;
+                width: auto;
+                min-height: var(--wm-checkbox-width); 
+                margin-left: var(--wm-checkbox-label-margin-left);
+                font-size: var(--wm-checkbox-label-font-size);
+                font-family: var(--wm-checkbox-label-font-family);
+                font-weight: normal;
+                line-height: normal; 
+                letter-spacing: normal; 
+                cursor: pointer;
 
-        // disabled state
-        &:disabled {
-            cursor: not-allowed;
-            opacity: 0.6;
-        }
-    }
+                >input[type="checkbox"] {
+                    width: var(--wm-checkbox-width);
+                    height: var(--wm-checkbox-width);
+                    //background-color: var(--wm-checkbox-background-color);
+                    //border-color: var(--wm-checkbox-border-color);
+                    border-width: var(--wm-checkbox-border-width);
+                    appearance: none;
+                    -moz-appearance: none;
+                    -webkit-appearance: none;
+                    margin: 0;
+                    position: absolute;
+                    left: 0px;
+                    z-index: 1;
+                    cursor: pointer;
+                    opacity: 1;
+                    // background: var(--wm-checkbox-state-layer-color); // not in mobile tokens
 
-    &.checkbox {
+                    &:checked {
+                        +.caption {
+                            &:after {
+                                transform: translate(3px, 4px) rotate(-45deg) scale(1);
+                            }
+                        }
+                    }
+                  
+                }
+                >input[type="checkbox"]:disabled {
+                    // Use a token if available, or set a variable
+                    // background-color: var(--wm-checkbox-disabled-background-color);
+                    // border-color: var(--wm-checkbox-disabled-border-color);
+                    cursor: not-allowed;
+                }
+                
+                >input[type="checkbox"]:disabled + .caption:before,
+                >input[type="checkbox"]:disabled + .caption:after {
+                    opacity: var(--wm-checkbox-disabled-opacity, 0.38); 
+                    cursor: not-allowed;
+                }
 
-        >label {
-            padding: 0;
-            display: inline-flex;
-            width: auto;
-            min-height: var(--wm-checkbox-width);
-            margin-left: var(--wm-checkbox-label-margin-left);
-            font-size: var(--wm-checkbox-label-font-size);
-            font-family: var(--wm-checkbox-label-font-family);
-            font-weight: normal;
-            line-height: normal;
-            letter-spacing: normal;
-            cursor: pointer;
+                .caption {
+                    display: inline-block;
+                    padding-left: 0;
+                    padding-top: 0;
+                    margin-left: var(--wm-checkbox-label-margin-left);
 
+                    &:before,
+                    &:after {
+                        content: "";
+                        display: inline-block;
+                        position: absolute;
+                    }
 
-            .caption {
-                display: inline-block;
-                padding-left: 20px;
-                padding-top: 0;
-                margin-left: var(--wm-checkbox-label-margin-left);
+                    &:before {
+                        width: var(--wm-checkbox-width); 
+                        height: var(--wm-checkbox-width); 
+                        left: 0; 
+                        top: 0; 
+                        background: var(--wm-checkbox-background-color);
+                        border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
+                        border-radius: var(--wm-checkbox-border-radius); 
+                        box-sizing: border-box;
+                    }
 
-                &:before,
-                &:after {
-                    content: "";
-                    display: inline-block;
-                    position: absolute;
+                    &:after {
+                        top: 0; 
+                        left: 0; 
+                        width: var(--wm-space-2); 
+                        height: var(--wm-space-2); 
+                        border: solid 2px var(--wm-checkbox-icon-color);
+                        border-right: none;
+                        border-top: none;
+                        transform: translate(3px, 4px) rotate(-45deg) scale(0);
+                        transition: all 0.2s ease-in-out;
+                    }
                 }
-
             }
         }
     }