feat(core): remove bars shadows in MD theme

framework7io · Sep 26, 2022 · f14b30f · f14b30f
1 parent c9b7519
commit f14b30f
Show file tree

Hide file tree

Showing 14 changed files with 5 additions and 51 deletions.
diff --git a/src/core/components/app/app-vars.less b/src/core/components/app/app-vars.less
@@ -65,7 +65,6 @@
   /*
   --f7-bars-link-color: var(--f7-theme-color);
   */
-  --f7-bars-bg-image: none;
   --f7-bars-translucent-opacity: 0.8;
   --f7-bars-translucent-blur: 20px;
   --f7-bars-shadow-bottom-image: linear-gradient(

diff --git a/src/core/components/appbar/appbar-vars.less b/src/core/components/appbar/appbar-vars.less
@@ -4,7 +4,6 @@
   --f7-appbar-extra-offset: 0px;
   --f7-appbar-bg-color: var(--f7-bars-bg-color);
   --f7-appbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
-  --f7-appbar-bg-image: var(--f7-bars-bg-image);
   --f7-appbar-border-color: var(--f7-bars-border-color);
   --f7-appbar-link-color: var(--f7-bars-link-color);
   --f7-appbar-text-color: var(--f7-bars-text-color);

diff --git a/src/core/components/appbar/appbar.less b/src/core/components/appbar/appbar.less
@@ -12,7 +12,6 @@
   margin: 0;
   transform: translate3d(0, 0, 0);
   height: calc(var(--f7-appbar-height) + var(--f7-safe-area-top));
-  background-image: var(--f7-appbar-bg-image, var(--f7-bars-bg-image));
   background-color: var(--f7-appbar-bg-color, var(--f7-bars-bg-color));
   color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
   font-size: var(--f7-appbar-font-size);
@@ -55,7 +54,6 @@
     backface-visibility: hidden;
   }
   .hairline(bottom, var(--f7-appbar-border-color, var(--f7-bars-border-color)));
-  .bar-shadow-bottom(var(--f7-appbar-shadow-image));
   &:after {
     z-index: 1;
   }

diff --git a/src/core/components/messagebar/messagebar.less b/src/core/components/messagebar/messagebar.less
@@ -10,7 +10,6 @@
   padding-bottom: var(--f7-safe-area-bottom);
   bottom: 0;
   .hairline(top, var(--f7-messagebar-border-color));
