feat(stepper): m3 styles

framework7io · Sep 29, 2022 · e1fe169 · e1fe169
1 parent a266155
commit e1fe169
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/core/components/stepper/stepper-vars.less b/src/core/components/stepper/stepper-vars.less
@@ -3,34 +3,37 @@
   --f7-stepper-button-text-color: var(--f7-theme-color);
   --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
   --f7-stepper-value-text-color: var(--f7-theme-color);
-  */
-  --f7-stepper-fill-button-text-color: #fff;
-  /*
   --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
   */
   --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   --f7-stepper-value-font-weight: 500;
-  --f7-stepper-border-width: 2px;
-  --f7-stepper-small-border-width: 2px;
 }
 .ios-vars({
   --f7-stepper-height: 28px;
   --f7-stepper-border-radius: 5px;
+  --f7-stepper-fill-button-text-color: #fff;
   /*
   --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
   */
   --f7-stepper-large-height: 44px;
   --f7-stepper-small-height: 26px;
   --f7-stepper-value-font-size: 17px;
+  --f7-stepper-border-width: 2px;
+  --f7-stepper-border-color: var(--f7-theme-color);
+  --f7-stepper-small-border-width: 2px;
 });
 .md-vars({
-  --f7-stepper-height: 36px;
-  --f7-stepper-border-radius: 4px;
+  --f7-stepper-height: 40px;
+  --f7-stepper-border-radius: 8px;
+  --f7-stepper-fill-button-text-color: var(--f7-md-on-primary);
   /*
   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
   */
   --f7-stepper-large-height: 48px;
-  --f7-stepper-small-height: 28px;
+  --f7-stepper-small-height: 32px;
   --f7-stepper-value-font-size: 14px;
+  --f7-stepper-border-width: 1px;
+  --f7-stepper-border-color: var(--f7-md-outline);
+  --f7-stepper-small-border-width: 1px;
 });
diff --git a/src/core/components/stepper/stepper.less b/src/core/components/stepper/stepper.less
@@ -18,7 +18,7 @@
   background-color: var(--f7-stepper-button-bg-color);
   width: 40px;
   border-radius: var(--f7-stepper-border-radius);
-  border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
+  border: var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);
   color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
   line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
   text-align: center;
@@ -90,8 +90,8 @@
 .stepper-value {
   flex-shrink: 1;
   text-align: center;
-  border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
-  border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
+  border-top: var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);
+  border-bottom: var(--f7-stepper-border-width) solid var(--f7-stepper-border-color);
 }
 .stepper .stepper-input-wrap input,
 .stepper-value {
@@ -112,6 +112,7 @@
 .stepper-fill,
 .ios .stepper-fill-ios,
 .md .stepper-fill-md {
+  --f7-stepper-border-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
   --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
   --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
   --f7-touch-ripple-color: var(--f7-touch-ripple-white);