framework7 8.3.4 → 9.0.0

package/components/timeline/timeline.css

@@ -1 +1 @@
-:root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-horizontal-date-height:34px;--f7-timeline-year-height:24px;--f7-timeline-year-font-weight:inherit;--f7-timeline-month-height:24px;--f7-timeline-month-font-size:inherit;--f7-timeline-month-font-weight:inherit;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:7px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:10px;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:rgba(0, 0, 0, 0.45);--f7-timeline-horizontal-item-border-color:rgba(0, 0, 0, 0.22);--f7-timeline-horizontal-item-date-border-color:rgba(0, 0, 0, 0.22)}.ios .dark,.ios.dark{--f7-timeline-horizontal-item-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-horizontal-item-date-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:12px;--f7-timeline-horizontal-item-date-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-horizontal-item-border-color:var(--f7-md-outline);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-top:0;padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right))}.block-strong .timeline{padding:0;margin:0}.timeline-item{display:flex;justify-content:flex-start;overflow:hidden;box-sizing:border-box;position:relative;padding:2px 0px var(--f7-timeline-padding-horizontal)}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{flex-shrink:0;width:50px;text-align:right;box-sizing:border-box}.timeline-item-date small{font-size:10px}.timeline-item-content{margin:2px;min-width:0;position:relative;flex-shrink:10}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);box-sizing:border-box;border-radius:var(--f7-timeline-item-inner-border-radius);padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{padding:0;color:inherit}.timeline-item-inner .block-strong{padding-left:0;padding-right:0;margin:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before{display:none!important}.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none!important}.timeline-item-divider{width:1px;position:relative;width:10px;height:10px;background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;margin:3px var(--f7-timeline-divider-margin-horizontal) 0}.timeline-item-divider:after,.timeline-item-divider:before{content:' ';width:1px;height:100vh;position:absolute;left:50%;background:inherit;transform:translate3d(-50%,0,0)}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item:first-child .timeline-item-divider:before{display:none}.timeline-item-time{font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical);color:var(--f7-timeline-item-time-text-color)}.timeline-item-time:first-child,.timeline-item-time:last-child{margin-top:0}.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:right}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:right}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:right}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:right}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:right}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:right}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}.timeline-horizontal{height:100%;display:flex;padding:0;margin:0;position:relative;padding-left:var(--f7-safe-area-left);padding-right:0}.timeline-horizontal .timeline-item{display:block;width:100/3vw;margin:0;padding:0;flex-shrink:0;position:relative;height:100%;padding-top:var(--f7-timeline-horizontal-date-height)!important;padding-bottom:var(--f7-timeline-horizontal-item-padding)}.timeline-horizontal .timeline-item:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-horizontal .timeline-item-date{padding:0px var(--f7-timeline-horizontal-item-padding);width:auto;line-height:var(--f7-timeline-horizontal-date-height);position:absolute;left:0;top:0;width:100%;height:var(--f7-timeline-horizontal-date-height);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color);text-align:left}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-horizontal .timeline-item-date{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-horizontal .timeline-item-date:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-date-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-horizontal .timeline-item-content{padding:var(--f7-timeline-horizontal-item-padding);height:calc(100vw - var(--f7-timeline-horizontal-item-padding));overflow:auto;-webkit-overflow-scrolling:touch;margin:0}.timeline-horizontal .timeline-item-divider{display:none}.timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after,.timeline-horizontal>.timeline-item:last-child:after{display:none!important}.timeline-horizontal.timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.timeline-cols-20 .timeline-item{width:calc(100vw / 20)}@media (min-width:480px){.timeline-horizontal.xsmall-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xsmall-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xsmall-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xsmall-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xsmall-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xsmall-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xsmall-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xsmall-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xsmall-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xsmall-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xsmall-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xsmall-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xsmall-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xsmall-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xsmall-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xsmall-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xsmall-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xsmall-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xsmall-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xsmall-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:568px){.timeline-horizontal.small-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.small-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.small-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.small-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.small-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.small-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.small-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.small-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.small-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.small-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.small-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.small-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.small-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.small-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.small-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.small-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.small-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.small-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.small-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.small-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:768px){.timeline-horizontal.medium-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.medium-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.medium-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.medium-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.medium-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.medium-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.medium-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.medium-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.medium-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.medium-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.medium-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.medium-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.medium-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.medium-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.medium-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.medium-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.medium-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.medium-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.medium-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.medium-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1024px){.timeline-horizontal.large-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.large-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.large-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.large-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.large-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.large-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.large-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.large-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.large-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.large-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.large-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.large-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.large-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.large-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.large-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.large-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.large-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.large-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.large-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.large-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1200px){.timeline-horizontal.xlarge-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xlarge-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xlarge-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xlarge-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xlarge-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xlarge-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xlarge-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xlarge-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xlarge-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xlarge-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xlarge-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xlarge-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xlarge-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xlarge-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xlarge-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xlarge-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xlarge-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xlarge-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xlarge-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xlarge-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}.timeline-year{padding-top:var(--f7-timeline-year-height)}.timeline-year:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-year:last-child:after{display:none!important}.timeline-month{padding-top:var(--f7-timeline-month-height)}.timeline-month .timeline-item:before{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-month,.timeline-year{display:flex;flex-shrink:0;position:relative;box-sizing:border-box;height:100%}.timeline-year-title{line-height:var(--f7-timeline-year-height);height:var(--f7-timeline-year-height);font-size:var(--f7-timeline-year-font-size);font-weight:var(--f7-timeline-year-font-weight)}.timeline-month-title{line-height:var(--f7-timeline-month-height);height:var(--f7-timeline-month-height);font-size:var(--f7-timeline-month-font-size);font-weight:var(--f7-timeline-month-font-weight)}.timeline-month-title,.timeline-year-title{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;padding:0 var(--f7-timeline-horizontal-item-padding);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-month-title,.ios-translucent-bars .timeline-year-title{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-month-title span,.timeline-year-title span{display:inline-block;position:sticky;left:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left))}.timeline-month-title span{margin-top:-2px}.timeline-year:first-child .timeline-month:first-child .timeline-month-title,.timeline-year:first-child .timeline-year-title,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title{left:calc(var(--f7-safe-area-left) * -1);right:0;width:auto}.timeline-horizontal .timeline-item:first-child,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item{overflow:visible}.timeline-horizontal .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item .timeline-item-date{width:auto;padding-left:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));left:calc(0px - var(--f7-safe-area-left));right:0}.timeline-year:last-child .timeline-month:last-child .timeline-month-title,.timeline-year:last-child .timeline-year-title{width:auto;right:calc(0px - var(--f7-safe-area-right))}.timeline-horizontal .timeline-item:last-child,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child{overflow:visible}.timeline-horizontal .timeline-item:last-child .timeline-item-date,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date{width:auto;right:calc(0px - var(--f7-safe-area-right));left:0}.ios .block-strong .timeline-item-inner{border-radius:3px;border:1px solid rgba(0,0,0,.1)}.ios .timeline-year-title span{margin-top:3px}.md .timeline-year-title span{margin-top:2px}
+:root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:24px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:#00000073}.ios .dark,.ios.dark{--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:#ffffff8c}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));padding-top:0}.block-strong .timeline{margin:0;padding:0}.timeline-item{box-sizing:border-box;display:flex;justify-content:flex-start;overflow:hidden;padding:2px 0 var(--f7-timeline-padding-horizontal);position:relative}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{box-sizing:border-box;flex-shrink:0;text-align:right;width:50px}.timeline-item-date small{font-size:10px}.timeline-item-content{flex-shrink:10;margin:2px;min-width:0;position:relative}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);border-radius:var(--f7-timeline-item-inner-border-radius);box-sizing:border-box;padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{color:inherit;padding:0}.timeline-item-inner .block-strong{margin:0;padding-left:0;padding-right:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before,.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none!important}.timeline-item-divider{background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;height:10px;margin:3px var(--f7-timeline-divider-margin-horizontal) 0;position:relative;width:1px;width:10px}.timeline-item-divider:after,.timeline-item-divider:before{background:inherit;content:" ";height:100vh;left:50%;position:absolute;transform:translate3d(-50%,0,0);width:1px}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:first-child .timeline-item-divider:before,.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item-time{color:var(--f7-timeline-item-time-text-color);font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-time:first-child,.timeline-item-time:last-child,.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:right}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:right}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:right}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:right}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:right}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:right}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}.ios .block-strong .timeline-item-inner{border:1px solid #0000001a;border-radius:3px}

