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

package/src/styles/mobile/studio/basic/button-group.less

@@ -0,0 +1,47 @@
+/* Button Group component styles and tokens */
+@import (optional) url('../../../../components/basic/button-group.less');
+@import (optional) url('../../../../generated/variables/mobile/components/button-group.variant.less');
+
+.app-button-group {
+    display: inline-flex;
+    border-radius: var(--wm-button-group-radius);
+    border-width:  var(--wm-button-group-border-width);
+    border-style: var(--wm-button-group-border-style);
+    border-color: var(--wm-button-group-border-color);
+
+    .btn {
+      border-radius: 0;
+      background-color: var(--wm-btn-background);
+
+      &:first-of-type {
+        border-top-left-radius: var(--wm-button-group-radius);
+        border-bottom-left-radius: var(--wm-button-group-radius);
+      }
+
+      &:last-of-type {
+        border-top-right-radius: var(--wm-button-group-radius);
+        border-bottom-right-radius: var(--wm-button-group-radius);
+      }
+    }
+
+    &.btn-group-vertical {
+      flex-direction: column;
+
+      .btn {
+        border-radius: 0;
+        width: 100%;
+
+        &:first-of-type {
+          border-top-left-radius: var(--wm-button-group-radius);
+          border-top-right-radius: var(--wm-button-group-radius);
+          border-bottom-left-radius: 0;
+        }
+
+        &:last-of-type {
+          border-top-right-radius: 0;
+          border-bottom-left-radius: var(--wm-button-group-radius);
+          border-bottom-right-radius: var(--wm-button-group-radius);
+        }
+      }
+    }
+}

package/src/styles/mobile/studio/basic/button.less

@@ -0,0 +1,22 @@
+.app-button {
+    width: auto;
+    align-self: flex-start;
+    flex-grow: 0;
+    .app-icon {
+        font-size: var(--wm-btn-icon-size);
+    }
+    .btn-caption {
+        font-weight: var(--wm-btn-font-weight);
+        font-size: var(--wm-btn-font-size);
+        text-transform: capitalize;
+        &:empty {
+            display: none;
+        }
+    }
+    .badge {
+        border: 1px solid #000;
+        top: -8px;
+        margin-left: -8px;
+        right: initial;
+    }
+}

package/src/styles/mobile/studio/basic/icon.less

@@ -0,0 +1,21 @@
+.app-icon,
+.app-icon-wrapper {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  gap: var(--wm-icon-gap);
+  font-style: normal;
+  color: var(--wm-icon-color);
+  i {
+    font-style: normal;
+  }
+}
+.app-icon {
+  font-size: var(--wm-icon-font-size);
+  min-width: var(--wm-icon-min-width);
+  width: var(--wm-icon-width);
+  height: var(--wm-icon-height);
+}
+

package/src/styles/mobile/studio/basic/label.less

@@ -0,0 +1,29 @@
+.app-label {
+    display: block;
+    width: max-content;
+    &.h1,
+    &.h2,
+    &.h3,
+    &.h4,
+    &.h5,
+    &.h6 {
+        padding: var(--wm-label-padding);
+        line-height: var(--wm-label-line-height);
+        letter-spacing: var(--wm-label-letter-spacing);
+    }
+
+    border-radius: var(--wm-label-border-radius);
+
+    &.label-primary,
+    &.label-danger,
+    &.label-default,
+    &.label-success,
+    &.label-warning,
+    &.label-secondary,
+    &.label-tertiary,
+    &.label-info {
+        padding: var(--wm-label-padding) !important;
+        line-height: var(--wm-label-line-height);
+        letter-spacing: var(--wm-label-letter-spacing);
+    }
+}

package/src/styles/mobile/studio/basic/message.less

