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

package/src/styles/mobile/components/variables/label.variant.less

@@ -0,0 +1,155 @@
+.p {
+  --wm-label-font-size: var(--wm-p-font-size);
+  --wm-label-font-weight: var(--wm-p-font-weight);
+  --wm-label-font-family: var(--wm-p-font-family);
+  --wm-label-line-height: var(--wm-p-line-height);
+  --wm-label-letter-spacing: var(--wm-p-letter-spacing);
+}
+
+.h1 {
+  --wm-label-font-size: var(--wm-h1-font-size);
+  --wm-label-font-weight: var(--wm-h1-font-weight);
+  --wm-label-font-family: var(--wm-h1-font-family);
+  --wm-label-line-height: var(--wm-h1-line-height);
+  --wm-label-letter-spacing: var(--wm-h1-letter-spacing);
+}
+
+.h2 {
+  --wm-label-font-size: var(--wm-h2-font-size);
+  --wm-label-font-weight: var(--wm-h2-font-weight);
+  --wm-label-font-family: var(--wm-h2-font-family);
+  --wm-label-line-height: var(--wm-h2-line-height);
+  --wm-label-letter-spacing: var(--wm-h2-letter-spacing);
+}
+
+.h3 {
+  --wm-label-font-size: var(--wm-h3-font-size);
+  --wm-label-font-weight: var(--wm-h3-font-weight);
+  --wm-label-font-family: var(--wm-h3-font-family);
+  --wm-label-line-height: var(--wm-h3-line-height);
+  --wm-label-letter-spacing: var(--wm-h3-letter-spacing);
+}
+
+.h4 {
+  --wm-label-font-size: var(--wm-h4-font-size);
+  --wm-label-font-weight: var(--wm-h4-font-weight);
+  --wm-label-font-family: var(--wm-h4-font-family);
+  --wm-label-line-height: var(--wm-h4-line-height);
+  --wm-label-letter-spacing: var(--wm-h4-letter-spacing);
+}
+
+.h5 {
+  --wm-label-font-size: var(--wm-h5-font-size);
+  --wm-label-font-weight: var(--wm-h5-font-weight);
+  --wm-label-font-family: var(--wm-h5-font-family);
+  --wm-label-line-height: var(--wm-h5-line-height);
+  --wm-label-letter-spacing: var(--wm-h5-letter-spacing);
+}
+
+.h6 {
+  --wm-label-font-size: var(--wm-h6-font-size);
+  --wm-label-font-weight: var(--wm-h6-font-weight);
+  --wm-label-font-family: var(--wm-h6-font-family);
+  --wm-label-line-height: var(--wm-h6-line-height);
+  --wm-label-letter-spacing: var(--wm-h6-letter-spacing);
+}
+
+.media-heading {
+  --wm-label-font-size: var(--wm-body-large-font-size);
+}
+
+.text-primary {
+  --wm-label-color: var(--wm-color-primary);
+}
+
+.text-secondary {
+  --wm-label-color: var(--wm-color-secondary);
+}
+
+.text-tertiary {
+  --wm-label-color: var(--wm-color-tertiary);
+}
+
+.text-success {
+  --wm-label-color: var(--wm-color-success);
+}
+
+.text-warning {
+  --wm-label-color: var(--wm-color-warning);
+}
+
+.text-danger {
+  --wm-label-color: var(--wm-color-error);
+}
+
+.text-info {
+  --wm-label-color: var(--wm-color-info);
+}
+
+.text-muted {
+  --wm-label-color: var(--wm-color-on-surface-variant);
+}
+
+.label-primary {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-primary);
+  --wm-label-color: var(--wm-color-on-primary);
+}
+
+.label-secondary {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-secondary);
+  --wm-label-color: var(--wm-color-on-secondary);
+}
+
+.label-tertiary {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-tertiary);
+  --wm-label-color: var(--wm-color-on-tertiary);
+}
+
+.label-success {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-success);
+  --wm-label-color: var(--wm-color-on-success);
+}
+
+.label-warning {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-warning);
+  --wm-label-color: var(--wm-color-on-warning);
+}
+
+.label-danger {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-error);
+  --wm-label-color: var(--wm-color-on-error);
+}
+
+.label-info {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-info);
+  --wm-label-color: var(--wm-color-on-info);
+}
+
+.label-muted {
+  --wm-label-padding: var(--wm-space-4) var(--wm-space-8);
+  --wm-label-font-weight: var(--wm-font-weight-700);
+  --wm-label-border-radius: 6px;
+  --wm-label-background-color: var(--wm-color-on-surface-variant);
+  --wm-label-color: var(--wm-color-surface-variant);
+}

