5.0.0-beta.3 release

framework7io · Aug 6, 2019 · bd3d33a · bd3d33a
1 parent edb7938
commit bd3d33a
Show file tree

Hide file tree

Showing 170 changed files with 3,267 additions and 3,170 deletions.
diff --git a/kitchen-sink/core/index.html b/kitchen-sink/core/index.html
@@ -8,7 +8,7 @@
   <meta name="theme-color" content="#2196f3">
   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
   <title>Framework7</title>
-  <link rel="stylesheet" href="../../build/core/css/framework7.bundle.css">
+  <link rel="stylesheet" href="../../packages/core/css/framework7.bundle.min.css">
   <link rel="stylesheet" href="css/app.css">
   <link rel="apple-touch-icon" href="img/f7-icon-square.png">
   <link rel="icon" href="img/f7-icon.png">
@@ -683,7 +683,7 @@
       </div>
     </div>
   </div>
-  <script src="../../build/core/js/framework7.bundle.js"></script>
+  <script src="../../packages/core/js/framework7.bundle.min.js"></script>
   <script src="js/routes.js"></script>
   <script src="js/app.js"></script>
 </body>

diff --git a/packages/core/components/actions.css b/packages/core/components/actions.css
diff --git a/packages/core/components/actions.rtl.css b/packages/core/components/actions.rtl.css
diff --git a/packages/core/components/actions/actions-aurora.less b/packages/core/components/actions/actions-aurora.less
@@ -1,9 +1,9 @@
 .aurora {
   .actions-button-media {
-    margin-left: 15px;
+    margin-left: 16px;
     + .actions-button-text {
       text-align: left;
-      margin-left: 15px;
+      margin-left: 16px;
     }
   }
 }
diff --git a/packages/core/components/actions/actions-ios.less b/packages/core/components/actions/actions-ios.less
@@ -1,9 +1,9 @@
 .ios {
   .actions-button-media {
-    margin-left: 15px;
+    margin-left: 16px;
     + .actions-button-text {
       text-align: left;
-      margin-left: 15px;
+      margin-left: 16px;
     }
   }
 }
diff --git a/packages/core/components/actions/actions-vars.less b/packages/core/components/actions/actions-vars.less
@@ -51,9 +51,16 @@
   --f7-actions-label-text-color: rgba(0,0,0,0.54);
   --f7-actions-label-font-size: 16px;
   --f7-actions-label-justify-content: flex-start;
-  --f7-actions-group-border-color: #d2d2d6;
+  --f7-actions-group-border-color: rgba(0,0,0,0.12);
   --f7-actions-group-margin: 0px;
   --f7-actions-grid-button-icon-size: 48px;
+  .theme-dark, &.theme-dark {
+    --f7-actions-bg-color: #202020;
+    --f7-actions-button-text-color: #fff;
+    --f7-actions-button-pressed-bg-color: #2e2e2e;
+    --f7-actions-label-text-color:rgba(255,255,255,0.55);
+    --f7-actions-group-border-color: rgba(255,255,255,0.15);
+  }
 });
 .aurora-vars({
   --f7-actions-bg-color: #fff;
@@ -63,18 +70,26 @@
   --f7-actions-button-text-color: var(--f7-theme-color);
   */
   --f7-actions-button-pressed-bg-color: #e5e5e5;
-  --f7-actions-button-padding: 0 15px;
+  --f7-actions-button-padding: 0 16px;
   --f7-actions-button-text-align: center;
   --f7-actions-button-height: 32px;
   --f7-actions-button-height-landscape: 32px;
   --f7-actions-button-font-size: 14px;
   --f7-actions-button-icon-size: 18px;
   --f7-actions-button-justify-content: space-between;
-  --f7-actions-label-padding: 10px 15px;
+  --f7-actions-label-padding: 10px 16px;
   --f7-actions-label-text-color: rgba(0,0,0,0.5);
   --f7-actions-label-font-size: 12px;
   --f7-actions-label-justify-content: center;
   --f7-actions-group-border-color: rgba(0,0,0,0.1);
-  --f7-actions-group-margin: 15px;
+  --f7-actions-group-margin: 16px;
   --f7-actions-grid-button-icon-size: 32px;
+  .theme-dark, &.theme-dark {
+    --f7-actions-bg-color: #202020;
+    --f7-actions-button-text-color: #fff;
+    --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
+    --f7-actions-button-pressed-bg-color: #2e2e2e;
+    --f7-actions-label-text-color:rgba(255,255,255,0.55);
+    --f7-actions-group-border-color: rgba(255,255,255,0.15);
+  }
 });
