@xenknight/framework7 0.0.3 → 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/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 -86
- package/framework7-bundle-rtl.min.css +5 -5
- package/framework7-bundle.css +136 -86
- 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,11 +1,15 @@
|
|
|
1
1
|
.ios {
|
|
2
|
+
.actions-modal {
|
|
3
|
+
overflow: visible;
|
|
4
|
+
}
|
|
2
5
|
.actions-group {
|
|
3
6
|
border-radius: var(--f7-actions-border-radius);
|
|
7
|
+
background: var(--f7-actions-bg-color);
|
|
8
|
+
box-shadow: var(--f7-glass-shadow);
|
|
9
|
+
.ios-glass-backdrop();
|
|
4
10
|
}
|
|
5
11
|
.actions-button,
|
|
6
12
|
.actions-label {
|
|
7
|
-
background: var(--f7-actions-bg-color);
|
|
8
|
-
.ios-translucent-modals(var(--f7-actions-bg-color-rgb));
|
|
9
13
|
&:first-child {
|
|
10
14
|
border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
|
|
11
15
|
}
|
|
@@ -22,23 +26,26 @@
|
|
|
22
26
|
}
|
|
23
27
|
}
|
|
24
28
|
.actions-grid {
|
|
25
|
-
|
|
26
|
-
|
|
29
|
+
&::before {
|
|
30
|
+
content: '';
|
|
31
|
+
position: absolute;
|
|
32
|
+
left: var(--f7-actions-group-margin);
|
|
33
|
+
right: var(--f7-actions-group-margin);
|
|
34
|
+
bottom: var(--f7-actions-group-margin);
|
|
27
35
|
background: var(--f7-actions-bg-color);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
36
|
+
top: 0;
|
|
37
|
+
border-radius: var(--f7-actions-border-radius);
|
|
38
|
+
box-shadow: var(--f7-glass-shadow);
|
|
39
|
+
.ios-glass-backdrop();
|
|
40
|
+
}
|
|
41
|
+
.actions-group {
|
|
42
|
+
background: transparent;
|
|
43
|
+
box-shadow: none;
|
|
44
|
+
backdrop-filter: none;
|
|
38
45
|
}
|
|
39
46
|
.actions-button,
|
|
40
47
|
.actions-label {
|
|
41
|
-
border-radius:
|
|
48
|
+
border-radius: var(--f7-actions-border-radius);
|
|
42
49
|
}
|
|
43
50
|
}
|
|
44
51
|
.actions-button-media {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:
|
|
1
|
+
:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:32px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:56px;--f7-actions-button-height-landscape:56px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:var(--f7-glass-bg-color);--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-modal{overflow:visible}.ios .actions-group{border-radius:var(--f7-actions-border-radius);background:var(--f7-actions-bg-color);box-shadow:var(--f7-glass-shadow);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid::before{content:'';position:absolute;left:var(--f7-actions-group-margin);right:var(--f7-actions-group-margin);bottom:var(--f7-actions-group-margin);background:var(--f7-actions-bg-color);top:0;border-radius:var(--f7-actions-border-radius);box-shadow:var(--f7-glass-shadow);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-grid .actions-group{background:0 0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:var(--f7-actions-border-radius)}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
}
|
|
5
5
|
.ios-vars({
|
|
6
6
|
--f7-actions-transition-timing-function: initial;
|
|
7
|
-
--f7-actions-border-radius:
|
|
7
|
+
--f7-actions-border-radius: 32px;
|
|
8
8
|
/*
|
|
9
9
|
--f7-actions-button-text-color: var(--f7-theme-color);
|
|
10
10
|
*/
|
|
11
11
|
--f7-actions-grid-button-text-color: #757575;
|
|
12
12
|
--f7-actions-button-padding: 0px;
|
|
13
13
|
--f7-actions-button-text-align: center;
|
|
14
|
-
--f7-actions-button-height:
|
|
15
|
-
--f7-actions-button-height-landscape:
|
|
14
|
+
--f7-actions-button-height: 56px;
|
|
15
|
+
--f7-actions-button-height-landscape: 56px;
|
|
16
16
|
--f7-actions-button-font-size: 20px;
|
|
17
17
|
--f7-actions-button-icon-size: 28px;
|
|
18
18
|
--f7-actions-button-justify-content: center;
|
|
@@ -22,17 +22,14 @@
|
|
|
22
22
|
--f7-actions-label-justify-content: center;
|
|
23
23
|
--f7-actions-group-border-color: transparent;
|
|
24
24
|
--f7-actions-group-margin: 8px;
|
|
25
|
+
--f7-actions-bg-color: var(--f7-glass-bg-color);
|
|
25
26
|
.light-vars({
|
|
26
|
-
--f7-actions-bg-color: rgba(255,255,255,0.95);
|
|
27
|
-
--f7-actions-bg-color-rgb: 255, 255, 255;
|
|
28
27
|
--f7-actions-button-border-color: rgba(0,0,0,0.2);
|
|
29
28
|
--f7-actions-button-pressed-bg-color: rgba(230,230,230,0.9);
|
|
30
29
|
--f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
|
|
31
30
|
--f7-actions-label-text-color: #8a8a8a;
|
|
32
31
|
});
|
|
33
32
|
.dark-vars({
|
|
34
|
-
--f7-actions-bg-color: rgba(45,45,45,0.95);
|
|
35
|
-
--f7-actions-bg-color-rgb: 45, 45, 45;
|
|
36
33
|
--f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
|
|
37
34
|
--f7-actions-button-pressed-bg-color: rgba(50,50,50,0.9);
|
|
38
35
|
--f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:
|
|
1
|
+
:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:32px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:56px;--f7-actions-button-height-landscape:56px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:var(--f7-glass-bg-color);--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-modal{overflow:visible}.ios .actions-group{border-radius:var(--f7-actions-border-radius);background:var(--f7-actions-bg-color);box-shadow:var(--f7-glass-shadow);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid::before{content:'';position:absolute;left:var(--f7-actions-group-margin);right:var(--f7-actions-group-margin);bottom:var(--f7-actions-group-margin);background:var(--f7-actions-bg-color);top:0;border-radius:var(--f7-actions-border-radius);box-shadow:var(--f7-glass-shadow);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-grid .actions-group{background:0 0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:var(--f7-actions-border-radius)}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}
|
|
@@ -63,6 +63,8 @@ export interface Framework7Parameters {
|
|
|
63
63
|
iosTranslucentModals?: boolean;
|
|
64
64
|
/** Object with app colors where `primary` color (key) defines main app color theme */
|
|
65
65
|
colors?: object;
|
|
66
|
+
/** Material color scheme. Can be `default`, `vibrant`, `monochrome` or `monochrome-vibrant` */
|
|
67
|
+
mdColorScheme?: string;
|
|
66
68
|
/** userAgent string. Required for browser/device detection when rendered on server-side */
|
|
67
69
|
userAgent?: string;
|
|
68
70
|
/** Required for current route detection when rendered on server-side */
|
|
@@ -51,6 +51,7 @@ class Framework7 extends Framework7Class {
|
|
|
51
51
|
componentUrl: undefined,
|
|
52
52
|
userAgent: null,
|
|
53
53
|
url: null,
|
|
54
|
+
mdColorScheme: 'default',
|
|
54
55
|
colors: {
|
|
55
56
|
primary: '#007aff',
|
|
56
57
|
red: '#ff3b30',
|
|
@@ -92,6 +93,7 @@ class Framework7 extends Framework7Class {
|
|
|
92
93
|
passedParams,
|
|
93
94
|
online: w.navigator.onLine,
|
|
94
95
|
colors: app.params.colors,
|
|
96
|
+
mdColorScheme: app.params.mdColorScheme || 'default',
|
|
95
97
|
darkMode: app.params.darkMode
|
|
96
98
|
});
|
|
97
99
|
if (params.store) app.params.store = params.store;
|
|
@@ -121,10 +123,16 @@ class Framework7 extends Framework7Class {
|
|
|
121
123
|
// Return app instance
|
|
122
124
|
return app;
|
|
123
125
|
}
|
|
124
|
-
setColorTheme(color) {
|
|
126
|
+
setColorTheme(color, mdColorScheme) {
|
|
125
127
|
if (!color) return;
|
|
126
128
|
const app = this;
|
|
127
129
|
app.colors.primary = color;
|
|
130
|
+
app.mdColorScheme = mdColorScheme || app.mdColorScheme;
|
|
131
|
+
app.setColors();
|
|
132
|
+
}
|
|
133
|
+
setMdColorScheme(mdColorScheme) {
|
|
134
|
+
const app = this;
|
|
135
|
+
app.mdColorScheme = mdColorScheme || app.mdColorScheme;
|
|
128
136
|
app.setColors();
|
|
129
137
|
}
|
|
130
138
|
setColors() {
|
|
@@ -134,7 +142,7 @@ class Framework7 extends Framework7Class {
|
|
|
134
142
|
app.colorsStyleEl = document.createElement('style');
|
|
135
143
|
document.head.prepend(app.colorsStyleEl);
|
|
136
144
|
}
|
|
137
|
-
app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors);
|
|
145
|
+
app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors, app.mdColorScheme);
|
|
138
146
|
}
|
|
139
147
|
mount(rootEl) {
|
|
140
148
|
const app = this;
|
|
@@ -73,6 +73,23 @@
|
|
|
73
73
|
--f7-bars-link-color: var(--f7-theme-color);
|
|
74
74
|
*/
|
|
75
75
|
.light-vars({
|
|
76
|
+
--f7-glass-bg-color: rgba(255, 255, 255, 0.75);
|
|
77
|
+
--f7-glass-shadow:
|
|
78
|
+
inset -1px -1px 0px -0.5px rgba(255, 255, 255, 1),
|
|
79
|
+
inset 1px 1px 0px -0.5px rgba(255, 255, 255, 1),
|
|
80
|
+
inset 3px 3px 10px -3px #ddd,
|
|
81
|
+
inset -3px -3px 10px -3px #ddd,
|
|
82
|
+
inset 0 0 5px 1px #fff,
|
|
83
|
+
inset 0 0 0 0.5px rgba(0, 0, 0, 0.25),
|
|
84
|
+
inset 0 0 24px 0 rgba(0, 0, 0, 0.1),
|
|
85
|
+
0 0 25px 0 rgba(0, 0, 0, 0.2);
|
|
86
|
+
--f7-glass-shadow-thumb:
|
|
87
|
+
inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
|
|
88
|
+
inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
|
|
89
|
+
inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
|
|
90
|
+
inset 3px 3px 10px -2px #eee,
|
|
91
|
+
inset -3px -3px 10px -2px #eee,
|
|
92
|
+
inset 0 0 5px 1px #fff;
|
|
76
93
|
--f7-bars-text-color: #000;
|
|
77
94
|
--f7-text-color: #000;
|
|
78
95
|
--f7-bars-bg-color: #f7f7f8;
|
|
@@ -80,6 +97,25 @@
|
|
|
80
97
|
--f7-bars-border-color: rgba(0,0,0,0.25);
|
|
81
98
|
});
|
|
82
99
|
.dark-vars({
|
|
100
|
+
--f7-glass-bg-color: rgba(50, 50, 50, 0.5);
|
|
101
|
+
--f7-glass-shadow:
|
|
102
|
+
inset -2px -2px 0.5px -2.5px rgba(255, 255, 255, 0.4),
|
|
103
|
+
inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.4),
|
|
104
|
+
inset 2px 2px 0.5px -2px #262626,
|
|
105
|
+
inset -2px -2px 0.5px -2px #262626,
|
|
106
|
+
inset 0 0 5px 1px #141414,
|
|
107
|
+
inset 0 0 0 1px rgba(255, 255, 255, 0.15),
|
|
108
|
+
inset 0 0 10px 0 rgba(255, 255, 255, 0.075),
|
|
109
|
+
inset 0 0 24px 0 rgba(255, 255, 255, 0.05),
|
|
110
|
+
0 0 25px 0 rgba(0, 0, 0, 0.15);
|
|
111
|
+
--f7-glass-shadow-thumb:
|
|
112
|
+
inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
|
|
113
|
+
inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
|
|
114
|
+
inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
|
|
115
|
+
inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
|
|
116
|
+
inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
|
|
117
|
+
inset 0px -5px 0px -3.5px rgba(255, 255, 255, 0.25),
|
|
118
|
+
inset 0px -5px 5px rgba(255, 255, 255, 0.25);
|
|
83
119
|
--f7-bars-text-color: #fff;
|
|
84
120
|
--f7-text-color: #fff;
|
|
85
121
|
--f7-bars-bg-color: #121212;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-card-margin-horizontal:16px;--f7-card-margin-vertical:16px;--f7-card-content-padding-horizontal:16px;--f7-card-content-padding-vertical:16px;--f7-card-font-size:inherit;--f7-card-header-text-color:inherit;--f7-card-header-font-weight:400;--f7-card-header-padding-horizontal:16px;--f7-card-footer-font-weight:400;--f7-card-footer-font-size:inherit;--f7-card-footer-padding-horizontal:16px;--f7-card-expandable-font-size:16px;--f7-card-expandable-tablet-width:670px;--f7-card-expandable-tablet-height:670px}.ios{--f7-card-border-radius:
|
|
1
|
+
:root{--f7-card-margin-horizontal:16px;--f7-card-margin-vertical:16px;--f7-card-content-padding-horizontal:16px;--f7-card-content-padding-vertical:16px;--f7-card-font-size:inherit;--f7-card-header-text-color:inherit;--f7-card-header-font-weight:400;--f7-card-header-padding-horizontal:16px;--f7-card-footer-font-weight:400;--f7-card-footer-font-size:inherit;--f7-card-footer-padding-horizontal:16px;--f7-card-expandable-font-size:16px;--f7-card-expandable-tablet-width:670px;--f7-card-expandable-tablet-height:670px}.ios{--f7-card-border-radius:24px;--f7-card-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-card-header-font-size:17px;--f7-card-header-padding-vertical:10px;--f7-card-header-min-height:52px;--f7-card-footer-text-color:rgba(0, 0, 0, 0.45);--f7-card-footer-padding-vertical:10px;--f7-card-footer-min-height:52px;--f7-card-expandable-margin-horizontal:20px;--f7-card-expandable-margin-vertical:30px;--f7-card-expandable-box-shadow:0px 20px 40px rgba(0, 0, 0, 0.3);--f7-card-expandable-border-radius:24px;--f7-card-expandable-tablet-border-radius:24px;--f7-card-expandable-header-font-size:27px;--f7-card-expandable-header-font-weight:bold;--f7-card-text-color:inherit;--f7-card-bg-color:#fff;--f7-card-expandable-bg-color:#fff;--f7-card-outline-border-color:rgba(0, 0, 0, 0.12);--f7-card-header-border-color:rgba(0, 0, 0, 0.1);--f7-card-footer-border-color:rgba(0, 0, 0, 0.1)}.ios .dark,.ios.dark{--f7-card-bg-color:#1c1c1d;--f7-card-expandable-bg-color:#1c1c1d;--f7-card-outline-border-color:rgba(255, 255, 255, 0.15);--f7-card-header-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-card-border-radius:16px;--f7-card-box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);--f7-card-header-font-size:22px;--f7-card-header-padding-vertical:16px;--f7-card-header-min-height:48px;--f7-card-footer-padding-vertical:16px;--f7-card-footer-min-height:48px;--f7-card-expandable-margin-horizontal:12px;--f7-card-expandable-margin-vertical:24px;--f7-card-expandable-box-shadow:0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12);--f7-card-expandable-border-radius:16px;--f7-card-expandable-tablet-border-radius:16px;--f7-card-expandable-header-font-size:22px;--f7-card-expandable-header-font-weight:500}.md,.md .dark,.md [class*=color-]{--f7-card-bg-color:var(--f7-md-surface-1);--f7-card-expandable-bg-color:var(--f7-md-surface-1);--f7-card-outline-border-color:var(--f7-md-outline);--f7-card-header-border-color:var(--f7-md-outline);--f7-card-footer-border-color:var(--f7-md-outline);--f7-card-text-color:var(--f7-md-on-surface);--f7-card-footer-text-color:var(--f7-md-on-surface-variant)}.card .list>ul:after,.card .list>ul:before,.cards-list>ul:after,.cards-list>ul:before{display:none!important}.card .list ul,.cards-list ul{background:0 0}.card{background:var(--f7-card-bg-color);position:relative;border-radius:var(--f7-card-border-radius);font-size:var(--f7-card-font-size);margin-top:var(--f7-card-margin-vertical);margin-bottom:var(--f7-card-margin-vertical);margin-left:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));color:var(--f7-card-text-color)}.card .block,.card .list{margin:0}.row:not(.no-gap) .col>.card{margin-left:0;margin-right:0}.card-raised{box-shadow:var(--f7-card-box-shadow)}.card-outline,.ios .card-outline-ios,.md .card-outline-md{border:1px solid var(--f7-card-outline-border-color)}.card-content{position:relative}.card-content-padding{position:relative;padding:var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal)}.card-content-padding>.block,.card-content-padding>.list{margin:calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal))}.card-content-padding>p:first-child{margin-top:0}.card-content-padding>p:last-child{margin-bottom:0}.card-header{min-height:var(--f7-card-header-min-height);color:var(--f7-card-header-text-color);font-size:var(--f7-card-header-font-size);font-weight:var(--f7-card-header-font-weight);padding:var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal)}.card-dividers .card-header,.card-header-divider .card-header,.card-header.card-header-divider{border-bottom:1px solid var(--f7-card-header-border-color)}.card-footer{min-height:var(--f7-card-footer-min-height);color:var(--f7-card-footer-text-color);font-size:var(--f7-card-footer-font-size);font-weight:var(--f7-card-footer-font-weight);padding:var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal)}.card-dividers .card-footer,.card-footer-divider .card-footer,.card-footer.card-footer-divider{border-top:1px solid var(--f7-card-header-border-color)}.card-footer a.link{overflow:hidden}.card-footer,.card-header{position:relative;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.card-footer[valign=top],.card-header[valign=top]{align-items:flex-start}.card-footer[valign=bottom],.card-header[valign=bottom]{align-items:flex-end}.card-footer a.link,.card-header a.link{position:relative}.card-footer a.link i.icon,.card-header a.link i.icon{display:block}.card-footer a.icon-only,.card-header a.icon-only{display:flex;justify-content:center;align-items:center;margin:0}.card-header{border-radius:var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0}.card-footer{border-radius:0 0 var(--f7-card-border-radius) var(--f7-card-border-radius)}.card-expandable{overflow:hidden;height:300px;background:var(--f7-card-expandable-bg-color);position:relative;transform-origin:center center;transition-property:transform,border-radius;border-radius:var(--f7-card-expandable-border-radius);z-index:2;transition-duration:.2s;margin-left:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));margin-top:var(--f7-card-expandable-margin-vertical);margin-bottom:var(--f7-card-expandable-margin-vertical);font-size:var(--f7-card-expandable-font-size)}.card-expandable.card-raised{box-shadow:var(--f7-card-expandable-box-shadow)}.card-expandable:not(.card-opened){-webkit-user-select:none;user-select:none}.card-expandable.card-no-transition{transition-duration:0s}.card-expandable.card-expandable-animate-width .card-content{transition-property:width,transform;width:100%}.card-expandable.active-state{transform:scale(.97) translate3d(0,0,0)}.card-expandable .card-opened-fade-in,.card-expandable .card-opened-fade-out{transition-duration:.4s}.card-expandable .card-opened-fade-in{opacity:0;pointer-events:none}.card-expandable .card-content{position:absolute;top:0;width:100vw;height:100vh;transform-origin:center top;overflow:hidden;transition-property:transform;box-sizing:border-box;pointer-events:none;right:0}.card-expandable .card-content .card-content-padding{padding-left:calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));padding-right:calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal))}.card-expandable.card-opened{transition-duration:0s}.card-expandable.card-closing,.card-expandable.card-opening,.card-expandable.card-transitioning{transition-duration:.4s}.card-expandable.card-opening .card-content{transition-duration:.3s}.card-expandable.card-closing .card-content{transition-duration:.5s}.card-expandable.card-closing,.card-expandable.card-opened,.card-expandable.card-opening{z-index:300}.card-expandable.card-opened,.card-expandable.card-opening{border-radius:0}.card-expandable.card-opened .card-opened-fade-in,.card-expandable.card-opening .card-opened-fade-in{opacity:1;pointer-events:auto}.card-expandable.card-opened .card-opened-fade-out,.card-expandable.card-opening .card-opened-fade-out{opacity:0;pointer-events:none}.card-expandable.card-opened .card-content{overflow:auto;-webkit-overflow-scrolling:touch;pointer-events:auto}.card-expandable .card-header{font-size:var(--f7-card-expandable-header-font-size);font-weight:var(--f7-card-expandable-header-font-weight)}.card-prevent-open{pointer-events:auto}.card-expandable-size{width:0;height:0;position:absolute;left:0;top:0;opacity:0;pointer-events:none;visibility:hidden}@media (min-width:768px) and (min-height:670px){.card-expandable:not(.card-tablet-fullscreen){max-width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen).card-opened,.card-expandable:not(.card-tablet-fullscreen).card-opening{border-radius:var(--f7-card-expandable-tablet-border-radius)}.card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content{width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen) .card-expandable-size{width:var(--f7-card-expandable-tablet-width);height:var(--f7-card-expandable-tablet-height)}}.page.page-with-card-opened .page-content{overflow:hidden}.card-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;z-index:299;pointer-events:none;background:rgba(0,0,0,.2);opacity:0}.card-backdrop-in{animation:card-backdrop-fade-in .4s forwards;pointer-events:auto}.card-backdrop-out{animation:card-backdrop-fade-out .4s forwards}@supports ((-webkit-backdrop-filter:blur(15px)) or (backdrop-filter:blur(15px))){.card-backdrop{background:0 0;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}}@keyframes card-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes card-backdrop-fade-out{from{opacity:1}to{opacity:0}}
|
|
@@ -15,19 +15,19 @@
|
|
|
15
15
|
--f7-card-expandable-tablet-height: 670px;
|
|
16
16
|
}
|
|
17
17
|
.ios-vars({
|
|
18
|
-
--f7-card-border-radius:
|
|
18
|
+
--f7-card-border-radius: 24px;
|
|
19
19
|
--f7-card-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
|
|
20
20
|
--f7-card-header-font-size: 17px;
|
|
21
21
|
--f7-card-header-padding-vertical: 10px;
|
|
22
|
-
--f7-card-header-min-height:
|
|
22
|
+
--f7-card-header-min-height: 52px;
|
|
23
23
|
--f7-card-footer-text-color: rgba(0,0,0,0.45);
|
|
24
24
|
--f7-card-footer-padding-vertical: 10px;
|
|
25
|
-
--f7-card-footer-min-height:
|
|
25
|
+
--f7-card-footer-min-height: 52px;
|
|
26
26
|
--f7-card-expandable-margin-horizontal: 20px;
|
|
27
27
|
--f7-card-expandable-margin-vertical: 30px;
|
|
28
28
|
--f7-card-expandable-box-shadow: 0px 20px 40px rgba(0,0,0,0.3);
|
|
29
|
-
--f7-card-expandable-border-radius:
|
|
30
|
-
--f7-card-expandable-tablet-border-radius:
|
|
29
|
+
--f7-card-expandable-border-radius: 24px;
|
|
30
|
+
--f7-card-expandable-tablet-border-radius: 24px;
|
|
31
31
|
--f7-card-expandable-header-font-size: 27px;
|
|
32
32
|
--f7-card-expandable-header-font-weight: bold;
|
|
33
33
|
--f7-card-text-color: inherit;
|
package/components/card/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--f7-card-margin-horizontal:16px;--f7-card-margin-vertical:16px;--f7-card-content-padding-horizontal:16px;--f7-card-content-padding-vertical:16px;--f7-card-font-size:inherit;--f7-card-header-text-color:inherit;--f7-card-header-font-weight:400;--f7-card-header-padding-horizontal:16px;--f7-card-footer-font-weight:400;--f7-card-footer-font-size:inherit;--f7-card-footer-padding-horizontal:16px;--f7-card-expandable-font-size:16px;--f7-card-expandable-tablet-width:670px;--f7-card-expandable-tablet-height:670px}.ios{--f7-card-border-radius:
|
|
1
|
+
:root{--f7-card-margin-horizontal:16px;--f7-card-margin-vertical:16px;--f7-card-content-padding-horizontal:16px;--f7-card-content-padding-vertical:16px;--f7-card-font-size:inherit;--f7-card-header-text-color:inherit;--f7-card-header-font-weight:400;--f7-card-header-padding-horizontal:16px;--f7-card-footer-font-weight:400;--f7-card-footer-font-size:inherit;--f7-card-footer-padding-horizontal:16px;--f7-card-expandable-font-size:16px;--f7-card-expandable-tablet-width:670px;--f7-card-expandable-tablet-height:670px}.ios{--f7-card-border-radius:24px;--f7-card-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);--f7-card-header-font-size:17px;--f7-card-header-padding-vertical:10px;--f7-card-header-min-height:52px;--f7-card-footer-text-color:rgba(0, 0, 0, 0.45);--f7-card-footer-padding-vertical:10px;--f7-card-footer-min-height:52px;--f7-card-expandable-margin-horizontal:20px;--f7-card-expandable-margin-vertical:30px;--f7-card-expandable-box-shadow:0px 20px 40px rgba(0, 0, 0, 0.3);--f7-card-expandable-border-radius:24px;--f7-card-expandable-tablet-border-radius:24px;--f7-card-expandable-header-font-size:27px;--f7-card-expandable-header-font-weight:bold;--f7-card-text-color:inherit;--f7-card-bg-color:#fff;--f7-card-expandable-bg-color:#fff;--f7-card-outline-border-color:rgba(0, 0, 0, 0.12);--f7-card-header-border-color:rgba(0, 0, 0, 0.1);--f7-card-footer-border-color:rgba(0, 0, 0, 0.1)}.ios .dark,.ios.dark{--f7-card-bg-color:#1c1c1d;--f7-card-expandable-bg-color:#1c1c1d;--f7-card-outline-border-color:rgba(255, 255, 255, 0.15);--f7-card-header-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-border-color:rgba(255, 255, 255, 0.15);--f7-card-footer-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-card-border-radius:16px;--f7-card-box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);--f7-card-header-font-size:22px;--f7-card-header-padding-vertical:16px;--f7-card-header-min-height:48px;--f7-card-footer-padding-vertical:16px;--f7-card-footer-min-height:48px;--f7-card-expandable-margin-horizontal:12px;--f7-card-expandable-margin-vertical:24px;--f7-card-expandable-box-shadow:0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12);--f7-card-expandable-border-radius:16px;--f7-card-expandable-tablet-border-radius:16px;--f7-card-expandable-header-font-size:22px;--f7-card-expandable-header-font-weight:500}.md,.md .dark,.md [class*=color-]{--f7-card-bg-color:var(--f7-md-surface-1);--f7-card-expandable-bg-color:var(--f7-md-surface-1);--f7-card-outline-border-color:var(--f7-md-outline);--f7-card-header-border-color:var(--f7-md-outline);--f7-card-footer-border-color:var(--f7-md-outline);--f7-card-text-color:var(--f7-md-on-surface);--f7-card-footer-text-color:var(--f7-md-on-surface-variant)}.card .list>ul:after,.card .list>ul:before,.cards-list>ul:after,.cards-list>ul:before{display:none!important}.card .list ul,.cards-list ul{background:0 0}.card{background:var(--f7-card-bg-color);position:relative;border-radius:var(--f7-card-border-radius);font-size:var(--f7-card-font-size);margin-top:var(--f7-card-margin-vertical);margin-bottom:var(--f7-card-margin-vertical);margin-left:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));color:var(--f7-card-text-color)}.card .block,.card .list{margin:0}.row:not(.no-gap) .col>.card{margin-left:0;margin-right:0}.card-raised{box-shadow:var(--f7-card-box-shadow)}.card-outline,.ios .card-outline-ios,.md .card-outline-md{border:1px solid var(--f7-card-outline-border-color)}.card-content{position:relative}.card-content-padding{position:relative;padding:var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal)}.card-content-padding>.block,.card-content-padding>.list{margin:calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal))}.card-content-padding>p:first-child{margin-top:0}.card-content-padding>p:last-child{margin-bottom:0}.card-header{min-height:var(--f7-card-header-min-height);color:var(--f7-card-header-text-color);font-size:var(--f7-card-header-font-size);font-weight:var(--f7-card-header-font-weight);padding:var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal)}.card-dividers .card-header,.card-header-divider .card-header,.card-header.card-header-divider{border-bottom:1px solid var(--f7-card-header-border-color)}.card-footer{min-height:var(--f7-card-footer-min-height);color:var(--f7-card-footer-text-color);font-size:var(--f7-card-footer-font-size);font-weight:var(--f7-card-footer-font-weight);padding:var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal)}.card-dividers .card-footer,.card-footer-divider .card-footer,.card-footer.card-footer-divider{border-top:1px solid var(--f7-card-header-border-color)}.card-footer a.link{overflow:hidden}.card-footer,.card-header{position:relative;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.card-footer[valign=top],.card-header[valign=top]{align-items:flex-start}.card-footer[valign=bottom],.card-header[valign=bottom]{align-items:flex-end}.card-footer a.link,.card-header a.link{position:relative}.card-footer a.link i.icon,.card-header a.link i.icon{display:block}.card-footer a.icon-only,.card-header a.icon-only{display:flex;justify-content:center;align-items:center;margin:0}.card-header{border-radius:var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0}.card-footer{border-radius:0 0 var(--f7-card-border-radius) var(--f7-card-border-radius)}.card-expandable{overflow:hidden;height:300px;background:var(--f7-card-expandable-bg-color);position:relative;transform-origin:center center;transition-property:transform,border-radius;border-radius:var(--f7-card-expandable-border-radius);z-index:2;transition-duration:.2s;margin-left:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));margin-right:calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));margin-top:var(--f7-card-expandable-margin-vertical);margin-bottom:var(--f7-card-expandable-margin-vertical);font-size:var(--f7-card-expandable-font-size)}.card-expandable.card-raised{box-shadow:var(--f7-card-expandable-box-shadow)}.card-expandable:not(.card-opened){-webkit-user-select:none;user-select:none}.card-expandable.card-no-transition{transition-duration:0s}.card-expandable.card-expandable-animate-width .card-content{transition-property:width,transform;width:100%}.card-expandable.active-state{transform:scale(.97) translate3d(0,0,0)}.card-expandable .card-opened-fade-in,.card-expandable .card-opened-fade-out{transition-duration:.4s}.card-expandable .card-opened-fade-in{opacity:0;pointer-events:none}.card-expandable .card-content{position:absolute;top:0;width:100vw;height:100vh;transform-origin:center top;overflow:hidden;transition-property:transform;box-sizing:border-box;pointer-events:none;left:0}.card-expandable .card-content .card-content-padding{padding-left:calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));padding-right:calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal))}.card-expandable.card-opened{transition-duration:0s}.card-expandable.card-closing,.card-expandable.card-opening,.card-expandable.card-transitioning{transition-duration:.4s}.card-expandable.card-opening .card-content{transition-duration:.3s}.card-expandable.card-closing .card-content{transition-duration:.5s}.card-expandable.card-closing,.card-expandable.card-opened,.card-expandable.card-opening{z-index:300}.card-expandable.card-opened,.card-expandable.card-opening{border-radius:0}.card-expandable.card-opened .card-opened-fade-in,.card-expandable.card-opening .card-opened-fade-in{opacity:1;pointer-events:auto}.card-expandable.card-opened .card-opened-fade-out,.card-expandable.card-opening .card-opened-fade-out{opacity:0;pointer-events:none}.card-expandable.card-opened .card-content{overflow:auto;-webkit-overflow-scrolling:touch;pointer-events:auto}.card-expandable .card-header{font-size:var(--f7-card-expandable-header-font-size);font-weight:var(--f7-card-expandable-header-font-weight)}.card-prevent-open{pointer-events:auto}.card-expandable-size{width:0;height:0;position:absolute;left:0;top:0;opacity:0;pointer-events:none;visibility:hidden}@media (min-width:768px) and (min-height:670px){.card-expandable:not(.card-tablet-fullscreen){max-width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen).card-opened,.card-expandable:not(.card-tablet-fullscreen).card-opening{border-radius:var(--f7-card-expandable-tablet-border-radius)}.card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content{width:var(--f7-card-expandable-tablet-width)}.card-expandable:not(.card-tablet-fullscreen) .card-expandable-size{width:var(--f7-card-expandable-tablet-width);height:var(--f7-card-expandable-tablet-height)}}.page.page-with-card-opened .page-content{overflow:hidden}.card-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;z-index:299;pointer-events:none;background:rgba(0,0,0,.2);opacity:0}.card-backdrop-in{animation:card-backdrop-fade-in .4s forwards;pointer-events:auto}.card-backdrop-out{animation:card-backdrop-fade-out .4s forwards}@supports ((-webkit-backdrop-filter:blur(15px)) or (backdrop-filter:blur(15px))){.card-backdrop{background:0 0;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}}@keyframes card-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes card-backdrop-fade-out{from{opacity:1}to{opacity:0}}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
.ios {
|
|
2
2
|
.rtl({
|
|
3
3
|
.page-previous {
|
|
4
|
-
transform: translate3d(20%, 0, 0);
|
|
4
|
+
transform: translate3d(20%, 0, 0) scale(0.5);
|
|
5
5
|
}
|
|
6
6
|
.page-next {
|
|
7
|
-
transform: translate3d(-100%, 0, 0);
|
|
7
|
+
transform: translate3d(-100%, 0, 0) scale(1);
|
|
8
8
|
}
|
|
9
9
|
});
|
|
10
10
|
.ltr({
|
|
11
11
|
.page-previous {
|
|
12
|
-
transform: translate3d(-20%, 0, 0);
|
|
12
|
+
transform: translate3d(-20%, 0, 0) scale(0.5);
|
|
13
13
|
}
|
|
14
14
|
.page-next {
|
|
15
|
-
transform: translate3d(100%, 0, 0);
|
|
15
|
+
transform: translate3d(100%, 0, 0) scale(1);
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
.page-previous {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
.md {
|
|
2
2
|
.page-previous {
|
|
3
|
-
transform: translate3d(0, -20px, 0);
|
|
3
|
+
transform: translate3d(0, -20px, 0) scale(0.5);
|
|
4
4
|
}
|
|
5
5
|
.page-next {
|
|
6
6
|
pointer-events: none;
|
|
7
|
-
transform: translate3d(0, 128px, 0);
|
|
7
|
+
transform: translate3d(0, 128px, 0) scale(0.5);
|
|
8
8
|
opacity: 0;
|
|
9
9
|
&.page-next-on-right {
|
|
10
10
|
.ltr({
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import $ from '../../shared/dom7.js';
|
|
2
2
|
import { extend, now, nextTick, deleteProps } from '../../shared/utils.js';
|
|
3
3
|
import Framework7Class from '../../shared/class.js';
|
|
4
|
-
import { getSupport } from '../../shared/get-support.js';
|
|
5
4
|
class Toggle extends Framework7Class {
|
|
6
5
|
constructor(app, params) {
|
|
7
6
|
if (params === void 0) {
|
|
@@ -9,7 +8,6 @@ class Toggle extends Framework7Class {
|
|
|
9
8
|
}
|
|
10
9
|
super(params, [app]);
|
|
11
10
|
const toggle = this;
|
|
12
|
-
const support = getSupport();
|
|
13
11
|
const defaults = {};
|
|
14
12
|
|
|
15
13
|
// Extend defaults with modules params
|
|
@@ -120,19 +118,17 @@ class Toggle extends Framework7Class {
|
|
|
120
118
|
toggle.emit('local::change toggleChange', toggle);
|
|
121
119
|
}
|
|
122
120
|
toggle.attachEvents = function attachEvents() {
|
|
123
|
-
|
|
121
|
+
$el.on(app.touchEvents.start, handleTouchStart, {
|
|
124
122
|
passive: true
|
|
125
|
-
}
|
|
126
|
-
$el.on(app.touchEvents.start, handleTouchStart, passive);
|
|
123
|
+
});
|
|
127
124
|
app.on('touchmove', handleTouchMove);
|
|
128
125
|
app.on('touchend:passive', handleTouchEnd);
|
|
129
126
|
toggle.$inputEl.on('change', handleInputChange);
|
|
130
127
|
};
|
|
131
128
|
toggle.detachEvents = function detachEvents() {
|
|
132
|
-
|
|
129
|
+
$el.off(app.touchEvents.start, handleTouchStart, {
|
|
133
130
|
passive: true
|
|
134
|
-
}
|
|
135
|
-
$el.off(app.touchEvents.start, handleTouchStart, passive);
|
|
131
|
+
});
|
|
136
132
|
app.off('touchmove', handleTouchMove);
|
|
137
133
|
app.off('touchend:passive', handleTouchEnd);
|
|
138
134
|
toggle.$inputEl.off('change', handleInputChange);
|
|
@@ -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
|
}
|