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

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

@@ -1,101 +1,170 @@
-.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;
-    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);
+  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);
 }
 
 .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 .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 {
+  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-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;
+  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;
 }
 
 
 .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-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);
+      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);
 }
 
 .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-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);
+  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);
 }
 
-.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;
+.wm-app .form-control::placeholder {
+  color: var(--wm-form-control-color-place-holder);
 }
 
-.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .form-input{
-    box-shadow:none;
-}
+// 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{
+// }

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

@@ -0,0 +1,6 @@
+.app-textbox[type="number"] {
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 16px;
+    height: auto;
+}

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

@@ -1,8 +1,4 @@
-/* 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 {
+.app-radio {
     position: relative;
 
     &.radio {
@@ -112,4 +108,3 @@
       }
     }
   }
-}

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

@@ -1,14 +1,21 @@
-.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);
-}
+.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 .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/select.less

@@ -0,0 +1,6 @@
+.app-select {
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 16px;
+    height: auto;
+}

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

@@ -0,0 +1,49 @@
+.app-slider {
+
+  
+    .range-input {
+      width: 100%;
+      background: transparent;
+      cursor: pointer;
+      opacity: 1;
+  
+      &::-webkit-slider-runnable-track {
+        height: var(--wm-slider-track-height, 1em);
+        border-radius: var(--wm-slider-track-border-radius, 1em);
+        background: linear-gradient(var(--wm-slider-max-track-background), var(--wm-slider-max-track-background)) no-repeat;
+        position: relative;
+        z-index: 0;
+      }
+  
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: var(--wm-slider-thumb-width);
+        height: var(--wm-slider-thumb-height);
+        margin-top: calc(
+          (var(--wm-slider-track-height, 1em) - var(--wm-slider-thumb-height)) / 2
+        );
+        border-radius: var(--wm-slider-thumb-border-radius);
+        background-color: var(--wm-slider-thumb-background);
+        position: relative;
+        z-index: 2;
+      }
+  
+      &::after {
+        // content: "";
+        // position: absolute;
+        // top: 62%;
+        // left: 0;
+        // height: var(--wm-slider-track-height, 1em);
+        // border-top-left-radius: var(--wm-slider-track-border-radius);
+        // border-bottom-left-radius: var(--wm-slider-track-border-radius);
+        // background-color: var(--wm-slider-min-track-background);
+        // transform: translateY(-50%);
+        // width: 50%; // JS will update dynamically
+        // z-index: 2;
+        // pointer-events: none;
+      }
+  
+
+    }
+  }
+  

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

@@ -0,0 +1,17 @@
+@import url('./calendar.less');
+@import url('./checkbox.less');
+@import url('./checkboxset.less');
+@import url('./chips.less');
+@import url('./currency.less');
+@import url('./date.less');
+@import url('./epoch/datetime-picker-modal.less');
+@import url('./form.less');
+@import url('./number.less');
+@import url('./radioset.less');
+@import url('./rating.less');
+@import url('./select.less');
+@import url('./slider.less');
+@import url('./switch.less');
+@import url('./text.less');
+@import url('./textarea.less');
+@import url('./toggle.less');

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

@@ -1,3 +1,12 @@
-.app-switch .btn-group .btn{
-    font-size: var(--wm-switch-button-font-size);
-}
+.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;
+    }
+}

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

@@ -0,0 +1,6 @@
+.app-textbox {
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 16px;
+    height: auto;
+}

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

@@ -0,0 +1,5 @@
+.app-textarea {
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 16px;
+}

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

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

package/src/styles/mobile/studio/layouts/appnavbar.less

@@ -0,0 +1,71 @@
+.app-mobile-navbar {
+    box-shadow: 0px 0px 1px #00000033;
+    width: 100%;
+    padding: 0;
+    height: auto;
+    .navbar {
+        display: flex;
+        height: var(--wm-navbar-height);
+        align-content: center;
+        flex-direction: row;
+        .mobile-navbar-left {
+        flex: 1;
+            .navbar-nav {
+                height: 100%;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+                li i {
+                    color: var(--wm-navbar-back-icon-color);
+                    font-size: var(--wm-navbar-back-icon-size);;
+                }
+            }
+        }
+        .mobile-navbar-center {
+            max-width: none;
+            .navbar-header {
+                height: 100%;
+            }
+            .navbar-brand {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                text-align: initial;
+                padding-left: 12px;
+            }
+        }
+        .mobile-navbar-right {
+            flex: 1;
+            .navbar-nav {
+                height: 100%;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-end;
+                align-items: center;
+            }
+            .app-anchor,
+            .app-menu,
+            .app-button
+            .app-popover {
+                vertical-align: middle;
+                background-color: transparent;
+                .app-icon {
+                    padding-right: 8px;
+                    font-size: var(--wm-navbar-anchor-icon-size);
+                }
+            }
+            .app-button {
+                display: inline-block;
+                margin: 0;
+                padding: 4px;
+                line-height: initial;
+                background: transparent;
+                border-radius: 100px;
+                >.btn-caption {
+                    color: inherit;
+                }
+            }
+        }
+    }
+}

package/src/styles/mobile/studio/layouts/content.less

@@ -0,0 +1,5 @@
+.app-content {
+    flex: 1;
+    height: auto !important;
+    overflow: auto;
+}

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

@@ -0,0 +1,11 @@
+.app-page-content {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--wm-page-content-background);
+    width: 100%;
+    height: 100%;
+}
+
+.app-page-content >.app-ng-transclude {
+    padding: 4px;
+}

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

@@ -0,0 +1,5 @@
+.app-page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}

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

@@ -0,0 +1,5 @@
+@import url('./appnavbar.less');
+@import url('./content.less');
+@import url('./page-content.less');
+@import url('./page.less');
+@import url('./tabbar.less');

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

@@ -0,0 +1,36 @@
+.app-tabbar {
+    position: relative;
+    height: var(--wm-tabbar-height);
+    padding: 4px;
+    .navbar-default {
+        background-color: inherit;
+        .tab-items {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-content: center;
+            padding-top: 10px;
+            > li > a {
+                min-height: var(--wm-tabbar-item-min-height);
+                min-width: var(--wm-tabbar-item-min-width);
+                margin-bottom: var(--wm-tabbar-item-margin-bottom);
+                padding: 0;
+                height: auto;
+                .app-icon {
+                    font-size: var(--wm-tabbar-icon-size);
+                }
+                label {
+                    color: var(--wm-tabbar-text-color);
+                    font-size: var(--wm-tabbar-text-font-size);
+                    font-family: var(--wm-tabbar-text-font-family);
+                    font-weight: var(--wm-tabbar-text-font-weight);
+                    margin-top: var(--wm-tabbar-text-margin-top);
+                    padding-top: 16px;
+                }
+            }
+        }
+    }
+    .dropdown-menu-right {
+        display: none;
+    }
+}

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

@@ -1,19 +1,21 @@
-//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);
+.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);
 }
-.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%;
+
+.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%;
 }

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

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

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

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

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

@@ -0,0 +1,3 @@
+@import url('./menu.less');
+@import url('./nav.less');
+@import url('./popover.less');