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

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

@@ -0,0 +1,17 @@
+.app-page-content .app-ng-transclude .app-barcode {
+    width: auto;
+    padding: var(--wm-barcodescanner-padding);
+    gap: var(--wm-space-0) !important;
+    display: grid !important;
+    justify-content: none;
+    align-items: none;
+}
+
+ .app-barcode{
+    width: auto;
+    padding: var(--wm-barcodescanner-padding);
+    gap: var(--wm-space-0) !important;
+    display: grid !important;
+    justify-content: none;
+    align-items: none;
+}

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

@@ -0,0 +1,4 @@
+.app-page-content .app-ng-transclude .app-camera {
+    width: auto;
+    padding: 12px;
+}

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

@@ -0,0 +1,2 @@
+@import url('./camera.less');
+@import url('./barcode.less');

package/src/styles/mobile/studio/dialogs/alert-dialog.less

@@ -0,0 +1,10 @@
+.app-alert-dialog {
+    .ok-action.app-button {
+        width: 100%;
+    }
+    .app-dialog-message {
+        font-size: var(--wm-alert-modal-message-text-font-size);
+        font-weight: var(--wm-alert-modal-message-text-font-weight);
+        font-family: var(--wm-alert-modal-message-text-font-family);
+    }
+}

package/src/styles/mobile/studio/dialogs/base-dialog.less

