@wavemaker-ai/foundation-css 1.0.0-rc.647469

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

@@ -0,0 +1,204 @@
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .form-action.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: var(--wm-form-controls-padding);
+  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);
+  font-size: var(--wm-form-controls-font-size);
+  font-family: var(--wm-form-controls-font-family);
+  font-weight: var(--wm-form-controls-font-weight);
+}
+
+.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: var(--wm-form-controls-padding);
+  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);
+  font-size: var(--wm-form-controls-font-size);
+  font-family: var(--wm-form-controls-font-family);
+  font-weight: var(--wm-form-controls-font-weight);
+  width: var(--wm-form-controls-min-width);
+}
+
+.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: var(--wm-form-controls-padding);
+  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);
+  font-size: var(--wm-form-controls-font-size);
+  font-family: var(--wm-form-controls-font-family);
+  font-weight: var(--wm-form-controls-font-weight);
+  width: var(--wm-form-controls-min-width);
+}
+
+.wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-input-wrapper {
+  position: relative;
+}
+
+ &.btn-leading-icon,
+    .btn-trailing-icon {
+      background: none;
+      border: none;
+      position: absolute;
+      z-index: 100;
+      top: calc(var(--wm-form-controls-min-height) / 4.2);
+      left: calc(var(--wm-form-controls-padding) / 2);
+      font-size:  calc(var(--wm-icon-font-size));
+    }
+  
+    &.btn-trailing-icon {
+      left: auto;
+      right: calc(2 * var(--wm-icon-font-size)) !important;
+    }
+    &.caption-floating {
+      .control-label {
+        left: calc(var(--wm-form-controls-padding)) !important;
+        top:  calc(var(--wm-form-controls-min-height) / 2.5) !important;
+      }
+      &:has(.btn-leading-icon:not(.ng-hide))>.control-label {
+        left: calc(2 * var(--wm-icon-font-size)) !important;
+      }
+    }
+
+.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: var(--wm-form-controls-padding);
+  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);
+  font-size: var(--wm-form-controls-font-size);
+  font-family: var(--wm-form-controls-font-family);
+  font-weight: var(--wm-form-controls-font-weight);
+  width: var(--wm-form-controls-min-width);
+}
+
+.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: var(--wm-form-controls-padding);
+  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);
+  font-size: var(--wm-form-controls-font-size);
+  font-family: var(--wm-form-controls-font-family);
+  font-weight: var(--wm-form-controls-font-weight);
+  width: var(--wm-form-controls-min-width);
+}
+
+.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/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

@@ -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/styles/mobile/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: var(--wm-rating-text-padding);
+        color: var(--wm-rating-text-color);
+        font-size: var(--wm-rating-text-size);
+    }
+
+}

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

@@ -0,0 +1,39 @@
+.app-select {
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 16px;
+    height: auto;
+}
+
+.native-template-arrow-container {
+    background-color: var(--wm-select-arrow-button-background-color);
+    padding: var(--wm-select-arrow-button-padding);
+    border-width: var(--wm-select-arrow-button-border-width);
+    border-style: var(--wm-select-arrow-button-border-style);
+    border-color: var(--wm-select-arrow-button-border-color);
+
+}
+
+.native-template-dropdown-modal {
+    background-color: var(--wm-select-modal-content-background-color);
+    border-color: var(--wm-select-modal-content-border-color);
+    border-radius: var(--wm-select-modal-content-border-radius);
+    border-style: var(--wm-select-modal-content-border-style);
+    border-width: var(--wm-select-modal-content-border-width);
+}
+
+.native-template-option-tick {
+    font-size: var(--wm-select-check-icon-font-size);
+    color: var(--wm-select-check-icon-color);
+}
+
+.native-template-option {
+    font-size: var(--wm-select-modal-text-font-size);
+    color: var(--wm-select-modal-text-color);
+    font-family: var(--wm-select-modal-text-font-family);
+}
+
+.native-template-arrow {
+    font-size: var(--wm-select-arrow-button-icon-font-size);
+    color: var(--wm-select-arrow-button-icon-color);
+}

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

@@ -0,0 +1,132 @@
+.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;
+      }
+  
+
+    }
+
+    .slider-mobile-root {
+      position: relative;
+      margin: 70px 30px 0px 30px;
+    }
+
+    .slider-mobile-track {
+      display: flex;
+      position: relative;
+      align-items: center;
+      width: 100%;
+      height: var(--wm-slider-track-height, 16px);
+      border-radius: var(--wm-slider-track-border-radius, 8px);
+      overflow: visible;
+    }
+
+    .slider-mobile-min-track {
+      height: var(--wm-slider-track-height, 16px);
+      border-radius: var(--wm-slider-track-border-radius, 8px);
+      background-color: var(--wm-slider-min-track-background, #65558F);
+    }
+
+    .slider-mobile-max-track {
+      height: var(--wm-slider-track-height, 16px);
+      border-radius: var(--wm-slider-track-border-radius, 8px);
+      background-color: var(--wm-slider-max-track-background, #E7E0EC);
+    }
+
+    .slider-mobile-disabled-active {
+      background-color: #a9a8aa;
+    }
+
+    .slider-mobile-disabled-inactive {
+      background-color: #e4e4e4;
+    }
+
+    .slider-mobile-disabled-range {
+      background-color: #a9a8aa;
+    }
+
+    .slider-mobile-thumb-wrapper {
+      position: absolute;
+      width: calc(var(--wm-slider-thumb-width, 4px) + 10px);
+      height: calc(var(--wm-slider-thumb-height, 44px) + 10px);
+      border-radius: var(--wm-slider-thumb-border-radius, 2px);
+      background-color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .slider-mobile-thumb {
+      width: var(--wm-slider-thumb-width, 4px);
+      height: var(--wm-slider-thumb-height, 44px);
+      border-radius: var(--wm-slider-thumb-border-radius, 2px);
+      background-color: var(--wm-slider-thumb-background, #65558F);
+    }
+
+    .slider-mobile-thumb-disabled {
+      background-color: #a9a8aa;
+    }
+
+    .slider-mobile-tooltip {
+      position: absolute;
+      top: -62px;
+      width: 58px;
+      height: 44px;
+      border-radius: 100px;
+      background-color: var(--wm-slider-tooltip-background, #322F35);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transform: translateX(-50%);
+    }
+
+    .slider-mobile-tooltip-label {
+      width: 58px;
+      text-align: center;
+      font-size: 16px;
+      color: var(--wm-slider-tooltip-color, #F5EFF7);
+    }
+  }
+  

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

@@ -0,0 +1,13 @@
+.app-switch {
+    overflow: unset;
+    .btn-group {
+        height: var(--wm-switch-button-height);
+        .btn {
+            text-transform: var(--wm-switch-button-text-transform);
+            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

@@ -0,0 +1,99 @@
+.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;
+    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;
+    margin-left: var(--wm-toggle-handle-margin-left);
+    margin-right: var(--wm-toggle-handle-margin-right);
+  }
+
+  /* Checked State move handle */
+  input[type="checkbox"]:checked~.switch {
+    right: 0;
+    left: auto;
+    transition-delay: .08s, 0s;
+    background-color: var(--wm-toggle-handle-color);
+    transform: scale(1.6) !important;
+    margin-right: var(--wm-toggle-handle-margin-right);
+  }
+
+  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;
+}