Skip to content

Commit 9501044

Browse files
nolimits4webnolimits4web
committed
5.7.1 release
1 parent 152e5b6 commit 9501044

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+793
-332
lines changed

‎CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@
22

33
# Change Log
44

5+
# [v5.7.1](https://github.com/framework7io/framework7/compare/v5.7.0...v5.7.1) - May 1, 2020
6+
* Core
7+
* CSS
8+
* `body` background color changed to `#000` when dark theme enabled
9+
* Panel
10+
* Now it correctly handles disabling backdrop.
11+
* Text Editor
12+
* Popover now calculates position relative to app root element (#3618)
13+
* View
14+
* Fixed `current` view detection when using layout with swipeable tabs
15+
* Minor fixes
16+
517
# [v5.7.0](https://github.com/framework7io/framework7/compare/v5.6.0...v5.7.0) - April 25, 2020
618
* Core
719
* Card

‎packages/core/components/app/app.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ body {
3838
line-height: var(--f7-line-height);
3939
color: var(--f7-text-color);
4040
}
41+
.theme-dark body,
42+
body.theme-dark {
43+
background: #000;
44+
}
4145
.theme-dark {
4246
color: var(--f7-text-color);
4347
}

‎packages/core/components/fab.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/components/fab.rtl.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/components/fab/fab.less

Lines changed: 181 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,52 @@
11
/* === FAB === */
22
@import url('./fab-vars.less');
3+
4+
.left-fabs(@ruleset) {
5+
.fab-left-top,
6+
.fab-left-center,
7+
.fab-left-bottom {
8+
@ruleset();
9+
}
10+
}
11+
.right-fabs(@ruleset) {
12+
.fab-right-top,
13+
.fab-right-center,
14+
.fab-right-bottom {
15+
@ruleset();
16+
}
17+
}
18+
19+
.top-fabs(@ruleset) {
20+
.fab-left-top,
21+
.fab-center-top,
22+
.fab-right-top {
23+
@ruleset();
24+
}
25+
}
26+
27+
.bottom-fabs(@ruleset) {
28+
.fab-left-bottom,
29+
.fab-center-bottom,
30+
.fab-right-bottom {
31+
@ruleset();
32+
}
33+
}
34+
35+
.vertical-center-fabs(@ruleset) {
36+
.fab-center-top,
37+
.fab-center-center,
38+
.fab-center-bottom {
39+
@ruleset();
40+
}
41+
}
42+
.horizontal-center-fabs(@ruleset) {
43+
.fab-left-center,
44+
.fab-center-center,
45+
.fab-right-center {
46+
@ruleset();
47+
}
48+
}
49+
350
.fab-backdrop {
451
z-index: 1400;
552
}
@@ -10,28 +57,30 @@
1057
--f7-touch-ripple-color: var(--f7-touch-ripple-white);
1158
}
1259
}
13-
.fab[class*="fab-left"] {
60+
.left-fabs({
1461
left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
15-
}
16-
.fab[class*="fab-right"] {
62+
});
63+
.right-fabs({
1764
right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
18-
}
19-
.fab[class*="-top"] {
65+
});
66+
.top-fabs({
2067
top: var(--f7-fab-margin);
21-
}
22-
.fab[class*="-bottom"] {
68+
});
69+
.bottom-fabs({
2370
bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
24-
}
25-
.fab[class*="fab-center"] {
71+
});
72+
73+
.vertical-center-fabs({
2674
left: 50%;
2775
transform: translateX(-50%);
28-
}
29-
.fab[class*="left-center"],
30-
.fab[class*="right-center"] {
76+
});
77+
78+
.horizontal-center-fabs({
3179
top: 50%;
3280
transform: translateY(-50%);
33-
}
34-
.fab[class*="center-center"] {
81+
});
82+
83+
.fab-center-center {
3584
top: 50%;
3685
left: 50%;
3786
transform: translateX(-50%) translateY(-50%);
@@ -286,95 +335,171 @@
286335
pointer-events: none;
287336
font-size: var(--f7-fab-label-font-size);
288337
}
289-
.fab[class*="fab-right-"] {
338+
.right-fabs({
290339
.fab-label {
291340
right: 100%;
292341
margin-right: 8px;
293342
}
294-
}
295-
.fab[class*="fab-left-"] {
343+
});
344+
.left-fabs({
296345
.fab-label {
297346
left: 100%;
298347
margin-left: 8px;
299348
}
300-
}
349+
});
301350

302351
// Relation with navbar
303-
.navbar ~ * .fab[class*="-top"],
304-
.navbar ~ .fab[class*="-top"],
305-
.navbars ~ * .fab[class*="-top"],
306-
.navbars ~ .fab[class*="-top"] {
352+
.navbar ~ * .fab-left-top,
353+
.navbar ~ * .fab-center-top,
354+
.navbar ~ * .fab-right-top,
355+
.navbar ~ .fab-left-top,
356+
.navbar ~ .fab-center-top,
357+
.navbar ~ .fab-right-top,
358+
.navbars ~ * .fab-left-top,
359+
.navbars ~ * .fab-center-top,
360+
.navbars ~ * .fab-right-top,
361+
.navbars ~ .fab-left-top,
362+
.navbars ~ .fab-center-top,
363+
.navbars ~ .fab-right-top {
307364
margin-top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
308365
}
309366
// Relation with toolbar
310-
.toolbar-top ~ * .fab[class*="-top"],
311-
.toolbar-top ~ .fab[class*="-top"],
312-
.ios .toolbar-top-ios ~ * .fab[class*="-top"],
313-
.ios .toolbar-top-ios ~ .fab[class*="-top"],
314-
.md .toolbar-top-md ~ * .fab[class*="-top"],
315-
.md .toolbar-top-md ~ .fab[class*="-top"] {
367+
.toolbar-top ~ * .fab-left-top,
368+
.toolbar-top ~ * .fab-center-top,
369+
.toolbar-top ~ * .fab-right-top,
370+
.toolbar-top ~ .fab-left-top,
371+
.toolbar-top ~ .fab-center-top,
372+
.toolbar-top ~ .fab-right-top,
373+
.ios .toolbar-top-ios ~ * .fab-left-top,
374+
.ios .toolbar-top-ios ~ * .fab-center-top,
375+
.ios .toolbar-top-ios ~ * .fab-right-top,
376+
.ios .toolbar-top-ios ~ .fab-left-top,
377+
.ios .toolbar-top-ios ~ .fab-center-top,
378+
.ios .toolbar-top-ios ~ .fab-right-top,
379+
.md .toolbar-top-md ~ * .fab-left-top,
380+
.md .toolbar-top-md ~ * .fab-center-top,
381+
.md .toolbar-top-md ~ * .fab-right-top,
382+
.md .toolbar-top-md ~ .fab-left-top,
383+
.md .toolbar-top-md ~ .fab-center-top,
384+
.md .toolbar-top-md ~ .fab-right-top {
316385
margin-top: var(--f7-toolbar-height);
317386
}
318-
.toolbar-bottom ~ * .fab[class*="-bottom"],
319-
.toolbar-bottom ~ .fab[class*="-bottom"],
320-
.ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"],
321-
.ios .toolbar-bottom-ios ~ .fab[class*="-bottom"],
322-
.md .toolbar-bottom-md ~ * .fab[class*="-bottom"],
323-
.md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
387+
.toolbar-bottom ~ * .fab-left-bottom,
388+
.toolbar-bottom ~ * .fab-center-bottom,
389+
.toolbar-bottom ~ * .fab-right-bottom,
390+
.toolbar-bottom ~ .fab-left-bottom,
391+
.toolbar-bottom ~ .fab-center-bottom,
392+
.toolbar-bottom ~ .fab-right-bottom,
393+
.ios .toolbar-bottom-ios ~ * .fab-left-bottom,
394+
.ios .toolbar-bottom-ios ~ * .fab-center-bottom,
395+
.ios .toolbar-bottom-ios ~ * .fab-right-bottom,
396+
.ios .toolbar-bottom-ios ~ .fab-left-bottom,
397+
.ios .toolbar-bottom-ios ~ .fab-center-bottom,
398+
.ios .toolbar-bottom-ios ~ .fab-right-bottom,
399+
.md .toolbar-bottom-md ~ * .fab-left-bottom,
400+
.md .toolbar-bottom-md ~ * .fab-center-bottom,
401+
.md .toolbar-bottom-md ~ * .fab-right-bottom,
402+
.md .toolbar-bottom-md ~ .fab-left-bottom,
403+
.md .toolbar-bottom-md ~ .fab-center-bottom,
404+
.md .toolbar-bottom-md ~ .fab-right-bottom {
324405
margin-bottom: var(--f7-toolbar-height);
325406
}
326-
.tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"],
327-
.tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"],
328-
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"],
329-
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"],
330-
.md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"],
331-
.md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
407+
.tabbar-labels.toolbar-bottom ~ * .fab-left-bottom,
408+
.tabbar-labels.toolbar-bottom ~ * .fab-center-bottom,
409+
.tabbar-labels.toolbar-bottom ~ * .fab-right-bottom,
410+
.tabbar-labels.toolbar-bottom ~ .fab-left-bottom,
411+
.tabbar-labels.toolbar-bottom ~ .fab-center-bottom,
412+
.tabbar-labels.toolbar-bottom ~ .fab-right-bottom,
413+
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-left-bottom,
414+
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-center-bottom,
415+
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-right-bottom,
416+
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-left-bottom,
417+
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-center-bottom,
418+
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-right-bottom,
419+
.md .tabbar-labels.toolbar-bottom-md ~ * .fab-left-bottom,
420+
.md .tabbar-labels.toolbar-bottom-md ~ * .fab-center-bottom,
421+
.md .tabbar-labels.toolbar-bottom-md ~ * .fab-right-bottom,
422+
.md .tabbar-labels.toolbar-bottom-md ~ .fab-left-bottom,
423+
.md .tabbar-labels.toolbar-bottom-md ~ .fab-center-bottom,
424+
.md .tabbar-labels.toolbar-bottom-md ~ .fab-right-bottom {
332425
margin-bottom: var(--f7-tabbar-labels-height);
333426
}
334-
.tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"],
335-
.tabbar-labels.toolbar-top ~ .fab[class*="-bottom"],
336-
.ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"],
337-
.ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"],
338-
.md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"],
339-
.md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
427+
.tabbar-labels.toolbar-top ~ * .fab-left-bottom,
428+
.tabbar-labels.toolbar-top ~ * .fab-center-bottom,
429+
.tabbar-labels.toolbar-top ~ * .fab-right-bottom,
430+
.tabbar-labels.toolbar-top ~ .fab-left-bottom,
431+
.tabbar-labels.toolbar-top ~ .fab-center-bottom,
432+
.tabbar-labels.toolbar-top ~ .fab-right-bottom,
433+
.ios .tabbar-labels.toolbar-top-ios ~ * .fab-left-bottom,
434+
.ios .tabbar-labels.toolbar-top-ios ~ * .fab-center-bottom,
435+
.ios .tabbar-labels.toolbar-top-ios ~ * .fab-right-bottom,
436+
.ios .tabbar-labels.toolbar-top-ios ~ .fab-left-bottom,
437+
.ios .tabbar-labels.toolbar-top-ios ~ .fab-center-bottom,
438+
.ios .tabbar-labels.toolbar-top-ios ~ .fab-right-bottom,
439+
.md .tabbar-labels.toolbar-top-md ~ * .fab-left-bottom,
440+
.md .tabbar-labels.toolbar-top-md ~ * .fab-center-bottom,
441+
.md .tabbar-labels.toolbar-top-md ~ * .fab-right-bottom,
442+
.md .tabbar-labels.toolbar-top-md ~ .fab-left-bottom,
443+
.md .tabbar-labels.toolbar-top-md ~ .fab-center-bottom,
444+
.md .tabbar-labels.toolbar-top-md ~ .fab-right-bottom {
340445
margin-top: var(--f7-tabbar-labels-height);
341446
}
342447

343-
.messagebar ~ * .fab[class*="-bottom"],
344-
.messagebar ~ .fab[class*="-bottom"] {
448+
.messagebar ~ * .fab-left-bottom,
449+
.messagebar ~ * .fab-center-bottom,
450+
.messagebar ~ * .fab-right-bottom,
451+
.messagebar ~ .fab-left-bottom,
452+
.messagebar ~ .fab-center-bottom,
453+
.messagebar ~ .fab-right-bottom {
345454
margin-bottom: var(--f7-messagebar-height);
346455
}
347456

348457
.navbar {
349458
+ .toolbar-top,
350459
.ios & + .toolbar-top-ios,
351460
.md & + .toolbar-top-ios {
352-
~ * .fab[class*="-top"],
353-
~ .fab[class*="-top"] {
461+
~ * .fab-left-top,
462+
~ * .fab-center-top,
463+
~ * .fab-right-top,
464+
~ .fab-left-top,
465+
~ .fab-center-top,
466+
~ .fab-right-top {
354467
margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
355468
}
356469
}
357470
+ .toolbar-top.tabbar-labels,
358471
.ios & + .toolbar-top-ios.tabbar-labels,
359472
.md & + .toolbar-top-ios.tabbar-labels {
360-
~ * .fab[class*="-top"],
361-
~ .fab[class*="-top"] {
473+
~ * .fab-left-top,
474+
~ * .fab-center-top,
475+
~ * .fab-right-top,
476+
~ .fab-left-top,
477+
~ .fab-center-top,
478+
~ .fab-right-top {
362479
margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
363480
}
364481
}
365482
}
366483
.navbars {
367484
+ .toolbar-top,
368485
.ios & + .toolbar-top-ios {
369-
~ * .fab[class*="-top"],
370-
~ .fab[class*="-top"] {
486+
~ * .fab-left-top,
487+
~ * .fab-center-top,
488+
~ * .fab-right-top,
489+
~ .fab-left-top,
490+
~ .fab-center-top,
491+
~ .fab-right-top {
371492
margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
372493
}
373494
}
374495
+ .toolbar-top.tabbar-labels,
375496
.ios & + .toolbar-top-ios.tabbar-labels {
376-
~ * .fab[class*="-top"],
377-
~ .fab[class*="-top"] {
497+
~ * .fab-left-top,
498+
~ * .fab-center-top,
499+
~ * .fab-right-top,
500+
~ .fab-left-top,
501+
~ .fab-center-top,
502+
~ .fab-right-top {
378503
margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
379504
}
380505
}

0 commit comments

Comments
 (0)