package/src/styles/mobile/components/variables/message.variant.less

@@ -0,0 +1,29 @@
+.alert-success {
+  --wm-message-container-background: var(--wm-color-success);
+  --wm-message-container-border-color: var(--wm-color-success);
+  --wm-message-color: var(--wm-color-on-success);
+}
+
+.alert-info {
+  --wm-message-container-background: var(--wm-color-info);
+  --wm-message-container-border-color: var(--wm-color-info);
+  --wm-message-color: var(--wm-color-on-info);
+}
+
+.alert-warning {
+  --wm-message-container-background: var(--wm-color-warning);
+  --wm-message-container-border-color: var(--wm-color-warning);
+  --wm-message-color: var(--wm-color-on-warning);
+}
+
+.alert-error {
+  --wm-message-container-background: var(--wm-color-error);
+  --wm-message-container-border-color: var(--wm-color-error);
+  --wm-message-color: var(--wm-color-on-error);
+}
+
+.alert-loading {
+  --wm-message-container-background: var(--wm-color-primary);
+  --wm-message-container-border-color: var(--wm-color-primary);
+  --wm-message-color: var(--wm-color-on-primary);
+}

package/src/styles/mobile/components/variables/navitem.variant.less

@@ -0,0 +1,14 @@
+.app-navitem-active,
+.app-navitem-active.app-navitem-anchor {
+  --wm-navitem-color: var(--wm-color-on-secondary-fixed);
+  --wm-navitem-icon-size: var(--wm-icon-size);
+  --wm-navitem-icon-color: var(--wm-color-on-secondary-container);
+  --wm-navitem-border-radius: var(--wm-radius-pill);
+  --wm-navitem-background: var(--wm-color-secondary-fixed);
+  --wm-navitem-badge-font-size: var(--wm-label-large-font-size);
+  --wm-navitem-badge-font-family: var(--wm-label-large-font-family);
+  --wm-navitem-badge-font-weight: var(--wm-font-weight-600);
+  --wm-navitem-badge-border-radius: var(--wm-radius-circle);
+  --wm-navitem-badge-background: var(--wm-color-secondary-fixed-dim);
+  --wm-navitem-caret-color: var(--wm-color-on-secondary-fixed);
+}

package/src/styles/mobile/components/variables/panel.variant.less

@@ -0,0 +1,55 @@
+.panel-default {
+  --wm-panel-heading-background: var(--wm-color-surface-container);
+  --wm-panel-heading-icon-color: var(--wm-color-on-surface);
+  --wm-panel-heading-text-color: var(--wm-color-on-surface);
+  --wm-panel-description-color: var(--wm-color-on-surface);
+}
+
+.panel-primary {
+  --wm-panel-heading-background: var(--wm-color-primary-container);
+  --wm-panel-heading-icon-color: var(--wm-color-primary);
+  --wm-panel-heading-text-color: var(--wm-color-primary);
+  --wm-panel-description-color: var(--wm-color-primary);
+}
+
+.panel-secondary.root {
+  --wm-panel-heading-background: var(--wm-color-secondary-container);
+  --wm-panel-heading-icon-color: var(--wm-color-secondary);
+  --wm-panel-heading-text-color: var(--wm-color-secondary);
+  --wm-panel-description-color: var(--wm-color-secondary);
+}
+
+.panel-tertiary {
+  --wm-panel-heading-background: var(--wm-color-tertiary-container);
+  --wm-panel-heading-icon-color: var(--wm-color-tertiary);
+  --wm-panel-heading-text-color: var(--wm-color-tertiary);
+  --wm-panel-description-color: var(--wm-color-tertiary);
+}
+
+.panel-success {
+  --wm-panel-heading-background: var(--wm-color-success-container);
+  --wm-panel-heading-icon-color: var(--wm-color-success);
+  --wm-panel-heading-text-color: var(--wm-color-success);
+  --wm-panel-description-color: var(--wm-color-success);
+}
+
+.panel-info {
+  --wm-panel-heading-background: var(--wm-color-info-container);
+  --wm-panel-heading-icon-color: var(--wm-color-info);
+  --wm-panel-heading-text-color: var(--wm-color-info);
+  --wm-panel-description-color: var(--wm-color-info);
+}
+
+.panel-warning {
+  --wm-panel-heading-background: var(--wm-color-warning-container);
+  --wm-panel-heading-icon-color: var(--wm-color-warning);
+  --wm-panel-heading-text-color: var(--wm-color-warning);
+  --wm-panel-description-color: var(--wm-color-warning);
+}
+
+.panel-danger {
+  --wm-panel-heading-background: var(--wm-color-error-container);
+  --wm-panel-heading-icon-color: var(--wm-color-error);
+  --wm-panel-heading-text-color: var(--wm-color-error);
+  --wm-panel-description-color: var(--wm-color-error);
+}

