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

feat(components): add support for css variables (#13895)

Browse Source 
* wip

* wip

* wip

* wip

* CSS variable cleanup
added css variable example

* reverted example

* wip

* name fixes for tabbar and item

* wip - alpha support

* wip - all the things

* wip

* wip

* PR cleanup

* cleanup to ion-color

* switched to double quotes

* PR cleanup
Added TODO for color-mod comments

* reverted ios variable for transition.

* style cleanup
added -ion prefix to all css variables
updated default.css to mirror SASS values
cleanup/update to oceanic css

* removed 'dark' theme files
cleanup from scss-lint report
This commit is contained in:
Ross Gerbasi
2018-02-05 10:55:50 -06:00
committed by Brandy Carney
parent ded672294f
commit f41bb39ce3
234 changed files with 2699 additions and 1634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -31,7 +31,7 @@
@include border-radius($action-sheet-ios-border-radius);
@include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
background: $action-sheet-ios-background;
background: $action-sheet-ios-background-color;
}
.action-sheet-ios .action-sheet-group:first-child {
@ -47,7 +47,7 @@
// -----------------------------------------
.action-sheet-translucent-ios .action-sheet-group {
background: rgba($action-sheet-ios-background, $action-sheet-ios-translucent-opacity);
background: $action-sheet-ios-translucent-background-color;
backdrop-filter: $action-sheet-ios-translucent-filter;
-webkit-backdrop-filter: $action-sheet-ios-translucent-filter;
@ -117,7 +117,7 @@
.action-sheet-ios .action-sheet-selected {
font-weight: bold;
background: #fff;
background: $action-sheet-ios-button-background-selected;
}
.action-sheet-ios .action-sheet-destructive {

25
packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@ -28,7 +28,10 @@ $action-sheet-ios-group-margin-top: 10px !default;
$action-sheet-ios-group-margin-bottom: 10px !default;
/// @prop - Background color of the action sheet
$action-sheet-ios-background: #f9f9f9 !default;
$action-sheet-ios-background-color: $background-ios-color-step-100 !default;
/// @prop - Background color of the action sheet when translucent
$action-sheet-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Border radius of the action sheet
$action-sheet-ios-border-radius: 13px !default;
@ -46,7 +49,7 @@ $action-sheet-ios-title-padding-bottom: $action-sheet-ios-title-
$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default;
/// @prop - Color of the action sheet title
$action-sheet-ios-title-color: #8f8f8f !default;
$action-sheet-ios-title-color: $text-ios-color-step-300 !default;
/// @prop - Font size of the action sheet title
$action-sheet-ios-title-font-size: 13px !default;
@ -61,7 +64,7 @@ $action-sheet-ios-title-border-width: $hairlines-width !defaul
$action-sheet-ios-title-border-style: solid !default;
/// @prop - Border color of the action sheet title
$action-sheet-ios-title-border-color: rgba(0, 0, 0, .1) !default;
$action-sheet-ios-title-border-color: $background-ios-color-step-100 !default;
/// @prop - Font size of the action sheet sub title
$action-sheet-ios-sub-title-font-size: 12px !default;
@ -85,7 +88,7 @@ $action-sheet-ios-button-min-height: 56px !default;
$action-sheet-ios-button-padding: 18px !default;
/// @prop - Text color of the action sheet button
$action-sheet-ios-button-text-color: #007aff !default;
$action-sheet-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Font size of the action sheet button icon
$action-sheet-ios-button-icon-font-size: 1.4em !default;
@ -109,25 +112,25 @@ $action-sheet-ios-button-border-width: $hairlines-width !defaul
$action-sheet-ios-button-border-style: solid !default;
/// @prop - Border color of the action sheet button
$action-sheet-ios-button-border-color: rgba(0, 0, 0, .1) !default;
$action-sheet-ios-button-border-color: $background-ios-color-step-100 !default;
/// @prop - Background color of the action sheet button
$action-sheet-ios-button-background: transparent !default;
/// @prop - Background color of the activated action sheet button
$action-sheet-ios-button-background-activated: rgba(115, 115, 115, .1) !default;
$action-sheet-ios-button-background-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default;
/// @prop - Background color of the selected action sheet button
$action-sheet-ios-button-background-selected: $background-ios-color !default;
/// @prop - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: #f53d3d !default;
$action-sheet-ios-button-destructive-text-color: ion-color($colors-ios, danger, base, ios) !default;
/// @prop - Background color of the action sheet cancel button
$action-sheet-ios-button-cancel-background: #fff !default;
$action-sheet-ios-button-cancel-background: $background-ios-color !default;
/// @prop - Font weight of the action sheet cancel button
$action-sheet-ios-button-cancel-font-weight: 600 !default;
/// @prop - Filter of the translucent action-sheet
$action-sheet-ios-translucent-filter: saturate(180%) blur(20px) !default;
/// @prop - Opacity of the translucent action-sheet
$action-sheet-ios-translucent-opacity: .88 !default;

1
packages/core/src/components/action-sheet/action-sheet.md.scss
View File

@ -77,4 +77,5 @@
.action-sheet-md .action-sheet-selected {
font-weight: bold;
background-color: $action-sheet-md-button-background-selected;
}

11
packages/core/src/components/action-sheet/action-sheet.md.vars.scss
View File

@ -10,7 +10,7 @@ $action-sheet-md-font-family: $font-family-md-base !de
$action-sheet-md-text-align: start !default;
/// @prop - Background color of the action sheet
$action-sheet-md-background: #fafafa !default;
$action-sheet-md-background: $background-md-color-step-100 !default;
/// @prop - Padding top of the action sheet
$action-sheet-md-padding-top: 8px !default;
@ -19,7 +19,7 @@ $action-sheet-md-padding-top: 8px !default;
$action-sheet-md-padding-bottom: 8px !default;
/// @prop - Color of the action sheet title
$action-sheet-md-title-color: #757575 !default;
$action-sheet-md-title-color: $text-md-color-step-200 !default;
/// @prop - Font size of the action sheet title
$action-sheet-md-title-font-size: 16px !default;
@ -55,7 +55,7 @@ $action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-tit
$action-sheet-md-button-min-height: 48px !default;
/// @prop - Text color of the action sheet button
$action-sheet-md-button-text-color: #222 !default;
$action-sheet-md-button-text-color: $text-md-color-step-100 !default;
/// @prop - Font size of the action sheet button
$action-sheet-md-button-font-size: 16px !default;
@ -76,7 +76,10 @@ $action-sheet-md-button-padding-start: $action-sheet-md-button-
$action-sheet-md-button-background: transparent !default;
/// @prop - Background color of the action sheet activated button
$action-sheet-md-button-background-activated: #f1f1f1 !default;
$action-sheet-md-button-background-activated: $background-md-color-step-100 !default;
/// @prop - Background color of the selected action sheet button
$action-sheet-md-button-background-selected: null !default;
/// @prop - Font size of the icon in the action sheet button
$action-sheet-md-icon-font-size: 24px !default;

1
packages/core/src/components/action-sheet/test/basic/index.html
View File

@ -64,6 +64,7 @@
}, {
text: 'Favorite',
icon: 'heart',
role: 'selected',
handler: () => {
console.log('Favorite clicked');
}

5
packages/core/src/components/alert/alert.ios.scss
View File

@ -15,7 +15,7 @@
max-width: $alert-ios-max-width;
background-color: $alert-ios-background;
background-color: $alert-ios-background-color;
box-shadow: $alert-ios-box-shadow;
}
@ -25,7 +25,7 @@
// -----------------------------------------
.alert-translucent-ios .alert-wrapper {
background: rgba($alert-ios-background, $alert-ios-translucent-opacity);
background: $alert-ios-translucent-background-color;
backdrop-filter: $alert-ios-translucent-filter;
-webkit-backdrop-filter: $alert-ios-translucent-filter;
@ -80,6 +80,7 @@
// --------------------------------------------------
.alert-ios .alert-input {
@include placeholder($alert-ios-input-placeholder-color);
@include appearance(none);
@include border-radius($alert-ios-input-border-radius);

37
packages/core/src/components/alert/alert.ios.vars.scss
View File

@ -15,7 +15,10 @@ $alert-ios-max-width: 270px !default;
$alert-ios-border-radius: 13px !default;
/// @prop - Background color of the alert
$alert-ios-background: #f8f8f8 !default;
$alert-ios-background-color: $background-ios-color-step-100 !default;
/// @prop - Background color of the alert when translucent
$alert-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default;
/// @prop - Box shadow of the alert
$alert-ios-box-shadow: none !default;
@ -48,7 +51,7 @@ $alert-ios-title-font-weight: 600 !default;
$alert-ios-sub-title-font-size: 14px !default;
/// @prop - Text color of the alert sub title
$alert-ios-sub-title-text-color: #666 !default;
$alert-ios-sub-title-text-color: $text-ios-color-step-200 !default;
/// @prop - Padding top of the alert message
$alert-ios-message-padding-top: 0 !default;
@ -101,8 +104,11 @@ $alert-ios-input-padding-bottom: $alert-ios-input-padding-top !de
/// @prop - Padding start on the alert input
$alert-ios-input-padding-start: $alert-ios-input-padding-end !default;
/// @prop - Placeholder Color for input
$alert-ios-input-placeholder-color: $placeholder-text-ios-color !default;
/// @prop - Border color of the alert input
$alert-ios-input-border-color: #ccc !default;
$alert-ios-input-border-color: $background-ios-color-step-200 !default;
/// @prop - Border of the alert input
$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default;
@ -111,7 +117,7 @@ $alert-ios-input-border: $hairlines-width solid $alert-io
$alert-ios-input-border-radius: 4px !default;
/// @prop - Background color of the alert input
$alert-ios-input-background-color: #fff !default;
$alert-ios-input-background-color: $background-ios-color !default;
/// @prop - Flex wrap of the alert button group
$alert-ios-button-group-flex-wrap: wrap !default;
@ -132,13 +138,13 @@ $alert-ios-button-min-height: 44px !default;
$alert-ios-button-font-size: 17px !default;
/// @prop - Color of the text in the alert button
$alert-ios-button-text-color: color($colors-ios, primary) !default;
$alert-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color of the alert button
$alert-ios-button-background-color: transparent !default;
/// @prop - Background color of the alert activated button
$alert-ios-button-background-color-activated: rgba(115, 115, 115, .1) !default;
$alert-ios-button-background-color-activated: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default;
/// @prop - Border width of the alert button
$alert-ios-button-border-width: $hairlines-width !default;
@ -147,7 +153,7 @@ $alert-ios-button-border-width: $hairlines-width !default;
$alert-ios-button-border-style: solid !default;
/// @prop - Border color of the alert button
$alert-ios-button-border-color: rgba(0, 0, 0, .1) !default;
$alert-ios-button-border-color: $background-ios-color-step-100 !default;
/// @prop - Border radius of the alert button
$alert-ios-button-border-radius: 0 !default;
@ -171,7 +177,7 @@ $alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-t
$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default;
/// @prop - Text color of the label for the radio alert
$alert-ios-radio-label-text-color: initial !default;
$alert-ios-radio-label-text-color: $text-ios-color !default;
/// @prop - Text color of the label for the checked radio alert
$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default;
@ -216,10 +222,10 @@ $alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-paddin
$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default;
/// @prop - Text color of the label for the checkbox in the alert
$alert-ios-checkbox-label-text-color: initial !default;
$alert-ios-checkbox-label-text-color: $text-ios-color !default;
/// @prop - Text color of the label for the checked checkbox in the alert
$alert-ios-checkbox-label-text-color-checked: initial !default;
$alert-ios-checkbox-label-text-color-checked: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Margin top of the checkbox in the alert
$alert-ios-checkbox-margin-top: 10px !default;
@ -246,16 +252,16 @@ $alert-ios-checkbox-border-style: solid !default;
$alert-ios-checkbox-border-radius: 50% !default;
/// @prop - Border color of the checkbox in the alert when off
$alert-ios-checkbox-border-color-off: $list-ios-border-color !default;
$alert-ios-checkbox-border-color-off: $item-ios-border-color !default;
/// @prop - Border color of the checkbox in the alert when on
$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default;
$alert-ios-checkbox-border-color-on: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color of the checkbox in the alert when off
$alert-ios-checkbox-background-color-off: $list-ios-background-color !default;
$alert-ios-checkbox-background-color-off: $item-ios-background-color !default;
/// @prop - Background color of the checkbox in the alert when on
$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default;
$alert-ios-checkbox-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Top of the icon in the checkbox alert
$alert-ios-checkbox-icon-top: 4px !default;
@ -284,8 +290,5 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
/// @prop - Filter of the translucent alert
$alert-ios-translucent-filter: saturate(180%) blur(20px) !default;
/// @prop - Opacity of the translucent alert
$alert-ios-translucent-opacity: .88 !default;
/// @prop - Minimum height of the tappable inputs in the checkbox alert
$alert-ios-tappable-min-height: $item-min-height !default;

1
packages/core/src/components/alert/alert.md.scss
View File

@ -61,6 +61,7 @@
// --------------------------------------------------
.alert-md .alert-input {
@include placeholder($alert-md-input-placeholder-color);
@include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start);
border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;

29
packages/core/src/components/alert/alert.md.vars.scss
View File

@ -15,7 +15,7 @@ $alert-md-max-width: 280px !default;
$alert-md-border-radius: 2px !default;
/// @prop - Background color of the alert
$alert-md-background-color: #fafafa !default;
$alert-md-background-color: $background-md-color-step-100 !default;
/// @prop - Box shadow color of the alert
$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
@ -60,7 +60,7 @@ $alert-md-message-padding-start: 24px !default;
$alert-md-message-font-size: 15px !default;
/// @prop - Text color of the alert message
$alert-md-message-text-color: rgba(0, 0, 0, .5) !default;
$alert-md-message-text-color: $text-md-color-step-300 !default;
/// @prop - Padding top of the alert empty message
$alert-md-message-empty-padding-top: 0 !default;
@ -84,10 +84,10 @@ $alert-md-input-border-width: 1px !default;
$alert-md-input-border-style: solid !default;
/// @prop - Border color of the alert input
$alert-md-input-border-color: #dedede !default;
$alert-md-input-border-color: $border-md-color !default;
/// @prop - Text color of the alert input
$alert-md-input-text-color: #000 !default;
$alert-md-input-text-color: $text-md-color !default;
/// @prop - Border width of the alert input when focused
$alert-md-input-border-width-focused: 2px !default;
@ -96,7 +96,7 @@ $alert-md-input-border-width-focused: 2px !default;
$alert-md-input-border-style-focused: $alert-md-input-border-style !default;
/// @prop - Border color of the alert input when focused
$alert-md-input-border-color-focused: color($colors-md, primary) !default;
$alert-md-input-border-color-focused: ion-color($colors-md, primary, base, md) !default;
/// @prop - Margin top of the alert input
$alert-md-input-margin-top: 5px !default;
@ -110,6 +110,9 @@ $alert-md-input-margin-bottom: 5px !default;
/// @prop - Margin start of the alert input
$alert-md-input-margin-start: 0 !default;
/// @prop - Placeholder Color for input
$alert-md-input-placeholder-color: $placeholder-text-md-color !default;
/// @prop - Flex wrap of the alert button group
$alert-md-button-group-flex-wrap: wrap-reverse !default;
@ -156,13 +159,13 @@ $alert-md-button-margin-start: 0 !default;
$alert-md-button-font-weight: 500 !default;
/// @prop - Text color of the alert button
$alert-md-button-text-color: color($colors-md, primary) !default;
$alert-md-button-text-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Background color of the alert button
$alert-md-button-background-color: transparent !default;
/// @prop - Background color of the alert activated button
$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default;
$alert-md-button-background-color-activated: $background-color-step-200 !default;
/// @prop - Border radius of the alert button
$alert-md-button-border-radius: 2px !default;
@ -192,7 +195,7 @@ $alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top
$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default;
/// @prop - Text color of the label for the radio alert
$alert-md-radio-label-text-color: initial !default;
$alert-md-radio-label-text-color: $text-md-color !default;
/// @prop - Text color of the label for the checked radio alert
$alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default;
@ -219,7 +222,7 @@ $alert-md-radio-border-style: solid !default;
$alert-md-radio-border-radius: 50% !default;
/// @prop - Border color of the alert radio when off
$alert-md-radio-border-color-off: darken($list-md-border-color, 40%) !default;
$alert-md-radio-border-color-off: $text-md-color-step-300 !default;
/// @prop - Border color of the alert radio when on
$alert-md-radio-border-color-on: $alert-md-button-text-color !default;
@ -261,10 +264,10 @@ $alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-t
$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default;
/// @prop - Text color of the label for the checkbox in the alert
$alert-md-checkbox-label-text-color: initial !default;
$alert-md-checkbox-label-text-color: $text-md-color !default;
/// @prop - Text color of the label for the checked checkbox in the alert
$alert-md-checkbox-label-text-color-checked: initial !default;
$alert-md-checkbox-label-text-color-checked: ion-color($colors-md, primary, base, md) !default;
/// @prop - Top of the checkbox in the alert
$alert-md-checkbox-top: 0 !default;
@ -288,7 +291,7 @@ $alert-md-checkbox-border-style: solid !default;
$alert-md-checkbox-border-radius: 2px !default;
/// @prop - Border color of the checkbox in the alert when off
$alert-md-checkbox-border-color-off: darken($list-md-border-color, 40%) !default;
$alert-md-checkbox-border-color-off: $border-md-color !default;
/// @prop - Border color of the checkbox in the alert when on
$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default;
@ -312,7 +315,7 @@ $alert-md-checkbox-icon-border-width: 2px !default;
$alert-md-checkbox-icon-border-style: solid !default;
/// @prop - Border color of the icon in the checkbox alert
$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default;
$alert-md-checkbox-icon-border-color: ion-color($colors-md, $alert-md-checkbox-border-color-on, contrast, md) !default;
/// @prop - Transform of the icon in the checkbox alert
$alert-md-checkbox-icon-transform: rotate(45deg) !default;

1
packages/core/src/components/alert/alert.scss
View File

@ -61,7 +61,6 @@ ion-alert input {
}
.alert-input {
@include placeholder($alert-input-placeholder-color);
@include padding(10px, 0);
border: 0;

3
packages/core/src/components/alert/alert.vars.scss
View File

@ -14,6 +14,3 @@ $alert-button-line-height: 20px !default;
/// @prop - Font size of the alert button
$alert-button-font-size: 14px !default;
/// @prop - Color of the alert input placeholder
$alert-input-placeholder-color: #999 !default;

2
packages/core/src/components/app/app.ios.scss
View File

@ -24,7 +24,7 @@
}
a {
color: $link-ios-color;
color: $app-ios-link-color;
}
@import "../icon/icon.ios";

3
packages/core/src/components/app/app.ios.vars.scss
View File

@ -5,5 +5,8 @@
// iOS App
// --------------------------------------------------
/// @prop - Color for links for the app
$app-ios-link-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Statusbar padding for the app
$app-ios-statusbar-padding: 20px !default;

2
packages/core/src/components/app/app.md.scss
View File

@ -23,7 +23,7 @@
}
a {
color: $link-md-color;
color: $app-md-link-color;
}
@import "../icon/icon.md";

3
packages/core/src/components/app/app.md.vars.scss
View File

@ -6,5 +6,8 @@
// Material Design App
// --------------------------------------------------
/// @prop - Color for links for the app
$app-md-link-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Statusbar padding for the app
$app-md-statusbar-padding: 20px !default;

6
packages/core/src/components/backdrop/backdrop.ios.scss Normal file
View File

@ -0,0 +1,6 @@
@import "./backdrop";
@import "./backdrop.ios.vars";
.backdrop-ios {
background-color: $backdrop-ios-color;
}

1
packages/core/src/components/backdrop/backdrop.ios.vars.scss Normal file
View File

@ -0,0 +1 @@
@import "../../themes/ionic.globals.ios";

6
packages/core/src/components/backdrop/backdrop.md.scss Normal file
View File

@ -0,0 +1,6 @@
@import "./backdrop";
@import "./backdrop.md.vars";
.backdrop-md {
background-color: $backdrop-md-color;
}

1
packages/core/src/components/backdrop/backdrop.md.vars.scss Normal file
View File

@ -0,0 +1 @@
@import "../../themes/ionic.globals.md";

1
packages/core/src/components/backdrop/backdrop.scss
View File

@ -13,7 +13,6 @@ ion-backdrop {
width: 100%;
height: 100%;
background-color: $backdrop-color;
opacity: .01;
transform: translateZ(0);

15
packages/core/src/components/backdrop/backdrop.tsx
View File

@ -1,9 +1,20 @@
import { Component } from '@stencil/core';
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'ion-backdrop',
styleUrl: 'backdrop.scss'
styleUrls: {
ios: 'backdrop.ios.scss',
md: 'backdrop.md.scss'
},
host: {
theme: 'backdrop'
}
})
export class Backdrop {
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode: 'ios' | 'md';
}

6
packages/core/src/components/backdrop/backdrop.vars.scss
View File

@ -1,7 +1 @@
@import "../../themes/ionic.globals";
// Backdrop
// --------------------------------------------------
/// @prop - Color of the backdrop
$backdrop-color: #000 !default;

20
packages/core/src/components/backdrop/readme.md
View File

@ -10,6 +10,26 @@ Backdrops are full screen components that overlay other components. They are use
<!-- Auto Generated Below -->
## Properties
#### mode
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
## Attributes
#### mode
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
----------------------------------------------

8
packages/core/src/components/badge/badge.ios.scss
View File

@ -17,11 +17,13 @@
// Generate iOS Badge Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$base-color: ion-color($colors-ios, $color-name, base, ios);
$contrast-color: ion-color($colors-ios, $color-name, contrast, ios);
.badge-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
color: $base-color;
background-color: $contrast-color;
}
}

