mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
d53e7aa51c
When using a card with the button attribute the `<button>` element is set to display: inline-block in chrome. This causes an undesirable line of white space at the bottom of the card. This is most noticeable when using an image inside the card where the bottom of the `<img>` tag won't reach the bottom of the card. Setting the button to have `display: block` ignores this white space allowing the content to reach the end of the card.
106 lines
1.8 KiB
SCSS
Executable File
106 lines
1.8 KiB
SCSS
Executable File
@import "../../themes/ionic.globals";
|
|
|
|
// Card
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --background: Background of the card
|
|
* @prop --color: Color of the card
|
|
*/
|
|
--ion-safe-area-left: 0px;
|
|
--ion-safe-area-right: 0px;
|
|
|
|
@include font-smoothing();
|
|
|
|
display: block;
|
|
position: relative;
|
|
|
|
background: var(--background);
|
|
color: var(--color);
|
|
|
|
font-family: $font-family-base;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Card Colors
|
|
// ---------------------------------------------
|
|
|
|
:host(.ion-color) {
|
|
background: current-color(base);
|
|
color: current-color(contrast);
|
|
}
|
|
|
|
:host(.ion-color)::slotted(*) ion-card-header,
|
|
:host(.ion-color)::slotted(*) ion-card-title,
|
|
:host(.ion-color)::slotted(*) ion-card-subtitle {
|
|
color: current-color(contrast);
|
|
}
|
|
|
|
// Slotted Content
|
|
// ---------------------------------------------
|
|
|
|
::slotted(*) img {
|
|
display: block;
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
::slotted(*) ion-list {
|
|
@include margin(0);
|
|
}
|
|
|
|
|
|
// Disabled Card
|
|
// --------------------------------------------------
|
|
|
|
:host(.card-disabled) {
|
|
cursor: default;
|
|
opacity: .3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
// Native
|
|
// --------------------------------------------------
|
|
|
|
.card-native {
|
|
@include text-inherit();
|
|
@include padding(0);
|
|
@include margin(0);
|
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
min-height: var(--min-height);
|
|
|
|
transition: var(--transition);
|
|
|
|
border-width: var(--border-width);
|
|
border-style: var(--border-style);
|
|
border-color: var(--border-color);
|
|
|
|
outline: none;
|
|
|
|
background: var(--background);
|
|
}
|
|
|
|
.card-native::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
button, a {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
// Card Button Ripple effect
|
|
// --------------------------------------------------
|
|
|
|
ion-ripple-effect {
|
|
color: var(--ripple-color);
|
|
}
|