feat: remove link highlights in MD theme, use only touch ripple

framework7io · Mar 31, 2023 · e96f363 · e96f363
1 parent 0d00807
commit e96f363
Show file tree

Hide file tree

Showing 20 changed files with 51 additions and 35 deletions.
diff --git a/src/core/components/button/button-ios.less b/src/core/components/button/button-ios.less
@@ -2,6 +2,9 @@
   // Buttons
   .button {
     transition-duration: 100ms;
+    &.active-state {
+      background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
+    }
   }
   .button-fill,
   .button-fill-ios {

diff --git a/src/core/components/button/button-md.less b/src/core/components/button/button-md.less
@@ -6,9 +6,6 @@
   }
   .button-fill,
   .button-fill-md {
-    --f7-button-pressed-bg-color: var(
-      --f7-button-fill-pressed-bg-color,
-      var(--f7-theme-color-shade)
-    );
+    --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, transparent);
   }
 }
diff --git a/src/core/components/button/button-vars.less b/src/core/components/button/button-vars.less
@@ -6,7 +6,6 @@
 
   /*
   --f7-button-text-color: var(--f7-theme-color);
-  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
   --f7-button-border-color: var(--f7-theme-color);
   --f7-button-fill-bg-color: var(--f7-theme-color);
@@ -23,13 +22,11 @@
   --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
   .light-vars({
     --f7-segmented-strong-button-text-color: #000;
-    --f7-segmented-strong-button-pressed-bg-color: rgba(0,0,0,0.07);
     --f7-segmented-strong-button-hover-bg-color: rgba(0,0,0,0.04);
     --f7-segmented-strong-button-active-text-color: #000;
     --f7-segmented-strong-button-active-bg-color: #fff;
   });
   .dark-vars({
-    --f7-segmented-strong-button-pressed-bg-color: rgba(255,255,255,0.04);
     --f7-segmented-strong-button-hover-bg-color: rgba(255,255,255,0.02);
     --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
     --f7-segmented-strong-button-text-color: #fff;
@@ -47,6 +44,7 @@
   --f7-button-outline-border-color: var(--f7-theme-color);
   --f7-button-outline-border-width: 2px;
   /*
+  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
   */
   --f7-button-large-text-transform: uppercase;
@@ -68,14 +66,19 @@
 
   .light-vars({
     --f7-segmented-strong-bg-color: rgba(0,0,0,0.07);
+    --f7-segmented-strong-button-pressed-bg-color: rgba(0,0,0,0.07);
   });
 
   .dark-vars({
     --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
+    --f7-segmented-strong-button-pressed-bg-color: rgba(255,255,255,0.04);
   });
 
 });
 .md-vars({
+  /*
+  --f7-button-pressed-bg-color: transparent;
+  */
   --f7-button-text-transform: none;
   --f7-button-height: 40px;
   --f7-button-padding-horizontal: 16px;
@@ -94,14 +97,16 @@
   --f7-button-small-font-weight: 500;
   --f7-segmented-strong-button-text-transform: none;
   --f7-segmented-strong-button-active-font-weight: 500;
+  --f7-segmented-strong-button-pressed-bg-color: transparent;
+
 });
 
 .md-color-vars({
-  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
+  --f7-button-fill-pressed-bg-color: transparent;
   --f7-button-fill-text-color: var(--f7-md-on-primary);
   --f7-button-outline-border-color: var(--f7-md-outline);
   --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
   --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
-  --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
+  --f7-button-tonal-pressed-bg-color: transparent;
   --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
 });
