@xenknight/framework7 0.0.2 → 0.0.5
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/card/card-rtl.css +1 -1
- package/components/card/card-vars.less +5 -5
- package/components/card/card.css +1 -1
- package/components/notification/notification-rtl.css +1 -1
- package/components/notification/notification.css +1 -1
- package/components/notification/notification.less +0 -5
- package/components/page/page-ios.less +4 -4
- package/components/page/page-md.less +2 -2
- 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 +136 -93
- package/framework7-bundle-rtl.min.css +5 -5
- package/framework7-bundle.css +136 -93
- package/framework7-bundle.esm.js +2 -2
- package/framework7-bundle.js +16 -11
- 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 +38 -6
- package/framework7-rtl.min.css +3 -3
- package/framework7.css +38 -6
- package/framework7.esm.js +2 -2
- package/framework7.less +2 -2
- package/framework7.min.css +3 -3
- package/less/mixins.less +8 -0
- package/package.json +1 -1
|
@@ -1,69 +1,87 @@
|
|
|
1
1
|
.ios {
|
|
2
2
|
.toggle {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
--f7-toggle-knob-tx: 0px;
|
|
4
|
+
&::before {
|
|
5
|
+
content: '';
|
|
6
|
+
border-radius: inherit;
|
|
7
|
+
inset: 0;
|
|
8
|
+
position: absolute;
|
|
9
|
+
background: var(--f7-toggle-inactive-border-color);
|
|
10
|
+
transition-duration: 300ms;
|
|
11
|
+
z-index: 0;
|
|
12
|
+
}
|
|
13
|
+
&::after {
|
|
14
|
+
content: '';
|
|
15
|
+
position: absolute;
|
|
16
|
+
left: 0;
|
|
17
|
+
transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
|
|
18
|
+
|
|
19
|
+
top: 0;
|
|
20
|
+
width: var(--f7-toggle-height);
|
|
21
|
+
height: var(--f7-toggle-height);
|
|
22
|
+
border-radius: var(--f7-toggle-height);
|
|
23
|
+
background: var(--f7-toggle-inactive-border-color);
|
|
24
|
+
transition-duration: 300ms;
|
|
25
|
+
z-index: 0;
|
|
26
|
+
}
|
|
27
|
+
&:has(input[type='checkbox']:checked) {
|
|
28
|
+
--f7-toggle-knob-tx: calc(var(--f7-toggle-width) - 38px - 4px);
|
|
29
|
+
&::before {
|
|
7
30
|
background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
|
|
8
|
-
transform: scale(0);
|
|
9
31
|
}
|
|
10
|
-
|
|
11
|
-
background: var(--f7-toggle-active-
|
|
12
|
-
|
|
13
|
-
transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
|
|
14
|
-
});
|
|
15
|
-
.rtl({
|
|
16
|
-
transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
|
|
17
|
-
});
|
|
32
|
+
&::after {
|
|
33
|
+
background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
|
|
34
|
+
transform: translateX(0);
|
|
18
35
|
}
|
|
19
36
|
}
|
|
20
37
|
}
|
|
21
38
|
.toggle-icon {
|
|
22
|
-
background: var(--f7-toggle-
|
|
23
|
-
|
|
39
|
+
background: var(--f7-toggle-inactive-knob-bg-color);
|
|
40
|
+
height: calc(var(--f7-toggle-height) - 4px);
|
|
41
|
+
width: 38px;
|
|
42
|
+
top: 2px;
|
|
43
|
+
.ltr({ left: 2px; });
|
|
44
|
+
.rtl({ right: 2px; });
|
|
45
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
46
|
+
border-radius: calc(var(--f7-toggle-height) - 4px);
|
|
47
|
+
transition-duration: 300ms;
|
|
48
|
+
transform: translateX(var(--f7-toggle-knob-tx)) scale(1);
|
|
49
|
+
position: relative;
|
|
50
|
+
z-index: 1;
|
|
51
|
+
transform-origin: center;
|
|
52
|
+
&::before {
|
|
53
|
+
content: '';
|
|
24
54
|
position: absolute;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
border-radius: var(--f7-toggle-height);
|
|
31
|
-
box-sizing: border-box;
|
|
32
|
-
background: var(--f7-toggle-inactive-bg-color);
|
|
33
|
-
z-index: 1;
|
|
55
|
+
left: 50%;
|
|
56
|
+
top: 50%;
|
|
57
|
+
width: 1px;
|
|
58
|
+
height: 1px;
|
|
59
|
+
opacity: 0;
|
|
34
60
|
transition-duration: 300ms;
|
|
35
|
-
|
|
61
|
+
box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
|
|
36
62
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
border-radius: calc(var(--f7-toggle-height) - 4px);
|
|
63
|
+
&::after {
|
|
64
|
+
content: '';
|
|
65
|
+
position: absolute;
|
|
66
|
+
inset: 0;
|
|
67
|
+
border-radius: inherit;
|
|
68
|
+
box-shadow: var(--f7-glass-shadow-thumb);
|
|
69
|
+
transition-duration: 300ms;
|
|
70
|
+
opacity: 0;
|
|
46
71
|
}
|
|
47
72
|
}
|
|
48
73
|
.toggle-active-state {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
transform: scale(0);
|
|
52
|
-
}
|
|
74
|
+
&::before {
|
|
75
|
+
transform: scale(0.75);
|
|
53
76
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
77
|
+
.toggle-icon {
|
|
78
|
+
background: transparent;
|
|
79
|
+
transform: translateX(var(--f7-toggle-knob-tx)) scale(1.4);
|
|
80
|
+
&::before {
|
|
81
|
+
opacity: 1;
|
|
57
82
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
&:after {
|
|
61
|
-
.ltr({
|
|
62
|
-
transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
|
|
63
|
-
});
|
|
64
|
-
.rtl({
|
|
65
|
-
transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
|
|
66
|
-
});
|
|
83
|
+
&::after {
|
|
84
|
+
opacity: 1;
|
|
67
85
|
}
|
|
68
86
|
}
|
|
69
87
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ios{--f7-toggle-width:
|
|
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{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{--f7-toggle-knob-tx:0px}.ios .toggle::before{content:'';border-radius:inherit;inset:0;position:absolute;background:var(--f7-toggle-inactive-border-color);transition-duration:.3s;z-index:0}.ios .toggle::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:.3s;z-index:0}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 38px - 4px)}.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{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:translateX(0)}.ios .toggle-icon{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:38px;top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px);transition-duration:.3s;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);position:relative;z-index:1;transform-origin:center}.ios .toggle-icon::before{content:'';position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75)}.ios .toggle-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0}.ios .toggle-active-state::before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:0 0;transform:translateX(var(--f7-toggle-knob-tx)) scale(1.4)}.ios .toggle-active-state .toggle-icon::before{opacity:1}.ios .toggle-active-state .toggle-icon::after{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{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)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ios{--f7-toggle-width:
|
|
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{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{--f7-toggle-knob-tx:0px}.ios .toggle::before{content:'';border-radius:inherit;inset:0;position:absolute;background:var(--f7-toggle-inactive-border-color);transition-duration:.3s;z-index:0}.ios .toggle::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:.3s;z-index:0}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 38px - 4px)}.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{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:translateX(0)}.ios .toggle-icon{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:38px;top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px);transition-duration:.3s;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);position:relative;z-index:1;transform-origin:center}.ios .toggle-icon::before{content:'';position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75)}.ios .toggle-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0}.ios .toggle-active-state::before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:0 0;transform:translateX(var(--f7-toggle-knob-tx)) scale(1.4)}.ios .toggle-active-state .toggle-icon::before{opacity:1}.ios .toggle-active-state .toggle-icon::after{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{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)}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Framework7
|
|
2
|
+
* Framework7 0.0.3
|
|
3
3
|
* Full featured mobile HTML framework for building iOS & Android apps
|
|
4
4
|
* https://framework7.io/
|
|
5
5
|
*
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Released under the MIT License
|
|
9
9
|
*
|
|
10
|
-
* Released on:
|
|
10
|
+
* Released on: December 14, 2025
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
/*====================
|
|
@@ -86,6 +86,21 @@
|
|
|
86
86
|
/*
|
|
87
87
|
--f7-bars-link-color: var(--f7-theme-color);
|
|
88
88
|
*/
|
|
89
|
+
--f7-glass-bg-color: rgba(255, 255, 255, 0.75);
|
|
90
|
+
--f7-glass-shadow: inset -1px -1px 0px -0.5px #ffffff,
|
|
91
|
+
inset 1px 1px 0px -0.5px rgba(255, 255, 255, 1),
|
|
92
|
+
inset 3px 3px 10px -3px #ddd,
|
|
93
|
+
inset -3px -3px 10px -3px #ddd,
|
|
94
|
+
inset 0 0 5px 1px #fff,
|
|
95
|
+
inset 0 0 0 0.5px rgba(0, 0, 0, 0.25),
|
|
96
|
+
inset 0 0 24px 0 rgba(0, 0, 0, 0.1),
|
|
97
|
+
0 0 25px 0 rgba(0, 0, 0, 0.2);
|
|
98
|
+
--f7-glass-shadow-thumb: inset -3px -3px 0px -3.5px #ffffff,
|
|
99
|
+
inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
|
|
100
|
+
inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
|
|
101
|
+
inset 3px 3px 10px -2px #eee,
|
|
102
|
+
inset -3px -3px 10px -2px #eee,
|
|
103
|
+
inset 0 0 5px 1px #fff;
|
|
89
104
|
--f7-bars-text-color: #000;
|
|
90
105
|
--f7-text-color: #000;
|
|
91
106
|
--f7-bars-bg-color: #f7f7f8;
|
|
@@ -94,6 +109,23 @@
|
|
|
94
109
|
}
|
|
95
110
|
.ios .dark,
|
|
96
111
|
.ios.dark {
|
|
112
|
+
--f7-glass-bg-color: rgba(50, 50, 50, 0.5);
|
|
113
|
+
--f7-glass-shadow: inset -2px -2px 0.5px -2.5px rgba(255, 255, 255, 0.4),
|
|
114
|
+
inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.4),
|
|
115
|
+
inset 2px 2px 0.5px -2px #262626,
|
|
116
|
+
inset -2px -2px 0.5px -2px #262626,
|
|
117
|
+
inset 0 0 5px 1px #141414,
|
|
118
|
+
inset 0 0 0 1px rgba(255, 255, 255, 0.15),
|
|
119
|
+
inset 0 0 10px 0 rgba(255, 255, 255, 0.075),
|
|
120
|
+
inset 0 0 24px 0 rgba(255, 255, 255, 0.05),
|
|
121
|
+
0 0 25px 0 rgba(0, 0, 0, 0.15);
|
|
122
|
+
--f7-glass-shadow-thumb: inset 3px 3px 0px -3.5px #ffffff,
|
|
123
|
+
inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
|
|
124
|
+
inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
|
|
125
|
+
inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
|
|
126
|
+
inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
|
|
127
|
+
inset 0px -5px 0px -3.5px rgba(255, 255, 255, 0.25),
|
|
128
|
+
inset 0px -5px 5px rgba(255, 255, 255, 0.25);
|
|
97
129
|
--f7-bars-text-color: #fff;
|
|
98
130
|
--f7-text-color: #fff;
|
|
99
131
|
--f7-bars-bg-color: #121212;
|
|
@@ -427,10 +459,10 @@ html.device-full-viewport body {
|
|
|
427
459
|
z-index: 10000;
|
|
428
460
|
}
|
|
429
461
|
.ios .page-previous {
|
|
430
|
-
transform: translate3d(20%, 0, 0);
|
|
462
|
+
transform: translate3d(20%, 0, 0) scale(0.5);
|
|
431
463
|
}
|
|
432
464
|
.ios .page-next {
|
|
433
|
-
transform: translate3d(-100%, 0, 0);
|
|
465
|
+
transform: translate3d(-100%, 0, 0) scale(1);
|
|
434
466
|
}
|
|
435
467
|
.ios .page-previous .page-opacity-effect {
|
|
436
468
|
opacity: 1;
|
|
@@ -550,11 +582,11 @@ html.device-full-viewport body {
|
|
|
550
582
|
}
|
|
551
583
|
}
|
|
552
584
|
.md .page-previous {
|
|
553
|
-
transform: translate3d(0, -20px, 0);
|
|
585
|
+
transform: translate3d(0, -20px, 0) scale(0.5);
|
|
554
586
|
}
|
|
555
587
|
.md .page-next {
|
|
556
588
|
pointer-events: none;
|
|
557
|
-
transform: translate3d(0, 128px, 0);
|
|
589
|
+
transform: translate3d(0, 128px, 0) scale(0.5);
|
|
558
590
|
opacity: 0;
|
|
559
591
|
}
|
|
560
592
|
.md .page-next.page-next-on-right {
|
|
@@ -6222,15 +6254,15 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
|
|
|
6222
6254
|
}
|
|
6223
6255
|
.ios {
|
|
6224
6256
|
--f7-actions-transition-timing-function: initial;
|
|
6225
|
-
--f7-actions-border-radius:
|
|
6257
|
+
--f7-actions-border-radius: 32px;
|
|
6226
6258
|
/*
|
|
6227
6259
|
--f7-actions-button-text-color: var(--f7-theme-color);
|
|
6228
6260
|
*/
|
|
6229
6261
|
--f7-actions-grid-button-text-color: #757575;
|
|
6230
6262
|
--f7-actions-button-padding: 0px;
|
|
6231
6263
|
--f7-actions-button-text-align: center;
|
|
6232
|
-
--f7-actions-button-height:
|
|
6233
|
-
--f7-actions-button-height-landscape:
|
|
6264
|
+
--f7-actions-button-height: 56px;
|
|
6265
|
+
--f7-actions-button-height-landscape: 56px;
|
|
6234
6266
|
--f7-actions-button-font-size: 20px;
|
|
6235
6267
|
--f7-actions-button-icon-size: 28px;
|
|
6236
6268
|
--f7-actions-button-justify-content: center;
|
|
@@ -6240,8 +6272,7 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
|
|
|
6240
6272
|
--f7-actions-label-justify-content: center;
|
|
6241
6273
|
--f7-actions-group-border-color: transparent;
|
|
6242
6274
|
--f7-actions-group-margin: 8px;
|
|
6243
|
-
--f7-actions-bg-color:
|
|
6244
|
-
--f7-actions-bg-color-rgb: 255, 255, 255;
|
|
6275
|
+
--f7-actions-bg-color: var(--f7-glass-bg-color);
|
|
6245
6276
|
--f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
|
|
6246
6277
|
--f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
|
|
6247
6278
|
--f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
|
|
@@ -6249,8 +6280,6 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
|
|
|
6249
6280
|
}
|
|
6250
6281
|
.ios .dark,
|
|
6251
6282
|
.ios.dark {
|
|
6252
|
-
--f7-actions-bg-color: rgba(45, 45, 45, 0.95);
|
|
6253
|
-
--f7-actions-bg-color-rgb: 45, 45, 45;
|
|
6254
6283
|
--f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
|
|
6255
6284
|
--f7-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
|
|
6256
6285
|
--f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
|
|
@@ -6411,13 +6440,6 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
|
|
|
6411
6440
|
.actions-button[class*='color-'] {
|
|
6412
6441
|
color: var(--f7-theme-color);
|
|
6413
6442
|
}
|
|
6414
|
-
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
|
|
6415
|
-
.ios-translucent-modals .actions-button.active-state {
|
|
6416
|
-
background-color: rgba(var(--f7-actions-button-pressed-bg-color-rgb), 0.8);
|
|
6417
|
-
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
6418
|
-
backdrop-filter: saturate(180%) blur(20px);
|
|
6419
|
-
}
|
|
6420
|
-
}
|
|
6421
6443
|
.actions-button-media {
|
|
6422
6444
|
flex-shrink: 0;
|
|
6423
6445
|
display: flex;
|
|
@@ -6497,20 +6519,15 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
|
|
|
6497
6519
|
height: 1.33em;
|
|
6498
6520
|
font-size: var(--f7-actions-grid-button-font-size);
|
|
6499
6521
|
}
|
|
6522
|
+
.ios .actions-modal {
|
|
6523
|
+
overflow: visible;
|
|
6524
|
+
}
|
|
6500
6525
|
.ios .actions-group {
|
|
6501
6526
|
border-radius: var(--f7-actions-border-radius);
|
|
6502
|
-
}
|
|
6503
|
-
.ios .actions-button,
|
|
6504
|
-
.ios .actions-label {
|
|
6505
6527
|
background: var(--f7-actions-bg-color);
|
|
6506
|
-
|
|
6507
|
-
|
|
6508
|
-
|
|
6509
|
-
.ios-translucent-modals .ios .actions-label {
|
|
6510
|
-
background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
|
|
6511
|
-
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
6512
|
-
backdrop-filter: saturate(180%) blur(20px);
|
|
6513
|
-
}
|
|
6528
|
+
box-shadow: var(--f7-glass-shadow);
|
|
6529
|
+
-webkit-backdrop-filter: saturate(180%) blur(16px);
|
|
6530
|
+
backdrop-filter: saturate(180%) blur(16px);
|
|
6514
6531
|
}
|
|
6515
6532
|
.ios .actions-button:first-child,
|
|
6516
6533
|
.ios .actions-label:first-child {
|
|
@@ -6534,29 +6551,28 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
|
|
|
6534
6551
|
.ios .actions-label.actions-button-strong {
|
|
6535
6552
|
font-weight: 600;
|
|
6536
6553
|
}
|
|
6537
|
-
.ios .actions-grid
|
|
6538
|
-
|
|
6554
|
+
.ios .actions-grid::before {
|
|
6555
|
+
content: '';
|
|
6556
|
+
position: absolute;
|
|
6557
|
+
left: var(--f7-actions-group-margin);
|
|
6558
|
+
right: var(--f7-actions-group-margin);
|
|
6559
|
+
bottom: var(--f7-actions-group-margin);
|
|
6539
6560
|
background: var(--f7-actions-bg-color);
|
|
6540
|
-
|
|
6541
|
-
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
|
|
6542
|
-
.ios-translucent-modals .ios .actions-grid .actions-group {
|
|
6543
|
-
background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
|
|
6544
|
-
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
6545
|
-
backdrop-filter: saturate(180%) blur(20px);
|
|
6546
|
-
}
|
|
6547
|
-
}
|
|
6548
|
-
.ios .actions-grid .actions-group:first-child {
|
|
6549
|
-
border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
|
|
6550
|
-
}
|
|
6551
|
-
.ios .actions-grid .actions-group:last-child {
|
|
6552
|
-
border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
|
|
6553
|
-
}
|
|
6554
|
-
.ios .actions-grid .actions-group:first-child:last-child {
|
|
6561
|
+
top: 0;
|
|
6555
6562
|
border-radius: var(--f7-actions-border-radius);
|
|
6563
|
+
box-shadow: var(--f7-glass-shadow);
|
|
6564
|
+
-webkit-backdrop-filter: saturate(180%) blur(16px);
|
|
6565
|
+
backdrop-filter: saturate(180%) blur(16px);
|
|
6566
|
+
}
|
|
6567
|
+
.ios .actions-grid .actions-group {
|
|
6568
|
+
background: transparent;
|
|
6569
|
+
box-shadow: none;
|
|
6570
|
+
-webkit-backdrop-filter: none;
|
|
6571
|
+
backdrop-filter: none;
|
|
6556
6572
|
}
|
|
6557
6573
|
.ios .actions-grid .actions-button,
|
|
6558
6574
|
.ios .actions-grid .actions-label {
|
|
6559
|
-
border-radius:
|
|
6575
|
+
border-radius: var(--f7-actions-border-radius);
|
|
6560
6576
|
}
|
|
6561
6577
|
.ios .actions-button-media {
|
|
6562
6578
|
margin-left: 16px;
|
|
@@ -9624,19 +9640,19 @@ html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-push.panel
|
|
|
9624
9640
|
--f7-card-expandable-tablet-height: 670px;
|
|
9625
9641
|
}
|
|
9626
9642
|
.ios {
|
|
9627
|
-
--f7-card-border-radius:
|
|
9643
|
+
--f7-card-border-radius: 24px;
|
|
9628
9644
|
--f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
|
|
9629
9645
|
--f7-card-header-font-size: 17px;
|
|
9630
9646
|
--f7-card-header-padding-vertical: 10px;
|
|
9631
|
-
--f7-card-header-min-height:
|
|
9647
|
+
--f7-card-header-min-height: 52px;
|
|
9632
9648
|
--f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
|
|
9633
9649
|
--f7-card-footer-padding-vertical: 10px;
|
|
9634
|
-
--f7-card-footer-min-height:
|
|
9650
|
+
--f7-card-footer-min-height: 52px;
|
|
9635
9651
|
--f7-card-expandable-margin-horizontal: 20px;
|
|
9636
9652
|
--f7-card-expandable-margin-vertical: 30px;
|
|
9637
9653
|
--f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
|
|
9638
|
-
--f7-card-expandable-border-radius:
|
|
9639
|
-
--f7-card-expandable-tablet-border-radius:
|
|
9654
|
+
--f7-card-expandable-border-radius: 24px;
|
|
9655
|
+
--f7-card-expandable-tablet-border-radius: 24px;
|
|
9640
9656
|
--f7-card-expandable-header-font-size: 27px;
|
|
9641
9657
|
--f7-card-expandable-header-font-weight: bold;
|
|
9642
9658
|
--f7-card-text-color: inherit;
|
|
@@ -11286,8 +11302,8 @@ label.item-radio.disabled,
|
|
|
11286
11302
|
}
|
|
11287
11303
|
/* === Toggle === */
|
|
11288
11304
|
.ios {
|
|
11289
|
-
--f7-toggle-width:
|
|
11290
|
-
--f7-toggle-height:
|
|
11305
|
+
--f7-toggle-width: 64px;
|
|
11306
|
+
--f7-toggle-height: 28px;
|
|
11291
11307
|
/*
|
|
11292
11308
|
--f7-toggle-active-bg-color: var(--f7-theme-color);
|
|
11293
11309
|
*/
|
|
@@ -11360,52 +11376,86 @@ label.item-radio.disabled,
|
|
|
11360
11376
|
transition-duration: 300ms;
|
|
11361
11377
|
}
|
|
11362
11378
|
.ios .toggle {
|
|
11379
|
+
--f7-toggle-knob-tx: 0px;
|
|
11380
|
+
}
|
|
11381
|
+
.ios .toggle::before {
|
|
11382
|
+
content: '';
|
|
11383
|
+
border-radius: inherit;
|
|
11384
|
+
inset: 0;
|
|
11385
|
+
position: absolute;
|
|
11386
|
+
background: var(--f7-toggle-inactive-border-color);
|
|
11387
|
+
transition-duration: 300ms;
|
|
11388
|
+
z-index: 0;
|
|
11389
|
+
}
|
|
11390
|
+
.ios .toggle::after {
|
|
11391
|
+
content: '';
|
|
11392
|
+
position: absolute;
|
|
11393
|
+
left: 0;
|
|
11394
|
+
transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
|
|
11395
|
+
top: 0;
|
|
11396
|
+
width: var(--f7-toggle-height);
|
|
11397
|
+
height: var(--f7-toggle-height);
|
|
11398
|
+
border-radius: var(--f7-toggle-height);
|
|
11363
11399
|
background: var(--f7-toggle-inactive-border-color);
|
|
11400
|
+
transition-duration: 300ms;
|
|
11401
|
+
z-index: 0;
|
|
11364
11402
|
}
|
|
11365
|
-
.ios .toggle
|
|
11366
|
-
|
|
11403
|
+
.ios .toggle:has(input[type='checkbox']:checked) {
|
|
11404
|
+
--f7-toggle-knob-tx: calc(var(--f7-toggle-width) - 38px - 4px);
|
|
11367
11405
|
}
|
|
11368
|
-
.ios .toggle
|
|
11406
|
+
.ios .toggle:has(input[type='checkbox']:checked)::before {
|
|
11369
11407
|
background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
|
|
11370
|
-
transform: scale(0);
|
|
11371
11408
|
}
|
|
11372
|
-
.ios .toggle
|
|
11373
|
-
background: var(--f7-toggle-active-
|
|
11374
|
-
transform: translateX(
|
|
11409
|
+
.ios .toggle:has(input[type='checkbox']:checked)::after {
|
|
11410
|
+
background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
|
|
11411
|
+
transform: translateX(0);
|
|
11375
11412
|
}
|
|
11376
11413
|
.ios .toggle-icon {
|
|
11377
|
-
background: var(--f7-toggle-border-color);
|
|
11378
|
-
}
|
|
11379
|
-
.ios .toggle-icon:before {
|
|
11380
|
-
position: absolute;
|
|
11381
|
-
right: 2px;
|
|
11382
|
-
top: 2px;
|
|
11383
|
-
width: calc(var(--f7-toggle-width) - 4px);
|
|
11384
|
-
height: calc(var(--f7-toggle-height) - 4px);
|
|
11385
|
-
border-radius: var(--f7-toggle-height);
|
|
11386
|
-
box-sizing: border-box;
|
|
11387
|
-
background: var(--f7-toggle-inactive-bg-color);
|
|
11388
|
-
z-index: 1;
|
|
11389
|
-
transition-duration: 300ms;
|
|
11390
|
-
transform: scale(1);
|
|
11391
|
-
}
|
|
11392
|
-
.ios .toggle-icon:after {
|
|
11393
11414
|
background: var(--f7-toggle-inactive-knob-bg-color);
|
|
11394
11415
|
height: calc(var(--f7-toggle-height) - 4px);
|
|
11395
|
-
width:
|
|
11416
|
+
width: 38px;
|
|
11396
11417
|
top: 2px;
|
|
11397
11418
|
right: 2px;
|
|
11398
11419
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
11399
11420
|
border-radius: calc(var(--f7-toggle-height) - 4px);
|
|
11421
|
+
transition-duration: 300ms;
|
|
11422
|
+
transform: translateX(var(--f7-toggle-knob-tx)) scale(1);
|
|
11423
|
+
position: relative;
|
|
11424
|
+
z-index: 1;
|
|
11425
|
+
transform-origin: center;
|
|
11400
11426
|
}
|
|
11401
|
-
.ios .toggle-
|
|
11402
|
-
|
|
11427
|
+
.ios .toggle-icon::before {
|
|
11428
|
+
content: '';
|
|
11429
|
+
position: absolute;
|
|
11430
|
+
left: 50%;
|
|
11431
|
+
top: 50%;
|
|
11432
|
+
width: 1px;
|
|
11433
|
+
height: 1px;
|
|
11434
|
+
opacity: 0;
|
|
11435
|
+
transition-duration: 300ms;
|
|
11436
|
+
box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
|
|
11403
11437
|
}
|
|
11404
|
-
.ios .toggle-
|
|
11405
|
-
|
|
11438
|
+
.ios .toggle-icon::after {
|
|
11439
|
+
content: '';
|
|
11440
|
+
position: absolute;
|
|
11441
|
+
inset: 0;
|
|
11442
|
+
border-radius: inherit;
|
|
11443
|
+
box-shadow: var(--f7-glass-shadow-thumb);
|
|
11444
|
+
transition-duration: 300ms;
|
|
11445
|
+
opacity: 0;
|
|
11446
|
+
}
|
|
11447
|
+
.ios .toggle-active-state::before {
|
|
11448
|
+
transform: scale(0.75);
|
|
11449
|
+
}
|
|
11450
|
+
.ios .toggle-active-state .toggle-icon {
|
|
11451
|
+
background: transparent;
|
|
11452
|
+
transform: translateX(var(--f7-toggle-knob-tx)) scale(1.4);
|
|
11453
|
+
}
|
|
11454
|
+
.ios .toggle-active-state .toggle-icon::before {
|
|
11455
|
+
opacity: 1;
|
|
11406
11456
|
}
|
|
11407
|
-
.ios .toggle-active-state
|
|
11408
|
-
|
|
11457
|
+
.ios .toggle-active-state .toggle-icon::after {
|
|
11458
|
+
opacity: 1;
|
|
11409
11459
|
}
|
|
11410
11460
|
.md .toggle input[type='checkbox']:checked + .toggle-icon {
|
|
11411
11461
|
background: var(--f7-toggle-active-bg-color);
|
|
@@ -17662,13 +17712,6 @@ button.swiper-pagination-bullet {
|
|
|
17662
17712
|
backdrop-filter: saturate(180%) blur(20px);
|
|
17663
17713
|
}
|
|
17664
17714
|
}
|
|
17665
|
-
@media (min-width: 568px) {
|
|
17666
|
-
.notification {
|
|
17667
|
-
left: 50%;
|
|
17668
|
-
width: var(--f7-notification-max-width);
|
|
17669
|
-
margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
|
|
17670
|
-
}
|
|
17671
|
-
}
|
|
17672
17715
|
.notification-title {
|
|
17673
17716
|
color: var(--f7-notification-title-color, var(--f7-theme-color));
|
|
17674
17717
|
font-size: var(--f7-notification-title-font-size);
|