package/components/timeline/timeline.less

@@ -209,202 +209,6 @@ each(@breakpoints, {
   }
 });
 
-.timeline-horizontal {
-  height: 100%;
-  display: flex;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  padding-left: var(--f7-safe-area-left);
-  padding-right: 0;
-  .timeline-item {
-    display: block;
-    width: 100/3vw;
-    margin: 0;
-    padding: 0;
-    flex-shrink: 0;
-    position: relative;
-    height: 100%;
-    padding-top: var(--f7-timeline-horizontal-date-height) !important;
-    padding-bottom: var(--f7-timeline-horizontal-item-padding);
-    .hairline(right, var(--f7-timeline-horizontal-item-border-color));
-  }
-  .timeline-item-date {
-    padding: 0px var(--f7-timeline-horizontal-item-padding);
-    width: auto;
-    text-align: left;
-    line-height: var(--f7-timeline-horizontal-date-height);
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: var(--f7-timeline-horizontal-date-height);
-    background-color: var(--f7-bars-bg-color);
-    color: var(--f7-bars-text-color);
-    .ios-translucent-bars(var(--f7-bars-bg-color-rgb));
-    .hairline(bottom, var(--f7-timeline-horizontal-item-date-border-color));
-    .ltr({
-      text-align: left;
-    });
-    .rtl({
-      text-align: right;
-    });
-  }
-
-  .timeline-item-content {
-    padding: var(--f7-timeline-horizontal-item-padding);
-    height: calc(100vw - var(--f7-timeline-horizontal-item-padding));
-    .scrollable();
-    margin: 0;
-  }
-  .timeline-item-divider {
-    display: none;
-  }
-  > .timeline-item:last-child,
-  .timeline-month:last-child .timeline-item:last-child {
-    .hairline-remove(right);
-  }
-  @cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20;
-  each(@cols, {
-    @className: floor((@value));
-    &.timeline-cols-@{className} .timeline-item {
-      width: ~"calc(100vw / @{value})";
-    }
-  });
-  @media (min-width: @breakpoints[xsmall]) {
-    each(@cols, {
-      &.xsmall-timeline-cols-@{value} .timeline-item {
-         width: ~"calc(100vw / @{value})";
-      }
-    });
-  }
-  @media (min-width: @breakpoints[small]) {
-    each(@cols, {
-      &.small-timeline-cols-@{value} .timeline-item {
-         width: ~"calc(100vw / @{value})";
-      }
-    });
-  }
-  @media (min-width: @breakpoints[medium]) {
-    each(@cols, {
-      &.medium-timeline-cols-@{value} .timeline-item {
-         width: ~"calc(100vw / @{value})";
-      }
-    });
-  }
-  @media (min-width: @breakpoints[large]) {
-    each(@cols, {
-      &.large-timeline-cols-@{value} .timeline-item {
-         width: ~"calc(100vw / @{value})";
-      }
-    });
-  }
-  @media (min-width: @breakpoints[xlarge]) {
-    each(@cols, {
-      &.xlarge-timeline-cols-@{value} .timeline-item {
-         width: ~"calc(100vw / @{value})";
-      }
-    });
-  }
-}
-.timeline-year {
-  padding-top: var(--f7-timeline-year-height);
-  .hairline(right, var(--f7-timeline-horizontal-item-border-color));
-  &:last-child {
-    .hairline-remove(right);
-  }
-}
-.timeline-month {
-  padding-top: var(--f7-timeline-month-height);
-  .timeline-item {
-    .hairline(top, var(--f7-timeline-horizontal-item-border-color));
-  }
-}
-.timeline-year,
-.timeline-month {
-  display: flex;
-  flex-shrink: 0;
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-}
-.timeline-year-title {
-  line-height: var(--f7-timeline-year-height);
-  height: var(--f7-timeline-year-height);
-  font-size: var(--f7-timeline-year-font-size);
-  font-weight: var(--f7-timeline-year-font-weight);
-}
-.timeline-month-title {
-  line-height: var(--f7-timeline-month-height);
-  height: var(--f7-timeline-month-height);
-  font-size: var(--f7-timeline-month-font-size);
-  font-weight: var(--f7-timeline-month-font-weight);
-}
-.timeline-year-title,
-.timeline-month-title {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 var(--f7-timeline-horizontal-item-padding);
-  background-color: var(--f7-bars-bg-color);
-  color: var(--f7-bars-text-color);
-  .ios-translucent-bars(var(--f7-bars-bg-color-rgb));
-  span {
-    display: inline-block;
-    position: sticky;
-    .ltr({
-      left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
-    });
-    .rtl({
-      right: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right));
-    });
-  }
-}
-.timeline-month-title {
-  span {
-    margin-top: -2px;
-  }
-}
-.timeline-year:first-child .timeline-year-title,
-.timeline-year:first-child .timeline-month:first-child .timeline-month-title,
-.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
-  left: calc(var(--f7-safe-area-left) * -1);
-  right: 0;
-  width: auto;
-}
-.timeline-horizontal .timeline-item:first-child,
-.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
-.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
-.timeline-year:first-child
-  .timeline-year-title
-  + .timeline-month
-  .timeline-month-title
-  + .timeline-item {
-  overflow: visible;
-  .timeline-item-date {
-    width: auto;
-    padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
-    left: calc(0px - var(--f7-safe-area-left));
-    right: 0;
-  }
-}
-.timeline-year:last-child .timeline-year-title,
-.timeline-year:last-child .timeline-month:last-child .timeline-month-title {
-  width: auto;
-  right: calc(0px - var(--f7-safe-area-right));
-}
-.timeline-horizontal .timeline-item:last-child,
-.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
-  overflow: visible;
-  .timeline-item-date {
-    width: auto;
-    right: calc(0px - var(--f7-safe-area-right));
-    left: 0;
-  }
-}
-
 .if-ios-theme({
   @import './timeline-ios.less';
 });

