framework7/components/stepper/stepper-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--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}.ios{--f7-stepper-height:28px;--f7-stepper-border-radius:5px;--f7-stepper-fill-button-text-color:#fff;--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{--f7-stepper-height:40px;--f7-stepper-border-radius:8px;--f7-stepper-large-height:48px;--f7-stepper-small-height:32px;--f7-stepper-value-font-size:14px;--f7-stepper-border-width:1px;--f7-stepper-small-border-width:1px;--f7-stepper-button-pressed-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-stepper-fill-button-text-color:var(--f7-md-on-primary);--f7-stepper-fill-button-pressed-bg-color:var(--f7-theme-color);--f7-stepper-border-color:var(--f7-md-outline)}.stepper{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);display:inline-flex;align-items:stretch;height:var(--f7-stepper-height);border-radius:var(--f7-stepper-border-radius);flex-direction:row-reverse}.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-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;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;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-stepper-border-color);border-bottom:var(--f7-stepper-border-width) solid var(--f7-stepper-border-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%}.ios .stepper-round-ios,.md .stepper-round-md,.stepper-round{--f7-stepper-border-radius:var(--f7-stepper-height)}.ios .stepper-fill-ios,.md .stepper-fill-md,.stepper-fill{--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)}.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)}.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)}.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)}.ios .stepper-large-ios,.md .stepper-large-md,.stepper-large{--f7-stepper-height:var(--f7-stepper-large-height)}.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)}.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-bg-color, var(--f7-theme-color))}