feat(card): m3 styles, new outline and raised styles

framework7io · Sep 22, 2022 · 21a051e · 21a051e
1 parent 7f7cbe2
commit 21a051e
Show file tree

Hide file tree

Showing 13 changed files with 287 additions and 394 deletions.
diff --git a/kitchen-sink/core/css/app.css b/kitchen-sink/core/css/app.css
@@ -215,45 +215,14 @@ div.demo-lazy {
   background-position: center;
   color: #fff;
 }
-.demo-card-header-pic .card-content-padding .date {
-  color: #8e8e93;
-}
-.demo-facebook-card .card-header {
-  display: block;
-  padding: 10px;
-}
-.demo-facebook-card .demo-facebook-avatar {
-  float: left;
-}
-.demo-facebook-card .demo-facebook-name {
-  margin-left: 44px;
-  font-size: 14px;
-  font-weight: 500;
-}
-.demo-facebook-card .demo-facebook-date {
-  margin-left: 44px;
-  font-size: 13px;
-  color: #8e8e93;
+.md .demo-card-header-pic .card-header {
+  margin: 16px 16px 0;
+  border-radius: 16px;
 }
-.demo-facebook-card .card-footer {
-  background: #fafafa;
-}
-.dark .demo-facebook-card .card-footer {
-  background-color: transparent;
-}
-.demo-facebook-card .card-footer a {
-  color: #81848b;
-  font-weight: 500;
-}
-.demo-facebook-card .card-content img {
-  display: block;
-}
-.demo-facebook-card .card-content-padding {
-  padding: 15px 10px;
-}
-.demo-facebook-card .card-content-padding .likes {
+.demo-card-header-pic .card-content-padding .date {
   color: #8e8e93;
 }
+
 /* Panels Demo */
 .panel {
   min-width: 150px;

diff --git a/kitchen-sink/core/pages/cards.html b/kitchen-sink/core/pages/cards.html
@@ -13,75 +13,88 @@
   </div>
   <div class="page-content">
     <div class="block">
-      <p>Cards are a great way to contain and organize your information, especially when combined with List Views. Cards can contain unique related data, like for example photos, text or links about a particular subject. Cards are typically an entry point to more complex and detailed information.</p>
+      <p>Cards are a great way to contain and organize your information, especially when combined with List Views. Cards
+        can contain unique related data, like for example photos, text or links about a particular subject. Cards are
+        typically an entry point to more complex and detailed information.</p>
     </div>
     <div class="block-title">Simple Cards</div>
     <div class="card">
-      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
+      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
+        their own header, footer, list view, image, or any other element.</div>
     </div>
     <div class="card">
       <div class="card-header">Card header</div>
-      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
+      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
+        titles and footers for additional information or just for custom actions.</div>
       <div class="card-footer">Card Footer</div>
     </div>
     <div class="card">
-      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
+      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
     </div>
 
     <div class="block-title">Outline Cards</div>
     <div class="card card-outline">
-      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
+      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
+        their own header, footer, list view, image, or any other element.</div>
     </div>
     <div class="card card-outline">
       <div class="card-header">Card header</div>
-      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
+      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
+        titles and footers for additional information or just for custom actions.</div>
       <div class="card-footer">Card Footer</div>
     </div>
     <div class="card card-outline">
-      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
+      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
+    </div>
+
+    <div class="block-title">Outline With Dividers</div>
+    <div class="card card-outline card-dividers">
+      <div class="card-header">Card header</div>
+      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
+        titles and footers for additional information or just for custom actions.</div>
+      <div class="card-footer">Card Footer</div>
+    </div>
+
+    <div class="block-title">Raised Cards</div>
+    <div class="card card-raised">
+      <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
+        their own header, footer, list view, image, or any other element.</div>
+    </div>
+    <div class="card card-raised">
+      <div class="card-header">Card header</div>
+      <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
+        titles and footers for additional information or just for custom actions.</div>
+      <div class="card-footer">Card Footer</div>
+    </div>
+    <div class="card card-raised">
+      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
     </div>
 
     <div class="block-title">Styled Cards</div>
-    <div class="card demo-card-header-pic">
-      <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)" valign="bottom" class="card-header">Journey To Mountains</div>
+    <div class="card card-outline-md demo-card-header-pic">
+      <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)" valign="bottom"
+        class="card-header">Journey To Mountains</div>
       <div class="card-content card-content-padding">
         <p class="date">Posted on January 21, 2015</p>
-        <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
+        <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis
+          nibh hendrerit...</p>
       </div>
       <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
     </div>
     <div class="card demo-card-header-pic">
-      <div style="background-image:url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)" valign="bottom" class="card-header">Lorem Ipsum</div>
+      <div style="background-image:url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)" valign="bottom"
+        class="card-header">Lorem Ipsum</div>
       <div class="card-content card-content-padding">
         <p class="date">Posted on January 21, 2015</p>
-        <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
+        <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis
+          nibh hendrerit...</p>
       </div>
       <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
     </div>
 
-    <div class="block-title">Facebook Cards</div>
-    <div class="card demo-facebook-card">
-      <div class="card-header">
-        <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
-        <div class="demo-facebook-name">John Doe</div>
-        <div class="demo-facebook-date">Monday at 3:47 PM</div>
-      </div>
-      <div class="card-content"> <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/></div>
-      <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
-    </div>
-    <div class="card demo-facebook-card">
-      <div class="card-header">
-        <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
-        <div class="demo-facebook-name">John Doe</div>
-        <div class="demo-facebook-date">Monday at 2:15 PM</div>
-      </div>
-      <div class="card-content card-content-padding">
-        <p>What a nice photo i took yesterday!</p><img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/>
-        <p class="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
-      </div>
-      <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
-    </div>
-
     <div class="block-title">Cards With List View</div>
     <div class="card">
       <div class="card-content">
@@ -102,7 +115,8 @@
         <div class="list media-list no-safe-areas">
           <ul>
             <li class="item-content">
-              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44"/></div>
+              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
+              </div>
               <div class="item-inner">
                 <div class="item-title-row">
                   <div class="item-title">Yellow Submarine</div>
@@ -111,7 +125,8 @@
               </div>
             </li>
             <li class="item-content">
-              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44"/></div>
+              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
+              </div>
               <div class="item-inner">
                 <div class="item-title-row">
                   <div class="item-title">Don't Stop Me Now</div>
@@ -120,7 +135,8 @@
               </div>
             </li>
             <li class="item-content">
-              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44"/></div>
+              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
+              </div>
               <div class="item-inner">
                 <div class="item-title-row">
                   <div class="item-title">Billie Jean</div>

diff --git a/kitchen-sink/react/src/css/app.css b/kitchen-sink/react/src/css/app.css
@@ -212,45 +212,14 @@ div.demo-lazy {
   background-position: center;
   color: #fff;
 }
-.demo-card-header-pic .card-content-padding .date {
-  color: #8e8e93;
-}
-.demo-facebook-card .card-header {
-  display: block;
-  padding: 10px;
-}
-.demo-facebook-card .demo-facebook-avatar {
-  float: left;
-}
-.demo-facebook-card .demo-facebook-name {
-  margin-left: 44px;
-  font-size: 14px;
-  font-weight: 500;
-}
-.demo-facebook-card .demo-facebook-date {
-  margin-left: 44px;
-  font-size: 13px;
-  color: #8e8e93;
+.md .demo-card-header-pic .card-header {
+  margin: 16px 16px 0;
+  border-radius: 16px;
 }
-.demo-facebook-card .card-footer {
-  background: #fafafa;
-}
-.dark .demo-facebook-card .card-footer {
-  background-color: transparent;
-}
-.demo-facebook-card .card-footer a {
-  color: #81848b;
-  font-weight: 500;
-}
-.demo-facebook-card .card-content img {
-  display: block;
-}
-.demo-facebook-card .card-content-padding {
-  padding: 15px 10px;
-}
-.demo-facebook-card .card-content-padding .likes {
+.demo-card-header-pic .card-content-padding .date {
   color: #8e8e93;
 }
+
 /* Panels Demo */
 .panel {
   min-width: 150px;

diff --git a/kitchen-sink/react/src/pages/cards.jsx b/kitchen-sink/react/src/pages/cards.jsx
@@ -50,8 +50,34 @@ export default () => (
       content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
     />
 
+    <BlockTitle>Outline With Dividers</BlockTitle>
+    <Card
+      outline
+      headerDivider
+      footerDivider
+      title="Card header"
+      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
+      footer="Card footer"
+    />
+
+    <BlockTitle>Raised Cards</BlockTitle>
+    <Card
+      raised
+      content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
+    />
+    <Card
+      raised
+      title="Card header"
+      content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
+      footer="Card footer"
+    />
+    <Card
+      raised
+      content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
+    />
+
     <BlockTitle>Styled Cards</BlockTitle>
-    <Card className="demo-card-header-pic">
+    <Card outlineMd className="demo-card-header-pic">
       <CardHeader
         className="no-border"
         valign="bottom"
@@ -96,52 +122,6 @@ export default () => (
       </CardFooter>
     </Card>
 
-    <BlockTitle>Facebook Cards</BlockTitle>
-    <Card className="demo-facebook-card">
-      <CardHeader className="no-border">
-        <div className="demo-facebook-avatar">
-          <img
-            src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg"
-            width="34"
-            height="34"
-          />
-        </div>
-        <div className="demo-facebook-name">John Doe</div>
-        <div className="demo-facebook-date">Monday at 3:47 PM</div>
-      </CardHeader>
-      <CardContent padding={false}>
-        <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%" />
-      </CardContent>
-      <CardFooter className="no-border">
-        <Link>Like</Link>
-        <Link>Comment</Link>
-        <Link>Share</Link>
-      </CardFooter>
-    </Card>
-    <Card className="demo-facebook-card">
-      <CardHeader className="no-border">
-        <div className="demo-facebook-avatar">
-          <img
-            src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg"
-            width="34"
-            height="34"
-          />
-        </div>
-        <div className="demo-facebook-name">John Doe</div>
-        <div className="demo-facebook-date">Monday at 2:15 PM</div>
-      </CardHeader>
-      <CardContent>
-        <p>What a nice photo i took yesterday!</p>
-        <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%" />
-        <p className="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
-      </CardContent>
-      <CardFooter className="no-border">
-        <Link>Like</Link>
-        <Link>Comment</Link>
-        <Link>Share</Link>
-      </CardFooter>
-    </Card>
-
     <BlockTitle>Cards With List View</BlockTitle>
     <Card>
       <CardContent padding={false}>

diff --git a/kitchen-sink/svelte/src/css/app.css b/kitchen-sink/svelte/src/css/app.css
@@ -212,45 +212,14 @@ div.demo-lazy {
   background-position: center;
   color: #fff;
 }
-.demo-card-header-pic .card-content-padding .date {
-  color: #8e8e93;
-}
-.demo-facebook-card .card-header {
-  display: block;
-  padding: 10px;
-}
-.demo-facebook-card .demo-facebook-avatar {
-  float: left;
-}
-.demo-facebook-card .demo-facebook-name {
-  margin-left: 44px;
-  font-size: 14px;
-  font-weight: 500;
-}
-.demo-facebook-card .demo-facebook-date {
-  margin-left: 44px;
-  font-size: 13px;
-  color: #8e8e93;
+.md .demo-card-header-pic .card-header {
+  margin: 16px 16px 0;
+  border-radius: 16px;
 }
-.demo-facebook-card .card-footer {
-  background: #fafafa;
-}
-.dark .demo-facebook-card .card-footer {
-  background-color: transparent;
-}
-.demo-facebook-card .card-footer a {
-  color: #81848b;
-  font-weight: 500;
-}
-.demo-facebook-card .card-content img {
-  display: block;
-}
-.demo-facebook-card .card-content-padding {
-  padding: 15px 10px;
-}
-.demo-facebook-card .card-content-padding .likes {
+.demo-card-header-pic .card-content-padding .date {
   color: #8e8e93;
 }
+
 /* Panels Demo */
 .panel {
   min-width: 150px;