@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,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;
|
|
@@ -19,19 +19,19 @@
|
|
|
19
19
|
--f7-block-text-color: inherit;
|
|
20
20
|
--f7-block-margin-vertical: 35px;
|
|
21
21
|
--f7-block-outline-border-color: rgba(0,0,0,0.22);
|
|
22
|
-
--f7-block-title-font-size:
|
|
22
|
+
--f7-block-title-font-size: 17px;
|
|
23
23
|
--f7-block-title-font-weight: 600;
|
|
24
24
|
--f7-block-title-line-height: 20px;
|
|
25
25
|
--f7-block-title-margin-bottom: 10px;
|
|
26
|
-
--f7-block-title-medium-font-size:
|
|
26
|
+
--f7-block-title-medium-font-size: 20px;
|
|
27
27
|
--f7-block-title-medium-font-weight: bold;
|
|
28
28
|
--f7-block-title-medium-line-height: 1.4;
|
|
29
|
-
--f7-block-title-large-font-size:
|
|
29
|
+
--f7-block-title-large-font-size: 22px;
|
|
30
30
|
--f7-block-title-large-font-weight: bold;
|
|
31
31
|
--f7-block-title-large-line-height: 1.3;
|
|
32
|
-
--f7-block-inset-border-radius:
|
|
32
|
+
--f7-block-inset-border-radius: 24px;
|
|
33
33
|
.light-vars({
|
|
34
|
-
--f7-block-title-text-color:
|
|
34
|
+
--f7-block-title-text-color: rgba(0,0,0,0.6);
|
|
35
35
|
--f7-block-strong-text-color: #000;
|
|
36
36
|
--f7-block-header-text-color: rgba(0, 0, 0, 0.45);
|
|
37
37
|
--f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
--f7-block-title-large-text-color: #000;
|
|
41
41
|
});
|
|
42
42
|
.dark-vars({
|
|
43
|
-
--f7-block-title-text-color:
|
|
43
|
+
--f7-block-title-text-color: rgba(255,255,255,0.6);
|
|
44
44
|
--f7-block-header-text-color: rgba(255,255,255,0.55);
|
|
45
45
|
--f7-block-footer-text-color: rgba(255,255,255,0.55);
|
|
46
46
|
--f7-block-strong-text-color: #fff;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--f7-button-font-size: 14px;
|
|
3
2
|
--f7-button-min-width: 32px;
|
|
4
3
|
--f7-button-bg-color: transparent;
|
|
5
4
|
--f7-button-border-width: 0px;
|
|
@@ -34,12 +33,13 @@
|
|
|
34
33
|
});
|
|
35
34
|
}
|
|
36
35
|
.ios-vars({
|
|
36
|
+
--f7-button-font-size: 15px;
|
|
37
37
|
--f7-button-fill-text-color: #fff;
|
|
38
|
-
--f7-button-text-transform:
|
|
39
|
-
--f7-button-height:
|
|
38
|
+
--f7-button-text-transform: none;
|
|
39
|
+
--f7-button-height: 34px;
|
|
40
40
|
--f7-button-padding-horizontal: 10px;
|
|
41
41
|
--f7-button-border-radius: 4px;
|
|
42
|
-
--f7-button-font-weight:
|
|
42
|
+
--f7-button-font-weight: 500;
|
|
43
43
|
--f7-button-letter-spacing: 0;
|
|
44
44
|
/*
|
|
45
45
|
--f7-button-outline-border-color: var(--f7-theme-color);
|
|
@@ -49,15 +49,15 @@
|
|
|
49
49
|
--f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
|
|
50
50
|
--f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
|
|
51
51
|
*/
|
|
52
|
-
--f7-button-large-text-transform:
|
|
53
|
-
--f7-button-large-height:
|
|
52
|
+
--f7-button-large-text-transform: none;
|
|
53
|
+
--f7-button-large-height: 48px;
|
|
54
54
|
--f7-button-large-font-size: 17px;
|
|
55
55
|
--f7-button-large-font-weight: 500;
|
|
56
56
|
--f7-button-small-outline-border-width: 2px;
|
|
57
|
-
--f7-button-small-text-transform:
|
|
58
|
-
--f7-button-small-height:
|
|
59
|
-
--f7-button-small-font-size:
|
|
60
|
-
--f7-button-small-font-weight:
|
|
57
|
+
--f7-button-small-text-transform: none;
|
|
58
|
+
--f7-button-small-height: 28px;
|
|
59
|
+
--f7-button-small-font-size: 14px;
|
|
60
|
+
--f7-button-small-font-weight: 500;
|
|
61
61
|
|
|
62
62
|
--f7-segmented-strong-button-text-transform: none;
|
|
63
63
|
--f7-segmented-strong-button-active-font-weight: 600;
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
|
|
79
79
|
});
|
|
80
80
|
.md-vars({
|
|
81
|
+
--f7-button-font-size: 14px;
|
|
81
82
|
/*
|
|
82
83
|
--f7-button-pressed-bg-color: transparent;
|
|
83
84
|
*/
|
|
@@ -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}}
|
|
@@ -53,9 +53,12 @@ class Dialog extends Modal {
|
|
|
53
53
|
if (buttons.length > 0) {
|
|
54
54
|
buttonsHTML = $jsx("div", {
|
|
55
55
|
class: "dialog-buttons"
|
|
56
|
-
}, buttons.map(button =>
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
}, buttons.map(button => {
|
|
57
|
+
const classes = ['button button-round dialog-button', button.strong && 'button-fill', button.color && `color-${button.color}`, app.theme === 'ios' && 'button-large', app.theme === 'ios' && !button.strong && 'button-tonal', button.cssClass && button.cssClass].filter(Boolean).join(' ');
|
|
58
|
+
return $jsx("button", {
|
|
59
|
+
class: classes
|
|
60
|
+
}, button.text);
|
|
61
|
+
}));
|
|
59
62
|
}
|
|
60
63
|
const dialogHtml = $jsx("div", {
|
|
61
64
|
class: dialogClasses.join(' ')
|
|
@@ -1,59 +1,34 @@
|
|
|
1
1
|
.ios {
|
|
2
2
|
.dialog {
|
|
3
|
+
box-shadow: var(--f7-glass-shadow);
|
|
4
|
+
.ios-glass-backdrop();
|
|
5
|
+
border-radius: var(--f7-dialog-border-radius);
|
|
3
6
|
&.modal-out {
|
|
4
7
|
transform: translate3d(0, -50%, 0) scale(1);
|
|
5
8
|
}
|
|
6
9
|
}
|
|
7
10
|
.dialog-inner {
|
|
8
11
|
border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
|
|
9
|
-
.hairline(bottom, var(--f7-dialog-border-divider-color));
|
|
10
12
|
}
|
|
11
13
|
.dialog-title {
|
|
12
14
|
+ .dialog-text {
|
|
13
|
-
margin-top:
|
|
15
|
+
margin-top: 12px;
|
|
14
16
|
}
|
|
15
17
|
}
|
|
16
18
|
.dialog-buttons {
|
|
17
|
-
|
|
19
|
+
padding: 0 14px 14px 14px;
|
|
18
20
|
justify-content: center;
|
|
21
|
+
gap: 8px;
|
|
19
22
|
}
|
|
20
23
|
.dialog-button {
|
|
21
24
|
width: 100%;
|
|
22
|
-
padding: 0 5px;
|
|
23
25
|
-webkit-box-flex: 1;
|
|
24
26
|
-ms-flex: 1;
|
|
25
|
-
.hairline(right, var(--f7-dialog-border-divider-color));
|
|
26
|
-
&:first-child {
|
|
27
|
-
border-radius: 0 0 0 var(--f7-dialog-border-radius);
|
|
28
|
-
}
|
|
29
|
-
&:last-child {
|
|
30
|
-
.hairline-remove(right);
|
|
31
|
-
border-radius: 0 0 var(--f7-dialog-border-radius) 0;
|
|
32
|
-
}
|
|
33
|
-
&:first-child:last-child {
|
|
34
|
-
border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
.dialog-button[class*='color-'] {
|
|
38
|
-
--f7-dialog-button-text-color: var(--f7-theme-color);
|
|
39
|
-
}
|
|
40
|
-
.dialog-buttons-vertical {
|
|
41
|
-
.dialog-buttons {
|
|
42
|
-
height: auto;
|
|
43
|
-
}
|
|
44
|
-
.dialog-button {
|
|
45
|
-
border-radius: 0;
|
|
46
|
-
.hairline(bottom, var(--f7-dialog-border-divider-color));
|
|
47
|
-
&:last-child {
|
|
48
|
-
border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
|
|
49
|
-
.hairline-remove(bottom);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
27
|
}
|
|
28
|
+
|
|
53
29
|
.dialog-no-buttons {
|
|
54
30
|
.dialog-inner {
|
|
55
31
|
border-radius: var(--f7-dialog-border-radius);
|
|
56
|
-
.hairline-remove(bottom);
|
|
57
32
|
}
|
|
58
33
|
}
|
|
59
34
|
// Inputs
|
|
@@ -61,9 +36,9 @@
|
|
|
61
36
|
margin-top: 15px;
|
|
62
37
|
}
|
|
63
38
|
.dialog-input {
|
|
64
|
-
padding: 0
|
|
39
|
+
padding: 0 12px;
|
|
65
40
|
+ .dialog-input {
|
|
66
|
-
margin-top:
|
|
41
|
+
margin-top: 12px;
|
|
67
42
|
}
|
|
68
43
|
}
|
|
69
44
|
.dialog-input-double {
|
|
@@ -78,6 +53,7 @@
|
|
|
78
53
|
|
|
79
54
|
// Preloader
|
|
80
55
|
.dialog-preloader {
|
|
56
|
+
text-align: center;
|
|
81
57
|
.dialog-title ~ .preloader,
|
|
82
58
|
.dialog-text ~ .preloader {
|
|
83
59
|
margin-top: 15px;
|