@@ -0,0 +1,180 @@
+.app-dialog {
+    border-radius: 8px;
+    background-color: transparent;
+    .app-dialog-title {
+        text-align: left;
+        font-size: var(--wm-modal-title-font-size);
+        font-weight: var(--wm-modal-title-font-weight);
+        color: var(--wm-modal-title-color);
+        letter-spacing: var(--wm-modal-title-letter-spacing);
+        line-height: var(--wm-modal-title-line-height);
+        font-family: var(--wm-modal-title-font-family);
+        i {
+            font-size: var(--wm-modal-icon-font-size);
+            color: var(--wm-modal-icon-color);
+        }
+
+        // span {
+        //    font-size: 24px;
+        // }
+    }
+
+    .app-dialog-close {
+        font-size: 24px;
+    }
+
+    .app-dialog-body {
+        padding: 16px;
+    }
+
+    .modal-content {
+        background-color: var(--wm-modal-background);
+        border-radius: var(--wm-modal-radius);
+        padding: var(--wm-modal-body-padding) !important;
+        min-width: var(--wm-modal-min-width);
+        margin-top: var(--wn-modal-margin);
+        margin-bottom: var(--wn-modal-margin);
+        padding: 24px;
+        .app-dialog-header {
+            border-color: transparent;
+        }
+    }
+}
+.app-dialog .modal-content .app-dialog-header{
+    //header
+    padding: var(--wm-modal-header-padding);
+    border-style: var(--wm-modal-header-border-style);
+    border-color: var(--wm-modal-header-border-color);
+    border-width: var(--wm-modal-header-border-width);
+    background-color: var(--wm-modal-header-background);
+}
+
+.app-dialog .app-dialog-close{
+    border-width: var(--wm-modal-header-close-btn-border-width);
+    border-color: var(--wm-modal-header-close-btn-border-color);
+    border-style: var(--wm-modal-header-close-btn-border-style);
+    background-color: var(--wm-modal-header-close-btn-background);
+    width: auto;
+    height: auto;
+}
+
+.app-dialog .app-dialog-close .app-icon::before{
+    font-size: var(--wm-modal-header-close-btn-font-size);
+    color: var(--wm-modal-header-close-btn-color);
+    width: auto;
+    height: auto;
+}
+
+.app-alert-dialog .app-dialog-message{
+    font-weight: var(--wm-modal-description-font-weight);
+    font-family: var(--wm-modal-description-font-family);
+    color: var(--wm-modal-description-color);
+    font-size: var(--wm-modal-description-font-size);
+}
+
+.app-alert-dialog .app-dialog-footer .ok-action.app-button{
+    background-color: var(--wm-modal-btn-ok-background);
+    color: var(--wm-modal-btn-ok-color);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-confirm-dialog .app-dialog-footer .app-button:last-child{
+    background-color: var(--wm-modal-btn-ok-background);
+    color: var(--wm-modal-btn-ok-color);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-confirm-dialog .app-dialog-footer .app-button:first-child {
+    background-color: var(--wm-modal-btn-cancel-background);
+    color: var(--wm-modal-btn-cancel-background);
+    border-width: 0px;
+    border-style: none;
+}
+
+.app-dialog-footer {
+    padding: var(--wm-modal-footer-padding);  
+}
+
+//styleWorkspace Template
+.native_mobile-dialog {
+        background-color: var(--wm-modal-background);
+        border-radius: var(--wm-modal-radius);
+        padding: var(--wm-modal-body-padding) !important;
+        min-width: var(--wm-modal-min-width);
+        margin-top: var(--wn-modal-margin);
+        margin-bottom: var(--wn-modal-margin);
+.dialog-header{
+    padding: var(--wm-modal-header-padding);
+    border-style: var(--wm-modal-header-border-style);
+    border-color: var(--wm-modal-header-border-color);
+    border-width: var(--wm-modal-header-border-width);
+    background-color: var(--wm-modal-header-background);
+}
+
+.dialog-icon .wi-check:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);
+} 
+
+.dialog-icon .wi-file:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);
+} 
+
+.dialog-icon .wi-alert:before{
+        font-size: var(--wm-modal-icon-font-size);
+        color: var(--wm-modal-icon-color);   
+}
+
+.dialog-title {
+        font-size: var(--wm-modal-title-font-size);
+        font-weight: var(--wm-modal-title-font-weight);
+        color: var(--wm-modal-title-color);
+        letter-spacing: var(--wm-modal-title-letter-spacing);
+        line-height: var(--wm-modal-title-line-height);
+        font-family: var(--wm-modal-title-font-family);
+}
+.dialog-close{
+    border-width: var(--wm-modal-header-close-btn-border-width);
+    border-color: var(--wm-modal-header-close-btn-border-color);
+    border-style: var(--wm-modal-header-close-btn-border-style);
+    background-color: var(--wm-modal-header-close-btn-background);
+    width: auto;
+    height: auto;
+}
+
+.dialog-close .wi-close:before{
+    font-size: var(--wm-modal-header-close-btn-font-size);
+    color: var(--wm-modal-header-close-btn-color);
+    width: auto;
+    height: auto;
+}
+
+.dialog-message{
+    font-weight: var(--wm-modal-description-font-weight);
+    font-family: var(--wm-modal-description-font-family);
+    color: var(--wm-modal-description-color);
+    font-size: var(--wm-modal-description-font-size);   
+}
+
+.dialog-actions {
+    padding: var(--wm-modal-footer-padding) !important; 
+}
+
+.dialog-btn.cancel-btn{
+    background-color: var(--wm-modal-btn-cancel-background) !important;
+    color: var(--wm-modal-btn-cancel-color) !important;
+    border-width: 0px !important;
+    border-style: none !important;
+}
+
+.dialog-btn.confirm-btn{
+    background-color: var(--wm-modal-btn-ok-background) !important;
+    color: var(--wm-modal-btn-ok-color) !important;
+    border-width: 0px !important;
+    border-style: none !important;
+}
+
+}

package/src/styles/mobile/studio/dialogs/confirm-dialog.less