package/src/styles/mobile/components/variables/picture.variant.less

@@ -0,0 +1,28 @@
+.rounded-image.app-picture {
+  --wm-picture-radius: var(--wm-radius-none);
+  --wm-picture-padding: var(--wm-space-0);
+  --wm-picture-border-color: var(--wm-color-border);
+  --wm-picture-border-style: var(--wm-border-style-base);
+  --wm-picture-border-width: var(--wm-border-width-0);
+  --wm-picture-background: var(--wm-color-transparent);
+  --wm-picture-radius: var(--wm-radius-xs);
+}
+
+.circle-image.app-picture {
+  --wm-picture-radius: var(--wm-radius-none);
+  --wm-picture-padding: var(--wm-space-0);
+  --wm-picture-border-color: var(--wm-color-border);
+  --wm-picture-border-style: var(--wm-border-style-base);
+  --wm-picture-border-width: var(--wm-border-width-0);
+  --wm-picture-background: var(--wm-color-transparent);
+  --wm-picture-radius: var(--wm-radius-circle);
+}
+
+.thumbnail-image.app-picture {
+  --wm-picture-radius: var(--wm-radius-xs);
+  --wm-picture-padding: var(--wm-space-1);
+  --wm-picture-border-color: var(--wm-color-border);
+  --wm-picture-border-style: var(--wm-border-style-base);
+  --wm-picture-border-width: var(--wm-border-width-base);
+  --wm-picture-background: var(--wm-color-surface-container-low);
+}

package/src/styles/mobile/components/variables/progress-bar.variant.less

@@ -0,0 +1,24 @@
+.progress-bar-default {
+  --wm-progress-bar-background-active: var(--wm-color-primary);
+  --wm-progress-bar-background-inactive: var(--wm-color-primary-container);
+}
+
+.progress-bar-success {
+  --wm-progress-bar-background-active: var(--wm-color-success);
+  --wm-progress-bar-background-inactive: var(--wm-color-success-container);
+}
+
+.progress-bar-info {
+  --wm-progress-bar-background-active: var(--wm-color-info);
+  --wm-progress-bar-background-inactive: var(--wm-color-info-container);
+}
+
+.progress-bar-warning {
+  --wm-progress-bar-background-active: var(--wm-color-warning);
+  --wm-progress-bar-background-inactive: var(--wm-color-warning-container);
+}
+
+.progress-bar-danger {
+  --wm-progress-bar-background-active: var(--wm-color-error);
+  --wm-progress-bar-background-inactive: var(--wm-color-error-container);
+}

package/src/styles/mobile/components/variables/progress-circle.variant.less

@@ -0,0 +1,24 @@
+.progress-circle-default {
+  --wm-progress-circle-stroke-inactive: var(--wm-color-primary-container);
+  --wm-progress-circle-stroke-active: var(--wm-color-primary);
+}
+
+.progress-circle-success {
+  --wm-progress-circle-stroke-inactive: var(--wm-color-success-container);
+  --wm-progress-circle-stroke-active: var(--wm-color-success);
+}
+
+.progress-circle-info {
+  --wm-progress-circle-stroke-inactive: var(--wm-color-info-container);
+  --wm-progress-circle-stroke-active: var(--wm-color-info);
+}
+
+.progress-circle-warning {
+  --wm-progress-circle-stroke-inactive: var(--wm-color-warning-container);
+  --wm-progress-circle-stroke-active: var(--wm-color-warning);
+}
+
+.progress-circle-danger {
+  --wm-progress-circle-stroke-inactive: var(--wm-color-error-container);
+  --wm-progress-circle-stroke-active: var(--wm-color-error);
+}