package/components/toast/toast-class.js

@@ -97,8 +97,8 @@ class Toast extends Modal {
       class: "toast-icon"
     }, icon), $jsx("div", {
       class: "toast-text"
-    }, text), closeButton && !icon && $jsx("a", {
-      class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}`
+    }, text), closeButton && !icon && $jsx("button", {
+      class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}${toast.app.theme === 'ios' ? ' button-round' : ''}`
     }, closeButtonText)));
   }
 }

package/components/toast/toast-ios.less

@@ -3,6 +3,8 @@
     transition-duration: 300ms;
     width: 100%;
     left: 0;
+    .ios-glass-backdrop();
+    box-shadow: var(--f7-glass-shadow);
     &.toast-top {
       top: 0;
       transform: translate3d(0, -100%, 0);

package/components/toast/toast-rtl.css

@@ -1 +1 @@
-:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{background-color:var(--f7-toast-bg-color);box-sizing:border-box;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);max-width:var(--f7-toast-max-width);opacity:0;position:absolute;transition-property:transform,opacity;z-index:20000}.toast.modal-in{opacity:1}.toast .toast-content{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{flex-shrink:1;line-height:20px;min-width:0}.toast .toast-button{flex-shrink:0;margin-bottom:-8px;margin-top:-8px;min-width:var(--f7-toast-button-min-width);width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow);left:0;transition-duration:.3s;width:100%}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translateZ(0)}.ios .toast.toast-center{border-radius:var(--f7-toast-border-radius);left:50%;width:auto}.ios .toast.toast-center,.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translateZ(0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{border-radius:var(--f7-toast-border-radius);left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2);width:var(--f7-toast-max-width)}}.ios .toast-button{margin-left:calc(var(--f7-button-padding-horizontal)*-1);margin-right:16px}.md .toast{border-radius:var(--f7-toast-border-radius);left:8px;transform:scale(.9);transition-duration:.2s;width:calc(100% - 16px)}.md .toast.modal-in,.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;transform:scale(.9) translate3d(-55%,-55%,0);width:auto}.md .toast.toast-center.modal-in,.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2);width:var(--f7-toast-max-width)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:-8px;margin-right:16px}

