javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +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 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
core/src/components/segment/segment.ios.vars.scss
View File

@ -4,7 +4,86 @@
// --------------------------------------------------
/// @prop - Background of the segment button
$segment-ios-font-family: $font-family-ios-base !default;
$segment-ios-font-family: $font-family-base !default;
/// @prop - Opacity of the disabled segment
$segment-ios-opacity-disabled: .4 !default;
// iOS Segment Button
// --------------------------------------------------
/// @prop - Background of the segment button
$segment-button-ios-background-color: transparent !default;
/// @prop - Background of the activated segment button
$segment-button-ios-background-color-activated: ion-color(primary, base) !default;
/// @prop - Background alpha of the activated segment button
$segment-button-ios-background-color-alpha-hover: .1 !default;
/// @prop - Background of the segment button when hovered
$segment-button-ios-background-color-hover: ion-color(primary, base, $segment-button-ios-background-color-alpha-hover) !default;
/// @prop - Background alpha of the segment button when hovered
$segment-button-ios-background-color-alpha-active: .1 !default;
/// @prop - Background of the segment button when active
$segment-button-ios-background-color-active: ion-color(primary, base, $segment-button-ios-background-color-alpha-active) !default;
/// @prop - Background alpha of the segment button when active
$segment-button-ios-background-color-alpha-disabled: .5 !default;
/// @prop - Background of the activated segment button when active
$segment-button-ios-background-color-disabled: ion-color(primary, base, $segment-button-ios-background-color-alpha-disabled) !default;
/// @prop - Text color of the segment button
$segment-button-ios-text-color: ion-color(primary, contrast) !default;
/// @prop - Border width of the segment button
$segment-button-ios-border-width: 1px !default;
/// @prop - Height of the segment button
$segment-button-ios-height: 32px !default;
/// @prop - Line height of the segment button
$segment-button-ios-line-height: 37px !default;
/// @prop - Font size of the segment button
$segment-button-ios-font-size: 13px !default;
/// @prop - Border radius of the segment button
$segment-button-ios-border-radius: 4px !default;
/// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-ios-icon-line-height: 28px !default;
/// @prop - Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height: 30px !default;
/// @prop - Line height of the segment button in a toolbar
$segment-button-ios-toolbar-line-height: 22px !default;
/// @prop - Font size of the segment button in a toolbar
$segment-button-ios-toolbar-font-size: 12px !default;
/// @prop - Size of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-size: 22px !default;
/// @prop - Line height of an icon in the segment button in a toolbar
$segment-button-ios-toolbar-icon-line-height: 24px !default;
/// @prop - Opacity of the segment button on hover
$segment-button-ios-opacity-hover: .1 !default;
/// @prop - Opacity of the segment button when pressed
$segment-button-ios-opacity-active: .16 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-ios-opacity-disabled: .3 !default;