@wavemaker/rn-codegen 11.14.1-rc.6311 → 11.14.2-1.6423

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/form.less

@@ -0,0 +1,170 @@
+
+.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);
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .formfield-label {
+  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;
+}
+
+.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-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-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;
+}
+
+.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);
+}
+
+.wm-app .form-control::placeholder {
+  color: var(--wm-form-control-color-place-holder);
+}
+
+// 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/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/number.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/radioset.less

@@ -0,0 +1,110 @@
+.app-radio {
+    position: relative;
+
+    &.radio {
+      display: inline-block;
+
+      >label {
+        width: auto;
+        display: inline-flex;
+        padding: var(--wm-space-0);
+        cursor: pointer;
+
+        >input[type="radio"] {
+          appearance: none;
+          -moz-appearance: none;
+          -webkit-appearance: none;
+          margin: 0;
+          position: absolute;
+          left: 0px;
+          border-radius: 50%;
+          z-index: 1;
+          cursor: pointer;
+
+
+          &:checked {
+            +.caption {
+              &:after {
+                transform: scale(1);
+              }
+            }
+          }
+        }
+
+        .caption {
+          display: inline-block;
+          font-size: var(--wm-radiobutton-label-font-size);
+          font-family: var(--wm-radiobutton-label-font-family);
+          font-weight: var(--wm-radiobutton-label-font-weight);
+          line-height: var(--wm-radiobutton-label-line-height);
+          letter-spacing: var(--wm-radiobutton-label-letter-spacing);
+          color: var(--wm-radiobutton-label-color);
+          padding-left: ~"calc(40px + var(--wm-radiobutton-gap))";
+          padding-top: ~"calc(calc(40px - var(--wm-radiobutton-label-line-height)) / 2)";
+
+          &:before,
+          &:after {
+            content: "";
+            display: inline-block;
+            position: absolute;
+          }
+
+          &:before {
+            width: var(--wm-radiobutton-size);
+            height: var(--wm-radiobutton-size);
+            left: ~"calc(calc(40px - var(--wm-radiobutton-size))/2)";
+            top: ~"calc(calc(40px - var(--wm-radiobutton-size))/2)";
+            background: var(--wm-radiobutton-background);
+            border: var(--wm-radiobutton-border-width) solid var(--wm-radiobutton-border-color);
+            border-radius: 50%;
+            box-sizing: border-box;
+          }
+
+          &:after {
+            top: ~"calc(calc(40px * 0.5) - calc(var(--wm-radiobutton-indicator-size) * 0.5))";
+            left: ~"calc(calc(40px * 0.5) - calc(var(--wm-radiobutton-indicator-size) * 0.5))";
+            width: var(--wm-radiobutton-indicator-size);
+            height: var(--wm-radiobutton-indicator-size);
+            transform: scale(0);
+            transition: all 0.2s ease-in-out;
+            background: var(--wm-radiobutton-color);
+            border-radius: 50%;
+          }
+        }
+
+        >img {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .app-radioset {
+    padding: 0;
+    margin: 0;
+    position: relative;
+
+    &.list-group {
+      display: flex;
+      flex-wrap: nowrap;
+      column-gap: var(--wm-radiobutton-set-item-column-gap);
+      row-gap: var(--wm-radiobutton-set-item-row-gap);
+      overflow: visible;
+
+      >li {
+        margin: 0;
+      }
+
+      &.inline {
+        flex-wrap: wrap;
+
+        >li {
+          width: auto;
+
+          +li {
+            margin: 0;
+          }
+        }
+      }
+    }
+  }

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/rating.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/select.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/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/templates/foundation-theme/build/ios/wavemaker/design-tokens/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/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/switch.less

@@ -0,0 +1,12 @@
+.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/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/text.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/textarea.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/input/toggle.less

@@ -0,0 +1,98 @@
+.app-toggle.checkbox {
+  padding: 0px;
+
+  label {
+    width: var(--wm-toggle-width);
+    height: var(--wm-toggle-height);
+    overflow: hidden;
+    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);
+    border: var(--wm-toggle-border-width) solid var(--wm-toggle-border-color);
+    cursor: pointer;
+    display: inline-block;
+    box-sizing: border-box;
+  }
+
+  /* Unchecked State */
+  label.unchecked {
+    overflow: visible !important;
+    background-color: var(--wm-toggle-background-color, #ccc) !important;
+    width: var(--wm-toggle-width, 40px) !important;
+    height: var(--wm-toggle-height, 16px) !important;
+    min-height: 0;
+  }
+
+  /* Disabled State */
+  label.disabled {
+    opacity: var(--wm-toggle-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  /* Hidden Checkbox Input */
+  input[type="checkbox"] {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 6;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  /* Hide Caption */
+  .caption {
+    visibility: hidden;
+  }
+
+  /* Switch handle */
+  .switch,
+  img.switch {
+    position: absolute;
+    display: block;
+    top: 6px;
+    left: 8px;
+    height: var(--wm-toggle-handle-height);
+    width: var(--wm-toggle-handle-width);
+    background-color: var(--wm-toggle-handle-color);
+    border-radius: var(--wm-toggle-handle-radius);
+    z-index: 1;
+    transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    transition-property: left, right;
+    transition-delay: 0s, .08s;
+    text-align: center;
+    border-style: solid;
+    box-sizing: border-box;
+    transform: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Checked State move handle */
+  input[type="checkbox"]:checked~.switch {
+    right: 0;
+    left: auto;
+    margin-right: 6px;
+    transition-delay: .08s, 0s;
+    background-color: var(--wm-toggle-handle-color);
+    transform: scale(1.6) !important;
+  }
+
+  input[type="checkbox"]:checked~label {
+    background-color: var(--wm-toggle-background-color);
+  }
+
+  label {
+    width: var(--wm-toggle-width);
+    height: var(--wm-toggle-height);
+  }
+
+
+}
+
+.app-toggle-on.app-toggle {
+  background-color: transparent;
+}

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/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/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/layouts/content.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/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/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/layouts/page.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/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/templates/foundation-theme/build/ios/wavemaker/design-tokens/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/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/navigation/menu.less

@@ -0,0 +1,21 @@
+.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);
+}
+
+.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/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/navigation/nav.less

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

package/src/templates/foundation-theme/build/ios/wavemaker/design-tokens/studio/navigation/popover.less

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