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

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 21327 additions and 21181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
core/src/components/button/button.ios.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font family of the button
$button-ios-font-family: $font-family-ios-base !default;
$button-ios-font-family: $font-family-base !default;
/// @prop - Margin top of the button
$button-ios-margin-top: 4px !default;
@ -34,7 +34,7 @@ $button-ios-padding-start: $button-ios-padding-end !d
$button-ios-height: 2.8em !default;
/// @prop - Border radius of the button
$button-ios-border-radius: 8px !default;
$button-ios-border-radius: 12px !default;
/// @prop - Font size of the button text
$button-ios-font-size: 16px !default;
@ -46,13 +46,13 @@ $button-ios-font-weight: 500 !default;
$button-ios-letter-spacing: -.03em !default;
/// @prop - Background color of the button
$button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
$button-ios-background-color: ion-color(primary, base) !default;
/// @prop - Text color of the button
$button-ios-text-color: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default;
$button-ios-text-color: ion-color(primary, contrast) !default;
/// @prop - Background color of the activated button
$button-ios-background-color-activated: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default;
$button-ios-background-color-activated: ion-color(primary, shade) !default;
/// @prop - Opacity of the activated button
$button-ios-opacity-activated: 1 !default;
@ -61,10 +61,10 @@ $button-ios-opacity-activated: 1 !default;
$button-ios-opacity-hover: .8 !default;
/// @prop - Background color of the focused button
$button-ios-background-color-focused: ion-color($colors-ios, $button-ios-background-color, shade, ios) !default;
$button-ios-background-color-focused: ion-color(primary, shade) !default;
/// @prop - Opacity of the button when disabled
$button-ios-opacity-disabled: $button-opacity-disabled !default;
$button-ios-opacity-disabled: 0.5 !default;
// iOS Large Button
@ -85,6 +85,9 @@ $button-ios-large-padding-start: $button-ios-large-padding-
/// @prop - Height of the large button
$button-ios-large-height: 2.8em !default;
/// @prop - Border radius of the large button
$button-ios-large-border-radius: 14px !default;
/// @prop - Font size of the large button
$button-ios-large-font-size: 20px !default;
@ -107,6 +110,9 @@ $button-ios-small-padding-start: $button-ios-small-padding-
/// @prop - Height of the small button
$button-ios-small-height: 2.1em !default;
/// @prop - Border radius of the small button
$button-ios-small-border-radius: 8px !default;
/// @prop - Font size of the small button
$button-ios-small-font-size: 13px !default;
@ -133,7 +139,7 @@ $button-ios-outline-text-color: $button-ios-background-col
$button-ios-outline-background-color: transparent !default;
/// @prop - Text color of the activated outline button
$button-ios-outline-text-color-activated: ion-color($colors-ios, $button-ios-background-color, contrast, ios) !default;
$button-ios-outline-text-color-activated: ion-color(primary, contrast) !default;
/// @prop - Background color of the activated outline button
$button-ios-outline-background-color-activated: $button-ios-background-color !default;
@ -145,7 +151,7 @@ $button-ios-outline-opacity-activated: 1 !default;
$button-ios-outline-background-color-alpha-focused: .25 !default;
/// @prop - Background color of the focused outline button
$button-ios-outline-background-color-focused: ion-color($colors-ios, primary, base, ios, $button-ios-outline-background-color-alpha-focused) !default;
$button-ios-outline-background-color-focused: ion-color(primary, base, $button-ios-outline-background-color-alpha-focused) !default;
// iOS Clear Button
// --------------------------------------------------
@ -172,7 +178,7 @@ $button-ios-clear-opacity-hover: .6 !default;
$button-ios-clear-background-color-alpha-focused: .25 !default;
/// @prop - Background color of the focused clear button
$button-ios-clear-background-color-focused: ion-color($colors-ios, primary, base, ios, $button-ios-clear-background-color-alpha-focused) !default;
$button-ios-clear-background-color-focused: ion-color(primary, base, $button-ios-clear-background-color-alpha-focused) !default;
// iOS Round Button
// --------------------------------------------------
@ -197,4 +203,4 @@ $button-ios-round-border-radius: $button-round-border-radiu
// --------------------------------------------------
/// @prop - Font weight of the strong button
$button-ios-strong-font-weight: 600 !default;
$button-ios-strong-font-weight: 600 !default;