package/components/toast/toast-vars.less

@@ -4,12 +4,10 @@
   --f7-toast-max-width: 568px;
 }
 .ios-vars({
-  --f7-toast-text-color: #fff;
-  --f7-toast-bg-color: rgba(0,0,0,0.75);
-  --f7-toast-bg-color-rgb: 0, 0, 0;
+  --f7-toast-bg-color: var(--f7-glass-bg-color);
   --f7-toast-padding-horizontal: 16px;
   --f7-toast-padding-vertical: 12px;
-  --f7-toast-border-radius: 8px;
+  --f7-toast-border-radius: 32px;
   --f7-toast-button-min-width: 64px;
 });
 .md-vars({

package/components/toast/toast.css

@@ -1 +1 @@
-:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{background-color:var(--f7-toast-bg-color);box-sizing:border-box;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);max-width:var(--f7-toast-max-width);opacity:0;position:absolute;transition-property:transform,opacity;z-index:20000}.toast.modal-in{opacity:1}.toast .toast-content{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{flex-shrink:1;line-height:20px;min-width:0}.toast .toast-button{flex-shrink:0;margin-bottom:-8px;margin-top:-8px;min-width:var(--f7-toast-button-min-width);width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow);left:0;transition-duration:.3s;width:100%}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translateZ(0)}.ios .toast.toast-center{border-radius:var(--f7-toast-border-radius);left:50%;width:auto}.ios .toast.toast-center,.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translateZ(0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{border-radius:var(--f7-toast-border-radius);left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2);width:var(--f7-toast-max-width)}}.ios .toast-button{margin-left:16px;margin-right:calc(var(--f7-button-padding-horizontal)*-1)}.md .toast{border-radius:var(--f7-toast-border-radius);left:8px;transform:scale(.9);transition-duration:.2s;width:calc(100% - 16px)}.md .toast.modal-in,.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;transform:scale(.9) translate3d(-55%,-55%,0);width:auto}.md .toast.toast-center.modal-in,.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2);width:var(--f7-toast-max-width)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}