@@ -0,0 +1,26 @@
+.app-confirm-dialog {
+    .app-dialog-footer {
+        display: flex;
+        flex-direction: row;
+        padding: 0;
+        .app-button {
+            flex: 1;
+            padding: 12px;
+            border-radius: 0;
+            border-width: 0;
+            border-right-width: 1px;
+            background-color: inherit;
+            margin: 0;
+        }
+        .app-button:first-child {
+            border-bottom-left-radius: 8px;
+        }
+        .app-button:last-child {
+            border-right-width: 0;
+            border-bottom-right-radius: 8px;
+        }
+        .ok-action .btn-caption {
+            color: #000;
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+@import url('./base-dialog.less');
+@import url('./alert-dialog.less');
+@import url('./confirm-dialog.less');

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

@@ -0,0 +1,68 @@
+
+.app-calendar {
+  width: var(--wm-calendar-width);
+  min-height: var(--wm-calendar-min-height);
+  box-shadow: var(--wm-calendar-wrapper-shadow);
+  border-style: var(--wm-calendar-wrapper-border-style);
+  border-radius: var(--wm-calendar-wrapper-border-radius);
+  border-color: var(--wm-calendar-wrapper-border-color);
+  border-width: var(--wm-calendar-wrapper-border-width);
+  background-color: var(--wm-calendar-wrapper-background);
+
+  .fc {
+    .fc-toolbar.fc-header-toolbar {
+      padding: var(--wm-calendar-header-padding);
+      background-color: var(--wm-calendar-header-background-color);
+      border-color: var(--wm-calendar-header-border-color);
+      border-width: var(--wm-calendar-header-border-width);
+      border-style: var(--wm-calendar-header-border-style);
+
+      .fc-toolbar-title {
+        //the change shouldnt be displayed in web so not mapped tokens here
+      }
+    }
+
+    table tbody tr th {
+      border-width: var(--wm-calendar-weekday-border-width);
+      border-style: var(--wm-calendar-weekday-border-style);
+      padding: var(--wm-calendar-weekday-padding);
+      background-color: var(--wm-calendar-weekday-background-color);
+      border-color: var(--wm-calendar-weekday-border-color);
+
+      .fc-col-header-cell a {
+        color: var(--wm-calendar-weekday-text-color);
+        font-weight: var(--wm-calendar-weekday-text-font-weight);
+        font-family: var(--wm-calendar-weekday-text-font-family);
+        font-size: var(--wm-calendar-weekday-text-font-size);
+      }
+    }
+
+    .fc-daygrid-day-top {
+      background-color: var(--wm-calendar-daywrapper-background);
+      border-color: var(--wm-calendar-daywrapper-border-color);
+      border-width: var(--wm-space-1);
+      border-style: var(--wm-border-style-solid);
+      border-radius: 100%;
+
+      a {
+        color: var(--wm-calendar-day-color);
+        font-size: var(--wm-calendar-day-font-size);
+        font-weight: var(--wm-calendar-day-font-weight);
+        font-family: var(--wm-calendar-day-font-family);
+        border-color: var(--wm-calendar-day-border-color);
+      }
+    }
+
+    .fc-day-today {
+      .fc-daygrid-day-top {
+        border-color: var(--wm-calendar-today-border-color);
+        background-color: var(--wm-calendar-today-background-color);
+
+        .a {
+          background-color: var(--wm-calendar-today-text-background-color);
+        }
+      }
+
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+.app-checkbox {
+
+    input[type="checkbox"] {
+        appearance: none;
+        margin: 0 8px 0 0;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        // root box
+        & {
+            width: var(--wm-checkbox-width);
+            height: var(--wm-checkbox-height);
+            background-color: var(--wm-checkbox-background-color);
+            border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
+            border-radius: var(--wm-checkbox-border-radius);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        // checked state
+        &:checked {
+            background-color: var(--wm-checkbox-background-color);
+            border-color: var(--wm-checkbox-border-color);
+
+            &::after {
+                content: "";
+                display: block;
+                width: calc(var(--wm-checkbox-icon-size)/3);
+                height: calc(var(--wm-checkbox-icon-size)/1.5);
+                border-right: 3px solid var(--wm-checkbox-icon-color);
+                border-bottom: 3px solid var(--wm-checkbox-icon-color);
+                transform: rotate(45deg);
+                top: 3px;
+                left: 6px;
+            }
+        }
+
+        // disabled state
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
+    }
+
+    &.checkbox {
+
+        >label {
+            padding: 0;
+            display: inline-flex;
+            width: auto;
+            min-height: var(--wm-checkbox-width);
+            margin-left: var(--wm-checkbox-label-margin-left);
+            font-size: var(--wm-checkbox-label-font-size);
+            font-family: var(--wm-checkbox-label-font-family);
+            font-weight: normal;
+            line-height: normal;
+            letter-spacing: normal;
+            cursor: pointer;
+
+
+            .caption {
+                display: inline-block;
+                padding-left: 20px;
+                padding-top: 0;
+                margin-left: var(--wm-checkbox-label-margin-left);
+
+                &:before,
+                &:after {
+                    content: "";
+                    display: inline-block;
+                    position: absolute;
+                }
+
+            }
+        }
+    }
+}

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

@@ -0,0 +1,82 @@
+.app-checkboxset {
+    .app-checkbox {
+        position: relative;
+
+        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)/3);
+                    height: calc(var(--wm-checkboxset-icon-size)/1.5);
+                    border-right: 3px solid var(--wm-checkboxset-icon-color);
+                    border-bottom: 3px solid var(--wm-checkboxset-icon-color);
+                    transform: rotate(45deg);
+                    top: 3px;
+                    left: 6px;
+                }
+            }
+    
+            // disabled state
+            &:disabled {
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+        }
+
+        &.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;
+
+                .caption {
+                    display: inline-block;
+                    padding-left: 20px;
+                    padding-top: 0;
+                    margin-left: var(--wm-checkboxset-label-margin-left);
+
+                    &:before,
+                    &:after {
+                        content: "";
+                        display: inline-block;
+                        position: absolute;
+                    }
+
+                }
+
+            }
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+.app-chips {
+    margin-left: 0;
+    .app-chip-search {
+        width: 100%;
+        input {
+            height: var(--wm-chips-list-height);
+            border-radius: var(--wm-chips-list-border-radius);
+            font-size: var(--wm-chips-item-font-size);
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+.app-currency {
+    span,
+    .app-textbox {
+        padding: 12px;
+        font-size: 16px;
+        height: auto;
+    }
+    span {
+        background-color: var(--wm-currency-labelwrapper-background) !important;
+        min-height: var(--wm-currency-labelwrapper-min-height) !important;
+        border-radius: var(--wm-currency-labelwrapper-border-radius) !important;
+        padding: var(--wm-currency-labelwrapper-padding) !important;
+        width: var(--wm-currency-labelwrapper-width) !important;
+        font-weight: var(--wm-currency-label-font-weight) !important;
+        font-family: var(--wm-currency-label-font-family) !important;
+        font-size: var(--wm-currency-label-font-size) !important;
+        color: var(--wm-currency-label-color) !important;
+    }
+    .app-textbox {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+    border-radius: 6px;
+}

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

@@ -0,0 +1,7 @@
+.app-dateinput,
+input[widgettype="wm-time"] {
+    border-radius: 6px;
+    padding: 12px;
+    font-size: 16px;
+    height: auto;
+}

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

@@ -0,0 +1,49 @@
+.date-picker  {
+    background-color: var(--wm-datetime-background);
+}
+
+.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  {
+    background-color: var(--wm-datetime-background);
+}
+
+.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);
+    border-radius: var(--wm-datetime-button-border-radius);
+    ripple-color:var(--wm-datetime-button-ripple-color);
+    background-color: var(--wm-datetime-cancel-button-background);
+    font-size: var(--wm-datetime-cancel-button-text-size);
+    font-weight: var(--wm-datetime-cancel-button-text-weight);
+    color: var(--wm-datetime-cancel-button-text-color);
+}
+
+.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);
+    border-style: var(--wm-datetime-button-border-style);
+    border-radius: var(--wm-datetime-button-border-radius);
+    ripple-color:var(--wm-datetime-button-ripple-color);
+    font-size: var(--wm-datetime-selected-button-text-size);
+    font-weight: var(--wm-datetime-selected-button-text-weight);
+    color: var(--wm-datetime-selected-button-text-color);
+}
+
+.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{
+    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);
+}