Skip to content

Commit 9ec6aae

Browse files
nolimits4webnolimits4web
committed
feat(list): m3 colors, unify item-divider -> list-group-title
1 parent b050a88 commit 9ec6aae

File tree

20 files changed

+55
-86
lines changed

20 files changed

+55
-86
lines changed

‎kitchen-sink/core/pages/list-index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -630,7 +630,7 @@
630630
listEl: $el.value.find('.list'),
631631
// ".list-index" element
632632
el: $el.value.find('.list-index'),
633-
// Generate indexes automatically based on ".list-group-title" and ".item-divider"
633+
// Generate indexes automatically based on ".list-group-title"
634634
indexes: 'auto',
635635
// Scroll list on indexes click and touchmove
636636
scrollList: true,

‎kitchen-sink/core/pages/list.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@
166166
</div>
167167
</a>
168168
</li>
169-
<li class="item-divider">Divider Here</li>
169+
<li class="list-group-title">Divider Here</li>
170170
<li>
171171
<a href="#" class="item-link item-content">
172172
<div class="item-inner">
@@ -467,7 +467,8 @@
467467
amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
468468
vel dui laoreet, commodo augue id, pulvinar lacus.</div>
469469
</div>
470-
</a></li>
470+
</a>
471+
</li>
471472
<li>
472473
<a href="#" class="item-link item-content">
473474
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="70" />