4
packages/core/src/components/badge/badge.ios.vars.scss
View File

@ -10,7 +10,7 @@ $badge-ios-border-radius: 10px !default;
$badge-ios-font-family: $font-family-ios-base !default;
/// @prop - Background color of the badge
$badge-ios-background-color: color($colors-ios, primary) !default;
$badge-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Text color of the badge
$badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default;
$badge-ios-text-color: ion-color($colors-ios, $badge-ios-background-color, contrast, ios) !default;

9
packages/core/src/components/badge/badge.md.scss
View File

@ -17,12 +17,13 @@
// Generate Material Design Badge Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$base-color: ion-color($colors-md, $color-name, base, md);
$contrast-color: ion-color($colors-md, $color-name, contrast, md);
.badge-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
color: $base-color;
background-color: $contrast-color;
}
}

4
packages/core/src/components/badge/badge.md.vars.scss
View File

@ -10,7 +10,7 @@ $badge-md-border-radius: 4px !default;
$badge-md-font-family: $font-family-md-base !default;
/// @prop - Background color of the badge
$badge-md-background-color: color($colors-md, primary) !default;
$badge-md-background-color: ion-color($colors-md, primary, base, ios) !default;
/// @prop - Text color of the badge
$badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default;
$badge-md-text-color: ion-color($colors-md, $badge-md-background-color, contrast, ios) !default;