package/src/styles/mobile/components/variables/radioset.variant.less

@@ -0,0 +1,12 @@
+.app-radioset-checked-icon,
+.app-radioset-selected-label {
+  --wm-radiobutton-label-color: var(--wm-color-on-surface);
+  --wm-radiobutton-color: var(--wm-color-secondary);
+  --wm-radiobutton-border-color: var(--wm-color-secondary);
+}
+
+.app-radioset-disabled {
+  --wm-radiobutton-label-color: var(--wm-color-on-surface);
+  --wm-radiobutton-border-color: var(--wm-color-on-surface-variant);
+  --wm-radiobutton-opacity: 0.8;
+}

package/src/styles/mobile/components/variables/rating.variant.less

@@ -0,0 +1,8 @@
+.app-rating-disabled {
+  --wm-rating-opacity: 0.38;
+}
+
+.app-rating-selected-icon {
+  --wm-rating-icon-color: var(--wm-color-warning);
+  --wm-rating-icon-size: 32px;
+}

package/src/styles/mobile/components/variables/switch.variant.less

@@ -0,0 +1,14 @@
+.app-switch-btn-selected,
+.app-switch-btn-selected-text {
+  --wm-switch-button-background-color: var(--wm-color-secondary-fixed);
+  --wm-switch-button-color: var(--wm-color-on-secondary-container);
+  --wm-switch-button-border-color: var(--wm-color-outline);
+  --wm-switch-button-font-size: var(--wm-label-large-font-size);
+  --wm-switch-button-font-family: var(--wm-font-family-brand);
+  --wm-switch-button-font-weight: var(--wm-font-weight-500);
+  --wm-switch-button-text-transform: capitalize;
+}
+
+.app-switch-disabled {
+  --wm-switch-opacity: 0.6;
+}

package/src/styles/mobile/components/variables/tabbar.variant.less

@@ -0,0 +1,16 @@
+.app-tabbar-active-item,
+.app-tabbar-active-icon,
+.app-tabbar-active-label {
+  --wm-tabbar-item-border-radius: 50px;
+  --wm-tabbar-item-border-width: var(--wm-border-width-0);
+  --wm-tabbar-item-border-color: transparent;
+  --wm-tabbar-item-border-style: var(--wm-border-style-solid);
+  --wm-tabbar-item-background-color: var(--wm-color-primary-container);
+  --wm-tabbar-item-padding: var(--wm-space-0);
+  --wm-tabbar-item-gap: var(--wm-space-0);
+  --wm-tabbar-item-margin-bottom: -2;
+  --wm-tabbar-icon-color: var(--wm-color-primary);
+  --wm-tabbar-icon-padding: var(--wm-space-0);
+  --wm-tabbar-text-font-weight: var(--wm-font-weight-700);
+  --wm-tabbar-text-color: var(--wm-color-on-surface-variant);
+}

package/src/styles/mobile/components/variables/tabs.variant.less

@@ -0,0 +1,21 @@
+.app-tabheader-active-item,
+.app-tabheader-active-item-text,
+.app-tabheader-active-item-icon,
+.app-tabheader-active-indicator {
+  --wm-tabs-item-heading-padding: var(--wm-space-2);
+  --wm-tabs-item-heading-border-radius: var(--wm-radius-none);
+  --wm-tabs-item-heading-border-style: var(--wm-border-style-base);
+  --wm-tabs-item-heading-border-color: var(--wm-color-surface);
+  --wm-tabs-item-heading-border-width: var(--wm-border-width-0);
+  --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
+  --wm-tabs-item-heading-font-weight: var(--wm-h6-font-weight);
+  --wm-tabs-item-heading-font-family: var(--wm-h6-font-family);
+  --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
+  --wm-tabs-item-heading-indicator-margin: var(--wm-space-0);
+  --wm-tabs-item-heading-indicator-height: 3px;
+  --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
+  --wm-tabs-item-heading-background: var(--wm-color-surface);
+  --wm-tabs-item-heading-text-color: var(--wm-color-primary);
+  --wm-tabs-item-heading-icon-size: var(--wm-icon-size);
+  --wm-tabs-item-heading-icon-color: var(--wm-color-primary);
+}

