Skip to content

Commit

Permalink
5.7.1 release
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed May 1, 2020
1 parent 152e5b6 commit 9501044
Show file tree
Hide file tree
Showing 66 changed files with 793 additions and 332 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@

# Change Log

# [v5.7.1](https://github.com/framework7io/framework7/compare/v5.7.0...v5.7.1) - May 1, 2020
* Core
* CSS
* `body` background color changed to `#000` when dark theme enabled
* Panel
* Now it correctly handles disabling backdrop.
* Text Editor
* Popover now calculates position relative to app root element (#3618)
* View
* Fixed `current` view detection when using layout with swipeable tabs
* Minor fixes

# [v5.7.0](https://github.com/framework7io/framework7/compare/v5.6.0...v5.7.0) - April 25, 2020
* Core
* Card
Expand Down
4 changes: 4 additions & 0 deletions packages/core/components/app/app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ body {
line-height: var(--f7-line-height);
color: var(--f7-text-color);
}
.theme-dark body,
body.theme-dark {
background: #000;
}
.theme-dark {
color: var(--f7-text-color);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/components/fab.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/core/components/fab.rtl.css
View file

Large diffs are not rendered by default.

237 changes: 181 additions & 56 deletions packages/core/components/fab/fab.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,52 @@
/* === FAB === */
@import url('./fab-vars.less');

.left-fabs(@ruleset) {
.fab-left-top,
.fab-left-center,
.fab-left-bottom {
@ruleset();
}
}
.right-fabs(@ruleset) {
.fab-right-top,
.fab-right-center,
.fab-right-bottom {
@ruleset();
}
}

.top-fabs(@ruleset) {
.fab-left-top,
.fab-center-top,
.fab-right-top {
@ruleset();
}
}

.bottom-fabs(@ruleset) {
.fab-left-bottom,
.fab-center-bottom,
.fab-right-bottom {
@ruleset();
}
}

.vertical-center-fabs(@ruleset) {
.fab-center-top,
.fab-center-center,
.fab-center-bottom {
@ruleset();
}
}
.horizontal-center-fabs(@ruleset) {
.fab-left-center,
.fab-center-center,
.fab-right-center {
@ruleset();
}
}

.fab-backdrop {
z-index: 1400;
}
Expand All @@ -10,28 +57,30 @@
--f7-touch-ripple-color: var(--f7-touch-ripple-white);
}
}
.fab[class*="fab-left"] {
.left-fabs({
left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
}
.fab[class*="fab-right"] {
});
.right-fabs({
right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
}
.fab[class*="-top"] {
});
.top-fabs({
top: var(--f7-fab-margin);
}
.fab[class*="-bottom"] {
});
.bottom-fabs({
bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
}
.fab[class*="fab-center"] {
});

.vertical-center-fabs({
left: 50%;
transform: translateX(-50%);
}
.fab[class*="left-center"],
.fab[class*="right-center"] {
});

.horizontal-center-fabs({
top: 50%;
transform: translateY(-50%);
}
.fab[class*="center-center"] {
});

.fab-center-center {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
Expand Down Expand Up @@ -286,95 +335,171 @@
pointer-events: none;
font-size: var(--f7-fab-label-font-size);
}
.fab[class*="fab-right-"] {
.right-fabs({
.fab-label {
right: 100%;
margin-right: 8px;
}
}
.fab[class*="fab-left-"] {
});
.left-fabs({
.fab-label {
left: 100%;
margin-left: 8px;
}
}
});

// Relation with navbar
.navbar ~ * .fab[class*="-top"],
.navbar ~ .fab[class*="-top"],
.navbars ~ * .fab[class*="-top"],
.navbars ~ .fab[class*="-top"] {
.navbar ~ * .fab-left-top,
.navbar ~ * .fab-center-top,
.navbar ~ * .fab-right-top,
.navbar ~ .fab-left-top,
.navbar ~ .fab-center-top,
.navbar ~ .fab-right-top,
.navbars ~ * .fab-left-top,
.navbars ~ * .fab-center-top,
.navbars ~ * .fab-right-top,
.navbars ~ .fab-left-top,
.navbars ~ .fab-center-top,
.navbars ~ .fab-right-top {
margin-top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
}
// Relation with toolbar
.toolbar-top ~ * .fab[class*="-top"],
.toolbar-top ~ .fab[class*="-top"],
.ios .toolbar-top-ios ~ * .fab[class*="-top"],
.ios .toolbar-top-ios ~ .fab[class*="-top"],
.md .toolbar-top-md ~ * .fab[class*="-top"],
.md .toolbar-top-md ~ .fab[class*="-top"] {
.toolbar-top ~ * .fab-left-top,
.toolbar-top ~ * .fab-center-top,
.toolbar-top ~ * .fab-right-top,
.toolbar-top ~ .fab-left-top,
.toolbar-top ~ .fab-center-top,
.toolbar-top ~ .fab-right-top,
.ios .toolbar-top-ios ~ * .fab-left-top,
.ios .toolbar-top-ios ~ * .fab-center-top,
.ios .toolbar-top-ios ~ * .fab-right-top,
.ios .toolbar-top-ios ~ .fab-left-top,
.ios .toolbar-top-ios ~ .fab-center-top,
.ios .toolbar-top-ios ~ .fab-right-top,
.md .toolbar-top-md ~ * .fab-left-top,
.md .toolbar-top-md ~ * .fab-center-top,
.md .toolbar-top-md ~ * .fab-right-top,
.md .toolbar-top-md ~ .fab-left-top,
.md .toolbar-top-md ~ .fab-center-top,
.md .toolbar-top-md ~ .fab-right-top {
margin-top: var(--f7-toolbar-height);
}
.toolbar-bottom ~ * .fab[class*="-bottom"],
.toolbar-bottom ~ .fab[class*="-bottom"],
.ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"],
.ios .toolbar-bottom-ios ~ .fab[class*="-bottom"],
.md .toolbar-bottom-md ~ * .fab[class*="-bottom"],
.md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
.toolbar-bottom ~ * .fab-left-bottom,
.toolbar-bottom ~ * .fab-center-bottom,
.toolbar-bottom ~ * .fab-right-bottom,
.toolbar-bottom ~ .fab-left-bottom,
.toolbar-bottom ~ .fab-center-bottom,
.toolbar-bottom ~ .fab-right-bottom,
.ios .toolbar-bottom-ios ~ * .fab-left-bottom,
.ios .toolbar-bottom-ios ~ * .fab-center-bottom,
.ios .toolbar-bottom-ios ~ * .fab-right-bottom,
.ios .toolbar-bottom-ios ~ .fab-left-bottom,
.ios .toolbar-bottom-ios ~ .fab-center-bottom,
.ios .toolbar-bottom-ios ~ .fab-right-bottom,
.md .toolbar-bottom-md ~ * .fab-left-bottom,
.md .toolbar-bottom-md ~ * .fab-center-bottom,
.md .toolbar-bottom-md ~ * .fab-right-bottom,
.md .toolbar-bottom-md ~ .fab-left-bottom,
.md .toolbar-bottom-md ~ .fab-center-bottom,
.md .toolbar-bottom-md ~ .fab-right-bottom {
margin-bottom: var(--f7-toolbar-height);
}
.tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"],
.tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"],
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"],
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"],
.md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"],
.md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
.tabbar-labels.toolbar-bottom ~ * .fab-left-bottom,
.tabbar-labels.toolbar-bottom ~ * .fab-center-bottom,
.tabbar-labels.toolbar-bottom ~ * .fab-right-bottom,
.tabbar-labels.toolbar-bottom ~ .fab-left-bottom,
.tabbar-labels.toolbar-bottom ~ .fab-center-bottom,
.tabbar-labels.toolbar-bottom ~ .fab-right-bottom,
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-left-bottom,
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-center-bottom,
.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-right-bottom,
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-left-bottom,
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-center-bottom,
.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-right-bottom,
.md .tabbar-labels.toolbar-bottom-md ~ * .fab-left-bottom,
.md .tabbar-labels.toolbar-bottom-md ~ * .fab-center-bottom,
.md .tabbar-labels.toolbar-bottom-md ~ * .fab-right-bottom,
.md .tabbar-labels.toolbar-bottom-md ~ .fab-left-bottom,
.md .tabbar-labels.toolbar-bottom-md ~ .fab-center-bottom,
.md .tabbar-labels.toolbar-bottom-md ~ .fab-right-bottom {
margin-bottom: var(--f7-tabbar-labels-height);
}
.tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"],
.tabbar-labels.toolbar-top ~ .fab[class*="-bottom"],
.ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"],
.ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"],
.md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"],
.md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
.tabbar-labels.toolbar-top ~ * .fab-left-bottom,
.tabbar-labels.toolbar-top ~ * .fab-center-bottom,
.tabbar-labels.toolbar-top ~ * .fab-right-bottom,
.tabbar-labels.toolbar-top ~ .fab-left-bottom,
.tabbar-labels.toolbar-top ~ .fab-center-bottom,
.tabbar-labels.toolbar-top ~ .fab-right-bottom,
.ios .tabbar-labels.toolbar-top-ios ~ * .fab-left-bottom,
.ios .tabbar-labels.toolbar-top-ios ~ * .fab-center-bottom,
.ios .tabbar-labels.toolbar-top-ios ~ * .fab-right-bottom,
.ios .tabbar-labels.toolbar-top-ios ~ .fab-left-bottom,
.ios .tabbar-labels.toolbar-top-ios ~ .fab-center-bottom,
.ios .tabbar-labels.toolbar-top-ios ~ .fab-right-bottom,
.md .tabbar-labels.toolbar-top-md ~ * .fab-left-bottom,
.md .tabbar-labels.toolbar-top-md ~ * .fab-center-bottom,
.md .tabbar-labels.toolbar-top-md ~ * .fab-right-bottom,
.md .tabbar-labels.toolbar-top-md ~ .fab-left-bottom,
.md .tabbar-labels.toolbar-top-md ~ .fab-center-bottom,
.md .tabbar-labels.toolbar-top-md ~ .fab-right-bottom {
margin-top: var(--f7-tabbar-labels-height);
}

.messagebar ~ * .fab[class*="-bottom"],
.messagebar ~ .fab[class*="-bottom"] {
.messagebar ~ * .fab-left-bottom,
.messagebar ~ * .fab-center-bottom,
.messagebar ~ * .fab-right-bottom,
.messagebar ~ .fab-left-bottom,
.messagebar ~ .fab-center-bottom,
.messagebar ~ .fab-right-bottom {
margin-bottom: var(--f7-messagebar-height);
}

.navbar {
+ .toolbar-top,
.ios & + .toolbar-top-ios,
.md & + .toolbar-top-ios {
~ * .fab[class*="-top"],
~ .fab[class*="-top"] {
~ * .fab-left-top,
~ * .fab-center-top,
~ * .fab-right-top,
~ .fab-left-top,
~ .fab-center-top,
~ .fab-right-top {
margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
}
}
+ .toolbar-top.tabbar-labels,
.ios & + .toolbar-top-ios.tabbar-labels,
.md & + .toolbar-top-ios.tabbar-labels {
~ * .fab[class*="-top"],
~ .fab[class*="-top"] {
~ * .fab-left-top,
~ * .fab-center-top,
~ * .fab-right-top,
~ .fab-left-top,
~ .fab-center-top,
~ .fab-right-top {
margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
}
}
}
.navbars {
+ .toolbar-top,
.ios & + .toolbar-top-ios {
~ * .fab[class*="-top"],
~ .fab[class*="-top"] {
~ * .fab-left-top,
~ * .fab-center-top,
~ * .fab-right-top,
~ .fab-left-top,
~ .fab-center-top,
~ .fab-right-top {
margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
}
}
+ .toolbar-top.tabbar-labels,
.ios & + .toolbar-top-ios.tabbar-labels {
~ * .fab[class*="-top"],
~ .fab[class*="-top"] {
~ * .fab-left-top,
~ * .fab-center-top,
~ * .fab-right-top,
~ .fab-left-top,
~ .fab-center-top,
~ .fab-right-top {
margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
}
}
Expand Down

0 comments on commit 9501044

Please sign in to comment.