39
packages/core/src/components/button/button.ios.scss
View File

@ -37,11 +37,11 @@
// iOS Default Button Color Mixin
// --------------------------------------------------
@mixin ios-button-default($color-name, $color-base, $color-contrast) {
$bg-color: $color-base;
$bg-color-activated: color-shade($bg-color);
$bg-color-focused: color-shade($color-base, 12%);
$fg-color: $color-contrast;
@mixin ios-button-default($color-name) {
$bg-color: ion-color($colors-ios, $color-name, base, ios);
$bg-color-activated: ion-color($colors-ios, $color-name, tint, ios);
$bg-color-focused: ion-color($colors-ios, $color-name, shade, ios);
$fg-color: ion-color($colors-ios, $color-name, contrast, ios);
.button-ios-#{$color-name} {
color: $fg-color;
@ -119,15 +119,18 @@
}
.button-outline-ios.activated.focused {
border-color: color-shade($button-ios-background-color, 12%);
background-color: color-shade($button-ios-background-color, 12%);
border-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
background-color: ion-color($colors-ios, $button-ios-background-color, shade, ios);
}
// iOS Outline Button Color Mixin
// --------------------------------------------------
@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
$bg-color-focused: rgba($color-base, .12);
@mixin ios-button-outline($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-tint: ion-color($colors-ios, $color-name, shade, ios);
$bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios);
.button-outline-ios-#{$color-name} {
border-color: $color-base;
@ -145,8 +148,8 @@
}
.button-outline-ios-#{$color-name}.activated.focused {
border-color: color-shade($color-base, 12%);
background-color: color-shade($color-base, 12%);
border-color: $color-tint;
background-color: $color-tint;
}
}
@ -178,9 +181,9 @@
// iOS Clear Button Color Mixin
// --------------------------------------------------
@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
$fg-color: $color-base;
$bg-color-focused: rgba($color-base, .12);
@mixin ios-button-clear($color-name) {
$fg-color: ion-color($colors-ios, $color-name, base, ios);
$bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios);
.button-clear-ios-#{$color-name} {
border-color: $button-ios-clear-border-color;
@ -215,10 +218,10 @@
// Generate iOS Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include ios-button-default($color-name, $color-base, $color-contrast);
@include ios-button-outline($color-name, $color-base, $color-contrast);
@include ios-button-clear($color-name, $color-base, $color-contrast);
@each $color-name, $color-value in $colors-ios {
@include ios-button-default($color-name);
@include ios-button-outline($color-name);
@include ios-button-clear($color-name);
}

15
packages/core/src/components/button/button.ios.vars.scss
View File

@ -40,13 +40,13 @@ $button-ios-border-radius: 4px !default;
$button-ios-font-size: 16px !default;
/// @prop - Background color of the button
$button-ios-background-color: color($colors-ios, primary) !default;
$button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Text color of the button
$button-ios-text-color: color-contrast($colors-ios, $button-ios-background-color) !default;
$button-ios-text-color: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the activated button
$button-ios-background-color-activated: color-shade($button-ios-background-color) !default;
$button-ios-background-color-activated: ion-color($colors-ios, $button-ios-background-color, tint, ios) !default;
/// @prop - Opacity of the activated button
$button-ios-opacity-activated: 1 !default;
@ -55,7 +55,7 @@ $button-ios-opacity-activated: 1 !default;
$button-ios-opacity-hover: .8 !default;
/// @prop - Background color of the focused button
$button-ios-background-color-focused: color-shade($button-ios-background-color, 12%) !default;
$button-ios-background-color-focused: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default;
// iOS Large Button
@ -124,7 +124,7 @@ $button-ios-outline-text-color: $button-ios-background-color
$button-ios-outline-background-color: transparent !default;
/// @prop - Text color of the activated outline button
$button-ios-outline-text-color-activated: color-contrast($colors-ios, $button-ios-background-color) !default;
$button-ios-outline-text-color-activated: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the activated outline button
$button-ios-outline-background-color-activated: $button-ios-background-color !default;
@ -133,8 +133,7 @@ $button-ios-outline-background-color-activated: $button-ios-background-color
$button-ios-outline-opacity-activated: 1 !default;
/// @prop - Background color of the focused outline button
$button-ios-outline-background-color-focused: rgba($button-ios-background-color, .12) !default;
$button-ios-outline-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default;
// iOS Clear Button
// --------------------------------------------------
@ -158,7 +157,7 @@ $button-ios-clear-text-color-hover: $button-ios-background-color
$button-ios-clear-opacity-hover: .6 !default;
/// @prop - Background color of the focused clear button
$button-ios-clear-background-color-focused: rgba($button-ios-background-color, .12) !default;
$button-ios-clear-background-color-focused: ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default;
// iOS Round Button

30
packages/core/src/components/button/button.md.scss
View File

