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

feat(card): expose global card css variable (#21756)

Browse Source 
resolves #21694
This commit is contained in:
Liam DeBeasi
2020-07-20 12:46:58 -04:00
committed by GitHub
parent d4a5fbd955
commit 096eef4a79
6 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@
// --------------------------------------------------
:host {
--background: #{$item-ios-background};
--color: #{$card-ios-text-color};
--background: #{$card-ios-background};
--color: #{$card-ios-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);
@ -22,4 +22,4 @@
:host(.ion-activated) {
transform: #{$card-ios-transform-activated};
}
}

8
core/src/components/card/card.ios.vars.scss
View File

@ -15,9 +15,6 @@ $card-ios-margin-bottom: $card-ios-margin-top !default;
/// @prop - Margin start of the card
$card-ios-margin-start: 16px !default;
/// @prop - Background color of the card
$card-ios-background-color: $item-ios-background !default;
/// @prop - Box shadow color of the card
$card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default;
@ -30,11 +27,8 @@ $card-ios-border-radius: 8px !default;
/// @prop - Font size of the card
$card-ios-font-size: 14px !default;
/// @prop - Color of the card text
$card-ios-text-color: $text-color-step-400 !default;
/// @prop - Transition timing function of the card
$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default;
/// @prop - Transform of the card on activate
$card-ios-transform-activated: scale3d(.97, .97, 1) !default;
$card-ios-transform-activated: scale3d(.97, .97, 1) !default;

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

@ -5,8 +5,8 @@
// --------------------------------------------------
:host {
--background: #{$item-md-background};
--color: #{$card-md-text-color};
--background: #{$card-md-background};
--color: #{$card-md-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);

6
core/src/components/card/card.md.vars.scss
View File

@ -15,9 +15,6 @@ $card-md-margin-bottom: 10px !default;
/// @prop - Margin start of the card
$card-md-margin-start: 10px !default;
/// @prop - Background color of the card
$card-md-background-color: $item-md-background !default;
/// @prop - Box shadow of the card
$card-md-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
@ -29,6 +26,3 @@ $card-md-font-size: 14px !default;
/// @prop - Line height of the card
$card-md-line-height: 1.5 !default;
/// @prop - Color of the card text
$card-md-text-color: $text-color-step-450 !default;