@xenknight/framework7 0.0.3 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/actions/actions-ios.less +22 -15
- package/components/actions/actions-rtl.css +1 -1
- package/components/actions/actions-vars.less +4 -7
- package/components/actions/actions.css +1 -1
- package/components/actions/actions.less +0 -3
- package/components/app/app-class.d.ts +2 -0
- package/components/app/app-class.js +10 -2
- package/components/app/app-vars.less +36 -0
- package/components/block/block-vars.less +6 -6
- package/components/button/button-vars.less +11 -10
- package/components/card/card-rtl.css +1 -1
- package/components/card/card-vars.less +5 -5
- package/components/card/card.css +1 -1
- package/components/dialog/dialog-class.js +6 -3
- package/components/dialog/dialog-ios.less +10 -34
- package/components/dialog/dialog-md.less +2 -22
- package/components/dialog/dialog-rtl.css +1 -1
- package/components/dialog/dialog-vars.less +8 -10
- package/components/dialog/dialog.css +1 -1
- package/components/dialog/dialog.js +3 -3
- package/components/dialog/dialog.less +6 -25
- package/components/list/list-vars.less +7 -5
- package/components/list/list.less +1 -1
- package/components/notification/notification-class.js +6 -6
- package/components/notification/notification-ios.less +3 -8
- package/components/notification/notification-md.less +1 -20
- package/components/notification/notification-rtl.css +1 -1
- package/components/notification/notification-vars.less +13 -16
- package/components/notification/notification.css +1 -1
- package/components/notification/notification.less +13 -1
- package/components/page/page-ios.less +4 -4
- package/components/page/page-md.less +2 -2
- package/components/popover/popover-class.js +21 -58
- package/components/popover/popover-ios.less +66 -2
- package/components/popover/popover-md.less +2 -27
- package/components/popover/popover-rtl.css +1 -1
- package/components/popover/popover-vars.less +2 -3
- package/components/popover/popover.css +1 -1
- package/components/popover/popover.d.ts +0 -2
- package/components/popover/popover.js +0 -1
- package/components/popover/popover.less +28 -50
- package/components/range/range-class.js +34 -27
- package/components/range/range-ios.less +60 -0
- package/components/range/range-md.less +67 -4
- package/components/range/range-rtl.css +1 -1
- package/components/range/range-vars.less +18 -13
- package/components/range/range.css +1 -1
- package/components/range/range.d.ts +3 -1
- package/components/range/range.less +11 -24
- package/components/swipeout/swipeout-ios.less +37 -0
- package/components/swipeout/swipeout-md.less +56 -0
- package/components/swipeout/swipeout-rtl.css +1 -1
- package/components/swipeout/swipeout-vars.less +13 -2
- package/components/swipeout/swipeout.css +1 -1
- package/components/swipeout/swipeout.js +99 -23
- package/components/swipeout/swipeout.less +20 -44
- package/components/toast/toast-class.js +2 -2
- package/components/toast/toast-ios.less +2 -0
- package/components/toast/toast-rtl.css +1 -1
- package/components/toast/toast-vars.less +2 -4
- package/components/toast/toast.css +1 -1
- package/components/toast/toast.less +1 -1
- package/components/toggle/toggle-class.js +4 -8
- package/components/toggle/toggle-ios.less +68 -50
- package/components/toggle/toggle-rtl.css +1 -1
- package/components/toggle/toggle-vars.less +2 -2
- package/components/toggle/toggle.css +1 -1
- package/framework7-bundle-rtl.css +551 -452
- package/framework7-bundle-rtl.min.css +5 -5
- package/framework7-bundle.css +551 -452
- package/framework7-bundle.esm.js +2 -2
- package/framework7-bundle.js +2460 -858
- package/framework7-bundle.js.map +1 -1
- package/framework7-bundle.less +2 -2
- package/framework7-bundle.min.css +5 -5
- package/framework7-bundle.min.js +3 -3
- package/framework7-bundle.min.js.map +1 -1
- package/framework7-lite-bundle.esm.js +2 -2
- package/framework7-lite.esm.js +2 -2
- package/framework7-rtl.css +63 -29
- package/framework7-rtl.min.css +4 -4
- package/framework7.css +63 -29
- package/framework7.esm.js +2 -2
- package/framework7.less +2 -2
- package/framework7.min.css +4 -4
- package/less/mixins.less +8 -0
- package/package.json +1 -1
- package/shared/get-support.d.ts +0 -6
- package/shared/get-support.js +1 -20
- package/shared/material-color-utils.js +2153 -679
- package/shared/material-colors.js +97 -17
- package/shared/utils.js +18 -6
|
@@ -1,9 +1,69 @@
|
|
|
1
1
|
.ios {
|
|
2
|
+
.range-bar-active {
|
|
3
|
+
border-radius: inherit;
|
|
4
|
+
}
|
|
5
|
+
.range-knob {
|
|
6
|
+
border-radius: var(--f7-range-knob-height);
|
|
7
|
+
transition-duration: 300ms;
|
|
8
|
+
position: absolute;
|
|
9
|
+
left: 0;
|
|
10
|
+
top: 0;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
&:after {
|
|
14
|
+
content: '';
|
|
15
|
+
position: absolute;
|
|
16
|
+
left: 50%;
|
|
17
|
+
top: 50%;
|
|
18
|
+
width: 44px;
|
|
19
|
+
height: 44px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&::before,
|
|
23
|
+
&::after {
|
|
24
|
+
content: '';
|
|
25
|
+
position: absolute;
|
|
26
|
+
}
|
|
27
|
+
&::before {
|
|
28
|
+
width: 1px;
|
|
29
|
+
height: 1px;
|
|
30
|
+
opacity: 0;
|
|
31
|
+
transition-duration: 300ms;
|
|
32
|
+
box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
|
|
33
|
+
left: 50%;
|
|
34
|
+
top: 50%;
|
|
35
|
+
margin-left: -0.5px;
|
|
36
|
+
margin-top: -0.5px;
|
|
37
|
+
}
|
|
38
|
+
&::after {
|
|
39
|
+
inset: 0;
|
|
40
|
+
border-radius: inherit;
|
|
41
|
+
box-shadow: var(--f7-glass-shadow-thumb);
|
|
42
|
+
transition-duration: 300ms;
|
|
43
|
+
opacity: 0;
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
margin: 0;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
2
49
|
.range-knob-label {
|
|
3
50
|
margin-bottom: 6px;
|
|
4
51
|
transform: translateX(-50%) translateY(100%) scale(0);
|
|
52
|
+
z-index: 2;
|
|
5
53
|
}
|
|
6
54
|
.range-knob-active-state .range-knob-label {
|
|
7
55
|
transform: translateX(-50%) translateY(0%) scale(1);
|
|
8
56
|
}
|
|
57
|
+
.range-knob-active-state {
|
|
58
|
+
.range-knob {
|
|
59
|
+
background: transparent;
|
|
60
|
+
transform: scale(1.4);
|
|
61
|
+
&::before {
|
|
62
|
+
opacity: 1;
|
|
63
|
+
}
|
|
64
|
+
&::after {
|
|
65
|
+
opacity: 1;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
9
69
|
}
|
|
@@ -1,10 +1,29 @@
|
|
|
1
1
|
.md {
|
|
2
|
+
.range-knob-wrap {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
}
|
|
2
7
|
.range-knob {
|
|
3
8
|
transition-duration: 200ms;
|
|
4
9
|
transition-property: transform, background-color;
|
|
10
|
+
width: 4px;
|
|
11
|
+
height: var(--f7-range-knob-height);
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
border-radius: 4px;
|
|
5
16
|
}
|
|
17
|
+
|
|
6
18
|
.range-knob-active-state .range-knob {
|
|
7
|
-
transform:
|
|
19
|
+
transform: scaleX(0.5);
|
|
20
|
+
}
|
|
21
|
+
.range-slider-vertical .range-knob {
|
|
22
|
+
width: var(--f7-range-knob-height);
|
|
23
|
+
height: 4px;
|
|
24
|
+
}
|
|
25
|
+
.range-slider-vertical .range-knob-active-state .range-knob {
|
|
26
|
+
transform: scaleY(0.5);
|
|
8
27
|
}
|
|
9
28
|
.range-slider-min:not(.range-slider-dual) {
|
|
10
29
|
.range-knob {
|
|
@@ -33,9 +52,53 @@
|
|
|
33
52
|
.range-knob-active-state .range-knob-label {
|
|
34
53
|
transform: translateY(0%) scale(1);
|
|
35
54
|
}
|
|
36
|
-
.range-
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
.range-bar-active,
|
|
56
|
+
.range-bar-inactive {
|
|
57
|
+
border-radius: 4px;
|
|
58
|
+
}
|
|
59
|
+
.range-slider {
|
|
60
|
+
&::before,
|
|
61
|
+
&::after {
|
|
62
|
+
content: '';
|
|
63
|
+
position: absolute;
|
|
64
|
+
width: 4px;
|
|
65
|
+
height: 4px;
|
|
66
|
+
border-radius: 50%;
|
|
67
|
+
background: var(--f7-range-knob-color);
|
|
68
|
+
top: calc(50% - 2px);
|
|
69
|
+
z-index: 1;
|
|
70
|
+
pointer-events: none;
|
|
71
|
+
transition-duration: 200ms;
|
|
72
|
+
}
|
|
73
|
+
&::before {
|
|
74
|
+
left: calc(var(--f7-range-knob-width) / 2 - 2px);
|
|
75
|
+
}
|
|
76
|
+
&::after {
|
|
77
|
+
right: calc(var(--f7-range-knob-width) / 2 - 2px);
|
|
78
|
+
}
|
|
79
|
+
&:not(.range-slider-dual)::before {
|
|
80
|
+
content: none;
|
|
81
|
+
display: none;
|
|
82
|
+
}
|
|
83
|
+
&:has(.range-knob-active-state) {
|
|
84
|
+
&::before,
|
|
85
|
+
&::after {
|
|
86
|
+
transform: scale(0.5);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
&.range-slider-vertical {
|
|
90
|
+
&::before,
|
|
91
|
+
&::after {
|
|
92
|
+
top: auto;
|
|
93
|
+
left: calc(50% - 2px);
|
|
94
|
+
right: auto;
|
|
95
|
+
}
|
|
96
|
+
&::before {
|
|
97
|
+
bottom: calc(var(--f7-range-knob-width) / 2 - 2px);
|
|
98
|
+
}
|
|
99
|
+
&::after {
|
|
100
|
+
top: calc(var(--f7-range-knob-width) / 2 - 2px);
|
|
101
|
+
}
|
|
39
102
|
}
|
|
40
103
|
}
|
|
41
104
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px
|
|
1
|
+
:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-size:6px;--f7-range-bar-border-radius:6px;--f7-range-knob-width:38px;--f7-range-knob-height:24px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 4px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.md{--f7-range-size:20px;--f7-range-bar-size:16px;--f7-range-bar-border-radius:16px;--f7-range-knob-width:16px;--f7-range-knob-height:44px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-bar-bg-color:var(--f7-md-secondary-container);--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{right:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-height);width:var(--f7-range-knob-width)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-height)/ 2);margin-right:calc(-1 * var(--f7-range-knob-width)/ 2);right:0}.range-slider-vertical .range-knob-wrap{left:50%;height:var(--f7-range-knob-width);width:var(--f7-range-knob-height);margin-left:calc(-1 * var(--f7-range-knob-height)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-knob{box-sizing:border-box;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-right:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-right:0}.range-slider-horizontal .range-scale-step:last-child{margin-right:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-bar-active{border-radius:inherit}.ios .range-knob{border-radius:var(--f7-range-knob-height);transition-duration:.3s;position:absolute;left:0;top:0;width:100%;height:100%}.ios .range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px}.ios .range-knob::after,.ios .range-knob::before{content:'';position:absolute}.ios .range-knob::before{width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75);left:50%;top:50%;margin-left:-.5px;margin-top:-.5px}.ios .range-knob::after{inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0;width:100%;height:100%;margin:0}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0);z-index:2}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.ios .range-knob-active-state .range-knob{background:0 0;transform:scale(1.4)}.ios .range-knob-active-state .range-knob::before{opacity:1}.ios .range-knob-active-state .range-knob::after{opacity:1}.md .range-knob-wrap{display:flex;align-items:center;justify-content:center}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color;width:4px;height:var(--f7-range-knob-height);display:flex;align-items:center;justify-content:center;border-radius:4px}.md .range-knob-active-state .range-knob{transform:scaleX(.5)}.md .range-slider-vertical .range-knob{width:var(--f7-range-knob-height);height:4px}.md .range-slider-vertical .range-knob-active-state .range-knob{transform:scaleY(.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-bar-active,.md .range-bar-inactive{border-radius:4px}.md .range-slider::after,.md .range-slider::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--f7-range-knob-color);top:calc(50% - 2px);z-index:1;pointer-events:none;transition-duration:.2s}.md .range-slider::before{left:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider::after{right:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider:not(.range-slider-dual)::before{content:none;display:none}.md .range-slider:has(.range-knob-active-state)::after,.md .range-slider:has(.range-knob-active-state)::before{transform:scale(.5)}.md .range-slider.range-slider-vertical::after,.md .range-slider.range-slider-vertical::before{top:auto;left:calc(50% - 2px);right:auto}.md .range-slider.range-slider-vertical::before{bottom:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider.range-slider-vertical::after{top:calc(var(--f7-range-knob-width)/ 2 - 2px)}
|
|
@@ -7,18 +7,13 @@
|
|
|
7
7
|
--f7-range-scale-step-height: 5px;
|
|
8
8
|
--f7-range-scale-substep-width: 1px;
|
|
9
9
|
--f7-range-scale-substep-height: 4px;
|
|
10
|
-
.light-vars({
|
|
11
|
-
--f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
|
|
12
|
-
});
|
|
13
|
-
.dark-vars({
|
|
14
|
-
--f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
|
|
15
|
-
});
|
|
16
10
|
}
|
|
17
11
|
.ios-vars({
|
|
18
12
|
--f7-range-size: 28px;
|
|
19
|
-
--f7-range-bar-size:
|
|
20
|
-
--f7-range-bar-border-radius:
|
|
21
|
-
--f7-range-knob-
|
|
13
|
+
--f7-range-bar-size: 6px;
|
|
14
|
+
--f7-range-bar-border-radius: 6px;
|
|
15
|
+
--f7-range-knob-width: 38px;
|
|
16
|
+
--f7-range-knob-height: 24px;
|
|
22
17
|
--f7-range-knob-color: #fff;
|
|
23
18
|
--f7-range-knob-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
24
19
|
--f7-range-label-size: 24px;
|
|
@@ -27,7 +22,7 @@
|
|
|
27
22
|
--f7-range-label-font-size: 12px;
|
|
28
23
|
--f7-range-label-font-weight: 500;
|
|
29
24
|
--f7-range-label-border-radius: 5px;
|
|
30
|
-
--f7-range-label-padding: 0px
|
|
25
|
+
--f7-range-label-padding: 0px 4px;
|
|
31
26
|
|
|
32
27
|
|
|
33
28
|
--f7-range-scale-text-color: #666;
|
|
@@ -35,12 +30,21 @@
|
|
|
35
30
|
--f7-range-scale-font-size: 12px;
|
|
36
31
|
--f7-range-scale-font-weight: 400;
|
|
37
32
|
--f7-range-scale-label-offset: 4px;
|
|
33
|
+
|
|
34
|
+
.light-vars({
|
|
35
|
+
--f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
|
|
36
|
+
});
|
|
37
|
+
.dark-vars({
|
|
38
|
+
--f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
|
|
39
|
+
});
|
|
38
40
|
});
|
|
39
41
|
.md-vars({
|
|
40
42
|
--f7-range-size: 20px;
|
|
41
|
-
|
|
42
|
-
--f7-range-bar-
|
|
43
|
-
--f7-range-
|
|
43
|
+
|
|
44
|
+
--f7-range-bar-size: 16px;
|
|
45
|
+
--f7-range-bar-border-radius: 16px;
|
|
46
|
+
--f7-range-knob-width: 16px;
|
|
47
|
+
--f7-range-knob-height: 44px;
|
|
44
48
|
--f7-range-knob-box-shadow: none;
|
|
45
49
|
--f7-range-label-size: 26px;
|
|
46
50
|
--f7-range-label-font-weight: normal;
|
|
@@ -54,6 +58,7 @@
|
|
|
54
58
|
--f7-range-scale-label-offset: 4px;
|
|
55
59
|
});
|
|
56
60
|
.md-color-vars({
|
|
61
|
+
--f7-range-bar-bg-color: var(--f7-md-secondary-container);
|
|
57
62
|
--f7-range-knob-color: var(--f7-theme-color);
|
|
58
63
|
--f7-range-label-text-color: var(--f7-md-on-primary);
|
|
59
64
|
--f7-range-label-bg-color: var(--f7-theme-color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px
|
|
1
|
+
:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-size:6px;--f7-range-bar-border-radius:6px;--f7-range-knob-width:38px;--f7-range-knob-height:24px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 4px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.md{--f7-range-size:20px;--f7-range-bar-size:16px;--f7-range-bar-border-radius:16px;--f7-range-knob-width:16px;--f7-range-knob-height:44px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-bar-bg-color:var(--f7-md-secondary-container);--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{left:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-height);width:var(--f7-range-knob-width)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-height)/ 2);margin-left:calc(-1 * var(--f7-range-knob-width)/ 2);left:0}.range-slider-vertical .range-knob-wrap{left:50%;height:var(--f7-range-knob-width);width:var(--f7-range-knob-height);margin-left:calc(-1 * var(--f7-range-knob-height)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-knob{box-sizing:border-box;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-left:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-left:0}.range-slider-horizontal .range-scale-step:last-child{margin-left:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-bar-active{border-radius:inherit}.ios .range-knob{border-radius:var(--f7-range-knob-height);transition-duration:.3s;position:absolute;left:0;top:0;width:100%;height:100%}.ios .range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px}.ios .range-knob::after,.ios .range-knob::before{content:'';position:absolute}.ios .range-knob::before{width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75);left:50%;top:50%;margin-left:-.5px;margin-top:-.5px}.ios .range-knob::after{inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0;width:100%;height:100%;margin:0}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0);z-index:2}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.ios .range-knob-active-state .range-knob{background:0 0;transform:scale(1.4)}.ios .range-knob-active-state .range-knob::before{opacity:1}.ios .range-knob-active-state .range-knob::after{opacity:1}.md .range-knob-wrap{display:flex;align-items:center;justify-content:center}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color;width:4px;height:var(--f7-range-knob-height);display:flex;align-items:center;justify-content:center;border-radius:4px}.md .range-knob-active-state .range-knob{transform:scaleX(.5)}.md .range-slider-vertical .range-knob{width:var(--f7-range-knob-height);height:4px}.md .range-slider-vertical .range-knob-active-state .range-knob{transform:scaleY(.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-bar-active,.md .range-bar-inactive{border-radius:4px}.md .range-slider::after,.md .range-slider::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--f7-range-knob-color);top:calc(50% - 2px);z-index:1;pointer-events:none;transition-duration:.2s}.md .range-slider::before{left:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider::after{right:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider:not(.range-slider-dual)::before{content:none;display:none}.md .range-slider:has(.range-knob-active-state)::after,.md .range-slider:has(.range-knob-active-state)::before{transform:scale(.5)}.md .range-slider.range-slider-vertical::after,.md .range-slider.range-slider-vertical::before{top:auto;left:calc(50% - 2px);right:auto}.md .range-slider.range-slider-vertical::before{bottom:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider.range-slider-vertical::after{top:calc(var(--f7-range-knob-width)/ 2 - 2px)}
|
|
@@ -39,8 +39,10 @@ export namespace Range {
|
|
|
39
39
|
scaleSubSteps?: number;
|
|
40
40
|
/** Method must return formatted scale value. As an argument it receives currect scale step value. This method will be called as for each scale step. */
|
|
41
41
|
formatScaleLabel?: (value: number) => string;
|
|
42
|
-
/** Limit knob position to the size of range bar. By default enabled
|
|
42
|
+
/** Limit knob position to the size of range bar. By default enabled */
|
|
43
43
|
limitKnobPosition?: boolean;
|
|
44
|
+
/** Limit bar position to the size of range knob. By default enabled for MD theme */
|
|
45
|
+
limitBarPosition?: boolean;
|
|
44
46
|
/** Object with events handlers.. */
|
|
45
47
|
on?: {
|
|
46
48
|
[event in keyof Events]?: Events[event];
|
|
@@ -64,55 +64,42 @@
|
|
|
64
64
|
.range-knob-wrap {
|
|
65
65
|
z-index: 20;
|
|
66
66
|
position: absolute;
|
|
67
|
-
height: var(--f7-range-knob-
|
|
68
|
-
width: var(--f7-range-knob-
|
|
67
|
+
height: var(--f7-range-knob-height);
|
|
68
|
+
width: var(--f7-range-knob-width);
|
|
69
69
|
|
|
70
70
|
.range-slider-horizontal & {
|
|
71
71
|
top: 50%;
|
|
72
|
-
margin-top: calc(-1 * var(--f7-range-knob-
|
|
72
|
+
margin-top: calc(-1 * var(--f7-range-knob-height) / 2);
|
|
73
73
|
.ltr({
|
|
74
|
-
margin-left: calc(-1 * var(--f7-range-knob-
|
|
74
|
+
margin-left: calc(-1 * var(--f7-range-knob-width) / 2);
|
|
75
75
|
left: 0;
|
|
76
76
|
});
|
|
77
77
|
.rtl({
|
|
78
|
-
margin-right: calc(-1 * var(--f7-range-knob-
|
|
78
|
+
margin-right: calc(-1 * var(--f7-range-knob-width) / 2);
|
|
79
79
|
right: 0;
|
|
80
80
|
});
|
|
81
81
|
}
|
|
82
82
|
.range-slider-vertical & {
|
|
83
83
|
left: 50%;
|
|
84
|
-
|
|
84
|
+
height: var(--f7-range-knob-width);
|
|
85
|
+
width: var(--f7-range-knob-height);
|
|
86
|
+
margin-left: calc(-1 * var(--f7-range-knob-height) / 2);
|
|
85
87
|
bottom: 0;
|
|
86
|
-
margin-bottom: calc(-1 * var(--f7-range-knob-
|
|
88
|
+
margin-bottom: calc(-1 * var(--f7-range-knob-width) / 2);
|
|
87
89
|
}
|
|
88
90
|
.range-slider-vertical-reversed & {
|
|
89
91
|
bottom: auto;
|
|
90
92
|
top: 0;
|
|
91
93
|
margin-bottom: 0;
|
|
92
|
-
margin-top: calc(-1 * var(--f7-range-knob-
|
|
94
|
+
margin-top: calc(-1 * var(--f7-range-knob-width) / 2);
|
|
93
95
|
}
|
|
94
96
|
}
|
|
95
97
|
.range-knob {
|
|
96
98
|
box-sizing: border-box;
|
|
97
|
-
|
|
98
|
-
position: absolute;
|
|
99
|
-
left: 0;
|
|
100
|
-
top: 0;
|
|
101
|
-
width: 100%;
|
|
102
|
-
height: 100%;
|
|
99
|
+
|
|
103
100
|
z-index: 1;
|
|
104
101
|
background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
|
|
105
102
|
box-shadow: var(--f7-range-knob-box-shadow);
|
|
106
|
-
&:after {
|
|
107
|
-
content: '';
|
|
108
|
-
position: absolute;
|
|
109
|
-
left: 50%;
|
|
110
|
-
top: 50%;
|
|
111
|
-
width: 44px;
|
|
112
|
-
height: 44px;
|
|
113
|
-
margin-left: -22px;
|
|
114
|
-
margin-top: -22px;
|
|
115
|
-
}
|
|
116
103
|
}
|
|
117
104
|
.range-knob-label {
|
|
118
105
|
position: absolute;
|
|
@@ -1,2 +1,39 @@
|
|
|
1
1
|
.ios {
|
|
2
|
+
.swipeout-actions-right {
|
|
3
|
+
right: 0%;
|
|
4
|
+
}
|
|
5
|
+
.swipeout-actions-left {
|
|
6
|
+
left: 0%;
|
|
7
|
+
}
|
|
8
|
+
.swipeout-actions-left,
|
|
9
|
+
.swipeout-actions-right {
|
|
10
|
+
padding: 0 10px;
|
|
11
|
+
gap: 10px;
|
|
12
|
+
align-items: center;
|
|
13
|
+
> a,
|
|
14
|
+
> button,
|
|
15
|
+
> span,
|
|
16
|
+
> div {
|
|
17
|
+
transform: scale(0);
|
|
18
|
+
padding: var(--f7-swipeout-button-padding-vertical)
|
|
19
|
+
var(--f7-swipeout-button-padding-horizontal);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
.swipeout-opened,
|
|
23
|
+
.swipeout-active {
|
|
24
|
+
.swipeout-content {
|
|
25
|
+
background-color: var(--f7-swipeout-active-bg-color);
|
|
26
|
+
border-radius: var(--f7-swipeout-active-border-radius);
|
|
27
|
+
}
|
|
28
|
+
.item-content {
|
|
29
|
+
border-radius: var(--f7-swipeout-active-border-radius);
|
|
30
|
+
}
|
|
31
|
+
.swipeout-content .item-inner::after {
|
|
32
|
+
opacity: 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
.swipeout-overswipe {
|
|
36
|
+
transition-duration: 200ms;
|
|
37
|
+
transition-property: transform, left, width, margin-left, margin-right;
|
|
38
|
+
}
|
|
2
39
|
}
|
|
@@ -1,2 +1,58 @@
|
|
|
1
1
|
.md {
|
|
2
|
+
.swipeout-actions-left,
|
|
3
|
+
.swipeout-actions-right {
|
|
4
|
+
> a,
|
|
5
|
+
> button,
|
|
6
|
+
> span,
|
|
7
|
+
> div {
|
|
8
|
+
&:after {
|
|
9
|
+
content: '';
|
|
10
|
+
pointer-events: none;
|
|
11
|
+
position: absolute;
|
|
12
|
+
top: 0;
|
|
13
|
+
width: 600%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
background: inherit;
|
|
16
|
+
z-index: -1;
|
|
17
|
+
transform: translate3d(0, 0, 0);
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
.swipeout-actions-right {
|
|
23
|
+
right: 0%;
|
|
24
|
+
transform: translateX(calc(100% + 1px));
|
|
25
|
+
> a,
|
|
26
|
+
> button,
|
|
27
|
+
> span,
|
|
28
|
+
> div {
|
|
29
|
+
&:after {
|
|
30
|
+
left: 100%;
|
|
31
|
+
}
|
|
32
|
+
&:last-child {
|
|
33
|
+
padding-right: calc(
|
|
34
|
+
var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right)
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
.swipeout-actions-left {
|
|
40
|
+
left: 0%;
|
|
41
|
+
transform: translateX(calc(-100% - 1px));
|
|
42
|
+
> a,
|
|
43
|
+
> button,
|
|
44
|
+
> span,
|
|
45
|
+
> div {
|
|
46
|
+
&:after {
|
|
47
|
+
right: 100%;
|
|
48
|
+
}
|
|
49
|
+
&:first-child {
|
|
50
|
+
padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.swipeout-overswipe {
|
|
56
|
+
transition-property: left;
|
|
57
|
+
}
|
|
2
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-
|
|
1
|
+
:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-border-radius:48px;--f7-swipeout-button-padding-vertical:10px;--f7-swipeout-button-padding-horizontal:16px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit;--f7-swipeout-active-border-radius:16px;--f7-swipeout-active-bg-color:#eee}.ios .dark,.ios.dark{--f7-swipeout-active-bg-color:#2c2c2e}.md{--f7-swipeout-button-border-radius:0px;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-content .item-inner::after{transition-duration:.3s;transition-property:transform,left,background-color,border-radius,opacity}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left,width,margin-left,margin-right}.swipeout-transitioning:not(.swipeout-opened) .swipeout-content{transition-delay:0s,0s,0.3s,0.3s,0s}.list li:has( + li:is(.swipeout-opened,.swipeout-active)) .item-inner::after{opacity:0;transition-duration:.3s}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{box-sizing:border-box;border-radius:var(--f7-swipeout-button-border-radius);color:var(--f7-swipeout-button-text-color);background:var(--f7-swipeout-button-bg-color);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}.ios .swipeout-actions-right{right:0%}.ios .swipeout-actions-left{left:0%}.ios .swipeout-actions-left,.ios .swipeout-actions-right{padding:0 10px;gap:10px;align-items:center}.ios .swipeout-actions-left>a,.ios .swipeout-actions-left>button,.ios .swipeout-actions-left>div,.ios .swipeout-actions-left>span,.ios .swipeout-actions-right>a,.ios .swipeout-actions-right>button,.ios .swipeout-actions-right>div,.ios .swipeout-actions-right>span{transform:scale(0);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal)}.ios .swipeout-active .swipeout-content,.ios .swipeout-opened .swipeout-content{background-color:var(--f7-swipeout-active-bg-color);border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .item-content,.ios .swipeout-opened .item-content{border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .swipeout-content .item-inner::after,.ios .swipeout-opened .swipeout-content .item-inner::after{opacity:0}.ios .swipeout-overswipe{transition-duration:.2s;transition-property:transform,left,width,margin-left,margin-right}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after,.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.md .swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{left:100%}.md .swipeout-actions-right>a:last-child,.md .swipeout-actions-right>button:last-child,.md .swipeout-actions-right>div:last-child,.md .swipeout-actions-right>span:last-child{padding-right:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right))}.md .swipeout-actions-left{left:0%;transform:translateX(calc(-100% - 1px))}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after{right:100%}.md .swipeout-actions-left>a:first-child,.md .swipeout-actions-left>button:first-child,.md .swipeout-actions-left>div:first-child,.md .swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.md .swipeout-overswipe{transition-property:left}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--f7-swipeout-delete-button-bg-color: #ff3b30;
|
|
3
3
|
--f7-swipeout-button-text-color: #fff;
|
|
4
|
-
|
|
4
|
+
|
|
5
5
|
.light-vars({
|
|
6
6
|
--f7-swipeout-button-bg-color: rgba(0,0,0,0.22);
|
|
7
7
|
});
|
|
@@ -10,11 +10,22 @@
|
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
.ios-vars({
|
|
13
|
-
--f7-swipeout-button-
|
|
13
|
+
--f7-swipeout-button-border-radius: 48px;
|
|
14
|
+
--f7-swipeout-button-padding-vertical: 10px;
|
|
15
|
+
--f7-swipeout-button-padding-horizontal: 16px;
|
|
14
16
|
--f7-swipeout-button-font-size: inherit;
|
|
15
17
|
--f7-swipeout-button-font-weight: inherit;
|
|
18
|
+
--f7-swipeout-active-border-radius: 16px;
|
|
19
|
+
.light-vars({
|
|
20
|
+
--f7-swipeout-active-bg-color: #eee;
|
|
21
|
+
});
|
|
22
|
+
.dark-vars({
|
|
23
|
+
--f7-swipeout-active-bg-color: #2c2c2e;
|
|
24
|
+
});
|
|
16
25
|
});
|
|
17
26
|
.md-vars({
|
|
27
|
+
--f7-swipeout-button-border-radius: 0px;
|
|
28
|
+
--f7-swipeout-button-padding-vertical: 0px;
|
|
18
29
|
--f7-swipeout-button-padding-horizontal: 24px;
|
|
19
30
|
--f7-swipeout-button-font-size: 14px;
|
|
20
31
|
--f7-swipeout-button-font-weight: 500;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-
|
|
1
|
+
:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-border-radius:48px;--f7-swipeout-button-padding-vertical:10px;--f7-swipeout-button-padding-horizontal:16px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit;--f7-swipeout-active-border-radius:16px;--f7-swipeout-active-bg-color:#eee}.ios .dark,.ios.dark{--f7-swipeout-active-bg-color:#2c2c2e}.md{--f7-swipeout-button-border-radius:0px;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-content .item-inner::after{transition-duration:.3s;transition-property:transform,left,background-color,border-radius,opacity}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left,width,margin-left,margin-right}.swipeout-transitioning:not(.swipeout-opened) .swipeout-content{transition-delay:0s,0s,0.3s,0.3s,0s}.list li:has( + li:is(.swipeout-opened,.swipeout-active)) .item-inner::after{opacity:0;transition-duration:.3s}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{box-sizing:border-box;border-radius:var(--f7-swipeout-button-border-radius);color:var(--f7-swipeout-button-text-color);background:var(--f7-swipeout-button-bg-color);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}.ios .swipeout-actions-right{right:0%}.ios .swipeout-actions-left{left:0%}.ios .swipeout-actions-left,.ios .swipeout-actions-right{padding:0 10px;gap:10px;align-items:center}.ios .swipeout-actions-left>a,.ios .swipeout-actions-left>button,.ios .swipeout-actions-left>div,.ios .swipeout-actions-left>span,.ios .swipeout-actions-right>a,.ios .swipeout-actions-right>button,.ios .swipeout-actions-right>div,.ios .swipeout-actions-right>span{transform:scale(0);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal)}.ios .swipeout-active .swipeout-content,.ios .swipeout-opened .swipeout-content{background-color:var(--f7-swipeout-active-bg-color);border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .item-content,.ios .swipeout-opened .item-content{border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .swipeout-content .item-inner::after,.ios .swipeout-opened .swipeout-content .item-inner::after{opacity:0}.ios .swipeout-overswipe{transition-duration:.2s;transition-property:transform,left,width,margin-left,margin-right}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after,.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.md .swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{left:100%}.md .swipeout-actions-right>a:last-child,.md .swipeout-actions-right>button:last-child,.md .swipeout-actions-right>div:last-child,.md .swipeout-actions-right>span:last-child{padding-right:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right))}.md .swipeout-actions-left{left:0%;transform:translateX(calc(-100% - 1px))}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after{right:100%}.md .swipeout-actions-left>a:first-child,.md .swipeout-actions-left>button:first-child,.md .swipeout-actions-left>div:first-child,.md .swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.md .swipeout-overswipe{transition-property:left}
|