@ -50,11 +50,11 @@
// Material Design Default Button Color Mixin
// --------------------------------------------------
@mixin md-button-default($color-name, $color-base, $color-contrast) {
$bg-color: $color-base;
$bg-color-activated: color-shade($bg-color);
$bg-color-focused: color-shade($bg-color, 12%);
$fg-color: $color-contrast;
@mixin md-button-default($color-name) {
$bg-color: ion-color($colors-md, $color-name, base, md);
$bg-color-activated: ion-color($colors-md, $color-name, tint, md);
$bg-color-focused: ion-color($colors-md, $color-name, shade, md);
$fg-color: ion-color($colors-md, $color-name, contrast, md);
.button-md-#{$color-name} {
color: $fg-color;
@ -151,9 +151,9 @@
// Material Design Outline Button Color Mixin
// --------------------------------------------------
@mixin md-button-outline($color-name, $color-base, $color-contrast) {
$fg-color: color-shade($color-base, 5%);
$bg-color-focused: rgba($color-base, .12);
@mixin md-button-outline($color-name) {
$fg-color: ion-color($colors-md, $color-name, tint, md);
$bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md);
.button-outline-md-#{$color-name} {
border-color: $fg-color;
@ -211,9 +211,9 @@
// Material Design Clear Button Color Mixin
// --------------------------------------------------
@mixin md-button-clear($color-name, $color-base, $color-contrast) {
$fg-color: $color-base;
$bg-color-focused: rgba($color-base, .12);
@mixin md-button-clear($color-name) {
$fg-color: ion-color($colors-md, $color-name, base, md);
$bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md);
.button-clear-md-#{$color-name} {
border-color: $button-md-clear-border-color;
@ -253,10 +253,10 @@
// Generate Material Design Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include md-button-default($color-name, $color-base, $color-contrast);
@include md-button-outline($color-name, $color-base, $color-contrast);
@include md-button-clear($color-name, $color-base, $color-contrast);
@each $color-name, $color-value in $colors-md {
@include md-button-default($color-name);
@include md-button-outline($color-name);
@include md-button-clear($color-name);
}

23
packages/core/src/components/button/button.md.vars.scss
View File

@ -46,10 +46,10 @@ $button-md-font-weight: 500 !default;
$button-md-text-transform: uppercase !default;
/// @prop - Background color of the button
$button-md-background-color: color($colors-md, primary) !default;
$button-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Text color of the button
$button-md-text-color: color-contrast($colors-md, $button-md-background-color) !default;
$button-md-text-color: ion-color($colors-md, $button-md-background-color, contrast, md) !default;
/// @prop - Box shadow of the button
$button-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
@ -64,7 +64,7 @@ $button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
$button-md-background-color-hover: $button-md-background-color !default;
/// @prop - Background color of the activated button
$button-md-background-color-activated: color-shade($button-md-background-color) !default;
$button-md-background-color-activated: ion-color($colors-md, $button-md-background-color, tint, md) !default;
/// @prop - Opacity of the activated button
$button-md-opacity-activated: 1 !default;
@ -73,10 +73,10 @@ $button-md-opacity-activated: 1 !default;
$button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default;
/// @prop - Background color of the ripple on the button
$button-md-ripple-background-color: #555 !default;
$button-md-ripple-background-color: $text-md-color-step-200 !default;
/// @prop - Background color of the focused button
$button-md-background-color-focused: color-shade($button-md-background-color, 12%) !default;
$button-md-background-color-focused: ion-color($colors-md, $button-md-background-color, shade, md) !default;
// Material Design Large Button
@ -145,7 +145,7 @@ $button-md-outline-background-color: transparent !default;
$button-md-outline-box-shadow: none !default;
/// @prop - Background color of the outline button on hover
$button-md-outline-background-color-hover: rgba(158, 158, 158, .1) !default;
$button-md-outline-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
/// @prop - Background color of the activated outline button
$button-md-outline-background-color-activated: transparent !default;
@ -160,8 +160,7 @@ $button-md-outline-opacity-activated: 1 !default;
$button-md-outline-ripple-background-color: $button-md-background-color !default;
/// @prop - Background color of the focused outline button
$button-md-outline-background-color-focused: rgba($button-md-background-color, .12) !default;
$button-md-outline-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default;
// Material Design Clear Button
// --------------------------------------------------
@ -182,19 +181,19 @@ $button-md-clear-box-shadow: none !default;
$button-md-clear-opacity: 1 !default;
/// @prop - Background color of the activated clear button
$button-md-clear-background-color-activated: rgba(158, 158, 158, .2) !default;
$button-md-clear-background-color-activated: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
/// @prop - Box shadow of the activated clear button
$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default;
/// @prop - Background color of the clear button on hover
$button-md-clear-background-color-hover: rgba(158, 158, 158, .1) !default;
$button-md-clear-background-color-hover: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
/// @prop - Background color of the ripple on the clear button
$button-md-clear-ripple-background-color: #999 !default;
$button-md-clear-ripple-background-color: $text-md-color-step-300 !default;
/// @props - Background color of the focused clear button
$button-md-clear-background-color-focused: rgba($button-md-background-color, .12) !default;
$button-md-clear-background-color-focused: ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default;
// Material Design Round Button

9
packages/core/src/components/card-content/card-content.ios.scss
View File

@ -15,14 +15,18 @@
// Generate iOS Card Content Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.card-ios-#{$color-name} {
.card-content-ios {
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.card-content-ios-#{$color-name} {
color: $color-base;
}
@ -32,5 +36,4 @@
.card-content-ios-#{$color-name} {
color: $color-base;
}
}

9
packages/core/src/components/card-content/card-content.md.scss
View File

@ -15,7 +15,9 @@
// Generate Material Design Card Content Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.card-md-#{$color-name} {
@ -23,7 +25,9 @@
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.card-content-md-#{$color-name} {
color: $color-base;
}
@ -33,5 +37,4 @@
.card-content-md-#{$color-name} {
color: $color-base;
}
}

2
packages/core/src/components/card-header/card-header.ios.scss
View File

@ -9,7 +9,7 @@
}
.card-header-translucent-ios {
background-color: rgba($card-ios-header-translucent-background, $card-ios-header-translucent-opacity);
background-color: $card-ios-header-translucent-background-color;
-webkit-backdrop-filter: $card-ios-header-translucent-filter;
backdrop-filter: $card-ios-header-translucent-filter;

15
packages/core/src/components/card-header/card-header.ios.vars.scss
View File

@ -4,22 +4,19 @@
// --------------------------------------------------
/// @prop - Padding top of the card header
$card-ios-header-padding-top: 20px !default;
$card-ios-header-padding-top: 20px !default;
/// @prop - Padding end of the card header
$card-ios-header-padding-end: $card-ios-header-padding-top !default;
$card-ios-header-padding-end: $card-ios-header-padding-top !default;
/// @prop - Padding bottom of the card header
$card-ios-header-padding-bottom: 16px !default;
$card-ios-header-padding-bottom: 16px !default;
/// @prop - Padding start of the card header
$card-ios-header-padding-start: $card-ios-header-padding-end !default;
$card-ios-header-padding-start: $card-ios-header-padding-end !default;
/// @prop - Filter of the translucent card header
$card-ios-header-translucent-background: #fff !default;
$card-ios-header-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-highest) !default;
/// @prop - Filter of the translucent card header
$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default;
/// @prop - Opacity of the translucent cardheader
$card-ios-header-translucent-opacity: .88 !default;
$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default;

9
packages/core/src/components/card-subtitle/card-subtitle.ios.scss
View File

@ -18,7 +18,9 @@
// Generate iOS Card subtitle Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.card-ios-#{$color-name} {
@ -26,7 +28,9 @@
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.card-subtitle-ios-#{$color-name} {
color: $color-base;
}
@ -36,5 +40,4 @@
.card-subtitle-ios-#{$color-name} {
color: $color-base;
}
}

2
packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss
View File

@ -28,4 +28,4 @@ $card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default
$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default;
/// @prop - Color of the card subtitle
$card-ios-subtitle-color: rgba(0, 0, 0, .4) !default;
$card-ios-subtitle-color: $text-ios-color-step-200 !default;

9
packages/core/src/components/card-subtitle/card-subtitle.md.scss
View File

@ -15,7 +15,9 @@
// Generate Material Design Card subtitle Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.card-md-#{$color-name} {
@ -23,7 +25,9 @@
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.card-subtitle-md-#{$color-name} {
color: $color-base;
}
@ -33,5 +37,4 @@
.card-subtitle-md-#{$color-name} {
color: $color-base;
}
}

2
packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss
View File

@ -19,4 +19,4 @@ $card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default;
$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default;
/// @prop - Color of the card subtitle
$card-md-subtitle-color: #222 !default;
$card-md-subtitle-color: $text-md-color-step-100 !default;

9
packages/core/src/components/card-title/card-title.ios.scss
View File

@ -21,7 +21,9 @@
// Generate iOS Card Title Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.card-ios-#{$color-name} {
@ -29,7 +31,9 @@
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.card-title-ios-#{$color-name} {
color: $color-base;
}
@ -39,5 +43,4 @@
.card-title-ios-#{$color-name} {
color: $color-base;
}
}

2
packages/core/src/components/card-title/card-title.ios.vars.scss
View File

@ -34,4 +34,4 @@ $card-ios-title-margin-bottom: $card-ios-title-margin-top !default;
$card-ios-title-margin-start: $card-ios-title-margin-top !default;
/// @prop - Color of the card title
$card-ios-title-text-color: #000 !default;
$card-ios-title-text-color: $text-ios-color !default;

9
packages/core/src/components/card-title/card-title.md.scss
View File

@ -20,7 +20,9 @@
// Generate Material Design Card Title Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.card-md-#{$color-name} {
@ -28,7 +30,9 @@
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.card-title-md-#{$color-name} {
color: $color-base;
}
@ -38,5 +42,4 @@
.card-title-md-#{$color-name} {
color: $color-base;
}
}

2
packages/core/src/components/card-title/card-title.md.vars.scss
View File

@ -31,4 +31,4 @@ $card-md-title-margin-bottom: $card-md-title-margin-top !default;
$card-md-title-margin-start: $card-md-title-margin-end !default;
/// @prop - Color of the card title
$card-md-title-text-color: #222 !default;
$card-md-title-text-color: $text-md-color-step-100 !default;

15
packages/core/src/components/card/card.ios.scss
View File

@ -11,10 +11,9 @@
width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
font-family: $card-ios-font-family;
font-size: $card-ios-font-size;
background: $card-ios-background-color;
color: $card-ios-text-color;
background-color: $card-ios-background-color;
box-shadow: $card-ios-box-shadow;
transform: translateZ(0);
@ -73,11 +72,12 @@
// @include margin(0, null, null, null);
// }
// Generate iOS Card Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.card-ios .text-ios-#{$color-name} {
color: $color-base;
@ -91,11 +91,12 @@
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.text-ios-#{$color-name} {
color: $color-base;
}
}
}
}

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

@ -16,7 +16,7 @@ $card-ios-margin-bottom: 30px !default;
$card-ios-margin-start: 20px !default;
/// @prop - Background color of the card
$card-ios-background-color: $list-ios-background-color !default;
$card-ios-background-color: $item-ios-background-color !default;
/// @prop - Box shadow color of the card
$card-ios-box-shadow-color: rgba(0, 0, 0, .18) !default;
@ -34,4 +34,4 @@ $card-ios-font-family: $font-family-ios-base !default;
$card-ios-font-size: 14px !default;
/// @prop - Color of the card text
$card-ios-text-color: #666 !default;
$card-ios-text-color: $text-ios-color-step-200 !default;

13
packages/core/src/components/card/card.md.scss
View File

