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

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

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

package/src/styles/mobile/studio/input/epoch/datetime-picker-modal.less

@@ -1,18 +1,18 @@
-.date-picker  {
+.wm-right-panel-container .style-workspace-container.widgets .date-picker  {
     background-color: var(--wm-datetime-background);
 }
 
-.date-picker__title {
+.wm-right-panel-container .style-workspace-container.widgets .date-picker__title {
     color:var(--wm-datetime-header-text-color);
     font-size: var(--wm-datetime-header-text-font-size);
     font-weight: var(--wm-datetime-header-text-font-weight);
 }
 
-.date-picker__content  {
+.wm-right-panel-container .style-workspace-container.widgets .date-picker__content  {
     background-color: var(--wm-datetime-background);
 }
 
-.btn-cancel {
+.wm-right-panel-container .style-workspace-container.widgets .btn-cancel {
     border-color: var(--wm-datetime-button-border-color);
     border-width: var(--wm-datetime-button-border-width);
     border-style: var(--wm-datetime-button-border-style);
@@ -24,7 +24,7 @@
     color: var(--wm-datetime-cancel-button-text-color);
 }
 
-.btn-select {
+.wm-right-panel-container .style-workspace-container.widgets .btn-select {
     background-color: var(--wm-datetime-selected-button-background);
     border-color: var(--wm-datetime-button-border-color);
     border-width: var(--wm-datetime-button-border-width);
@@ -36,13 +36,13 @@
     color: var(--wm-datetime-selected-button-text-color);
 }
 
-.wheel-item {
+.wm-right-panel-container .style-workspace-container.widgets .wheel-item {
     color:var(--wm-datetime-text-color);
     font-size: var(--wm-datetime-text-font-size);
     font-weight: var(--wm-datetime-text-font-weight);
 }
 
-.wheel-item.selected{
+.wm-right-panel-container .style-workspace-container.widgets .wheel-item.selected{
     color:var(--wm-datetime-selected-text-color);
     font-size: var(--wm-datetime-selected-text-font-size);
     font-weight: var(--wm-datetime-selected-text-font-weight);

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

@@ -1,170 +1,101 @@
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-search>input.app-textbox {
+    border-radius: var(--wm-search-border-radius);
+    border-width: var(--wm-border-width-base);
+}
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-panel .panel-footer {
-  display: flex;
-  justify-content: space-around;
-  padding-left: var(--wm-form-footer-padding-horizontal);
-  padding-right: var(--wm-form-footer-padding-horizontal);
-  padding-top: var(--wm-form-footer-padding-vertical);
-  padding-bottom: var(--wm-form-footer-padding-vertical);
-  border-width: var(--wm-form-footer-border-width);
-  border-color: var(--wm-form-footer-border-color);
-  border-radius: var(--wm-form-footer-border-radius);
-  background-color: var(--wm-form-footer-background) !important;
-  border-style: var(--wm-form-footer-border-style);
+    display: flex;
+    justify-content: space-around;
+    background-color: var(--wm-form-footer-background) !important;
+    border-color: var(--wm-form-footer-border-color);
+    border-style: var(--wm-form-footer-border-style);
+    border-width: var(--wm-form-footer-border-width);
+    border-radius: var(--wm-form-footer-border-radius);
+    padding-top: var(--wm-form-footer-padding-vertical);
+    padding-bottom: var(--wm-form-footer-padding-vertical);
+    padding-left: var(--wm-form-footer-padding-horizontal);
+    padding-right: var(--wm-form-footer-padding-horizontal);
 }
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .formfield-label {
-  width: 40%;
+    width: 40%;
 }
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .live-field > div .form-control{
-  width: 100%;
-  padding-left: 0;
+    width: 100%;
+    padding-left: 0;
 }
 
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form {
-  background-color: var(--wm-form-background) !important;
-  padding: var(--wm-form-padding) !important;
-  margin: var(--wm-form-margin) !important;
-  border-radius: var(--wm-form-border-radius) !important;
-  border-width: var(--wm-form-border-width) !important;
-  border-style: var(--wm-form-border-style) !important;
-  border-color: var(--wm-form-border-color) !important;
-  // width: 70%;
-  // margin-left: 90px !important;
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .form-default {
+    background-color: var(--wm-form-background) !important;
+    padding: var(--wm-form-padding) !important;
+    margin: var(--wm-form-margin) !important;
+    border-radius: var(--wm-form-border-radius) !important;
+    border-width: var(--wm-form-border-width) !important;
+    border-style: var(--wm-form-border-style) !important;
+    border-color: var(--wm-form-border-color) !important;
+    width: 70%;
+    margin-left: 90px !important;
 }
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .panel-heading {
-  padding-top: var(--wm-form-header-padding-vertical);
-  padding-bottom: var(--wm-form-header-padding-vertical);
-  padding-left: var(--wm-form-header-padding-horizontal);
-  padding-right: var(--wm-form-header-padding-horizontal);
-  border-radius: var(--wm-form-header-border-radius);
-  border-color: var(--wm-form-header-border-color) !important;
-  border-style: var(--wm-form-header-border-style);
-  border-width: var(--wm-form-header-border-width);
-  background-color: var(--wm-form-header-background) !important;
+    padding-top: var(--wm-form-default-header-padding-vertical);
+    padding-bottom: var(--wm-form-default-header-padding-vertical);
+    padding-left: var(--wm-form-default-header-padding-horizontal);
+    padding-right: var(--wm-form-default-header-padding-horizontal);
+    border-radius: var(--wm-form-default-header-border-radius);
+    border-color: var(--wm-form-default-header-border-color) !important;
+    border-style: var(--wm-form-default-header-border-style);
+    border-width: var(--wm-form-default-header-border-width);
+    background-color: var(--wm-form-default-header-background) !important;
 }
 
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .live-field > div .form-control{
-      min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
-  border-style: var(--wm-form-controls-border-style);
-  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);
+        min-height: var(--wm-form-input-min-height);
+    padding-top: var(--wm-form-input-padding-vertical);
+    padding-bottom: var(--wm-form-input-padding-vertical);
+    padding-left: var(--wm-form-input-padding-horizontal);
+    padding-right: var(--wm-form-input-padding-horizontal);
+    border-style: var(--wm-form-input-border-style);
+    border-width: var(--wm-form-input-border-width);
+    border-color: var(--wm-form-input-border-color);
+    border-radius: var(--wm-form-input-border-radius);
+    background-color: var(--wm-form-input-background);
+    color: var(--wm-form-input-placeholder-color);
 }
 
 .wm-app .app-form > .panel-body{
-  padding-left: var(--wm-form-body-padding-horizontal);
-  padding-right: var(--wm-form-body-padding-horizontal);
-  padding-top: var(--wm-form-body-padding-vertical);
-  padding-bottom: var(--wm-form-body-padding-vertical);
-  border-color: var(--wm-form-body-border-color);
-  border-style: var(--wm-form-body-border-style);
-  border-width: var(--wm-form-body-border-width);
-  border-radius: var(--wm-form-body-border-radius);
-  background-color: var(--wm-form-body-background) !important;
+    padding-left: var(--wm-form-body-padding-horizontal);
+    padding-right: var(--wm-form-body-padding-horizontal);
+    padding-top: var(--wm-form-body-padding-vertical);
+    padding-bottom: var(--wm-form-body-padding-vertical);
+    border-color: var(--wm-form-body-border-color);
+    border-style: var(--wm-form-body-border-style);
+    border-width: var(--wm-form-body-border-width);
+    border-radius: var(--wm-form-body-border-radius);
+    background-color: var(--wm-form-body-background) !important;
 }
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .formfield-label {
-  color: var(--wm-form-controls-label-color);
-  background-color: var(--wm-form-controls-label-background);
-  font-size: var(--wm-form-controls-label-font-size);
-  font-weight: var(--wm-form-controls-label-font-weight);
-  font-family: var(--wm-form-controls-label-font-family);
-  margin-top: var(--wm-form-controls-label-margin-vertical);
-  margin-bottom: var(--wm-form-controls-label-margin-vertical);
-  margin-left: var(--wm-form-controls-label-margin-horizontal);
-  margin-right: var(--wm-form-controls-label-margin-horizontal);
-}
-
-
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .form-controls{
-  box-shadow:none;
-}
-
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-currency .app-currency-input {
-  border-top-left-radius: 0px !important;
-  border-bottom-left-radius: 0px !important;
-  border-left-width: 0px !important;
-  min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
-  border-style: var(--wm-form-controls-border-style);
-  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);
-  color: var(--wm-form-controls-color);
-  opacity: var(--wm-form-controls-opacity);
-}
-
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-currency span {
-  padding-bottom: 16px;
-  padding-top: 16px;
-  bottom: 1px;
-  position: relative;
-}
-
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textbox {
-  min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
-  border-style: var(--wm-form-controls-border-style);
-  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);
-  color: var(--wm-form-controls-color);
-  opacity: var(--wm-form-controls-opacity);
-}
-
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textarea {
-  min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
-  border-style: var(--wm-form-controls-border-style);
-  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);
-  color: var(--wm-form-controls-color);
-  opacity: var(--wm-form-controls-opacity);
-}
-
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-select{
-  min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-vertical);
-  padding-bottom: var(--wm-form-controls-padding-vertical);
-  padding-left: var(--wm-form-controls-padding-horizontal);
-  padding-right: var(--wm-form-controls-padding-horizontal);
-  border-style: var(--wm-form-controls-border-style);
-  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);
-  color: var(--wm-form-controls-color);
-  opacity: var(--wm-form-controls-opacity);
+    color: var(--wm-form-input-label-color);
+    background-color: var(--wm-form-input-label-background);
+    font-size: var(--wm-form-input-label-font-size);
+    font-weight: var(--wm-form-input-label-font-weight);
+    font-family: var(--wm-form-input-label-font-family);
+    margin-top: var(--wm-form-input-label-margin-vertical);
+    margin-bottom: var(--wm-form-input-label-margin-vertical);
+    margin-left: var(--wm-form-input-label-margin-horizontal);
+    margin-right: var(--wm-form-input-label-margin-horizontal);
 }
 
-.wm-app .form-control::placeholder {
-  color: var(--wm-form-control-color-place-holder);
+.form-control:focus {
+    border-width: var(--wm-form-input-border-width) !important;
+    border-color: var(--wm-form-input-border-color) !important;
+    background-color: var(--wm-form-input-background) !important;
+    color: var(--wm-form-input-color) !important;
 }
 
-// these selector will need at the time of enhacing the form
-// .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .form-group:focus .app-label{
-// }
-// .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-label.h1{
-// }
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .form-input{
+    box-shadow:none;
+}

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

@@ -1,4 +1,8 @@
-.app-radio {
+/* Label component styles and tokens */
+@import (optional) url('../../../../components/input/radioset.less');
+@import (optional) url('../../../../generated/variables/mobile/components/radioset.variant.less');
+.wm-app {
+  .app-radio {
     position: relative;
 
     &.radio {
@@ -108,3 +112,4 @@
       }
     }
   }
+}

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

@@ -1,21 +1,14 @@
-.app-ratings {
-
-    padding: var(--wm-rating-padding);
-    opacity: var(--wm-rating-opacity);
-    
-    label i {
-        font-size: var(--wm-rating-icon-size);
-        color: var(--wm-rating-icon-color);
-        width: var(--wm-rating-icon-size);
-        height: var(--wm-rating-icon-size);
-        min-width: var(--wm-rating-icon-size);
-        line-height: var(--wm-rating-icon-size);
-    }
-
-    .caption {
-        padding-left: var(--wm-rating-text-padding-left);
-        color: var(--wm-rating-text-color);
-        font-size: var(--wm-rating-text-size);
-    }
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-ratings label i{
+    font-size: var(--wm-rating-icon-size) !important;
+    color: var(--wm-rating-icon-color) !important;
+    width: var(--wm-rating-icon-size);
+    height: var(--wm-rating-icon-size);
+    min-width: var(--wm-rating-icon-size);
+    line-height: var(--wm-rating-icon-size);
+}
 
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-ratings .caption {
+    padding-left: var(--wm-rating-text-padding-left) !important;
+    color: var(--wm-rating-text-color) !important;
+    font-size: var(--wm-rating-text-size) !important;
 }

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

@@ -1,12 +1,3 @@
-.app-switch {
-    .btn-group {
-        height: var(--wm-switch-button-height);
-        .btn {
-            text-transform: capitalize;
-            font-size: var(--wm-switch-button-font-size);
-        }
-    }
-    span {
-        display: none;
-    }
-}
+.app-switch .btn-group .btn{
+    font-size: var(--wm-switch-button-font-size);
+}

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

@@ -1,6 +1,8 @@
-.app-toggle.checkbox {
-  padding: 0px;
+@import (optional) url('../../../../components/input/toggle.less');
 
+.wm-app {
+  .app-toggle.checkbox {
+    padding: 0px;
   label {
     width: var(--wm-toggle-width);
     height: var(--wm-toggle-height);
@@ -8,7 +10,7 @@
     box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
     border-radius: var(--wm-toggle-border-radius);
     position: relative;
-    background-color: var(--wm-toggle-background-color, #fff);
+    background-color: var(--wm-toggle-background-color, #fff) !important;
     border: var(--wm-toggle-border-width) solid var(--wm-toggle-border-color);
     cursor: pointer;
     display: inline-block;
@@ -72,7 +74,7 @@
   }
 
   /* Checked State move handle */
-  input[type="checkbox"]:checked~.switch {
+  input[type="checkbox"]:checked ~ .switch {
     right: 0;
     left: auto;
     margin-right: 6px;
@@ -81,7 +83,7 @@
     transform: scale(1.6) !important;
   }
 
-  input[type="checkbox"]:checked~label {
+  input[type="checkbox"]:checked ~ label {
     background-color: var(--wm-toggle-background-color);
   }
 
@@ -89,10 +91,5 @@
     width: var(--wm-toggle-width);
     height: var(--wm-toggle-height);
   }
-
-
 }
-
-.app-toggle-on.app-toggle {
-  background-color: transparent;
 }

package/src/styles/mobile/studio/navigation/menu.less

@@ -1,21 +1,19 @@
-.app-menu .app-button>.caret,
-.app-menu .app-anchor>.caret {
-        color: var(--wm-dropdown-menu-caret-color);
-    margin: 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    left: calc(var(--wm-dropdown-menu-caret-size) * 5.2);
-    width: var(--wm-dropdown-menu-caret-size);
-    height: var(--wm-dropdown-menu-caret-size);
-    font-size: var(--wm-dropdown-menu-caret-size);
+//styles for caret 
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .dropdown.app-menu .btn .caret,
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .dropdown.app-menu a .caret {
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: calc(var(--wm-dropdown-menu-caret-size) * 0.5);
+  width: var(--wm-dropdown-menu-caret-size);
+  height: var(--wm-dropdown-menu-caret-size);
+  font-size: var(--wm-dropdown-menu-caret-size);
+  transform: rotate(180deg);
 }
-
-.dropdown.app-menu .btn,
-.dropdown.app-menu a {
-    padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2);
-    border-width: 0;
-    background-color: transparent;
-    width: 100%;
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .dropdown.app-menu .btn,
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .dropdown.app-menu a {
+  padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2.25);
+  width: 100%;
 }

package/src/styles/mobile/studio/page/page-content.less

@@ -0,0 +1,4 @@
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-page-content{
+    background-color: var(--wm-page-content-background);
+}

package/src/styles/mobile/studio/page/tabbar.less

@@ -0,0 +1,19 @@
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-tabbar .navbar-default .tab-items > li > a{
+    min-height: var(--wm-tabbar-item-min-height) !important;
+    min-width: var(--wm-tabbar-item-min-width) !important;
+    margin-bottom: var(--wm-tabbar-item-margin-bottom) !important;
+}
+.app-tabbar .navbar-default .tab-items > li > a label {
+    color: var(--wm-tabbar-text-color);
+    font-size: var(--wm-tabbar-text-font-size) !important;
+    font-family: var(--wm-tabbar-text-font-family) !important;
+    font-weight: var(--wm-tabbar-text-font-weight) !important;
+    margin-top: var(--wm-tabbar-text-margin-top);
+}
+.app-tabbar .app-icon{
+    font-size: var(--wm-tabbar-icon-size) !important;
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-tabbar{
+
+}