package/src/styles/mobile/components/variables/tile.variant.less

@@ -0,0 +1,79 @@
+.bg-default.app-tile {
+  --wm-tile-background-color: var(--wm-color-surface-container-low);
+  --wm-tile-color: var(--wm-color-on-surface-variant);
+}
+
+.bg-primary.app-tile {
+  --wm-tile-background-color: var(--wm-color-primary-container);
+  --wm-tile-color: var(--wm-color-primary);
+}
+
+.bg-secondary.app-tile {
+  --wm-tile-background-color: var(--wm-color-secondary-container);
+  --wm-tile-color: var(--wm-color-secondary);
+}
+
+.bg-tertiary.app-tile {
+  --wm-tile-background-color: var(--wm-color-tertiary-container);
+  --wm-tile-color: var(--wm-color-tertiary);
+}
+
+.bg-success.app-tile {
+  --wm-tile-background-color: var(--wm-color-success-container);
+  --wm-tile-color: var(--wm-color-success);
+}
+
+.bg-info.app-tile {
+  --wm-tile-background-color: var(--wm-color-info-container);
+  --wm-tile-color: var(--wm-color-info);
+}
+
+.bg-warning.app-tile {
+  --wm-tile-background-color: var(--wm-color-warning-container);
+  --wm-tile-color: var(--wm-color-warning);
+}
+
+.bg-danger.app-tile {
+  --wm-tile-background-color: var(--wm-color-error-container);
+  --wm-tile-color: var(--wm-color-error);
+}
+
+.bg-default-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-surface-container-highest);
+  --wm-tile-color: var(--wm-color-on-surface-variant);
+}
+
+.bg-primary-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-primary);
+  --wm-tile-color: var(--wm-color-on-primary);
+}
+
+.bg-secondary-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-secondary);
+  --wm-tile-color: var(--wm-color-on-secondary);
+}
+
+.bg-tertiary-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-tertiary);
+  --wm-tile-color: var(--wm-color-on-tertiary);
+}
+
+.bg-success-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-success);
+  --wm-tile-color: var(--wm-color-on-success);
+}
+
+.bg-info-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-info);
+  --wm-tile-color: var(--wm-color-on-info);
+}
+
+.bg-warning-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-warning);
+  --wm-tile-color: var(--wm-color-on-warning);
+}
+
+.bg-danger-filled.app-tile {
+  --wm-tile-background-color: var(--wm-color-error);
+  --wm-tile-color: var(--wm-color-on-error);
+}

package/src/styles/mobile/components/variables/toggle.variant.less

@@ -0,0 +1,17 @@
+.app-toggle-on,
+.app-toggle-handle-on {
+  --wm-toggle-background-color: var(--wm-color-secondary);
+  --wm-toggle-border-color: var(--wm-color-secondary);
+  --wm-toggle-border-radius: 18px;
+  --wm-toggle-border-width: 2px;
+  --wm-toggle-handle-color: var(--wm-color-on-secondary);
+  --wm-toggle-handle-width: 16px;
+  --wm-toggle-handle-height: 16px;
+  --wm-toggle-handle-radius: 18px;
+  --wm-toggle-handle-margin-left: 8px;
+  --wm-toggle-handle-margin-right: 1px;
+}
+
+.app-toggle-disabled {
+  --wm-toggle-opacity: 0.5;
+}

package/src/styles/mobile/components/variables/wizard.variant.less

@@ -0,0 +1,26 @@
+.app-wizard-active-step,
+.app-wizard-active-step-counter {
+  --wm-wizard-step-indicator-background-color: var(--wm-color-secondary);
+  --wm-wizard-step-indicator-border-color: var(--wm-color-secondary);
+  --wm-wizard-step-count-color: var(--wm-color-on-secondary);
+  --wm-wizard-step-icon-color: var(--wm-color-on-secondary);
+  --wm-wizard-step-title-color: var(--wm-color-on-surface);
+  --wm-wizard-step-title-font-family: var(--wm-label-large-font-family);
+  --wm-wizard-step-title-font-weight: var(--wm-font-weight-600);
+  --wm-wizard-step-title-font-size: var(--wm-label-large-font-size);
+  --wm-wizard-step-title-line-height: var(--wm-label-large-line-height);
+  --wm-wizard-step-title-letter-spacing: var(--wm-label-large-letter-spacing);
+}
+
+.app-wizard-done-step {
+  --wm-wizard-step-indicator-background-color: var(--wm-color-success);
+  --wm-wizard-step-indicator-border-color: var(--wm-color-success);
+  --wm-wizard-step-count-color: var(--wm-color-on-secondary);
+  --wm-wizard-step-icon-color: var(--wm-color-on-secondary);
+  --wm-wizard-step-title-color: var(--wm-color-on-surface);
+  --wm-wizard-step-title-font-family: var(--wm-label-large-font-family);
+  --wm-wizard-step-title-font-weight: var(--wm-font-weight-600);
+  --wm-wizard-step-title-font-size: var(--wm-label-large-font-size);
+  --wm-wizard-step-title-line-height: var(--wm-label-large-line-height);
+  --wm-wizard-step-title-letter-spacing: var(--wm-label-large-letter-spacing);
+}