@ -11,10 +11,9 @@
width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
font-family: $card-md-font-family;
font-size: $card-md-font-size;
background: $card-md-background-color;
color: $card-md-text-color;
background-color: $card-md-background-color;
box-shadow: $card-md-box-shadow;
}
@ -80,7 +79,9 @@
// Generate Material Design Card Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.card-md .text-md-#{$color-name} {
color: $color-base;
@ -100,7 +101,9 @@
color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.text-md-#{$color-name} {
color: $color-base;
}

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

@ -16,7 +16,7 @@ $card-md-margin-bottom: 10px !default;
$card-md-margin-start: 10px !default;
/// @prop - Background color of the card
$card-md-background-color: $list-md-background-color !default;
$card-md-background-color: $item-md-background-color !default;
/// @prop - Box shadow of the card
$card-md-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
@ -34,4 +34,4 @@ $card-md-font-family: $font-family-md-base !default;
$card-md-line-height: 1.5 !default;
/// @prop - Color of the card text
$card-md-text-color: #222 !default;
$card-md-text-color: $text-md-color-step-100 !default;

13
packages/core/src/components/checkbox/checkbox.ios.scss
View File

@ -76,11 +76,11 @@
width: 36px;
height: 36px;
background: #86a8df;
background: $checkbox-ios-background-color-focused;
content: "";
opacity: .3;
opacity: .2;
}
@ -102,7 +102,9 @@
// iOS Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
@mixin checkbox-theme-ios($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.checkbox-ios-#{$color-name} .checkbox-checked {
border-color: $color-base;
@ -112,13 +114,12 @@
.checkbox-ios-#{$color-name} .checkbox-checked .checkbox-inner {
border-color: $color-contrast;
}
}
// Generate iOS Checkbox Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include checkbox-theme-ios($color-name, $color-base, $color-contrast);
@each $color-name, $color-value in $colors-ios {
@include checkbox-theme-ios($color-name);
}

11
packages/core/src/components/checkbox/checkbox.ios.vars.scss
View File

@ -6,16 +6,19 @@
// --------------------------------------------------
/// @prop - Background color of the checkbox when off
$checkbox-ios-background-color-off: $list-ios-background-color !default;
$checkbox-ios-background-color-off: $item-ios-background-color !default;
/// @prop - Background color of the checkbox when on
$checkbox-ios-background-color-on: color($colors-ios, primary) !default;
$checkbox-ios-background-color-on: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color of focus indicator for checkbox when focused
$checkbox-ios-background-color-focused: ion-color($colors-ios, primary, tint, ios) !default;
/// @prop - Size of the checkbox icon
$checkbox-ios-icon-size: 21px !default;
/// @prop - Border color of the checkbox icon when off
$checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
$checkbox-ios-icon-border-color-off: $item-ios-border-color !default;
/// @prop - Border color of the checkbox icon when on
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
@ -36,7 +39,7 @@ $checkbox-ios-icon-checkmark-width: 1px !default;
$checkbox-ios-icon-checkmark-style: solid !default;
/// @prop - Color of the checkbox icon checkmark
$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default;
$checkbox-ios-icon-checkmark-color: ion-color($colors-ios, $checkbox-ios-background-color-on, contrast, ios) !default;
/// @prop - Opacity of the disabled checkbox
$checkbox-ios-disabled-opacity: .3 !default;

13
packages/core/src/components/checkbox/checkbox.md.scss
View File

@ -80,11 +80,11 @@
width: 36px;
height: 36px;
background: #86a8df;
background: $checkbox-md-background-color-focused;
content: "";
opacity: .3;
opacity: .2;
}
@ -110,7 +110,9 @@
// Material Design Checkbox Color Mixin
// --------------------------------------------------
@mixin checkbox-theme-md($color-name, $color-base, $color-contrast) {
@mixin checkbox-theme-md($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.checkbox-md-#{$color-name} .checkbox-checked {
border-color: $color-base;
@ -120,13 +122,12 @@
.checkbox-md-#{$color-name} .checkbox-checked .checkbox-inner {
border-color: $color-contrast;
}
}
// Generate Material Design Checkbox Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@include checkbox-theme-md($color-name, $color-base, $color-contrast);
@each $color-name, $color-value in $colors-md {
@include checkbox-theme-md($color-name);
}

13
packages/core/src/components/checkbox/checkbox.md.vars.scss
View File

@ -9,10 +9,13 @@
$checkbox-md-disabled-opacity: .3 !default;
/// @prop - Background color of the checkbox icon when off
$checkbox-md-icon-background-color-off: $list-md-background-color !default;
$checkbox-md-icon-background-color-off: $item-md-background-color !default;
/// @prop - Background color of focus indicator for checkbox when focused
$checkbox-md-background-color-focused: ion-color($colors-md, primary, tint, md) !default;
/// @prop - Background color of the checkbox icon when on
$checkbox-md-icon-background-color-on: color($colors-md, primary) !default;
$checkbox-md-icon-background-color-on: ion-color($colors-md, primary, base, md) !default;
/// @prop - Size of the checkbox icon
$checkbox-md-icon-size: 16px !default;
@ -24,7 +27,7 @@ $checkbox-md-icon-checkmark-width: 2px !default;
$checkbox-md-icon-checkmark-style: solid !default;
/// @prop - Color of the checkbox icon checkmark
$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default;
$checkbox-md-icon-checkmark-color: ion-color($colors-md, $checkbox-md-icon-background-color-on, contrast, md) !default;
/// @prop - Border width of the checkbox icon
$checkbox-md-icon-border-width: 2px !default;
@ -36,10 +39,10 @@ $checkbox-md-icon-border-style: solid !default;
$checkbox-md-icon-border-radius: 2px !default;
/// @prop - Border color of the checkbox icon when off
$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default;
$checkbox-md-icon-border-color-off: $border-md-color !default;
/// @prop - Border color of the checkbox icon when on
$checkbox-md-icon-border-color-on: color($colors-md, primary) !default;
$checkbox-md-icon-border-color-on: ion-color($colors-md, primary, base, md) !default;
/// @prop - Transition duration of the checkbox
$checkbox-md-transition-duration: 280ms !default;

4
packages/core/src/components/chip-button/chip-button.ios.scss
View File

@ -29,7 +29,9 @@
// Generate iOS Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.chip-button-ios-#{$color-name} {
color: $color-contrast;

8
packages/core/src/components/chip-button/chip-button.ios.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-ios-background-color: color($colors-ios, primary) !default;
$chip-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-ios-icon-fill-color: color-contrast($colors-ios, $chip-button-ios-background-color) !default;
$chip-button-ios-icon-fill-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default;
/// @prop - Background color of the clear chip button
$chip-button-ios-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-ios-clear-text-color: color($colors-ios, primary) !default;
$chip-button-ios-clear-text-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-ios-clear-icon-fill-color: color($colors-ios, primary) !default;
$chip-button-ios-clear-icon-fill-color: ion-color($colors-ios, primary, base, ios) !default;

5
packages/core/src/components/chip-button/chip-button.md.scss
View File

@ -29,7 +29,9 @@
// Generate Material Design Chip Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.chip-button-md-#{$color-name} {
color: $color-contrast;
@ -47,5 +49,4 @@
.chip-button-clear-md-#{$color-name} .icon {
fill: $color-base;
}
}

8
packages/core/src/components/chip-button/chip-button.md.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Background color of the chip button
$chip-button-md-background-color: color($colors-md, primary) !default;
$chip-button-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Fill color of the icon in the chip button
$chip-button-md-icon-fill-color: color-contrast($colors-md, $chip-button-md-background-color) !default;
$chip-button-md-icon-fill-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default;
/// @prop - Background color of the clear chip button
$chip-button-md-clear-background-color: transparent !default;
/// @prop - Text color of the clear chip button
$chip-button-md-clear-text-color: color($colors-md, primary) !default;
$chip-button-md-clear-text-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Fill color of the icon in the clear chip button
$chip-button-md-clear-icon-fill-color: color($colors-md, primary) !default;
$chip-button-md-clear-icon-fill-color: ion-color($colors-md, primary, base, md) !default;

5
packages/core/src/components/chip/chip.ios.scss
View File

@ -37,7 +37,9 @@
// Generate iOS Chip Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.chip-ios-#{$color-name} {
color: $color-contrast;
@ -48,5 +50,4 @@
color: $color-contrast;
background-color: $color-base;
}
}

8
packages/core/src/components/chip/chip.ios.vars.scss
View File

@ -28,10 +28,10 @@ $chip-ios-font-family: $font-family-ios-base !default;
$chip-ios-font-size: 13px !default;
/// @prop - Text color of the chip
$chip-ios-text-color: rgba(0, 0, 0, .87) !default;
$chip-ios-text-color: $text-ios-color-step-100 !default;
/// @prop - Background color of the chip
$chip-ios-background-color: rgba(0, 0, 0, .12) !default;
$chip-ios-background-color: ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
/// @prop - Margin top of the label in the chip
$chip-ios-label-margin-top: 0 !default;
@ -46,10 +46,10 @@ $chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default;
$chip-ios-label-margin-start: $chip-ios-label-margin-end !default;
/// @prop - Background color of the icon in the chip
$chip-ios-icon-background-color: color($colors-ios, primary) !default;
$chip-ios-icon-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Fill color of the icon in the chip
$chip-ios-icon-fill-color: color-contrast($colors-ios, $chip-ios-icon-background-color) !default;
$chip-ios-icon-fill-color: ion-color($colors-ios, $chip-ios-icon-background-color, contrast, ios) !default;
/// @prop - Width of the avatar in the chip
$chip-ios-avatar-width: 32px !default;

5
packages/core/src/components/chip/chip.md.scss
View File

@ -37,7 +37,9 @@
// Generate Material Design Chip Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
.chip-md-#{$color-name} {
color: $color-contrast;
@ -48,5 +50,4 @@
color: $color-contrast;
background-color: $color-base;
}
}

8
packages/core/src/components/chip/chip.md.vars.scss
View File

