feat(list): m3 styles + new outline and strong states + support t…

…heme specific `inset` props and classes
framework7io · Sep 26, 2022 · fae5446 · fae5446
1 parent 75563ce
commit fae5446
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 32 deletions.
diff --git a/src/core/components/link/link-vars.less b/src/core/components/link/link-vars.less
@@ -6,4 +6,8 @@
 
 .ios-vars({
   --f7-link-pressed-opacity: 0.3;
+  --f7-link-text-color: var(--f7-theme-color);
+});
+.md-vars({
+  --f7-link-text-color: var(--f7-md-primary);
 });
diff --git a/src/core/components/list/list-vars.less b/src/core/components/list/list-vars.less
@@ -53,13 +53,14 @@
   --f7-menu-list-item-after-font-size: 14px;
 
   .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-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-item-divider-border-color: rgba(255, 255, 255, 0.15);
     --f7-list-item-divider-bg-color: #232323;
@@ -75,7 +76,7 @@
   --f7-list-margin-vertical: 35px;
   --f7-list-font-size: 17px;
   --f7-list-chevron-icon-area: 20px;
-  --f7-list-border-color: rgba(0,0,0,0.22);
+
   --f7-list-item-border-color: rgba(0,0,0,0.22);
   --f7-list-link-pressed-bg-color: rgba(0,0,0,0.15);
 