diff --git a/packages/core/components/actions/actions.less b/packages/core/components/actions/actions.less
@@ -58,7 +58,7 @@
   overflow: hidden;
   text-align: var(--f7-actions-button-text-align);
   background: var(--f7-actions-bg-color);
-  .translucent(var(--f7-actions-bg-color-rgb));
+  .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
   .hairline(bottom, var(--f7-actions-button-border-color));
   &:first-child {
     border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
@@ -97,7 +97,7 @@
   }
 }
 .actions-button.active-state {
-  .translucent(var(--f7-actions-button-pressed-bg-color-rgb));
+  .ios-translucent-modals(var(--f7-actions-button-pressed-bg-color-rgb));
 }
 
 .actions-button-media {
@@ -189,7 +189,7 @@
   }
 }
 .actions-grid .actions-group {
-  .translucent(var(--f7-actions-bg-color-rgb));
+  .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
 }
 .if-ios-theme({
   @import url('./actions-ios.less');

diff --git a/packages/core/components/app/app-class.js b/packages/core/components/app/app-class.js
@@ -36,7 +36,8 @@ class Framework7 extends Framework7Class {
       initOnDeviceReady: true,
       init: true,
       autoDarkTheme: false,
-      iosTranslucent: true,
+      iosTranslucentBars: true,
+      iosTranslucentModals: true,
     };
 
     // Extend defaults with modules params
@@ -187,8 +188,11 @@ class Framework7 extends Framework7Class {
     $('html').removeClass('ios md aurora').addClass(app.theme);
 
     // iOS Translucent
-    if (app.theme === 'ios' && app.params.iosTranslucent) {
-      $('html').addClass('ios-translucent');
+    if (app.theme === 'ios' && app.params.iosTranslucentBars) {
+      $('html').addClass('ios-translucent-bars');
+    }
+    if (app.theme === 'ios' && app.params.iosTranslucentModals) {
+      $('html').addClass('ios-translucent-modals');
     }
 
     // Init class

diff --git a/packages/core/components/app/app-vars.less b/packages/core/components/app/app-vars.less
@@ -106,6 +106,8 @@
   --f7-bars-bg-image: none;
   --f7-bars-bg-color: #f7f7f8;
   --f7-bars-bg-color-rgb: 247, 247, 248;
+  --f7-bars-translucent-opacity: 0.8;
+  --f7-bars-translucent-blur: 20px;
   --f7-bars-text-color: #000;
   --f7-bars-shadow-bottom-image: linear-gradient(to bottom,
     rgba(0,0,0,0.25) 0%,
@@ -123,8 +125,6 @@
   );
 }
 .theme-dark {
-  --f7-bars-bg-color: #1b1b1b;
-  --f7-bars-bg-color-rgb: 27, 27, 27;
   --f7-bars-text-color: #fff;
 }
 .ios-vars({
@@ -137,10 +137,14 @@
 });
 .md-vars({
   --f7-bars-border-color: transparent;
+  .theme-dark, &.theme-dark {
+    --f7-bars-bg-color: #202020;
+  }
 });
 .aurora-vars({
   --f7-bars-border-color: rgba(0,0,0,0.2);
   .theme-dark, &.theme-dark {
+    --f7-bars-bg-color: #202020;
     --f7-bars-border-color: rgba(255, 255, 255, 0.1);
   }
 });

diff --git a/packages/core/components/appbar.css b/packages/core/components/appbar.css
diff --git a/packages/core/components/appbar.rtl.css b/packages/core/components/appbar.rtl.css
diff --git a/packages/core/components/appbar/appbar-vars.less b/packages/core/components/appbar/appbar-vars.less
@@ -23,6 +23,6 @@
 });
 .aurora-vars({
   --f7-appbar-height: 38px;
-  --f7-appbar-inner-padding-left: 15px;
-  --f7-appbar-inner-padding-right: 15px;
+  --f7-appbar-inner-padding-left: 16px;
+  --f7-appbar-inner-padding-right: 16px;
 });
diff --git a/packages/core/components/appbar/appbar.less b/packages/core/components/appbar/appbar.less
@@ -17,7 +17,7 @@
   color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
   font-size: var(--f7-appbar-font-size);
   z-index: 7000;
-  .translucent(var(--f7-appbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
+  .ios-translucent-bars(var(--f7-appbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
   .panel ~ .appbar {
     z-index: 5500;
   }