Skip to content

Commit

Permalink
feat(menu-list): m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Sep 30, 2022
1 parent 85394ca commit 67a7aa2
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 31 deletions.
32 changes: 24 additions & 8 deletions src/core/components/list/list-vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,6 @@

--f7-list-group-title-line-height: inherit;

--f7-menu-list-offset: 8px;
--f7-menu-list-border-radius: 8px;
--f7-menu-list-font-size: 14px;
--f7-menu-list-item-title-font-size: 14px;
--f7-menu-list-item-title-font-weight: 500;
Expand All @@ -49,17 +47,15 @@
.light-vars({
--f7-list-outline-border-color: rgba(0,0,0,0.22);
--f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
--f7-menu-list-selected-text-color: var(--f7-theme-color);
--f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);

});
.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);
--f7-menu-list-selected-text-color: inherit;
--f7-menu-list-selected-bg-color: var(--f7-theme-color);

});
}
.ios-vars({
Expand Down Expand Up @@ -94,6 +90,13 @@
--f7-list-group-title-height: 31px;
--f7-list-group-title-font-size: inherit;
--f7-list-group-title-font-weight: 400;

--f7-menu-list-offset: 8px;
--f7-menu-list-border-radius: 8px;
--f7-menu-list-item-bg-color: transparent;
--f7-menu-list-item-text-color: inherit;
--f7-menu-list-item-min-height: 44px;

.light-vars({
--f7-list-outline-inset-border-color: rgba(0,0,0,0.22);
--f7-list-strong-bg-color: #fff;
Expand All @@ -103,7 +106,10 @@
--f7-list-item-text-text-color: rgba(0,0,0,0.45);
--f7-list-group-title-text-color: rgba(0,0,0,0.45);
--f7-list-group-title-bg-color: #f7f7f7;
});

--f7-menu-list-item-selected-text-color: var(--f7-theme-color);
--f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
});
.dark-vars({
--f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
--f7-list-strong-bg-color: #1c1c1d;
Expand All @@ -114,6 +120,9 @@
--f7-list-group-title-text-color: rgba(255,255,255,0.55);
--f7-list-group-title-bg-color: #232323;
--f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);

--f7-menu-list-item-selected-text-color: inherit;
--f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
});
});
.md-vars({
Expand Down Expand Up @@ -149,13 +158,20 @@
--f7-list-group-title-font-weight: 400;
--f7-list-group-title-bg-color: var(--f7-md-surface-2);
--f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
--f7-menu-list-border-radius: 4px;
--f7-list-strong-bg-color: var(--f7-md-surface-1);
--f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
--f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
--f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
--f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);

--f7-menu-list-offset: 16px;
--f7-menu-list-border-radius: 999px;
--f7-menu-list-item-text-color: var(--f7-md-on-surface-variant);
--f7-menu-list-item-bg-color: var(--f7-md-surface-1);
--f7-menu-list-item-selected-text-color: var(--f7-md-on-secondary-container);
--f7-menu-list-item-selected-bg-color: var(--f7-md-secondary-container);
--f7-menu-list-item-min-height: 56px;

.light-vars({
--f7-list-link-pressed-bg-color: rgba(0,0,0,0.1);
});
Expand Down
47 changes: 24 additions & 23 deletions src/core/components/list/list.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
}

.list {
--menu-list-offset: 0px;
position: relative;
z-index: 1;
font-size: var(--f7-list-font-size);
Expand Down Expand Up @@ -109,12 +108,12 @@
align-self: stretch;
padding-top: var(--f7-list-item-padding-vertical);
padding-bottom: var(--f7-list-item-padding-vertical);
min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
min-height: calc(var(--f7-list-item-min-height));
.ltr({
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
});
.rtl({
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
});
}
.item-title {
Expand Down Expand Up @@ -177,10 +176,10 @@
}
.item-inner {
.ltr({
padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
});
.rtl({
padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
});
}
}
Expand All @@ -189,12 +188,12 @@
.item-row();
box-sizing: border-box;
align-items: center;
min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
min-height: calc(var(--f7-list-item-min-height));
.ltr({
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
});
.rtl({
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
});
}

Expand Down Expand Up @@ -382,10 +381,10 @@
margin-right: calc(var(--f7-list-item-padding-horizontal) / 2);
border-radius: 16px;
.ltr({
padding-left: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-left) - var(--menu-list-offset));
padding-left: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-left));
});
.rtl({
padding-right: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-right) - var(--menu-list-offset));
padding-right: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-right));
});
}

Expand All @@ -410,15 +409,15 @@ li.media-item {
}
.ltr({
.item-link .item-inner {
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
}
.item-link .item-title-row {
padding-right: calc(var(--f7-list-chevron-icon-area));
}
});
.rtl({
.item-link .item-inner {
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
}
.item-link .item-title-row {
padding-left: calc(var(--f7-list-chevron-icon-area));
Expand All @@ -432,10 +431,10 @@ li.media-item.chevron-center .item-link .item-inner,
li.media-item .item-link.chevron-center .item-inner,
li.media-item .chevron-center .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) - var(--menu-list-offset));
padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
});
.rtl({
padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
});
}
.media-list.chevron-center .item-title-row,
Expand Down Expand Up @@ -632,13 +631,13 @@ each(@breakpoints, {
}

.menu-list {
--menu-list-offset: var(--f7-menu-list-offset);
--f7-list-font-size: var(--f7-menu-list-font-size);
--f7-list-item-title-font-size: var(--f7-menu-list-item-title-font-size);
--f7-list-item-title-font-weight: var(--f7-menu-list-item-title-font-weight);
--f7-list-item-subtitle-font-size: var(--f7-menu-list-item-subtitle-font-size);
--f7-list-item-text-font-size: var(--f7-menu-list-item-text-font-size);
--f7-list-item-after-font-size: var(--f7-menu-list-item-after-font-size);
--f7-list-item-min-height: var(--f7-menu-list-item-min-height);

.item-header,
.item-footer,
Expand All @@ -650,19 +649,21 @@ each(@breakpoints, {
}

li:not(.list-group-title) {
padding-top: calc(var(--f7-menu-list-offset) / 2);
padding-bottom: calc(var(--f7-menu-list-offset) / 2);
padding-top: 4px;
padding-bottom: 4px;
&:first-child {
padding-top: var(--f7-menu-list-offset);
padding-top: 4px;
}
&:last-child {
padding-bottom: var(--f7-menu-list-offset);
padding-bottom: 4px;
}
}
.item-link {
margin-left: var(--f7-menu-list-offset);
margin-right: var(--f7-menu-list-offset);
border-radius: var(--f7-menu-list-border-radius) !important;
color: var(--f7-menu-list-item-text-color);
background-color: var(--f7-menu-list-item-bg-color);
}

.item-inner:after {
Expand All @@ -672,8 +673,8 @@ each(@breakpoints, {
.item-selected.item-link,
.tab-link-active .item-link,
.tab-link-active.item-link {
color: var(--f7-menu-list-selected-text-color);
background-color: var(--f7-menu-list-selected-bg-color);
color: var(--f7-menu-list-item-selected-text-color);
background-color: var(--f7-menu-list-item-selected-bg-color);
}
.item-selected {
.item-header,
Expand All @@ -682,7 +683,7 @@ each(@breakpoints, {
.item-after,
.item-text,
.item-subtitle {
color: var(--f7-menu-list-selected-text-color);
color: var(--f7-menu-list-item-selected-text-color);
}
}
}
Expand Down

0 comments on commit 67a7aa2

Please sign in to comment.