‎kitchen-sink/react/src/pages/list.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default () => (
7979
<List>
8080
<ListItem link="#" title="Ivan Petrov" />
8181
<ListItem link="#" title="John Doe" />
82-
<ListItem divider title="Divider Here" />
82+
<ListItem groupTitle title="Divider Here" />
8383
<ListItem link="#" title="Ivan Petrov" />
8484
<ListItem link="#" title="Jenna Smith" />
8585
</List>

‎kitchen-sink/svelte/src/pages/list.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<List>
7272
<ListItem link="#" title="Ivan Petrov" />
7373
<ListItem link="#" title="John Doe" />
74-
<ListItem divider title="Divider Here" />
74+
<ListItem groupTitle title="Divider Here" />
7575
<ListItem link="#" title="Ivan Petrov" />
7676
<ListItem link="#" title="Jenna Smith" />
7777
</List>

‎kitchen-sink/vue/src/pages/list.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
<f7-list>
8484
<f7-list-item link="#" title="Ivan Petrov" />
8585
<f7-list-item link="#" title="John Doe" />
86-
<f7-list-item divider title="Divider Here" />
86+
<f7-list-item group-title title="Divider Here" />
8787
<f7-list-item link="#" title="Ivan Petrov" />
8888
<f7-list-item link="#" title="Jenna Smith" />
8989
</f7-list>

‎src/core/components/list-index/list-index-class.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ class ListIndex extends Framework7Class {
225225
if (!$listEl || !$pageContentEl || $pageContentEl.length === 0) return index;
226226

227227
let $scrollToEl;
228-
$listEl.find('.list-group-title, .item-divider').each((el) => {
228+
$listEl.find('.list-group-title').each((el) => {
229229
if ($scrollToEl) return;
230230
const $el = $(el);
231231
if ($el.text() === itemContent) {
@@ -314,7 +314,7 @@ class ListIndex extends Framework7Class {
314314
if (index.params.indexes === 'auto') {
315315
index.indexes = [];
316316

317-
index.$listEl.find('.list-group-title, .item-divider').each((el) => {
317+
index.$listEl.find('.list-group-title').each((el) => {
318318
const elContent = $(el).text();
319319
if (index.indexes.indexOf(elContent) < 0) {
320320
index.indexes.push(elContent);

‎src/core/components/list-index/list-index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export namespace ListIndex {
3939
el?: HTMLElement | CSSSelector;
4040
/** Related List View element. HTMLElement or string with CSS selector of List View element. */
4141
listEl?: HTMLElement | CSSSelector;
42-
/** Array with indexes. If not passed then it will automatically generate it based on item-divider and list-group-title elements inside of passed List View element in listEl parameter. (default auto) */
42+
/** Array with indexes. If not passed then it will automatically generate it based on list-group-title elements inside of passed List View element in listEl parameter. (default auto) */
4343
indexes?: string[] | string; // ??
4444
/** Will automatically scroll related List View to the selected index. (default true) */
4545
scrollList?: boolean;

‎src/core/components/list/list-vars.less‎

Lines changed: 21 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,16 @@
1010

1111
--f7-list-item-title-font-size: inherit;
1212
--f7-list-item-title-font-weight: 400;
13-
--f7-list-item-title-text-color: inherit;
1413
--f7-list-item-title-line-height: inherit;
1514
--f7-list-item-title-white-space: nowrap;
1615

1716
--f7-list-item-subtitle-font-weight: 400;
18-
--f7-list-item-subtitle-text-color: inherit;
1917
--f7-list-item-subtitle-line-height: inherit;
2018

2119
--f7-list-item-text-font-weight: 400;
2220
--f7-list-item-after-font-weight: 400;
2321
--f7-list-item-after-line-height: inherit;
2422

25-
--f7-list-item-header-text-color: inherit;
2623
--f7-list-item-header-font-size: 12px;
2724
--f7-list-item-header-font-weight: 400;
2825
--f7-list-item-header-line-height: 1.2;
@@ -39,8 +36,6 @@
3936
--f7-list-button-font-weight: 400;
4037
--f7-list-button-text-align: center;
4138

42-
--f7-list-item-divider-line-height: inherit;
43-
--f7-list-item-divider-font-weight: 400;
4439
--f7-list-group-title-line-height: inherit;
4540

4641
--f7-menu-list-offset: 8px;
@@ -62,9 +57,7 @@
6257
--f7-list-button-border-color: rgba(255, 255, 255, 0.15);
6358
--f7-list-outline-border-color: rgba(255, 255, 255, 0.15);
6459
--f7-list-item-border-color: rgba(255, 255, 255, 0.15);
65-
--f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
66-
--f7-list-item-divider-bg-color: #232323;
67-
--f7-list-group-title-bg-color: #232323;
60+
--f7-list-group-title-border-color: rgba(255, 255, 255, 0.15);
6861
--f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
6962
--f7-menu-list-selected-text-color: inherit;
7063
--f7-menu-list-selected-bg-color: var(--f7-theme-color);
@@ -76,6 +69,9 @@
7669
--f7-list-margin-vertical: 35px;
7770
--f7-list-font-size: 17px;
7871
--f7-list-chevron-icon-area: 20px;
72+
--f7-list-item-title-text-color: inherit;
73+
--f7-list-item-subtitle-text-color: inherit;
74+
7975

8076
--f7-list-item-border-color: rgba(0,0,0,0.22);
8177
--f7-list-link-pressed-bg-color: rgba(0,0,0,0.15);
@@ -94,33 +90,30 @@
9490
--f7-list-media-item-title-font-weight: 600;
9591
--f7-list-button-border-color: rgba(0,0,0,0.22);
9692

97-
--f7-list-item-divider-height: 31px;
98-
--f7-list-item-divider-font-size: inherit;
99-
--f7-list-item-divider-bg-color: rgba(0,0,0,0.03);
100-
--f7-list-item-divider-border-color: rgba(0,0,0,0.22);
93+
--f7-list-group-title-border-color: rgba(0,0,0,0.22);
10194

10295
--f7-list-group-title-height: 31px;
10396
--f7-list-group-title-font-size: inherit;
10497
--f7-list-group-title-font-weight: 400;
105-
--f7-list-group-title-bg-color: #f7f7f7;
10698
.light-vars({
10799
--f7-list-outline-inset-border-color: rgba(0,0,0,0.22);
108100
--f7-list-strong-bg-color: #fff;
109101
--f7-list-item-after-text-color: rgba(0,0,0,0.45);
102+
--f7-list-item-header-text-color: inherit;
110103
--f7-list-item-footer-text-color: rgba(0,0,0,0.45);
111104
--f7-list-item-text-text-color: rgba(0,0,0,0.45);
112-
--f7-list-item-divider-text-color: rgba(0,0,0,0.45);
113105
--f7-list-group-title-text-color: rgba(0,0,0,0.45);
114-
});
106+
--f7-list-group-title-bg-color: #f7f7f7;
107+
});
115108
.dark-vars({
116109
--f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
117110
--f7-list-strong-bg-color: #1c1c1d;
118111
--f7-list-item-after-text-color: rgba(255,255,255,0.55);
119112
--f7-list-item-header-text-color: rgba(255,255,255,0.55);
120113
--f7-list-item-footer-text-color: rgba(255,255,255,0.55);
121114
--f7-list-item-text-text-color: rgba(255,255,255,0.55);
122-
--f7-list-item-divider-text-color: rgba(255,255,255,0.55);
123115
--f7-list-group-title-text-color: rgba(255,255,255,0.55);
116+
--f7-list-group-title-bg-color: #232323;
124117
--f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
125118
});
126119
});
@@ -132,6 +125,8 @@
132125
--f7-list-chevron-icon-area: 26px;
133126
--f7-list-outline-inset-border-color: var(--f7-md-outline);
134127
--f7-list-item-border-color: rgba(0,0,0,0.12);
128+
--f7-list-item-title-text-color: var(--f7-md-on-surface);
129+
--f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
135130

136131
--f7-list-item-subtitle-font-size: 14px;
137132

@@ -145,36 +140,27 @@
145140
--f7-list-item-min-height: 48px;
146141
--f7-list-item-media-icons-margin: 8px;
147142
--f7-list-media-item-padding-vertical: 14px;
148-
/*
149-
--f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
150-
*/
143+
--f7-list-media-item-title-font-weight: 500;
151144
--f7-list-button-border-color: transparent;
152145

153-
--f7-list-item-divider-height: 48px;
154-
--f7-list-item-divider-font-size: 14px;
155-
--f7-list-item-divider-bg-color: #f4f4f4;
156-
--f7-list-item-divider-border-color: transparent;
146+
--f7-list-group-title-border-color: transparent;
157147

158148
--f7-list-group-title-height: 48px;
159-
--f7-list-group-title-font-size: 14px;
149+
--f7-list-group-title-font-size: 16px;
160150
--f7-list-group-title-font-weight: 400;
161-
--f7-list-group-title-bg-color: #f4f4f4;
151+
--f7-list-group-title-bg-color: var(--f7-md-surface-2);
152+
--f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
162153
--f7-menu-list-border-radius: 4px;
163154
--f7-list-strong-bg-color: var(--f7-md-surface-1);
155+
--f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
156+
--f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
157+
--f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
158+
--f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);
159+
164160
.light-vars({
165161
--f7-list-link-pressed-bg-color: rgba(0,0,0,0.1);
166-
--f7-list-item-text-text-color: rgba(0,0,0,0.54);
167-
--f7-list-item-after-text-color: rgba(0,0,0,0.54);
168-
--f7-list-item-footer-text-color: rgba(0,0,0,0.5);
169-
--f7-list-item-divider-text-color: rgba(0,0,0,0.54);
170-
--f7-list-group-title-text-color: rgba(0,0,0,0.54);
171162
});
172163
.dark-vars({
173-
--f7-list-item-divider-text-color: #fff;
174-
--f7-list-group-title-text-color: #fff;
175164
--f7-list-link-pressed-bg-color: rgba(255,255,255,0.05);
176-
--f7-list-item-text-text-color: rgba(255,255,255,0.54);
177-
--f7-list-item-after-text-color: rgba(255,255,255,0.54);
178-
--f7-list-item-footer-text-color: rgba(255,255,255,0.54);
179165
});
180166
});

‎src/core/components/list/list.less‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -524,9 +524,9 @@ li.media-item .item-link .item-title-row {
524524
.hairline-remove(top);
525525
}
526526
}
527-
li.item-divider,
528-
.item-divider,
529-
li.list-group-title {
527+
li.list-group-title,
528+
.list-group-title {
529+
margin-top: -1px;
530530
white-space: nowrap;
531531
position: relative;
532532
max-width: 100%;
@@ -541,36 +541,26 @@ li.list-group-title {
541541
display: flex;
542542
align-items: center;
543543
align-content: center;
544-
.hairline-remove(bottom);
545-
}
546-
li.item-divider,
547-
.item-divider {
548-
margin-top: -1px;
549-
height: var(--f7-list-item-divider-height);
550-
color: var(--f7-list-item-divider-text-color);
551-
font-size: var(--f7-list-item-divider-font-size);
552-
font-weight: var(--f7-list-item-divider-font-weight);
553-
background-color: var(--f7-list-item-divider-bg-color);
554-
line-height: var(--f7-list-item-divider-line-height);
555-
.hairline(top, var(--f7-list-item-divider-border-color));
556-
}
557-
li.list-group-title,
558-
.list li.list-group-title {
559-
position: relative;
560-
position: sticky;
561-
top: 0;
562-
margin-top: 0;
563-
z-index: 20;
564544
height: var(--f7-list-group-title-height);
565545
color: var(--f7-list-group-title-text-color);
566546
font-size: var(--f7-list-group-title-font-size);
567547
font-weight: var(--f7-list-group-title-font-weight);
568548
background-color: var(--f7-list-group-title-bg-color);
569549
line-height: var(--f7-list-group-title-line-height);
550+
.hairline(top, var(--f7-list-group-title-border-color));
551+
.hairline-remove(bottom);
552+
}
553+
.list-group > .list-group-title,
554+
.list-group > ul > .list-group-title {
555+
top: 0;
556+
margin-top: 0;
557+
position: sticky;
558+
z-index: 20;
570559
.page-with-navbar-large & {
571560
top: calc(-1 * var(--f7-navbar-large-title-height));
572561
}
573562
}
563+
574564
.list.inset {
575565
margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
576566
margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
@@ -665,7 +655,7 @@ each(@breakpoints, {
665655
transition-duration: 300ms;
666656
}
667657

668-
li:not(.item-divider):not(.list-group-title) {
658+
li:not(.list-group-title) {
669659
padding-top: calc(var(--f7-menu-list-offset) / 2);
670660
padding-bottom: calc(var(--f7-menu-list-offset) / 2);
671661
&:first-child {

‎src/core/components/page/page-md.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.md {
22
.page-previous {
3-
transform: translate3d(0, -32px, 0);
3+
transform: translate3d(0, -20px, 0);
44
}
55
.page-next {
66
pointer-events: none;
@@ -65,12 +65,12 @@
6565
transform: translate3d(0, 0, 0);
6666
}
6767
to {
68-
transform: translate3d(0, -32px, 0);
68+
transform: translate3d(0, -20px, 0);
6969
}
7070
}
7171
@keyframes md-page-previous-to-current {
7272
from {
73-
transform: translate3d(0, -32px, 0);
73+
transform: translate3d(0, -20px, 0);
7474
}
7575
to {
7676
transform: translate3d(0, 0px, 0);

0 commit comments

Comments
 (0)