feat(list): support label.item-content as activable element

framework7io · Oct 27, 2022 · e4cb150 · e4cb150
1 parent 933db6f
commit e4cb150
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/core/components/list/list-vars.less b/src/core/components/list/list-vars.less
@@ -52,7 +52,6 @@
   .dark-vars({
     --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
     --f7-list-outline-border-color: rgba(255, 255, 255, 0.15);
-    --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
     --f7-list-group-title-border-color: rgba(255, 255, 255, 0.15);
     --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
 
@@ -68,7 +67,6 @@
   --f7-list-item-subtitle-text-color: inherit;
 
 
-  --f7-list-item-border-color: rgba(0,0,0,0.22);
   --f7-list-link-pressed-bg-color: rgba(0,0,0,0.15);
 
   --f7-list-item-subtitle-font-size: 15px;
@@ -98,6 +96,7 @@
   --f7-menu-list-item-min-height: 44px;
 
   .light-vars({
+    --f7-list-item-border-color: rgba(0,0,0,0.22);
     --f7-list-outline-inset-border-color: rgba(0,0,0,0.22);
     --f7-list-strong-bg-color: #fff;
     --f7-list-item-after-text-color: rgba(0,0,0,0.45);
@@ -111,6 +110,7 @@
     --f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
   });
   .dark-vars({
+    --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
     --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
     --f7-list-strong-bg-color: #1c1c1d;
     --f7-list-item-after-text-color: rgba(255,255,255,0.55);
@@ -126,12 +126,11 @@
   });
 });
 .md-vars({
-  --f7-list-in-list-padding-left: 40px;
+  --f7-list-in-list-padding-left: 24px;
   --f7-list-inset-border-radius: 16px;
   --f7-list-margin-vertical: 32px;
   --f7-list-font-size: 16px;
   --f7-list-chevron-icon-area: 26px;
-  --f7-list-item-border-color: rgba(0,0,0,0.12);
 
   --f7-list-item-subtitle-font-size: 14px;
 
@@ -168,6 +167,7 @@
 
 .md-color-vars({
   --f7-list-outline-inset-border-color: var(--f7-md-outline);
+  --f7-list-item-border-color: var(--f7-md-outline);
   --f7-list-item-title-text-color: var(--f7-md-on-surface);
   --f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
   --f7-list-group-title-bg-color: var(--f7-md-surface-2);

diff --git a/src/core/components/list/list.less b/src/core/components/list/list.less
@@ -162,19 +162,27 @@
     line-height: var(--f7-list-item-footer-line-height);
   }
   .item-link,
+  label.item-content,
   .list-button {
     transition-duration: 300ms;
     transition-property: background-color, color;
-    display: block;
     position: relative;
     overflow: hidden;
     z-index: 0;
+    cursor: pointer;
   }
-  .item-link {
+  .item-link,
+  .list-button {
+    display: block;
+  }
+  .item-link,
+  label.item-content {
     color: inherit;
     &.active-state {
       background-color: var(--f7-list-link-pressed-bg-color);
     }
+  }
+  .item-link {
     .item-inner {
       .ltr({
         padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));

diff --git a/src/core/modules/touch/touch.js b/src/core/modules/touch/touch.js
@@ -517,7 +517,7 @@ export default {
       mdTouchRipple: true,
       iosTouchRipple: false,
       touchRippleElements:
-        '.ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content, .list.accordion-list .accordion-item-toggle',
+        '.ripple, .link, .item-link, .list label.item-content, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content, .list.accordion-list .accordion-item-toggle',
       touchRippleInsetElements:
         '.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back',
     },