javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +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

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

@ -5,8 +5,8 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--background: #{$item-ios-background}; --background: #{$card-ios-background};
--color: #{$card-ios-text-color}; --color: #{$card-ios-color};
@include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); @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); @include border-radius($card-ios-border-radius);

6
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 /// @prop - Margin start of the card
$card-ios-margin-start: 16px !default; $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 /// @prop - Box shadow color of the card
$card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default; $card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default;
@ -30,9 +27,6 @@ $card-ios-border-radius: 8px !default;
/// @prop - Font size of the card /// @prop - Font size of the card
$card-ios-font-size: 14px !default; $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 /// @prop - Transition timing function of the card
$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default; $card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default;

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

@ -5,8 +5,8 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--background: #{$item-md-background}; --background: #{$card-md-background};
--color: #{$card-md-text-color}; --color: #{$card-md-color};
@include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); @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); @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 /// @prop - Margin start of the card
$card-md-margin-start: 10px !default; $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 /// @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; $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 /// @prop - Line height of the card
$card-md-line-height: 1.5 !default; $card-md-line-height: 1.5 !default;
/// @prop - Color of the card text
$card-md-text-color: $text-color-step-450 !default;

5
core/src/themes/ionic.theme.default.ios.scss
View File

@ -30,3 +30,8 @@ $toolbar-ios-color: var(--ion-toolbar-color, $text-color
$item-ios-background: var(--ion-item-background, $background-color) !default; $item-ios-background: var(--ion-item-background, $background-color) !default;
$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default; $item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
$item-ios-color: var(--ion-item-color, $text-color) !default; $item-ios-color: var(--ion-item-color, $text-color) !default;
// iOS Card
// --------------------------------------------------
$card-ios-background: var(--ion-card-background, $item-ios-background) !default;
$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400)) !default;

5
core/src/themes/ionic.theme.default.md.scss
View File

@ -31,3 +31,8 @@ $toolbar-md-color: var(--ion-toolbar-color, var(--ion-t
$item-md-background: var(--ion-item-background, $background-color) !default; $item-md-background: var(--ion-item-background, $background-color) !default;
$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default; $item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
$item-md-color: var(--ion-item-color, $text-color) !default; $item-md-color: var(--ion-item-color, $text-color) !default;
// Material Design Card
// --------------------------------------------------
$card-md-background: var(--ion-card-background, $item-md-background) !default;
$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default;