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

151
core/src/components/segment-button/segment-button.ios.scss
View File

@ -1,151 +0,0 @@
@import "./segment-button";
@import "./segment-button.ios.vars";
// iOS Segment Button
// --------------------------------------------------
ion-segment-button {
&:first-of-type .segment-button-ios {
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
@include margin-horizontal(null, 0);
}
&:not(:first-of-type) .segment-button-ios {
border-left-width: 0;
}
&:last-of-type .segment-button-ios {
@include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
@include margin-horizontal(0, null);
border-left-width: 0;
}
}
.segment-button-ios {
flex: 1;
height: $segment-button-ios-height;
border-width: $segment-button-ios-border-width;
border-style: solid;
border-color: $segment-button-ios-background-color-activated;
font-size: $segment-button-ios-font-size;
line-height: $segment-button-ios-line-height;
color: $segment-button-ios-background-color-activated;
background-color: $segment-button-ios-background-color;
ion-icon {
font-size: $segment-button-ios-icon-size;
line-height: $segment-button-ios-icon-line-height;
}
&.segment-checked {
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-background-color-activated;
transition: $segment-button-ios-transition-activated;
}
&:hover:not(.segment-checked) {
background-color: $segment-button-ios-background-color-hover;
transition: $segment-button-ios-transition-hover;
}
&:active:not(.segment-checked) {
background-color: $segment-button-ios-background-color-active;
transition: $segment-button-ios-transition-active;
}
}
// iOS Segment Button RTL
// --------------------------------------------------
[dir="rtl"] ion-segment-button {
&:first-of-type .segment-button-ios {
border-left-width: 0;
}
&:last-of-type .segment-button-ios {
border-left-width: $segment-button-ios-border-width;
}
}
// iOS Segment Button Disabled
// --------------------------------------------------
.segment-ios .segment-button-disabled {
color: $segment-button-ios-background-color-disabled;
pointer-events: none;
}
// iOS Segment Button in Toolbar
// --------------------------------------------------
.toolbar-ios ion-segment-button {
max-width: $segment-button-ios-toolbar-button-max-width;
}
.toolbar-ios .segment-button-ios {
height: $segment-button-ios-toolbar-button-height;
font-size: $segment-button-ios-toolbar-font-size;
line-height: $segment-button-ios-toolbar-line-height;
ion-icon {
font-size: $segment-button-ios-toolbar-icon-size;
line-height: $segment-button-ios-toolbar-icon-line-height;
}
}
// iOS Segment Button Mixin
// --------------------------------------------------
@mixin ios-segment-button($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.segment-ios-#{$color-name} {
.segment-button {
border-color: $color-base;
color: $color-base;
&:hover:not(.segment-checked) {
background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-hover);
}
&:active:not(.segment-checked) {
background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-active);
}
&.segment-checked {
color: $color-contrast;
background-color: $color-base;
}
}
.segment-button-disabled {
color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-disabled);
}
}
}
// iOS Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
@include ios-segment-button($color-name);
.toolbar-ios-#{$color-name} .segment-button-ios.segment-checked {
color: $color-base;
}
}