@@ -103,15 +104,17 @@
   --f7-list-group-title-font-weight: 400;
   --f7-list-group-title-bg-color: #f7f7f7;
   .light-vars({
-    --f7-list-bg-color: #fff;
+    --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);
     --f7-list-item-footer-text-color: rgba(0,0,0,0.45);
     --f7-list-item-text-text-color: rgba(0,0,0,0.45);
     --f7-list-item-divider-text-color: rgba(0,0,0,0.45);
     --f7-list-group-title-text-color: rgba(0,0,0,0.45);
   });
   .dark-vars({
-    --f7-list-bg-color: #1c1c1d;
+    --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);
     --f7-list-item-header-text-color: rgba(255,255,255,0.55);
     --f7-list-item-footer-text-color: rgba(255,255,255,0.55);
@@ -123,11 +126,11 @@
 });
 .md-vars({
   --f7-list-in-list-padding-left: 40px;
-  --f7-list-inset-border-radius: 4px;
+  --f7-list-inset-border-radius: 16px;
   --f7-list-margin-vertical: 32px;
   --f7-list-font-size: 16px;
   --f7-list-chevron-icon-area: 26px;
-  --f7-list-border-color: rgba(0,0,0,0.12);
+  --f7-list-outline-inset-border-color: var(--f7-md-outline);
   --f7-list-item-border-color: rgba(0,0,0,0.12);
 
   --f7-list-item-subtitle-font-size: 14px;
@@ -157,7 +160,7 @@
   --f7-list-group-title-font-weight: 400;
   --f7-list-group-title-bg-color: #f4f4f4;
   --f7-menu-list-border-radius: 4px;
-  --f7-list-bg-color: var(--f7-md-surface-1);
+  --f7-list-strong-bg-color: var(--f7-md-surface-1);
   .light-vars({
     --f7-list-link-pressed-bg-color: rgba(0,0,0,0.1);
     --f7-list-item-text-text-color: rgba(0,0,0,0.54);

diff --git a/src/core/components/list/list.less b/src/core/components/list/list.less
@@ -22,14 +22,32 @@
     box-sizing: border-box;
   }
 
+  &-strong ul,
+  .ios &-strong-ios ul,
+  .md &-strong-md ul {
+    background: var(--f7-list-strong-bg-color);
+  }
+  &-outline ul,
+  .ios &-outline-ios ul,
+  .md &-outline-md ul {
+    .hairline(top, var(--f7-list-outline-border-color));
+    .hairline(bottom, var(--f7-list-outline-border-color));
+  }
+
+  &-outline.inset,
+  .ios &-outline-ios.inset,
+  .ios &-outline-ios.inset-ios,
+  .md &-outline-md.inset,
+  .md &-outline-md.inset-md {
+    border: 1px solid var(--f7-list-outline-inset-border-color);
+  }
+
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
     position: relative;
-    background: var(--f7-list-bg-color);
-    .hairline(top, var(--f7-list-border-color));
-    .hairline(bottom, var(--f7-list-border-color));
+
     ul {
       .ltr({
         padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
@@ -582,7 +600,9 @@ li.list-group-title,
 }
 each(@breakpoints, {
   @media (min-width:@value) {
-    .list.@{key}-inset {
+    .list.@{key}-inset,
+    .ios .list.@{key}-inset-ios,
+    .md .list.@{key}-inset-md {
       margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
       margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
       border-radius: var(--f7-list-inset-border-radius);
@@ -606,6 +626,17 @@ each(@breakpoints, {
         border-radius: var(--f7-list-inset-border-radius);
       }
     }
+
+    .list.@{key}-inset.list-outline,
+    .ios .list.@{key}-inset-ios.list-outline,
+    .ios .list.@{key}-inset-ios.list-outline-ios,
+    .md .list.@{key}-inset-md.list-outline,
+    .md .list.@{key}-inset-md.list-outline-md {
+      ul {
+        border: 1px solid var(--f7-list-outline-inset-border-color);
+      }
+
+    }
   }
 });
 

diff --git a/src/react/components/list.jsx b/src/react/components/list.jsx
@@ -21,11 +21,29 @@ import { VirtualList } from 'framework7/types';
   className?: string;
   style?: React.CSSProperties;
   inset? : boolean
+  insetIos? : boolean
+  insetMd? : boolean
   xsmallInset? : boolean
+  xsmallInsetIos? : boolean
+  xsmallInsetMd? : boolean
   smallInset? : boolean
+  smallInsetIos? : boolean
+  smallInsetMd? : boolean
   mediumInset? : boolean
+  mediumInsetIos? : boolean
+  mediumInsetMd? : boolean
   largeInset? : boolean
+  largeInsetIos? : boolean
+  largeInsetMd? : boolean
   xlargeInset? : boolean
+  xlargeInsetIos? : boolean
+  xlargeInsetMd? : boolean
+  strong?: boolean
+  strongIos?: boolean
+  strongMd?: boolean
+  outline?: boolean
+  outlineIos?: boolean
+  outlineMd?: boolean
   mediaList? : boolean
   sortable? : boolean
   sortableTapHold? : boolean
@@ -38,11 +56,8 @@ import { VirtualList } from 'framework7/types';
   simpleList? : boolean
   linksList? : boolean
   menuList? : boolean
-  noHairlines? : boolean
   noHairlinesBetween? : boolean
-  noHairlinesMd? : boolean
   noHairlinesBetweenMd? : boolean
-  noHairlinesIos? : boolean
   noHairlinesBetweenIos? : boolean
   noChevron? : boolean
   chevronCenter? : boolean
@@ -76,11 +91,29 @@ const List = forwardRef((props, ref) => {
     id,
     style,
     inset,
+    insetIos,
+    insetMd,
     xsmallInset,
+    xsmallInsetIos,
+    xsmallInsetMd,
     smallInset,
+    smallInsetIos,
+    smallInsetMd,
     mediumInset,
+    mediumInsetIos,
+    mediumInsetMd,
     largeInset,
+    largeInsetIos,
+    largeInsetMd,
     xlargeInset,
+    xlargeInsetIos,
+    xlargeInsetMd,
+    strong,
+    strongIos,
+    strongMd,
+    outline,
+    outlineIos,
+    outlineMd,
     mediaList,
     sortable,
     sortableTapHold,
@@ -93,11 +126,8 @@ const List = forwardRef((props, ref) => {
     simpleList,
     linksList,
     menuList,
-    noHairlines,
     noHairlinesBetween,
-    noHairlinesMd,
     noHairlinesBetweenMd,
-    noHairlinesIos,
     noHairlinesBetweenIos,
     noChevron,
     chevronCenter,
@@ -251,11 +281,29 @@ const List = forwardRef((props, ref) => {
     'list',
     {
       inset,
+      'inset-ios': insetIos,
+      'inset-md': insetMd,
       'xsmall-inset': xsmallInset,
+      'xsmall-inset-ios': xsmallInsetIos,
+      'xsmall-inset-md': xsmallInsetMd,
       'small-inset': smallInset,
+      'small-inset-ios': smallInsetIos,
+      'small-inset-md': smallInsetMd,
       'medium-inset': mediumInset,
+      'medium-inset-ios': mediumInsetIos,
+      'medium-inset-md': mediumInsetMd,
       'large-inset': largeInset,
+      'large-inset-ios': largeInsetIos,
+      'large-inset-md': largeInsetMd,
       'xlarge-inset': xlargeInset,
+      'xlarge-inset-ios': xlargeInsetIos,
+      'xlarge-inset-md': xlargeInsetMd,
+      'list-strong': strong,
+      'list-strong-ios': strongIos,
+      'list-strong-md': strongMd,
+      'list-outline': outline,
+      'list-outline-ios': outlineIos,
+      'list-outline-md': outlineMd,
       'media-list': mediaList,
       'simple-list': simpleList,
       'links-list': linksList,
@@ -270,9 +318,6 @@ const List = forwardRef((props, ref) => {
       'virtual-list': virtualList,
       tab,
       'tab-active': tabActive,
-      'no-hairlines': noHairlines,
-      'no-hairlines-md': noHairlinesMd,
-      'no-hairlines-ios': noHairlinesIos,
       'no-hairlines-between': noHairlinesBetween,
       'no-hairlines-between-md': noHairlinesBetweenMd,
       'no-hairlines-between-ios': noHairlinesBetweenIos,

diff --git a/src/svelte/components/list.svelte b/src/svelte/components/list.svelte
@@ -15,11 +15,29 @@
   export let ul = true;
 
   export let inset = false;
+  export let insetIos = false;
+  export let insetMd = false;
   export let xsmallInset = false;
+  export let xsmallInsetIos = false;
+  export let xsmallInsetMd = false;
   export let smallInset = false;
+  export let smallInsetIos = false;
+  export let smallInsetMd = false;
   export let mediumInset = false;
+  export let mediumInsetIos = false;
+  export let mediumInsetMd = false;
   export let largeInset = false;
+  export let largeInsetIos = false;
+  export let largeInsetMd = false;
   export let xlargeInset = false;
+  export let xlargeInsetIos = false;
+  export let xlargeInsetMd = false;
+  export let strong = false;
+  export let strongIos = false;
+  export let strongMd = false;
+  export let outline = false;
+  export let outlineIos = false;
+  export let outlineMd = false;
   export let mediaList = false;
   export let sortable = false;
   export let sortableTapHold = false;
@@ -33,11 +51,8 @@
   export let linksList = false;
   export let menuList = false;
 
-  export let noHairlines = false;
   export let noHairlinesBetween = false;
-  export let noHairlinesMd = false;
   export let noHairlinesBetweenMd = false;
-  export let noHairlinesIos = false;
   export let noHairlinesBetweenIos = false;
 
   // Links Chevron (Arrow) Icon
@@ -72,11 +87,29 @@
     'list',
     {
       inset,
+      'inset-ios': insetIos,
+      'inset-md': insetMd,
       'xsmall-inset': xsmallInset,
+      'xsmall-inset-ios': xsmallInsetIos,
+      'xsmall-inset-md': xsmallInsetMd,
       'small-inset': smallInset,
+      'small-inset-ios': smallInsetIos,
+      'small-inset-md': smallInsetMd,
       'medium-inset': mediumInset,
+      'medium-inset-ios': mediumInsetIos,
+      'medium-inset-md': mediumInsetMd,
       'large-inset': largeInset,
+      'large-inset-ios': largeInsetIos,
+      'large-inset-md': largeInsetMd,
       'xlarge-inset': xlargeInset,
+      'xlarge-inset-ios': xlargeInsetIos,
+      'xlarge-inset-md': xlargeInsetMd,
+      'list-strong': strong,
+      'list-strong-ios': strongIos,
+      'list-strong-md': strongMd,
+      'list-outline': outline,
+      'list-outline-ios': outlineIos,
+      'list-outline-md': outlineMd,
       'media-list': mediaList,
       'simple-list': simpleList,
       'links-list': linksList,
@@ -91,9 +124,6 @@
       'virtual-list': virtualList,
       tab,
       'tab-active': tabActive,
-      'no-hairlines': noHairlines,
-      'no-hairlines-md': noHairlinesMd,
-      'no-hairlines-ios': noHairlinesIos,
       'no-hairlines-between': noHairlinesBetween,
       'no-hairlines-between-md': noHairlinesBetweenMd,
       'no-hairlines-between-ios': noHairlinesBetweenIos,