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

58
core/src/components/segment-button/segment-button.md.vars.scss
View File

@ -1,58 +0,0 @@
@import "../../themes/ionic.globals.md";
// Material Design Segment Button
// --------------------------------------------------
/// @prop - Text color of the segment button
$segment-button-md-text-color: $toolbar-md-color-active !default;
/// @prop - Width of the bottom border on the segment button
$segment-button-md-border-bottom-width: 2px !default;
/// @prop - Color of the bottom border on the segment button
$segment-button-md-border-bottom-color: rgba(#000, .10) !default;
/// @prop - Opacity of the segment button
$segment-button-md-opacity: .7 !default;
/// @prop - Border color of the activated segment button
$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
/// @prop - Opacity of the activated segment button
$segment-button-md-opacity-activated: 1 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-md-opacity-disabled: .3 !default;
/// @prop - Padding top of the segment button
$segment-button-md-padding-top: 0 !default;
/// @prop - Padding end of the segment button
$segment-button-md-padding-end: 6px !default;
/// @prop - Padding bottom of the segment button
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
/// @prop - Padding start of the segment button
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
/// @prop - Height of the segment button
$segment-button-md-height: 42px !default;
/// @prop - Line height of the segment button
$segment-button-md-line-height: 40px !default;
/// @prop - Font size of the segment button
$segment-button-md-font-size: 12px !default;
/// @prop - Font weight of the segment button
$segment-button-md-font-weight: 500 !default;
/// @prop - Transition of the segment button
$segment-button-md-transition: 100ms all linear !default;
/// @prop - Size of an icon in the segment button
$segment-button-md-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;