@ -28,10 +28,10 @@ $chip-md-font-family: $font-family-md-base !default;
$chip-md-font-size: 13px !default;
/// @prop - Text color of the chip
$chip-md-text-color: rgba(0, 0, 0, .87) !default;
$chip-md-text-color: $text-md-color-step-100 !default;
/// @prop - Background color of the chip
$chip-md-background-color: rgba(0, 0, 0, .12) !default;
$chip-md-background-color: ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-low) !default;
/// @prop - Margin top of the label in the chip
$chip-md-label-margin-top: 0 !default;
@ -46,10 +46,10 @@ $chip-md-label-margin-bottom: $chip-md-label-margin-top !default;
$chip-md-label-margin-start: $chip-md-label-margin-end !default;
/// @prop - Background color of the icon in the chip
$chip-md-icon-background-color: color($colors-md, primary) !default;
$chip-md-icon-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Fill color of the icon in the chip
$chip-md-icon-fill-color: color-contrast($colors-md, $chip-md-icon-background-color) !default;
$chip-md-icon-fill-color: ion-color($colors-md, $chip-md-icon-background-color, contrast, md) !default;
/// @prop - Width of the avatar in the chip
$chip-md-avatar-width: 32px !default;

2
packages/core/src/components/content/content.ios.scss
View File

@ -18,7 +18,7 @@
.content-ios hr {
height: $hairlines-width;
background-color: rgba(0, 0, 0, .12);
background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-low);
}

2
packages/core/src/components/content/content.ios.vars.scss
View File

@ -7,7 +7,7 @@
$content-ios-font-family: $font-family-ios-base !default;
/// @prop - Background color of the outer content
$content-ios-outer-background: #efeff4 !default;
$content-ios-outer-background: $background-ios-color-step-100 !default;
/// @prop - Background color of the content when making transition
$content-ios-transition-background: #000 !default;

2
packages/core/src/components/content/content.md.scss
View File

@ -12,7 +12,7 @@
}
.content-md hr {
background-color: rgba(0, 0, 0, .08);
background-color: $background-color-step-100;
}

5
packages/core/src/components/content/content.scss
View File

@ -45,11 +45,6 @@ ion-content.js-scroll ion-scroll {
will-change: initial;
}
ion-content.has-refresher ion-scroll {
background-color: inherit;
}
// Content Padding
// --------------------------------------------------

12
packages/core/src/components/datetime/datetime.ios.vars.scss
View File

@ -6,19 +6,19 @@
// --------------------------------------------------
/// @prop - Padding top of the datetime
$datetime-ios-padding-top: $item-ios-padding-top !default;
$datetime-ios-padding-top: $item-ios-padding-top !default;
/// @prop - Padding end of the datetime
$datetime-ios-padding-end: ($item-ios-padding-end / 2) !default;
$datetime-ios-padding-end: ($item-ios-padding-end / 2) !default;
/// @prop - Padding bottom of the datetime
$datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
$datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
/// @prop - Padding start of the datetime
$datetime-ios-padding-start: $item-ios-padding-start !default;
$datetime-ios-padding-start: $item-ios-padding-start !default;
/// @prop - Font family of the datetime
$datetime-ios-font-family: $font-family-ios-base !default;
$datetime-ios-font-family: $font-family-ios-base !default;
/// @prop - Color of the datetime placeholder
$datetime-ios-placeholder-color: #999 !default;
$datetime-ios-placeholder-color: $text-ios-color-step-300 !default;

2
packages/core/src/components/datetime/datetime.md.vars.scss
View File

@ -21,4 +21,4 @@ $datetime-md-padding-start: $item-md-padding-start !default;
$datetime-md-font-family: $font-family-md-base !default;
/// @prop - Color of the datetime placeholder
$datetime-md-placeholder-color: #999 !default;
$datetime-md-placeholder-color: $placeholder-text-md-color !default;

18
packages/core/src/components/fab-button/fab-button.ios.scss
View File

@ -40,25 +40,24 @@
// --------------------------------------------------
.fab-translucent-ios {
background-color: rgba($fab-ios-background-color, $fab-ios-translucent-opacity);
background-color: $fab-ios-translucent-background-color;
-webkit-backdrop-filter: $fab-ios-translucent-filter;
backdrop-filter: $fab-ios-translucent-filter;
}
.fab-translucent-ios-in-list {
background-color: rgba($fab-ios-list-button-background-color, $fab-ios-translucent-opacity);
background-color: $fab-ios-list-button-translucent-background-color;
}
// Generate iOS FAB colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
$bg-color: $color-base;
$bg-color-activated: color-shade($bg-color);
$fg-color: $color-contrast;
@each $color-name, $color-value in $colors-ios {
$bg-color: ion-color($colors-ios, $color-name, base, ios);
$bg-color-activated: ion-color($colors-ios, $color-name, tint, ios);
$fg-color: ion-color($colors-ios, $color-name, contrast, ios);
.fab-button-ios-#{$color-name} {
color: $fg-color;
@ -74,11 +73,12 @@
}
.fab-translucent-ios-#{$color-name} {
background-color: rgba($bg-color, $fab-ios-translucent-opacity);
background-color: ion-color-alpha($colors-ios, $color-name, $alpha-ios-highest);
opacity: .8;
}
.fab-translucent-ios-#{$color-name}.activated {
background-color: rgba($bg-color-activated, $fab-ios-translucent-opacity);
opacity: 1;
}
}

33
packages/core/src/components/fab-button/fab-button.ios.vars.scss
View File

@ -4,40 +4,43 @@
// --------------------------------------------------
/// @prop - Background color of the button
$fab-ios-background-color: color($colors-ios, primary) !default;
$fab-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background color of the button in translucent mode
$fab-ios-translucent-background-color: ion-color-alpha($colors-ios, primary, $alpha-ios-highest, ios) !default;
/// @prop - Text color of the button
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
$fab-ios-text-color: ion-color($colors-ios, $fab-ios-background-color, contrast, ios) !default;
/// @prop - Color of the button icon
$fab-ios-icon-fill-color: $fab-ios-text-color !default;
$fab-ios-icon-fill-color: $fab-ios-text-color !default;
/// @prop - Background color of the activated button
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
$fab-ios-background-color-activated: ion-color($colors-ios, $fab-ios-background-color, tint, ios) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-background-color: $fab-list-button-background-color !default;
$fab-ios-list-button-background-color: ion-color($colors-ios, tertiary, base, ios) !default;
/// @prop - Background color of the button in a list
$fab-ios-list-button-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
/// @prop - Text color of the button in a list
$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default;
$fab-ios-list-button-text-color: ion-color($colors-ios, $fab-ios-list-button-background-color, contrast, ios) !default;
/// @prop - Color of the button icon in a list
$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default;
$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default;
/// @prop - Background color of the activated button in a list
$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default;
$fab-ios-list-button-background-color-activated: ion-color($colors-ios, $fab-ios-list-button-background-color, tint, ios) !default;
/// @prop - Transition duration of the transform and opacity of the button in a list
$fab-ios-list-button-transition-duration: 200ms !default;
$fab-ios-list-button-transition-duration: 200ms !default;
/// @prop - Speed curve of the transition of the transform and opacity of the button in a list
$fab-ios-list-button-transition-timing-function: ease !default;
$fab-ios-list-button-transition-timing-function: ease !default;
/// @prop - Transition delay of the transform and opacity of the button in a list
$fab-ios-list-button-transition-delay: 10ms !default;
$fab-ios-list-button-transition-delay: 10ms !default;
/// @prop - Filter of the translucent fab
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
/// @prop - Opacity of the translucent fab
$fab-ios-translucent-opacity: .88 !default;
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;

12
packages/core/src/components/fab-button/fab-button.md.scss
View File

@ -51,19 +51,19 @@
// Material Design FAB Ripple
// --------------------------------------------------
.fab-button-md .ripple-effect {
background-color: color-contrast($colors-md, $fab-md-background-color);
.fab-button-md .button-effect {
background-color: ion-color($colors-md, $fab-md-background-color, contrast, md);
}
// Generate MD FAB colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$bg-color: $color-base;
$bg-color-activated: color-shade($bg-color);
$fg-color: $color-contrast;
$bg-color: ion-color($colors-md, $color-name, base, md);
$bg-color-activated: ion-color($colors-md, $bg-color, tint, md);
$fg-color: ion-color($colors-md, $color-name, contrast, md);
.fab-button-md-#{$color-name} {
color: $fg-color;

12
packages/core/src/components/fab-button/fab-button.md.vars.scss
View File

@ -10,28 +10,28 @@ $fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14)
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
/// @prop - Background color of the button
$fab-md-background-color: color($colors-md, primary) !default;
$fab-md-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Text color of the button
$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
$fab-md-text-color: ion-color($colors-md, $fab-md-background-color, contrast, md) !default;
/// @prop - Color of the button icon
$fab-md-icon-fill-color: $fab-md-text-color !default;
/// @prop - Background color of the activated button
$fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
$fab-md-background-color-activated: ion-color($colors-md, $fab-md-background-color, tint, md) !default;
/// @prop - Background color of the button in a list
$fab-md-list-button-background-color: $fab-list-button-background-color !default;
$fab-md-list-button-background-color: ion-color($colors-md, tertiary, base, md) !default;
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default;
$fab-md-list-button-text-color: ion-color($colors-md, $fab-md-list-button-background-color, contrast, md) !default;
/// @prop - Color of the button icon in a list
$fab-md-list-button-icon-fill-color: $fab-md-list-button-text-color !default;
/// @prop - Background color of the activated button in a list
$fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default;
$fab-md-list-button-background-color-activated: ion-color($colors-md, $fab-md-list-button-background-color, tint, md) !default;
/// @prop - Transition duration of the transform and opacity of the button in a list
$fab-md-list-button-transition-duration: 200ms !default;

3
packages/core/src/components/fab-button/fab-button.vars.scss
View File

@ -8,6 +8,3 @@ $fab-size: 56px !default;
/// @prop - Width and height of the mini FAB button
$fab-mini-size: 40px !default;
/// @prop - Background color of the button in a list
$fab-list-button-background-color: #f4f4f4 !default;

