framework7/components/stepper.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-stepper-fill-button-text-color:#fff;--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}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-large-height:44px;--f7-stepper-small-height:26px;--f7-stepper-small-border-width:2px;--f7-stepper-value-font-size:17px}.md{--f7-stepper-height:36px;--f7-stepper-border-radius:4px;--f7-stepper-large-height:48px;--f7-stepper-small-border-width:2px;--f7-stepper-small-height:28px;--f7-stepper-value-font-size:14px;--f7-stepper-button-pressed-bg-color:rgba(0, 0, 0, 0.1)}.md .theme-dark,.md.theme-dark{--f7-stepper-button-pressed-bg-color:rgba(255, 255, 255, 0.1)}.aurora{--f7-stepper-height:28px;--f7-stepper-border-radius:4px;--f7-stepper-large-height:34px;--f7-stepper-small-border-width:1px;--f7-stepper-small-height:22px;--f7-stepper-value-font-size:14px}.stepper{display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius)}.stepper-button,.stepper-button-minus,.stepper-button-plus{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);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;display:flex;justify-content:center;align-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;position:relative;cursor:pointer}.stepper-button-minus.active-state,.stepper-button-plus.active-state,.stepper-button.active-state{background-color:var(--f7-stepper-button-pressed-bg-color,rgba(var(--f7-theme-color-rgb),.15));color:var(--f7-stepper-button-pressed-text-color,var(--f7-stepper-button-text-color,var(--f7-theme-color)))}.stepper-button-minus:first-child,.stepper-button-plus:first-child,.stepper-button:first-child{border-radius:var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius)}.stepper-button-minus:last-child,.stepper-button-plus:last-child,.stepper-button:last-child{border-radius:0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0}.stepper-button .icon,.stepper-button-minus .icon,.stepper-button-plus .icon{pointer-events:none}.stepper-button+.stepper-button,.stepper-button+.stepper-button-minus,.stepper-button+.stepper-button-plus,.stepper-button-minus+.stepper-button,.stepper-button-minus+.stepper-button-minus,.stepper-button-minus+.stepper-button-plus,.stepper-button-plus+.stepper-button,.stepper-button-plus+.stepper-button-minus,.stepper-button-plus+.stepper-button-plus{border-left:none}.stepper-button-minus,.stepper-button-plus{-webkit-user-select:none;-moz-user-select:none;user-select:none}.stepper-button-minus:after,.stepper-button-minus:before,.stepper-button-plus:after,.stepper-button-plus:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--f7-stepper-button-text-color,var(--f7-theme-color));border-radius:2px}.stepper-button-minus:after,.stepper-button-plus:after{width:15px;height:2px}.stepper-button-plus:before{height:15px;width:2px}.stepper-value{display:flex;align-content:center;align-items:center;justify-content:center}.stepper-input-wrap,.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)}.stepper .stepper-input-wrap input,.stepper-value{width:45px;color:var(--f7-stepper-value-text-color,var(--f7-theme-color));font-size:var(--f7-stepper-value-font-size);font-weight:var(--f7-stepper-value-font-weight);text-align:center}.stepper .stepper-input-wrap input{height:100%}.aurora .stepper-round-aurora,.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.aurora .stepper-fill-aurora,.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--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)}.aurora .stepper-fill-aurora .stepper-button+.stepper-button,.aurora .stepper-fill-aurora .stepper-button-minus+.stepper-button-plus,.aurora .stepper-raised-aurora .stepper-button+.stepper-button,.aurora .stepper-raised-aurora .stepper-button-minus+.stepper-button-plus,.ios .stepper-fill-ios .stepper-button+.stepper-button,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus,.ios .stepper-raised-ios .stepper-button+.stepper-button,.ios .stepper-raised-ios .stepper-button-minus+.stepper-button-plus,.md .stepper-fill-md .stepper-button+.stepper-button,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus,.md .stepper-raised-md .stepper-button+.stepper-button,.md .stepper-raised-md .stepper-button-minus+.stepper-button-plus,.stepper-fill .stepper-button+.stepper-button,.stepper-fill .stepper-button-minus+.stepper-button-plus,.stepper-raised .stepper-button+.stepper-button,.stepper-raised .stepper-button-minus+.stepper-button-plus{border-left:1px solid rgba(0,0,0,.1)}.aurora .stepper-fill-aurora .stepper-button+.stepper-button.active-state,.aurora .stepper-fill-aurora .stepper-button-minus+.stepper-button-plus.active-state,.ios .stepper-fill-ios .stepper-button+.stepper-button.active-state,.ios .stepper-fill-ios .stepper-button-minus+.stepper-button-plus.active-state,.md .stepper-fill-md .stepper-button+.stepper-button.active-state,.md .stepper-fill-md .stepper-button-minus+.stepper-button-plus.active-state,.stepper-fill .stepper-button+.stepper-button.active-state,.stepper-fill .stepper-button-minus+.stepper-button-plus.active-state{border-left-color:var(--f7-stepper-button-pressed-bg-color)}.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,.stepper-raised:not(.stepper-fill) .stepper-input-wrap,.stepper-raised:not(.stepper-fill) .stepper-value{border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.aurora .stepper-large-aurora,.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.aurora .stepper-small-aurora,.ios .stepper-small-ios,.md .stepper-small-md,.stepper-small{--f7-stepper-border-width:var(--f7-stepper-small-border-width);--f7-stepper-height:var(--f7-stepper-small-height)}.ios .stepper-fill.stepper-small,.ios .stepper-fill.stepper-small-ios{--f7-stepper-button-pressed-bg-color:transparent;--f7-stepper-button-pressed-text-color:var(--f7-theme-color)}.aurora .stepper-raised-aurora,.ios .stepper-raised-ios,.md .stepper-raised-md,.stepper-raised{--f7-stepper-border-width:0;box-shadow:var(--f7-stepper-raised-box-shadow)}.ios .stepper-button .f7-icons,.ios .stepper-button-minus .f7-icons,.ios .stepper-button-plus .f7-icons{font-size:22px}.ios .stepper-fill,.ios .stepper-fill-ios{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint))}.ios .stepper-small-ios.stepper-raised,.ios .stepper-small-ios.stepper-raised-ios,.ios .stepper-small.stepper-raised,.ios .stepper-small.stepper-raised-ios{--f7-stepper-border-width:0px}.ios .stepper-small .stepper-button,.ios .stepper-small .stepper-button-minus,.ios .stepper-small .stepper-button-plus,.ios .stepper-small-ios .stepper-button,.ios .stepper-small-ios .stepper-button-minus,.ios .stepper-small-ios .stepper-button-plus{transition-duration:.2s}.ios .stepper-small .stepper-button-minus.active-state:after,.ios .stepper-small .stepper-button-minus.active-state:before,.ios .stepper-small .stepper-button-plus.active-state:after,.ios .stepper-small .stepper-button-plus.active-state:before,.ios .stepper-small .stepper-button.active-state:after,.ios .stepper-small .stepper-button.active-state:before,.ios .stepper-small-ios .stepper-button-minus.active-state:after,.ios .stepper-small-ios .stepper-button-minus.active-state:before,.ios .stepper-small-ios .stepper-button-plus.active-state:after,.ios .stepper-small-ios .stepper-button-plus.active-state:before,.ios .stepper-small-ios .stepper-button.active-state:after,.ios .stepper-small-ios .stepper-button.active-state:before{transition-duration:.2s;background-color:var(--f7-theme-color)}.md .stepper-button,.md .stepper-button-minus,.md .stepper-button-plus{transition-duration:.3s;transform:translate3d(0,0,0);overflow:hidden}.md .stepper-fill,.md .stepper-fill-md{--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}.aurora .stepper-button,.aurora .stepper-button-minus,.aurora .stepper-button-plus{transition-duration:.1s;transform:translate3d(0,0,0);overflow:hidden}.aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,.aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover,.aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover{background-color:var(--f7-stepper-button-hover-bg-color,rgba(var(--f7-theme-color-rgb),.07))}.aurora .stepper-fill,.aurora .stepper-fill-aurora{--f7-stepper-button-hover-bg-color:var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));--f7-stepper-button-pressed-bg-color:var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade))}