javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +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/segment.md.scss
View File

@ -4,12 +4,66 @@
// Material Design Segment
// --------------------------------------------------
.segment-md {
:host {
font-family: $segment-md-font-family;
color: $segment-button-md-text-color;
}
.segment-md.segment-disabled {
:host(.ion-color) {
color: #{current-color(base)} !important;
}
:host(.segment-disabled) {
opacity: $segment-md-opacity-disabled;
pointer-events: none;
}
// Material Design Segment Button
// --------------------------------------------------
::slotted(ion-segment-button) {
--padding-top: #{$segment-button-md-padding-top};
--padding-end: #{$segment-button-md-padding-end};
--padding-bottom: #{$segment-button-md-padding-bottom};
--padding-start: #{$segment-button-md-padding-start};
--background: transparent;
--border-color: #{$segment-button-md-border-bottom-color};
--border-width: #{0 0 $segment-button-md-border-bottom-width 0};
--border-style: solid;
--opacity: #{$segment-button-md-opacity};
--transition: #{$segment-button-md-transition};
--icon-size: #{$segment-button-md-icon-size};
font-size: $segment-button-md-font-size;
font-weight: $segment-button-md-font-weight;
line-height: $segment-button-md-line-height;
color: inherit;
height: $segment-button-md-height;
opacity: $segment-button-md-opacity;
text-transform: uppercase;
}
// Checked Segment Button
// --------------------------------------------------
::slotted(.activated),
::slotted(.segment-checked) {
opacity: $segment-button-md-opacity-activated;
--border-color: currentColor;
}
// Disabled Segment Button
// --------------------------------------------------
::slotted(.segment-button-disabled) {
opacity: $segment-button-md-opacity-disabled;
pointer-events: none;
}