4
packages/core/src/components/icon/icon.ios.scss
View File

@ -7,10 +7,10 @@
// Generate iOS Icon Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.icon-ios-#{$color-name} {
color: $color-base;
}
}

4
packages/core/src/components/icon/icon.md.scss
View File

@ -7,10 +7,10 @@
// Generate Material Design Icon Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.icon-md-#{$color-name} {
color: $color-base;
}
}

17
packages/core/src/components/infinite-scroll/infinite-scroll.ios.scss Normal file
View File

@ -0,0 +1,17 @@
@import "./infinite-scroll.ios.vars";
.infinite-scroll-ios .infinite-loading-text {
color: $infinite-scroll-ios-loading-text-color;
}
.infinite-scroll-ios .infinite-loading-spinner .spinner-ios line,
.infinite-scroll-ios .infinite-loading-spinner .spinner-ios-small line,
.infinite-scroll-ios .infinite-loading-spinner .spinner-crescent circle {
stroke: $infinite-scroll-ios-loading-color;
}
.infinite-scroll-ios .infinite-loading-spinner .spinner-bubbles circle,
.infinite-scroll-ios .infinite-loading-spinner .spinner-circles circle,
.infinite-scroll-ios .infinite-loading-spinner .spinner-dots circle {
fill: $infinite-scroll-ios-loading-color;
}

10
packages/core/src/components/infinite-scroll/infinite-scroll.ios.vars.scss Normal file
View File

@ -0,0 +1,10 @@
@import "../../themes/ionic.globals.ios";
// Material Design Infinite Scroll
// --------------------------------------------------
/// @prop - Color of the infinite scroll loading indicator
$infinite-scroll-ios-loading-color: $text-ios-color-step-200 !default;
/// @prop - Color of the infinite scroll loading indicator text
$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default;

15
packages/core/src/components/infinite-scroll/infinite-scroll.md.scss Normal file
View File

@ -0,0 +1,15 @@
@import "./infinite-scroll.md.vars";
.infinite-scroll-md .infinite-loading-text {
color: $infinite-scroll-md-loading-text-color;
}
.infinite-scroll-md .infinite-loading-spinner .spinner-crescent circle {
stroke: $infinite-scroll-md-loading-color;
}
.infinite-scroll-md .infinite-loading-spinner .spinner-bubbles circle,
.infinite-scroll-md .infinite-loading-spinner .spinner-circles circle,
.infinite-scroll-md .infinite-loading-spinner .spinner-dots circle {
fill: $infinite-scroll-md-loading-color;
}

10
packages/core/src/components/infinite-scroll/infinite-scroll.md.vars.scss Normal file
View File

@ -0,0 +1,10 @@
@import "../../themes/ionic.globals.md";
// Material Design Infinite Scroll
// --------------------------------------------------
/// @prop - Color of the infinite scroll loading indicator
$infinite-scroll-md-loading-color: $text-md-color-step-200 !default;
/// @prop - Color of the infinite scroll loading indicator text
$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default;

13
packages/core/src/components/infinite-scroll/infinite-scroll.scss
View File

@ -39,21 +39,8 @@ ion-infinite-scroll-content {
.infinite-loading-text {
@include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start);
color: $infinite-scroll-loading-text-color;
}
.infinite-loading-spinner .spinner-ios line,
.infinite-loading-spinner .spinner-ios-small line,
.infinite-loading-spinner .spinner-crescent circle {
stroke: $infinite-scroll-loading-color;
}
.infinite-loading-spinner .spinner-bubbles circle,
.infinite-loading-spinner .spinner-circles circle,
.infinite-loading-spinner .spinner-dots circle {
fill: $infinite-scroll-loading-color;
}
// Infinite Scroll Content States

8
packages/core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -9,7 +9,13 @@ const enum Position {
@Component({
tag: 'ion-infinite-scroll',
styleUrl: 'infinite-scroll.scss'
styleUrls: {
ios: 'infinite-scroll.ios.scss',
md: 'infinite-scroll.md.scss'
},
host: {
theme: 'infinite-scroll'
}
})
export class InfiniteScroll {

6
packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss
View File

@ -18,12 +18,6 @@ $infinite-scroll-loading-margin-bottom: 32px !default;
/// @prop - Margin start of the infinite scroll loading icon
$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default;
/// @prop - Color of the infinite scroll loading indicator
$infinite-scroll-loading-color: #666 !default;
/// @prop - Text color of the infinite scroll loading indicator
$infinite-scroll-loading-text-color: $infinite-scroll-loading-color !default;
/// @prop - Margin top of the infinite scroll loading text
$infinite-scroll-loading-text-margin-top: 4px !default;

1
packages/core/src/components/input/input.ios.scss
View File

@ -5,6 +5,7 @@
// --------------------------------------------------
.native-input-ios {
@include placeholder($input-ios-placeholder-color);
@include margin($input-ios-margin-top, $input-ios-margin-end, $input-ios-margin-bottom, $input-ios-margin-start);
@include padding(0);

11
packages/core/src/components/input/input.ios.vars.scss
View File

@ -54,7 +54,7 @@ $input-ios-inset-margin-start: 0 !default;
$input-ios-input-clear-icon-width: 30px !default;
/// @prop - Color of the icon used to clear the input
$input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default;
$input-ios-input-clear-icon-color: $text-ios-color-step-200 !default;
/// @prop - Icon used to clear the input
$input-ios-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $input-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
@ -65,6 +65,9 @@ $input-ios-input-clear-icon-size: 18px !default;
/// @prop - Padding end of the input with clear input
$input-ios-input-clear-padding-end: ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default;
/// @prop - Placeholder Text color of the input
$input-ios-placeholder-color: $placeholder-text-ios-color !default;
/// @prop - Show the focus highlight when the input has focus
$input-ios-show-focus-highlight: false !default;
@ -75,10 +78,10 @@ $input-ios-show-valid-highlight: $input-ios-show-focus-highlight !defau
$input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default;
/// @prop - Color of the input highlight
$input-ios-highlight-color: color($colors-ios, primary) !default;
$input-ios-highlight-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Color of the input highlight when valid
$input-ios-highlight-color-valid: $input-highlight-color-valid !default;
$input-ios-highlight-color-valid: ion-color($colors-ios, success, base, ios) !default;
/// @prop - Color of the input highlight when invalid
$input-ios-highlight-color-invalid: $input-highlight-color-invalid !default;
$input-ios-highlight-color-invalid: ion-color($colors-ios, danger, base, ios) !default;

1
packages/core/src/components/input/input.md.scss
View File

@ -5,6 +5,7 @@
// --------------------------------------------------
.native-input-md {
@include placeholder($input-md-placeholder-color);
@include margin($input-md-margin-top, $input-md-margin-end, $input-md-margin-bottom, $input-md-margin-start);
@include padding(0);

11
packages/core/src/components/input/input.md.vars.scss
View File

@ -27,7 +27,7 @@ $input-md-margin-start: ($item-md-padding-start / 2) !default;
$input-md-input-clear-icon-width: 30px !default;
/// @prop - Color of the icon used to clear the input
$input-md-input-clear-icon-color: #5b5b5b !default;
$input-md-input-clear-icon-color: $text-md-color-step-200 !default;
/// @prop - Icon used to clear the input
$input-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
@ -35,6 +35,9 @@ $input-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/sv
/// @prop - Size of the icon used to clear the input
$input-md-input-clear-icon-size: 22px !default;
/// @prop - Placeholder Text color of the input
$input-md-placeholder-color: $placeholder-text-md-color !default;
/// @prop - Show the focus highlight when the input has focus
$input-md-show-focus-highlight: true !default;
@ -45,13 +48,13 @@ $input-md-show-valid-highlight: $input-md-show-focus-highlight !defaul
$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default;
/// @prop - Color of the input highlight
$input-md-highlight-color: color($colors-md, primary) !default;
$input-md-highlight-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Color of the input highlight when valid
$input-md-highlight-color-valid: $input-highlight-color-valid !default;
$input-md-highlight-color-valid: ion-color($colors-md, success, base, md) !default;
/// @prop - Color of the input highlight when invalid
$input-md-highlight-color-invalid: $input-highlight-color-invalid !default;
$input-md-highlight-color-invalid: ion-color($colors-md, danger, base, md) !default;
/// @prop - Padding top of the inset input
$input-md-inset-padding-top: ($item-md-padding-top / 2) !default;

1
packages/core/src/components/input/input.scss
View File

@ -24,7 +24,6 @@ ion-input {
// --------------------------------------------------
.native-input {
@include placeholder($input-placeholder-color);
@include appearance(none);
@include border-radius(0);

12
packages/core/src/components/input/input.vars.scss
View File

@ -1,13 +1 @@
@import "../../themes/ionic.globals";
// Input
// --------------------------------------------------
/// @prop - Color of the input highlight when valid
$input-highlight-color-valid: #32db64 !default;
/// @prop - Color of the input highlight when invalid
$input-highlight-color-invalid: #f53d3d !default;
/// @prop - Color of the input placeholder
$input-placeholder-color: #999 !default;

8
packages/core/src/components/item-divider/item-divider.ios.scss
View File

@ -47,7 +47,11 @@
// Generate iOS Item Divider Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-shade: ion-color($colors-ios, $color-name, tint, ios);
.item-divider-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
@ -57,7 +61,7 @@
}
&.activated {
background-color: color-shade($color-base);
background-color: $color-shade;
}
}
}

4
packages/core/src/components/item-divider/item-divider.ios.vars.scss
View File

@ -12,10 +12,10 @@ $item-ios-divider-font-family: $font-family-ios-base !default;
$item-ios-divider-font-size: 17px !default;
/// @prop - Background for the divider
$item-ios-divider-background: #f7f7f7 !default;
$item-ios-divider-background: $background-ios-color-step-100 !default;
/// @prop - Color for the divider
$item-ios-divider-color: #222 !default;
$item-ios-divider-color: $text-ios-color-step-100 !default;
/// @prop - Padding start for the divider
$item-ios-divider-padding-start: $item-ios-padding-start !default;

8
packages/core/src/components/item-divider/item-divider.md.scss
View File

@ -53,7 +53,11 @@
// Generate Material Design Item Divider Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
$color-shade: ion-color($colors-md, $color-name, tint, md);
.item-divider-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
@ -63,7 +67,7 @@
}
&.activated {
background-color: color-shade($color-base);
background-color: $color-shade;
}
}
}

