fix(card): add custom CSS properties and remove css overrides on item

references #14850 references #14808 fixes #9198 fixes #12646
ionic-team · Aug 14, 2018 · 5ed2201 · 5ed2201
1 parent 1ad9818
commit 5ed2201
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 63 deletions.
diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: var(--ion-item-background-color, transparent);
-  --ion-color-contrast: #{$card-ios-text-color};
+  --background: var(--ion-item-background-color, transparent);
+  --color: #{$card-ios-text-color};
 
   @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
   @include border-radius($card-ios-border-radius);
@@ -20,22 +20,3 @@
 
   box-shadow: $card-ios-box-shadow;
 }
-
-::slotted(*) ion-list {
-  @include margin(null, null, 0, null);
-}
-
-
-::slotted(*) .item {
-  --border-width: 0;
-  --inner-border-width: 0;
-}
-
-
-// .card .note-ios {
-//   font-size: 13px;
-// }
-
-// .card-ios + ion-card {
-//   @include margin(0, null, null, null);
-// }
diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss
@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: var(--ion-item-background-color, transparent);
-  --ion-color-contrast: #{$card-md-text-color};
+  --background: var(--ion-item-background-color, transparent);
+  --color: #{$card-md-text-color};
 
   @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
   @include border-radius($card-md-border-radius);
@@ -18,24 +18,3 @@
 
   box-shadow: $card-md-box-shadow;
 }
-
-::slotted(*) ion-list {
-  @include margin(null, null, 0, null);
-}
-
-::slotted(*) .item {
-  --border-width: 0;
-}
-
-::slotted(*) .item:last-child {
-  --border-width: 0;
-  --inner-border-width: 0;
-}
-
-.card .note-md {
-  font-size: 13px;
-}
-
-:host + ion-card {
-  @include margin(0, null, null, null);
-}
diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss
@@ -4,24 +4,44 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the card
+   * @prop --color: Color of the card
+   */
+
   @include font-smoothing();
 
   display: block;
   position: relative;
 
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  background: var(--background);
+  color: var(--color);
 
   overflow: hidden;
 }
 
+// Card Colors
+// ---------------------------------------------
+
+:host(.ion-color) {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
 :host(.ion-color)::slotted(*) ion-card-title,
 :host(.ion-color)::slotted(*) ion-card-subtitle {
   color: currentColor;
 }
 
+// Slotted Content
+// ---------------------------------------------
+
 ::slotted(*) img {
   display: block;
 
   width: 100%;
 }
+
+::slotted(*) ion-list {
+  @include margin(0);
+}
diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html
@@ -32,7 +32,7 @@
       </ion-card>
 
       <ion-card>
-        <ion-item>
+        <ion-item lines="none">
           <ion-icon name="pin" slot="start"></ion-icon>
           <ion-label>ion-item in a card, icon left, button right</ion-label>
           <ion-button fill="outline" slot="end">View</ion-button>
@@ -43,26 +43,55 @@
         </ion-card-content>
       </ion-card>
 
+      <ion-card color="secondary">
+        <ion-card-header>
+          <ion-card-subtitle>Subtitle</ion-card-subtitle>
+          <ion-card-title>Title</ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          This is content, without any paragraph or header tags, within an ion-card-content element.
+        </ion-card-content>
+      </ion-card>
+
       <ion-card>
-        <ion-item href="#" class="activated">
-          <ion-icon name="wifi" slot="start"></ion-icon>
-          <ion-label>Card Link Item 1 .activated</ion-label>
-        </ion-item>
+        <ion-card-content>
+          <h1>Heading 1</h1>
+          <h2>Heading 2</h2>
+          <h3>Heading 3</h3>
+          <h4>Heading 4</h4>
+          <h5>Heading 5</h5>
+          <h6>Heading 6</h6>
+          <p>Paragraph</p>
+        </ion-card-content>
+      </ion-card>
 
-        <ion-item href="#">
-          <ion-icon name="wine" slot="start"></ion-icon>
-          <ion-label>Card Link Item 2</ion-label>
-        </ion-item>
+      <ion-card>
+        <ion-list lines="none">
+          <ion-item href="#" class="activated">
+            <ion-icon name="wifi" slot="start"></ion-icon>
+            <ion-label>Link Item .activated</ion-label>
+            <ion-note>More</ion-note>
+          </ion-item>
 
-        <ion-item class="activated">
-          <ion-icon name="warning" slot="start"></ion-icon>
-          <ion-label>Card Button Item 1 .activated</ion-label>
-        </ion-item>
+          <ion-item href="#">
+            <ion-icon name="wine" slot="start"></ion-icon>
+            <ion-label>Link Item</ion-label>
+            <ion-note>More</ion-note>
+          </ion-item>
 
-        <ion-item>
-          <ion-icon name="walk" slot="start"></ion-icon>
-          <ion-label>Card Button Item 2</ion-label>
-        </ion-item>
+          <ion-item button class="activated">
+            <ion-icon name="warning" slot="start"></ion-icon>
+            <ion-label>Button Item .activated</ion-label>
+            <ion-note>More</ion-note>
+          </ion-item>
+
+          <ion-item button>
+            <ion-icon name="walk" slot="start"></ion-icon>
+            <ion-label>Button Item</ion-label>
+            <ion-note>More</ion-note>
+          </ion-item>
+        </ion-list>
       </ion-card>
     </ion-content>
 

diff --git a/core/src/components/card/test/standalone/index.html b/core/src/components/card/test/standalone/index.html
@@ -30,5 +30,104 @@
       The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
     </ion-card-content>
   </ion-card>
+
+  <!-- Colors-->
+  <ion-card class="custom">
+    <ion-card-header>
+      <ion-card-subtitle>
+        Subtitle
+      </ion-card-subtitle>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card class="custom2">
+    <ion-card-header>
+      <ion-card-subtitle>
+        Subtitle
+      </ion-card-subtitle>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="secondary">
+    <ion-card-header>
+      <ion-card-subtitle>
+        Subtitle
+      </ion-card-subtitle>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="danger">
+    <ion-card-header>
+      <ion-card-subtitle>
+        Subtitle
+      </ion-card-subtitle>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card color="light">
+    <ion-card-header>
+      <ion-card-subtitle>
+        Subtitle
+      </ion-card-subtitle>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+    </ion-card-content>
+  </ion-card>
+
+  <style>
+    .custom {
+      --background: #f6f6f6;
+      --color: orange;
+    }
+
+    .custom ion-card-subtitle,
+    .custom ion-card-title {
+      --color: orange;
+    }
+
+    .custom2 {
+      --background: url(https://images.unsplash.com/photo-1503756234508-e32369269deb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=47b63db904d2c72377ffc588f645eb45&auto=format&fit=crop&w=975&q=80) center 20%;
+      --color: white;
+      text-shadow: 2px 2px 6px black;
+    }
+
+    .custom2 ion-card-subtitle,
+    .custom2 ion-card-title {
+      --color: white;
+    }
+  </style>
 </body>
 </html>