-  .bar-shadow-top(var(--f7-messagebar-shadow-image));
   .ios-translucent-bars(var(--f7-messagebar-bg-color-rgb));
   &.no-hairline,
   &.no-border {

diff --git a/src/core/components/photo-browser/photo-browser-vars.less b/src/core/components/photo-browser/photo-browser-vars.less
@@ -1,6 +1,5 @@
 :root {
   --f7-photobrowser-bg-color: #fff;
-  --f7-photobrowser-bars-bg-image: none;
   /*
   --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
   --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);

diff --git a/src/core/components/photo-browser/photo-browser.less b/src/core/components/photo-browser/photo-browser.less
@@ -177,7 +177,6 @@
 .navbar-photo-browser .navbar-bg,
 .photo-browser-page .toolbar {
   background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
-  background-image: var(--f7-photobrowser-bars-bg-image);
 }
 .photo-browser-page {
   .navbar,

diff --git a/src/core/components/searchbar/searchbar-vars.less b/src/core/components/searchbar/searchbar-vars.less
@@ -16,7 +16,6 @@
 }
 .ios-vars({
   /*
-  --f7-searchbar-bg-image: var(--f7-bars-bg-image);
   --f7-searchbar-bg-color: var(--f7-bars-bg-color);
   --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
   --f7-searchbar-border-color: var(--f7-bars-border-color);

diff --git a/src/core/components/searchbar/searchbar.less b/src/core/components/searchbar/searchbar.less
@@ -10,7 +10,6 @@
   position: relative;
   z-index: 200;
   height: var(--f7-searchbar-height);
-  background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
   background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color));
   input[type='search']::-webkit-search-decoration {
     display: none;
@@ -36,7 +35,6 @@
 
   .page > &:not(.searchbar-inline) {
     z-index: 600;
-    .bar-shadow-bottom(var(--f7-searchbar-shadow-image));
   }
   input[type='text'],
   input[type='search'] {

diff --git a/src/core/components/subnavbar/subnavbar-vars.less b/src/core/components/subnavbar/subnavbar-vars.less
@@ -1,6 +1,5 @@
 :root {
   /*
-  --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
   --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
   --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
   --f7-subnavbar-border-color: var(--f7-bars-border-color);

diff --git a/src/core/components/subnavbar/subnavbar.less b/src/core/components/subnavbar/subnavbar.less
@@ -10,7 +10,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
   background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
   color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
   .ios-translucent-bars(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
@@ -70,7 +69,6 @@
     backface-visibility: hidden;
   }
   .hairline(bottom, var(--f7-subnavbar-border-color, var(--f7-bars-border-color)));
-  .bar-shadow-bottom(var(--f7-subnavbar-shadow-image));
 }
 .subnavbar-inner {
   width: 100%;

diff --git a/src/core/components/timeline/timeline.less b/src/core/components/timeline/timeline.less
@@ -244,7 +244,6 @@ each(@breakpoints, {
     color: var(--f7-bars-text-color);
     .ios-translucent-bars(var(--f7-bars-bg-color-rgb));
     .hairline(bottom, var(--f7-timeline-horizontal-item-date-border-color));
-    .bar-shadow-bottom(var(--f7-timeline-horizontal-item-date-shadow-image));
     .ltr({
       text-align: left;
     });

diff --git a/src/core/components/toolbar/toolbar-vars.less b/src/core/components/toolbar/toolbar-vars.less
@@ -2,7 +2,6 @@
   /*
   --f7-toolbar-bg-color: var(--f7-bars-bg-color);
   --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
-  --f7-toolbar-bg-image: var(--f7-bars-bg-image);
   --f7-toolbar-border-color: var(--f7-bars-border-color);
   --f7-toolbar-link-color: var(--f7-bars-link-color);
   --f7-toolbar-text-color: var(--f7-bars-text-color);
@@ -43,19 +42,17 @@
 
 });
 .md-vars({
-  --f7-toolbar-height: 48px;
+  --f7-toolbar-height: 56px;
   --f7-toolbar-font-size: 14px;
   --f7-toolbar-inner-padding-left: 0px;
   --f7-toolbar-inner-padding-right: 0px;
   /*
   --f7-toolbar-link-height: var(--f7-toolbar-height);
   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
   */
-  --f7-tabbar-labels-height: 56px;
-  --f7-tabbar-labels-tablet-height: 56px;
-  /*
-  --f7-tabbar-link-active-border-color: var(--f7-theme-color);
-  */
+  --f7-tabbar-labels-height: 80px;
+  --f7-tabbar-labels-tablet-height: 80px;
+  --f7-tabbar-link-active-border-color: var(--f7-md-primary);
   --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
   --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
   --f7-tabbar-icon-size: 24px;

diff --git a/src/core/components/toolbar/toolbar.less b/src/core/components/toolbar/toolbar.less
@@ -11,7 +11,6 @@
   box-sizing: border-box;
   left: 0;
   height: var(--f7-toolbar-height);
-  background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
   background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
   color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
   font-size: var(--f7-toolbar-font-size);
@@ -71,7 +70,6 @@
     backface-visibility: hidden;
   }
   .hairline(bottom, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
-  .bar-shadow-bottom(var(--f7-toolbar-top-shadow-image));
 }
 .toolbar-bottom,
 .ios .toolbar-bottom-ios,
@@ -100,7 +98,6 @@
   }
 
   .hairline(top, var(--f7-toolbar-border-color, var(--f7-bars-border-color)));
-  .bar-shadow-top(var(--f7-toolbar-bottom-shadow-image));
 }
 .toolbar-inner {
   position: absolute;

diff --git a/src/core/less/mixins.less b/src/core/less/mixins.less
@@ -255,33 +255,7 @@
   }
 }
 // MD Bars Shadow
-.bar-shadow-bottom(@image) {
-  &:before {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 100%;
-    top: 100%;
-    bottom: auto;
-    height: 8px;
-    pointer-events: none;
-    background: @image;
-  }
-}
-.bar-shadow-top(@image) {
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 100%;
-    bottom: 100%;
-    height: 8px;
-    top: auto;
-    pointer-events: none;
-    background: @image;
-    transform: translate3d(0, 0, 0);
-  }
-}
+
 .core-icons-font() {
   font-family: 'framework7-core-icons';
   font-weight: normal;