6
packages/core/src/components/item-divider/item-divider.md.vars.scss
View File

@ -6,10 +6,10 @@
// --------------------------------------------------
/// @prop - Color for the divider
$item-md-divider-color: #858585 !default;
$item-md-divider-color: $text-md-color-step-300 !default;
/// @prop - Background for the divider
$item-md-divider-background: #fff !default;
$item-md-divider-background: $background-md-color !default;
/// @prop - Font family for the divider
$item-md-divider-font-family: $font-family-md-base !default;
@ -18,7 +18,7 @@ $item-md-divider-font-family: $font-family-md-base !default;
$item-md-divider-font-size: 14px !default;
/// @prop - Border bottom for the divider
$item-md-divider-border-bottom: 1px solid $list-md-border-color !default;
$item-md-divider-border-bottom: 1px solid $item-md-border-color !default;
/// @prop - Padding start for the divider
$item-md-divider-padding-start: $item-md-padding-start !default;

8
packages/core/src/components/item-sliding/item-sliding.ios.scss
View File

@ -9,7 +9,7 @@
}
.list-ios ion-item-options {
border-bottom: $hairlines-width solid $list-ios-border-color;
border-bottom: $hairlines-width solid $item-ios-border-color;
}
.list-ios .item-options-right ion-item-option:last-child {
@ -43,7 +43,10 @@
// Generate iOS Option Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-shade: ion-color($colors-ios, $color-name, tint, ios);
.item-option-ios-#{$color-name} {
color: $color-contrast;
@ -53,5 +56,4 @@
.item-option-ios-#{$color-name} .icon {
fill: $color-contrast;
}
}

8
packages/core/src/components/item-sliding/item-sliding.ios.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Background for the sliding content
$item-ios-sliding-content-background: $list-ios-background-color !default;
$item-ios-sliding-content-background: $item-ios-background-color !default;
/// @prop - Font size of the sliding option button
$item-ios-sliding-button-font-size: 16px !default;
/// @prop - Background color of the sliding option button
$item-ios-sliding-button-background-color: color($colors-ios, primary) !default;
$item-ios-sliding-button-background-color: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Text color of the sliding option button
$item-ios-sliding-button-text-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default;
$item-ios-sliding-button-text-color: ion-color($colors-ios, $item-ios-sliding-button-background-color, contrast, ios) !default;
/// @prop - color of the sliding option button icon
$item-ios-sliding-button-icon-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default;
$item-ios-sliding-button-icon-color: ion-color($colors-ios, $item-ios-sliding-button-background-color, contrast, ios) !default;

8
packages/core/src/components/item-sliding/item-sliding.md.scss
View File

@ -9,7 +9,7 @@
}
.list-md ion-item-options {
border-bottom: 1px solid $list-md-border-color;
border-bottom: 1px solid $item-md-border-color;
}
.item-option-md {
@ -33,7 +33,10 @@
// Generate Material Design Option Button Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
$color-shade: ion-color($colors-md, $color-name, tint, md);
.item-option-md-#{$color-name} {
color: $color-contrast;
@ -43,5 +46,4 @@
.item-option-md-#{$color-name} .icon {
fill: $color-contrast;
}
}

8
packages/core/src/components/item-sliding/item-sliding.md.vars.scss
View File

@ -4,16 +4,16 @@
// --------------------------------------------------
/// @prop - Background for the sliding content
$item-md-sliding-content-background: $list-md-background-color !default;
$item-md-sliding-content-background: $item-md-background-color !default;
/// @prop - Font size of the sliding option button
$item-md-sliding-button-font-size: 14px !default;
/// @prop - Background color of the sliding option button
$item-md-sliding-button-background-color: color($colors-md, primary) !default;
$item-md-sliding-button-background-color: ion-color($colors-md, primary, base, md) !default;
/// @prop - Text color of the sliding option button
$item-md-sliding-button-text-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default;
$item-md-sliding-button-text-color: ion-color($colors-md, $item-md-sliding-button-background-color, contrast, md) !default;
/// @prop - color of the sliding option button icon
$item-md-sliding-button-icon-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default;
$item-md-sliding-button-icon-color: ion-color($colors-md, $item-md-sliding-button-background-color, contrast, md) !default;

25
packages/core/src/components/item/item.ios.scss
View File

@ -14,13 +14,13 @@
font-family: $item-ios-font-family;
font-size: $item-ios-font-size;
color: $list-ios-text-color;
background-color: $list-ios-background-color;
color: $item-ios-text-color;
background-color: $item-ios-background-color;
transition: background-color 200ms linear;
}
.item-ios.activated {
background-color: $list-ios-activated-background-color;
background-color: $item-ios-background-color-active;
transition-duration: 0ms;
}
@ -76,7 +76,7 @@
@include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
}
border-bottom: $hairlines-width solid $list-ios-border-color;
border-bottom: $hairlines-width solid $item-ios-border-color;
}
@ -164,8 +164,19 @@
// Generate iOS Item and Item Divider Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
.item-ios-#{$color-name} {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-tint: ion-color($colors-ios, $color-name, tint, ios);
// If there is text with a color it should use this color
// and override whatever item sets it to
.item-ios .text-ios-#{$color-name} {
color: $color-base;
}
.item-ios-#{$color-name},
.item-divider-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
@ -174,7 +185,7 @@
}
&.activated {
background-color: color-shade($color-base);
background-color: $color-tint;
}
}
}

4
packages/core/src/components/item/item.ios.vars.scss
View File

@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !def
$item-ios-paragraph-font-size: 14px !default;
/// @prop - Color of the item paragraph
$item-ios-paragraph-text-color: #8e9093 !default;
$item-ios-paragraph-text-color: $text-ios-color-step-300 !default;
/// @prop - Width of the avatar in the item
$item-ios-avatar-width: 36px !default;
@ -43,7 +43,7 @@ $item-ios-thumbnail-height: $item-ios-thumbnail-width !default;
$item-ios-detail-push-show: true !default;
/// @prop - Color of the detail arrow icon
$item-ios-detail-push-color: $list-ios-border-color !default;
$item-ios-detail-push-color: $item-ios-border-color !default;
/// @prop - Icon for the detail arrow
$item-ios-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>" !default;

25
packages/core/src/components/item/item.md.scss
View File

@ -14,14 +14,14 @@
font-weight: normal;
text-transform: none;
color: $list-md-text-color;
background-color: $list-md-background-color;
color: $item-md-text-color;
background-color: $item-md-background-color;
box-shadow: none;
transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
}
.item-md.activated {
background-color: $list-md-activated-background-color;
background-color: $item-md-background-color-active;
}
.item-md[no-lines] {
@ -67,7 +67,7 @@
.item-md.item-block .item-inner {
@include padding-horizontal(null, ($item-md-padding-end / 2));
border-bottom: 1px solid $list-md-border-color;
border-bottom: 1px solid $item-md-border-color;
}
@ -169,8 +169,19 @@
// Generate Material Design Item and Item Divider Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
.item-md-#{$color-name} {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
$color-tint: ion-color($colors-md, $color-name, tint, md);
// If there is text with a color it should use this color
// and override whatever item sets it to
.item-md .text-md-#{$color-name} {
color: $color-base;
}
.item-md-#{$color-name},
.item-divider-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
@ -179,7 +190,7 @@
}
&.activated {
background-color: color-shade($color-base);
background-color: $color-tint;
}
}
}

4
packages/core/src/components/item/item.md.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Color of the item paragraph
$item-md-paragraph-text-color: #666 !default;
$item-md-paragraph-text-color: $text-color-step-200 !default;
/// @prop - Font family of the item
$item-md-font-family: $font-family-md-base !default;
@ -28,7 +28,7 @@ $item-md-thumbnail-height: $item-md-thumbnail-width !default;
$item-md-detail-push-show: false !default;
/// @prop - Color of the detail arrow icon
$item-md-detail-push-color: $list-md-border-color !default;
$item-md-detail-push-color: $item-md-text-color !default;
/// @prop - Icon for the detail arrow
$item-md-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-md-detail-push-color}'/></svg>" !default;

5
packages/core/src/components/label/label.ios.scss
View File

@ -8,6 +8,7 @@
@include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start);
font-family: $label-ios-font-family;
color: $label-ios-text-color;
}
@ -52,7 +53,8 @@
// Generate iOS Label colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
.label-ios-#{$color-name},
.item-input .label-ios-#{$color-name},
@ -60,5 +62,4 @@
.item-datetime .label-ios-#{$color-name} {
color: $color-base;
}
}

5
packages/core/src/components/label/label.md.scss
View File

@ -8,6 +8,7 @@
@include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);
font-family: $label-md-font-family;
color: $label-md-text-color;
}
[text-wrap] .label-md {
@ -59,7 +60,8 @@
// Generate Material Design Label colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.label-md-#{$color-name},
.item-input .label-md-#{$color-name},
@ -67,5 +69,4 @@
.item-datetime .label-md-#{$color-name} {
color: $color-base;
}
}

4
packages/core/src/components/label/label.md.vars.scss
View File

@ -9,10 +9,10 @@
$label-md-font-family: $font-family-md-base !default;
/// @prop - Text color of the label by an input, select, or datetime
$label-md-text-color: #999 !default;
$label-md-text-color: $text-md-color-step-300 !default;
/// @prop - Text color of the stacked/floating label when it is focused
$label-md-text-color-focused: color($colors-md, primary) !default;
$label-md-text-color-focused: ion-color($colors-md, primary, base, md) !default;
/// @prop - Margin top of the label
$label-md-margin-top: $item-md-padding-top !default;

Some files were not shown because too many files have changed in this diff Show More