@@ -0,0 +1,75 @@
+.app-message {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+
+  .close {
+    position: inherit;
+    top: 3px;
+  }
+
+  span {
+    flex: 1;
+  }
+
+  .icon {
+    font-size: var(--wm-message-icon-size);
+  }
+
+  div:nth-child(2) {
+    flex: 1;
+    padding-left: 16px;
+  }
+
+  button.close {
+   // color: var(--wm-message-color); //TODO Button color missing
+    opacity: 1;
+    text-shadow: none;
+    padding: var(--wm-message-close-btn-padding);
+    border-radius: var(--wm-message-close-btn-border-radius);
+    border-color: var(--wm-message-close-btn-border-color) !important;
+    background-color: var(--wm-message-close-btn-background-color) !important;
+    ripple-color:var(--wm-message-close-btn-ripple-color) !important;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+  }
+}
+
+.wm-app .app-message > span {
+    flex: 1;
+}
+
+.wm-app .app-message.alert-success .icon::before {
+  content: "\f00c";
+  font-size: var(--wm-message-icon-size);
+  color:var(--wm-message-color);
+}
+.wm-app .app-message.alert-info .icon::before {
+  content: "\f05a";
+  font-size: var(--wm-message-icon-size);
+  color:var(--wm-message-color);
+}
+.wm-app .app-message.alert-warning .icon::before {
+  content: "\f0a2";
+  font-size: var(--wm-message-icon-size);
+  color:var(--wm-message-color);
+}
+.wm-app .app-message.alert-error .icon::before {
+  content: "\f00d";
+  font-size: var(--wm-message-icon-size);
+  color:var(--wm-message-color);
+}
+.wm-app .app-message.alert-loading .icon::before {
+  content: "\f110";
+  font-size: var(--wm-message-icon-size);
+  color:var(--wm-message-color);
+}
+
+.wm-app .app-message .icon::before{
+  content: "\f00c";
+  font-size: var(--wm-message-icon-size);
+  color:var(--wm-message-color);
+}

package/src/styles/mobile/studio/basic/picture.less

@@ -0,0 +1,10 @@
+.img-thumbnail.app-picture {
+  background-color: var(--wm-picture-background);
+  border-color: var(--wm-picture-border-color);
+}
+
+.app-picture {
+  // can be added to picture foundation styles by mapping to design tokens like did it in web and exposing the same in style workspace
+    width: 270px; 
+    height: 270px;
+}

package/src/styles/mobile/studio/basic/progress-bar.less

@@ -0,0 +1,6 @@
+.app-progress {
+
+    &-label {
+        display: none;
+    }
+}

package/src/styles/mobile/studio/basic/progress-circle.less

@@ -0,0 +1,9 @@
+.app-progress.circle {
+    background-color: transparent;
+    width: var(--wm-progress-circle-width) !important;
+    height: var(--wm-progress-circle-height) !important;
+    path {
+        stroke-linecap: butt;
+        stroke-width: 16px;
+    }
+}

package/src/styles/mobile/studio/basic/search.less

@@ -0,0 +1,39 @@
+.app-search {
+    .app-textbox {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        font-size: 16px;
+        border-width: var(--wm-search-border-width);
+        border-right-width: 0;
+        padding: 8px 12px;
+        border-radius: 0px;
+    }
+    &[type="autocomplete"]>input.app-textbox {
+        border-right-width: var(--wm-search-border-width);
+        border-radius: var(--wm-search-border-radius);
+    }
+    .input-group-addon {
+        height: var(--wm-search-height);
+        ripple-color: var(--wm-search-btn-ripple-color);
+        background-color: var(--wm-search-btn-background-color);
+        border-top-right-radius: var(--wm-search-border-radius);
+        border-bottom-right-radius: var(--wm-search-border-radius);
+        border-color: var(--wm-search-border-color);
+        border-width: var(--wm-search-border-width);
+        border-style: solid;
+        border-left-width: 0;
+    }
+    
+    &-button>i.app-icon.app-icon {
+        color: var(--wm-search-btn-icon-color);
+        font-size: var(--wm-search-btn-icon-size);
+    }
+}
+
+
+.app-search[type=autocomplete]>input.app-textbox {
+  width: var(--wm-form-controls-min-width);
+}
+.app-search>input.app-textbox{
+  width: 100%;
+}