package/components/toast/toast.less

@@ -11,7 +11,6 @@
   box-sizing: border-box;
   background-color: var(--f7-toast-bg-color);
   opacity: 0;
-  .ios-translucent-modals(var(--f7-toast-bg-color-rgb));
   &.modal-in {
     opacity: 1;
   }
@@ -32,6 +31,7 @@
     min-width: var(--f7-toast-button-min-width);
     margin-top: -8px;
     margin-bottom: -8px;
+    width: auto;
   }
   &.toast-with-icon {
     .toast-content {

package/components/toggle/toggle-class.js

@@ -1,15 +1,10 @@
 import $ from '../../shared/dom7.js';
 import { extend, now, nextTick, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
-import { getSupport } from '../../shared/get-support.js';
 class Toggle extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const toggle = this;
-    const support = getSupport();
     const defaults = {};
 
     // Extend defaults with modules params
@@ -120,19 +115,17 @@ class Toggle extends Framework7Class {
       toggle.emit('local::change toggleChange', toggle);
     }
     toggle.attachEvents = function attachEvents() {
-      const passive = support.passiveListener ? {
+      $el.on(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      $el.on(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
       toggle.$inputEl.on('change', handleInputChange);
     };
     toggle.detachEvents = function detachEvents() {
-      const passive = support.passiveListener ? {
+      $el.off(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      $el.off(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.off('touchmove', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
       toggle.$inputEl.off('change', handleInputChange);

package/components/toggle/toggle-ios.less

@@ -1,69 +1,87 @@
 .ios {
   .toggle {
-    background: var(--f7-toggle-inactive-border-color);
-    input[type='checkbox']:checked + .toggle-icon {
-      background: var(--f7-toggle-active-color, var(--f7-theme-color));
-      &:before {
+    --f7-toggle-knob-tx: 0px;
+    &::before {
+      content: '';
+      border-radius: inherit;
+      inset: 0;
+      position: absolute;
+      background: var(--f7-toggle-inactive-border-color);
+      transition-duration: 300ms;
+      z-index: 0;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
+
+      top: 0;
+      width: var(--f7-toggle-height);
+      height: var(--f7-toggle-height);
+      border-radius: var(--f7-toggle-height);
+      background: var(--f7-toggle-inactive-border-color);
+      transition-duration: 300ms;
+      z-index: 0;
+    }
+    &:has(input[type='checkbox']:checked) {
+      --f7-toggle-knob-tx: calc(var(--f7-toggle-width) - 38px - 4px);
+      &::before {
         background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
-        transform: scale(0);
       }
-      &:after {
-        background: var(--f7-toggle-active-knob-bg-color);
-        .ltr({
-          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
-        });
-        .rtl({
-          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
-        });
+      &::after {
+        background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
+        transform: translateX(0);
       }
     }
   }
   .toggle-icon {
-    background: var(--f7-toggle-border-color);
-    &:before {
+    background: var(--f7-toggle-inactive-knob-bg-color);
+    height: calc(var(--f7-toggle-height) - 4px);
+    width: 38px;
+    top: 2px;
+    .ltr({ left: 2px; });
+    .rtl({ right: 2px; });
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    border-radius: calc(var(--f7-toggle-height) - 4px);
+    transition-duration: 300ms;
+    transform: translateX(var(--f7-toggle-knob-tx)) scale(1);
+    position: relative;
+    z-index: 1;
+    transform-origin: center;
+    &::before {
+      content: '';
       position: absolute;
-      .ltr({ left: 2px; });
-      .rtl({ right: 2px; });
-      top: 2px;
-      width: calc(var(--f7-toggle-width) - 4px);
-      height: calc(var(--f7-toggle-height) - 4px);
-      border-radius: var(--f7-toggle-height);
-      box-sizing: border-box;
-      background: var(--f7-toggle-inactive-bg-color);
-      z-index: 1;
+      left: 50%;
+      top: 50%;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
       transition-duration: 300ms;
-      transform: scale(1);
+      box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
     }
-    &:after {
-      background: var(--f7-toggle-inactive-knob-bg-color);
-      height: calc(var(--f7-toggle-height) - 4px);
-      width: calc(var(--f7-toggle-height) - 4px);
-      top: 2px;
-      .ltr({ left: 2px; });
-      .rtl({ right: 2px; });
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      border-radius: calc(var(--f7-toggle-height) - 4px);
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      transition-duration: 300ms;
+      opacity: 0;
     }
   }
   .toggle-active-state {
-    input[type='checkbox']:not(:checked) + .toggle-icon {
-      &:before {
-        transform: scale(0);
-      }
+    &::before {
+      transform: scale(0.75);
     }
-    input[type='checkbox'] + .toggle-icon {
-      &:after {
-        width: calc(var(--f7-toggle-height) + 4px);
+    .toggle-icon {
+      background: transparent;
+      transform: translateX(var(--f7-toggle-knob-tx)) scale(1.4);
+      &::before {
+        opacity: 1;
       }
-    }
-    input[type='checkbox']:checked + .toggle-icon {
-      &:after {
-        .ltr({
-          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
-        });
-        .rtl({
-          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
-        });
+      &::after {
+        opacity: 1;
       }
     }
   }

package/components/toggle/toggle-rtl.css

@@ -1 +1 @@
-.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);right:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}
+.ios{--f7-toggle-width:64px;--f7-toggle-height:28px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{border-radius:var(--f7-toggle-height);height:var(--f7-toggle-height);width:var(--f7-toggle-width)}.toggle{align-self:center;box-sizing:border-box;display:inline-block;position:relative;-webkit-user-select:none;user-select:none;vertical-align:middle}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{appearance:none;border:none;box-sizing:border-box;cursor:pointer;display:block;margin:0;padding:0;position:relative;transition:.3s;z-index:0}.toggle-icon:after,.toggle-icon:before{content:""}.toggle-icon:after{position:absolute;transform:translateX(0);transition-duration:.3s;z-index:2}.ios .toggle{--f7-toggle-knob-tx:0px}.ios .toggle:before{border-radius:inherit;inset:0}.ios .toggle:after,.ios .toggle:before{background:var(--f7-toggle-inactive-border-color);content:"";position:absolute;transition-duration:.3s;z-index:0}.ios .toggle:after{border-radius:var(--f7-toggle-height);height:var(--f7-toggle-height);left:0;top:0;transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));width:var(--f7-toggle-height)}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 42px)}.ios .toggle:has(input[type=checkbox]:checked):after,.ios .toggle:has(input[type=checkbox]:checked):before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color))}.ios .toggle:has(input[type=checkbox]:checked):after{transform:translateX(0)}.ios .toggle-icon{background:var(--f7-toggle-inactive-knob-bg-color);border-radius:calc(var(--f7-toggle-height) - 4px);box-shadow:0 2px 4px #0000004d;height:calc(var(--f7-toggle-height) - 4px);position:relative;right:2px;top:2px;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);transform-origin:center;transition-duration:.3s;width:38px;z-index:1}.ios .toggle-icon:before{box-shadow:0 0 40px 15px rgba(var(--f7-theme-color-rgb),.75);height:1px;left:50%;top:50%;width:1px}.ios .toggle-icon:after,.ios .toggle-icon:before{content:"";opacity:0;position:absolute;transition-duration:.3s}.ios .toggle-icon:after{border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);inset:0}.ios .toggle-active-state:before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:#0000;transform:translateX(var(--f7-toggle-knob-tx)) scale(1.4)}.ios .toggle-active-state .toggle-icon:after,.ios .toggle-active-state .toggle-icon:before{opacity:1}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc((var(--f7-toggle-width) - var(--f7-toggle-height))*-1)) scale(1)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc((var(--f7-toggle-width) - var(--f7-toggle-height))*-1)) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);border-radius:var(--f7-toggle-height);height:calc(var(--f7-toggle-height) - 8px);right:2px;top:2px;transform:scale(.666);width:calc(var(--f7-toggle-height) - 8px)}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toggle/toggle-vars.less

@@ -1,6 +1,6 @@
 .ios-vars({
-  --f7-toggle-width: 52px;
-  --f7-toggle-height: 32px;
+  --f7-toggle-width: 64px;
+  --f7-toggle-height: 28px;
   /*
   --f7-toggle-active-bg-color: var(--f7-theme-color);
   */

package/components/toggle/toggle.css

@@ -1 +1 @@
-.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;left:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);left:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}
+.ios{--f7-toggle-width:64px;--f7-toggle-height:28px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{border-radius:var(--f7-toggle-height);height:var(--f7-toggle-height);width:var(--f7-toggle-width)}.toggle{align-self:center;box-sizing:border-box;display:inline-block;position:relative;-webkit-user-select:none;user-select:none;vertical-align:middle}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{appearance:none;border:none;box-sizing:border-box;cursor:pointer;display:block;margin:0;padding:0;position:relative;transition:.3s;z-index:0}.toggle-icon:after,.toggle-icon:before{content:""}.toggle-icon:after{position:absolute;transform:translateX(0);transition-duration:.3s;z-index:2}.ios .toggle{--f7-toggle-knob-tx:0px}.ios .toggle:before{border-radius:inherit;inset:0}.ios .toggle:after,.ios .toggle:before{background:var(--f7-toggle-inactive-border-color);content:"";position:absolute;transition-duration:.3s;z-index:0}.ios .toggle:after{border-radius:var(--f7-toggle-height);height:var(--f7-toggle-height);left:0;top:0;transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));width:var(--f7-toggle-height)}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 42px)}.ios .toggle:has(input[type=checkbox]:checked):after,.ios .toggle:has(input[type=checkbox]:checked):before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color))}.ios .toggle:has(input[type=checkbox]:checked):after{transform:translateX(0)}.ios .toggle-icon{background:var(--f7-toggle-inactive-knob-bg-color);border-radius:calc(var(--f7-toggle-height) - 4px);box-shadow:0 2px 4px #0000004d;height:calc(var(--f7-toggle-height) - 4px);left:2px;position:relative;top:2px;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);transform-origin:center;transition-duration:.3s;width:38px;z-index:1}.ios .toggle-icon:before{box-shadow:0 0 40px 15px rgba(var(--f7-theme-color-rgb),.75);height:1px;left:50%;top:50%;width:1px}.ios .toggle-icon:after,.ios .toggle-icon:before{content:"";opacity:0;position:absolute;transition-duration:.3s}.ios .toggle-icon:after{border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);inset:0}.ios .toggle-active-state:before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:#0000;transform:translateX(var(--f7-toggle-knob-tx)) scale(1.4)}.ios .toggle-active-state .toggle-icon:after,.ios .toggle-active-state .toggle-icon:before{opacity:1}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);border-radius:var(--f7-toggle-height);height:calc(var(--f7-toggle-height) - 8px);left:2px;top:2px;transform:scale(.666);width:calc(var(--f7-toggle-height) - 8px)}.md .toggle-icon.active-state:after{transform:scale(1.1)}