package/src/styles/mobile/studio/advanced/carousel.less

@@ -0,0 +1,75 @@
+.carousel-control {
+
+}
+
+.app-carousel .carousel-control .wi-chevron-right {
+    position: relative;
+    margin-top: var(--wm-space-0);
+    top: var(--wm-space-0);
+    right: var(--wm-space-0);
+    left: var(--wm-space-0);
+    opacity: var(--wm-space-1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.wi-chevron-right:before {
+    font-size: var(--wm-carousel-next-btn-font-size);
+    color: var(--wm-carousel-next-btn-color);
+}
+
+.app-carousel .carousel-control .wi-chevron-left {
+    position: relative;
+    margin-top: var(--wm-space-0);
+    top: var(--wm-space-0);
+    right: var(--wm-space-0);
+    left: var(--wm-space-0);
+    opacity: var(--wm-space-1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.wi-chevron-left:before {
+    font-size: var(--wm-carousel-prev-btn-font-size);
+    color: var(--wm-carousel-prev-btn-color);
+}
+
+.carousel-control.right {
+    top: 30%;
+    opacity: 1;
+    border-style: solid;
+    margin-right: var(--wm-carousel-next-btn-margin-left);
+    background-color: var(--wm-carousel-next-btn-background);
+    ripple-color: var(--wm-carousel-next-btn-ripple-color);
+    border-radius: var(--wm-carousel-next-btn-border-radius);
+    width: var(--wm-carousel-next-btn-width);
+    height: var(--wm-carousel-next-btn-height);
+    border-color: var(--wm-carousel-next-btn-border-color);
+    border-width: var(--wm-carousel-next-btn-border-width);
+    z-index: 1;
+}
+
+.carousel-control.left {
+    top: 30%;
+    opacity: 1;
+    border-style: solid;
+    margin-left: var(--wm-carousel-prev-btn-margin-left);
+    background-color: var(--wm-carousel-prev-btn-background);
+    ripple-color: var(--wm-carousel-prev-btn-ripple-color);
+    border-radius: var(--wm-carousel-prev-btn-border-radius);
+    width: var(--wm-carousel-prev-btn-width);
+    height: var(--wm-carousel-prev-btn-height);
+    border-color: var(--wm-carousel-prev-btn-border-color);
+    border-width: var(--wm-carousel-prev-btn-border-width);
+    z-index: 1;
+}
+
+.app-carousel .carousel-indicators li {
+    border-color: var(--wm-carousel-dots-border-color);
+}

package/src/styles/mobile/studio/advanced/login.less

@@ -0,0 +1,6 @@
+.app-form {
+    &.app-login {
+        background-color: transparent;
+        padding: var(--wm-login-form-padding);
+    }
+}

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

@@ -0,0 +1,3 @@
+@import url('./carousel.less');
+@import url('./login.less');
+@import url('./webview.less');

package/src/styles/mobile/studio/advanced/webview.less

@@ -0,0 +1,4 @@
+.app-iframe {
+    background-color: var(--wm-webview-background-color);
+    padding: var(--wm-webview-padding);
+}

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

@@ -0,0 +1,16 @@
+.app-anchor {
+    align-items: center;
+    justify-content: center;
+    .badge {
+        float: none !important;
+        right: 0;
+        top: -12px;
+        position: relative;
+    }
+    .app-icon {
+        font-size: var(--wm-anchor-icon-size);
+    }
+    .anchor-caption {
+        font-size: var(--wm-anchor-font-size);
+    }
+}