package/src/styles/mobile/studio/basic/spinner.less

@@ -0,0 +1,6 @@
+.app-spinner {
+    .spinner-message {
+        background-color: inherit;
+        border-color: transparent;
+    }
+}

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

@@ -0,0 +1,11 @@
+@import url('./anchor.less');
+@import url('./button.less');
+@import url('./button-group.less');
+@import url('./icon.less');
+@import url('./label.less');
+@import url('./message.less');
+@import url('./picture.less');
+@import url('./progress-bar.less');
+@import url('./progress-circle.less');
+@import url('./search.less');
+@import url('./spinner.less');

package/src/styles/mobile/studio/container/accordion.less

@@ -0,0 +1,23 @@
+.app-accordion{
+    .panel-heading {
+        border-width: var(--wm-accordion-header-border-width);
+        display: flex;
+        flex-direction: row;
+        align-self: center;
+        .panel-title {
+            flex: 1;
+            align-self: center;
+        }
+        .panel-actions {
+            top: auto;
+            right: auto;
+            position: static;
+            .label {
+                border-style: solid;
+            }
+            .badge {
+                line-height: var(--wm-accordion-badge-height);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+.app-page-content .app-default-container {
+         //  border: 1px dotted rgba(168, 168, 168, .4) !important; 
+ }
+
+ .app-container{
+    border-style: var(--wm-container-border-style);
+    box-shadow: var(--wm-container-box-shadow);
+    background-color: var(--wm-container-background-color);
+    padding: var(--wm-container-padding);
+
+    border-radius: var(--wm-container-border-radius);
+    border-width: var(--wm-container-border-width);
+    border-color: var(--wm-container-border-color);
+    opacity: var(--wm-container-opacity);
+ }
+
+ .app-container .app-textbox {
+    min-height: inherit;
+}

package/src/styles/mobile/studio/container/grid.less

@@ -0,0 +1,8 @@
+.app-grid-layout {
+    .table-header-row .app-label {
+        font-weight: bold;
+    }
+    .app-grid-column {
+        background-color: transparent;
+    }
+}

package/src/styles/mobile/studio/container/linearlayout.less

@@ -0,0 +1,8 @@
+.app-linear-layout {
+    &:not(.app-linear-layout-item > .app-linear-layout) {
+    border: none;
+ }
+  > .app-linear-layout-item {
+    border: none;
+  }
+}

package/src/styles/mobile/studio/container/panel.less

@@ -0,0 +1,42 @@
+.app-panel {
+    .panel-heading {
+        background-color: var(--wm-panel-heading-background);
+        .panel-icon {
+            font-size: var(--wm-panel-heading-icon-size);
+            color: var(--wm-panel-heading-icon-color);
+        }
+        .heading {
+            font-size: var(--wm-panel-heading-font-size);
+            font-weight: var(--wm-panel-heading-font-weight);
+        }
+        .description {
+            font-size: var(--wm-panel-heading-description-font-size);
+        }
+        .panel-title {
+            display: flex;
+            align-content: center;
+            a {
+                flex: 1;
+                display: block;
+            }
+            .app-badge {
+                width: 24px;
+                height: 24px;
+                display: inline-block;
+                padding: 6px 4px;
+                border-radius: 24px;
+            }
+            .panel-actions {
+                display: block;
+                align-self: center;
+            }
+        }
+    }
+    .panel-content {
+        .panel-body {
+            padding: 0px;
+        }
+    }
+}
+
+

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

@@ -0,0 +1,7 @@
+@import url('./accordion.less');
+@import url('./grid.less');
+@import url('./panel.less');
+@import url('./tabs.less');
+@import url('./wizard.less');
+@import url('./container.less');
+@import url('./linearlayout.less');

package/src/styles/mobile/studio/container/tabs.less

@@ -0,0 +1,122 @@
+.app-tabs {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    background: var(--wm-tabs-background);
+
+    >.tabs-list {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 121;
+        font-size: 0;
+        color: var(--wm-tabs-item-heading-text-color, #000);
+        background-color: var(--wm-tabs-background);
+        padding: var(--wm-tabs-border-width, 4px) 0;
+    }
+
+     .nav-tabs {
+        display: flex;
+        align-items: stretch;
+        border-bottom: var(--wm-tabs-border-width) var(--wm-tabs-border-style) var(--wm-tabs-border-color);
+
+        >.tab-header {
+            display: inline-flex;
+            align-items: center;
+            margin: 0px;
+            background-color: var(--wm-tabs-item-heading-background);
+            padding: var(--wm-tabs-item-heading-padding);
+            border-width: var(--wm-tabs-item-heading-border-width);
+            border-style: var(--wm-tabs-item-heading-border-style);
+            border-color: var(--wm-tabs-item-heading-border-color);
+            border-radius: var(--wm-tabs-item-heading-border-radius);
+            .tab-heading {
+
+
+                background-color: transparent;
+                color: var(--wm-tabs-item-heading-text-color);
+
+                .app-icon {
+                    color: var(--wm-tabs-item-heading-icon-color);
+                }
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                min-height: var(--wm-tabs-item-heading-line-height);
+                padding: var(--wm-tabs-item-heading-padding, 8px);
+                font-size: var(--wm-tabs-item-heading-font-size);
+                font-weight: var(--wm-tabs-item-heading-font-weight);
+                line-height: var(--wm-tabs-item-heading-line-height);
+
+                &:after {
+                    content: "";
+                    position: absolute;
+                    bottom: 0;
+                    height: var(--wm-tabs-item-heading-indicator-height);
+                    width: 100%;
+                    background: var(--wm-tabs-item-heading-indicator-background);
+                    transform: scale(0);
+                    transition: all 0.2s ease-in-out;
+                }      
+            }
+
+            &.active {
+
+                padding: var(--wm-tabs-item-heading-padding);
+                border-width: var(--wm-tabs-item-heading-border-width);
+                border-style: var(--wm-tabs-item-heading-border-style);
+                border-color: var(--wm-tabs-item-heading-border-color);
+                border-radius: var(--wm-tabs-item-heading-border-radius);
+                background-color: var(--wm-tabs-item-heading-background);
+                color: var(--wm-tabs-item-heading-text-color);
+
+                .app-icon {
+                    color: var(--wm-tabs-item-heading-icon-color);
+                }
+
+                .tab-heading {
+
+
+
+                    &:after {
+                        background: var(--wm-tabs-item-heading-indicator-background);
+                        transform: scale(1);
+                        transition: all 0.2s ease-in-out;
+                    }
+                }
+            }
+
+            &.disabled {
+                .tab-heading {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    >.tab-content {
+        background: var(--wm-tabs-background);
+        // padding: var(--wm-tabs-item-heading-padding, 0px);
+        padding: 0px; // replace with appropriate token for 0px.
+    }
+
+    .tab-pane {
+        .tab-body {
+            border-color: transparent;
+        }
+    }
+    
+}
+
+.nav-tabs>li.active>a {
+    background-color: transparent;
+    border-color: transparent;
+}

package/src/styles/mobile/studio/container/tile.less

@@ -0,0 +1,7 @@
+.app-tile {
+
+}
+
+.h1.app-label.tile-template-text {
+    color: var(--wm-tile-color);
+}

package/src/styles/mobile/studio/container/wizard.less

@@ -0,0 +1,48 @@
+/* wizard component styles and tokens */
+@import (optional) url('../../../../components/container/wizard.less');
+@import (optional) url('../../../../generated/variables/mobile/components/wizard.variant.less');
+.app-wizard {
+    display: flex;
+    flex-direction: column;
+  .app-wizard-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: transparent;
+    .btn {
+      --wm-btn-min-width: 112px;
+    }
+    &.right {
+      justify-content: flex-end;
+    }
+    .app-wizard-actions-right {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+      .app-wizard-skip {
+      margin-top: 0;
+      position: relative;
+      text-decoration: none;
+      flex: 0 0 auto;
+      overflow: hidden;
+    }
+  }
+   .app-wizard-body {
+     flex: 1
+  }
+}
+
+.app-wizard.number {
+  > .app-wizard-heading {
+    .app-wizard-steps {
+      .app-wizard-step.app-wizard-step::before {
+        border-top: var(--wm-wizard-step-connector-width) var(--wm-wizard-step-connector-style) var(--wm-wizard-step-connector-color);
+        top: 21px;
+      }
+    }
+  }
+  .count{
+    top: 1px;
+  }
+}

package/src/styles/mobile/studio/data/card.less

@@ -0,0 +1,25 @@
+    .app-card {
+        &-header {
+            padding: var(--wm-card-header-padding);
+            background-color: var(--wm-card-header-background-color);
+            width: var(--wm-card-heading-width);
+        }
+
+        &-avatar {
+            padding-top: var(--wm-card-icon-margin-top);
+            padding-right: var(--wm-card-icon-margin-right);
+        }
+        .panel-heading {
+            background-color: var(--wm-card-header-background-color);
+    }
+}
+    .card-default,
+    .card-elevated,
+    .card-filled {
+        border-width: var(--wm-card-border-width);
+        border-style: var(--wm-card-border-style);
+        border-color: var(--wm-card-border-color);
+        border-radius: var(--wm-card-border-radius);
+        background-color: var(--wm-card-background);
+        padding: var(--wm-card-padding);
+    }

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

@@ -0,0 +1,22 @@
+.app-form {
+    &.app-panel .panel-heading {
+        background-color: transparent;
+        .description{
+            white-space: nowrap;
+        }
+    }
+    .formfield-label {
+        width: 100%;
+    }
+    .live-field {
+        >div {
+            width: 100%;
+            .form-control {
+                width: 100%;
+            }
+        }
+    }
+    .form-action .app-button {
+        padding: 12px;
+    }
+}

package/src/styles/mobile/studio/data/list.less

@@ -0,0 +1,25 @@
+.app-list {
+  .panel-heading {
+    background-color: var(--wm-card-header-background-color);
+  }
+}
+
+.app-livelist {
+ width: 100%;
+}
+
+.app-livelist.app-panel.media-list,
+.app-livelist.app-panel.app-default-list {
+  box-shadow: none;
+  margin-bottom: 16px;
+}
+
+.app-livelist.app-panel.media-list[groupby],
+.app-livelist.app-panel.app-default-list[groupby] {
+  box-shadow: none;
+  margin-bottom: 0px;
+}
+
+.app-list-item{
+  min-height: auto;
+}

package/src/styles/mobile/studio/data/listtemplate.less

@@ -0,0 +1,11 @@
+
+.listtemplate-prism {
+    background-color: var(--wm-list-template-background-color);  
+    padding: var(--wm-list-template-padding);
+    min-height: var(--wm-list-template-min-height);
+    border-radius: var(--wm-list-template-border-radius);
+    border-color: var(--wm-list-template-border-color);
+    border-style: var(--wm-list-template-border-style);
+    border-width: var(--wm-list-template-border-width);
+    box-shadow: var(--wm-list-template-box-shadow); 
+}

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

@@ -0,0 +1,4 @@
+@import url('./card.less');
+@import url('./list.less');
+@import url('./form.less');
+@import url('./listtemplate.less');