diff --git a/src/core/components/button/button.less b/src/core/components/button/button.less
@@ -38,7 +38,6 @@ button {
   background-color: var(--f7-button-bg-color);
   box-shadow: var(--f7-button-box-shadow);
   &.active-state {
-    background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
     color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
   }
   input[type='submit']&,

diff --git a/src/core/components/data-table/data-table-md.less b/src/core/components/data-table/data-table-md.less
@@ -50,7 +50,6 @@
     a.link {
       width: 48px;
       height: 48px;
-      .link-highlight();
     }
   }
   .data-table-rows-select {

diff --git a/src/core/components/dialog/dialog-vars.less b/src/core/components/dialog/dialog-vars.less
@@ -88,10 +88,10 @@
 });
 
 .md-color-vars({
-  --f7-dialog-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
+  --f7-dialog-button-pressed-bg-color: transparent;
   --f7-dialog-button-strong-bg-color: var(--f7-theme-color);
   --f7-dialog-button-strong-text-color: var(--f7-md-on-primary);
-  --f7-dialog-button-strong-pressed-bg-color: var(--f7-theme-color-shade);
+  --f7-dialog-button-strong-pressed-bg-color: transparent;
   --f7-dialog-bg-color: var(--f7-md-surface-3);
   --f7-dialog-text-color: var(--f7-md-on-surface-variant);
   --f7-dialog-title-text-color: var(--f7-md-on-surface);

diff --git a/src/core/components/fab/fab-ios.less b/src/core/components/fab/fab-ios.less
@@ -3,6 +3,7 @@
   .fab-buttons a {
     &.active-state {
       transition-duration: 0ms;
+      background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
     }
   }
 }
diff --git a/src/core/components/fab/fab-md.less b/src/core/components/fab/fab-md.less
@@ -1,2 +1,11 @@
 .md {
+  .fab > a,
+  .fab-buttons a {
+    &.active-state {
+      background-color: var(
+        --f7-fab-pressed-bg-color,
+        var(--f7-fab-bg-color, var(--f7-theme-color))
+      );
+    }
+  }
 }
diff --git a/src/core/components/fab/fab-vars.less b/src/core/components/fab/fab-vars.less
@@ -5,9 +5,10 @@
   --f7-fab-label-padding: 4px 12px;
   --f7-fab-label-font-size: inherit;
   --f7-fab-button-size: 40px;
-  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
+  /* --f7-fab-bg-color: var(--f7-theme-color)); */
 }
 .ios-vars({
+  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
   --f7-fab-text-color: #fff;
   --f7-fab-border-radius: 50px;
   --f7-fab-size: 50px;
@@ -22,6 +23,9 @@
   --f7-fab-label-bg-color: #fff;
 });
 .md-vars({
+  /*
+  --f7-fab-pressed-bg-color: var(--f7-fab-bg-color, var(--f7-theme-color));
+  */
   --f7-fab-border-radius: 16px;
   --f7-fab-size: 56px;
   --f7-fab-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),

diff --git a/src/core/components/fab/fab.less b/src/core/components/fab/fab.less
@@ -100,9 +100,6 @@
   overflow: hidden;
   z-index: 1;
   color: var(--f7-fab-text-color);
-  &.active-state {
-    background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
-  }
 }
 
 .fab > a {

diff --git a/src/core/components/list/list-md.less b/src/core/components/list/list-md.less
@@ -0,0 +1,5 @@
+.md {
+  .menu-list .item-link.active-state {
+    background-color: var(--f7-menu-list-item-bg-color);
+  }
+}
diff --git a/src/core/components/list/list-vars.less b/src/core/components/list/list-vars.less
@@ -29,7 +29,6 @@
 
   /*
   --f7-list-button-text-color: var(--f7-theme-color);
-  --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   */
   --f7-list-button-font-size: inherit;
   --f7-list-button-font-weight: 400;
@@ -82,6 +81,9 @@
   --f7-list-media-item-padding-vertical: 10px;
   --f7-list-media-item-title-font-weight: 600;
   --f7-list-button-border-color: rgba(0,0,0,0.22);
+  /*
+  --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
+  */
 
   --f7-list-group-title-border-color: rgba(0,0,0,0.22);
 
@@ -146,6 +148,9 @@
   --f7-list-media-item-padding-vertical: 12px;
   --f7-list-media-item-title-font-weight: 500;
   --f7-list-button-border-color: transparent;
+  /*
+  --f7-list-button-pressed-bg-color: transparent;
+  */
 
   --f7-list-group-title-border-color: transparent;
 
@@ -156,13 +161,8 @@
   --f7-menu-list-offset: 16px;
   --f7-menu-list-border-radius: 999px;
   --f7-menu-list-item-min-height: 56px;
+  --f7-list-link-pressed-bg-color: transparent;
 
-  .light-vars({
-    --f7-list-link-pressed-bg-color: rgba(0,0,0,0.1);
-  });
-  .dark-vars({
-    --f7-list-link-pressed-bg-color: rgba(255,255,255,0.05);
-  });
 });
 
 .md-color-vars({

diff --git a/src/core/components/list/list.less b/src/core/components/list/list.less
@@ -273,9 +273,12 @@
   font-weight: var(--f7-list-button-font-weight);
   text-align: var(--f7-list-button-text-align);
 
-  &.active-state {
+  .ios &.active-state {
     background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
   }
+  .md &.active-state {
+    background-color: var(--f7-list-button-pressed-bg-color, transparent);
+  }
   .list-dividers &,
   .ios .list-dividers-ios &,
   .md .list-dividers-md & {

diff --git a/src/core/components/navbar/navbar-md.less b/src/core/components/navbar/navbar-md.less
@@ -10,7 +10,6 @@
     a.link {
       padding: 0 12px;
       min-width: 48px;
-      .link-highlight();
     }
     a.icon-only {
       min-width: 0;

diff --git a/src/core/components/searchbar/searchbar-md.less b/src/core/components/searchbar/searchbar-md.less
@@ -42,8 +42,6 @@
       right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right));
     });
 
-    .link-highlight();
-
     &:after {
       .core-icons-font();
       line-height: 48px;
@@ -74,7 +72,6 @@
       margin-top: -24px;
       .ltr({ right: 0; });
       .rtl({ left: 0; });
-      .link-highlight();
 
       &:after {
         line-height: 48px;

diff --git a/src/core/components/stepper/stepper-md.less b/src/core/components/stepper/stepper-md.less
@@ -9,8 +9,8 @@
   .stepper-fill,
   .stepper-fill-md {
     --f7-stepper-button-pressed-bg-color: var(
-      --f7-stepper-fill-button-pressed-bg-color,
-      var(--f7-theme-color-shade)
+      --f7-stepper-fill-button-bg-color,
+      var(--f7-theme-color)
     );
   }
 }
diff --git a/src/core/components/stepper/stepper-vars.less b/src/core/components/stepper/stepper-vars.less
@@ -31,9 +31,10 @@
   --f7-stepper-value-font-size: 14px;
   --f7-stepper-border-width: 1px;
   --f7-stepper-small-border-width: 1px;
+  --f7-stepper-button-pressed-bg-color: transparent;
 });
 .md-color-vars({
   --f7-stepper-fill-button-text-color: var(--f7-md-on-primary);
-  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
+  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color);
   --f7-stepper-border-color: var(--f7-md-outline);
 });
diff --git a/src/core/components/subnavbar/subnavbar-md.less b/src/core/components/subnavbar/subnavbar-md.less
@@ -18,7 +18,6 @@
       }
     });;
     a.link {
-      .link-highlight();
       justify-content: center;
       padding: 0 12px;
     }

diff --git a/src/core/components/text-editor/text-editor-md.less b/src/core/components/text-editor/text-editor-md.less
@@ -1,7 +1,6 @@
 .md {
   button.text-editor-button {
     --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
-    .link-highlight();
   }
   .text-editor-keyboard-toolbar {
     .toolbar-inner {

diff --git a/src/core/components/toolbar/toolbar-md.less b/src/core/components/toolbar/toolbar-md.less
@@ -4,7 +4,6 @@
       justify-content: center;
       padding: 0 12px;
       min-width: 48px;
-      .link-highlight();
     }
     a.icon-only {
       min-width: 0;