javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
references #14850 references #14808
fixes #9198 fixes #12646
This commit is contained in:
Brandy Carney
2018-08-14 16:51:20 -04:00
parent 1ad9818c02
commit 5ed2201511
5 changed files with 171 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/components/card/card.ios.scss
View File

@ -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);
// }

25
core/src/components/card/card.md.scss
View File

@ -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);
}

24
core/src/components/card/card.scss
View File

@ -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);
}

63
core/src/components/card/test/basic/index.html
View File

@ -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>

99
core/src/components/card/test/standalone/index.html
View File

@ -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>