javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +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

4
core/src/components/picker/picker.ios.scss
View File

@ -27,7 +27,7 @@
}
.picker-ios .picker-toolbar-button {
@include text-align(end);
text-align: end;
flex: 1;
}
@ -37,7 +37,7 @@
}
.picker-ios .picker-toolbar-button:first-child {
@include text-align(start);
text-align: start;
font-weight: normal;
}

8
core/src/components/picker/picker.ios.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font family of the picker
$picker-ios-font-family: $font-family-ios-base !default;
$picker-ios-font-family: $font-family-base !default;
/// @prop - Height of the picker wrapper
$picker-ios-height: 260px !default;
@ -13,7 +13,7 @@ $picker-ios-height: 260px !default;
$picker-ios-border-color: $item-ios-border-color !default;
/// @prop - Background Color of the picker wrapper
$picker-ios-background-color: $background-ios-color !default;
$picker-ios-background-color: $background-color !default;
/// @prop - Top Background Color of the picker wrapper gradient
$picker-ios-top-background-color: $picker-ios-background-color !default;
@ -22,7 +22,7 @@ $picker-ios-top-background-color: $picker-ios-background-color !
$picker-ios-bottom-background-color-alpha: .8 !default;
/// @prop - Bottom Background Color of the picker wrapper gradient
$picker-ios-bottom-background-color: css-var($background-ios-color-value, background-ios-color, $picker-ios-bottom-background-color-alpha) !default;
$picker-ios-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default;
/// @prop - Height of the picker toolbar
$picker-ios-toolbar-height: 44px !default;
@ -34,7 +34,7 @@ $picker-ios-toolbar-background-color: $picker-ios-top-background-col
$picker-ios-button-height: $picker-ios-toolbar-height !default;
/// @prop - Text color of the picker button
$picker-ios-button-text-color: ion-color($colors-ios, primary, base, ios) !default;
$picker-ios-button-text-color: ion-color(primary, base) !default;
/// @prop - Background of the picker button
$picker-ios-button-background-color: transparent !default;

10
core/src/components/picker/picker.md.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Font family of the picker
$picker-md-font-family: $font-family-md-base !default;
$picker-md-font-family: $font-family-base !default;
/// @prop - Height of the picker wrapper
$picker-md-height: 260px !default;
@ -13,7 +13,7 @@ $picker-md-height: 260px !default;
$picker-md-border-color: $item-md-border-color !default;
/// @prop - Background Color of the picker wrapper
$picker-md-background-color: $background-md-color !default;
$picker-md-background-color: $background-color !default;
/// @prop - Top Background Color of the picker wrapper gradient
$picker-md-top-background-color: $picker-md-background-color !default;
@ -22,7 +22,7 @@ $picker-md-top-background-color: $picker-md-background-color
$picker-md-bottom-background-color-alpha: .8 !default;
/// @prop - Bottom Background Color of the picker wrapper gradient
$picker-md-bottom-background-color: css-var($background-md-color-value, background-md-color, $picker-md-bottom-background-color-alpha) !default;
$picker-md-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-md-bottom-background-color-alpha) !default;
/// @prop - Height of the picker toolbar
$picker-md-toolbar-height: 44px !default;
@ -34,7 +34,7 @@ $picker-md-toolbar-background-color: $picker-md-top-background-co
$picker-md-button-height: $picker-md-toolbar-height !default;
/// @prop - Text color of the picker button
$picker-md-button-text-color: ion-color($colors-md, primary, base, md) !default;
$picker-md-button-text-color: ion-color(primary, base) !default;
/// @prop - Background of the picker button
$picker-md-button-background-color: transparent !default;
@ -79,4 +79,4 @@ $picker-md-option-height: 42px !default;
$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
/// @prop - Text color of the selected picker option
$picker-md-option-selected-color: ion-color($colors-md, primary, base, md) !default;
$picker-md-option-selected-color: ion-color(primary, base) !default;

6
core/src/components/picker/picker.scss
View File

@ -85,7 +85,7 @@ ion-picker {
}
.picker-prefix {
@include text-align(end);
text-align: end;
position: relative;
@ -98,7 +98,7 @@ ion-picker {
}
.picker-suffix {
@include text-align(start);
text-align: start;
position: relative;
@ -113,7 +113,7 @@ ion-picker {
// contain property is supported by Chrome
.picker-opt {
@include position(0, null, null, 0);
@include text-align(center);
text-align: center;
position: absolute;

37
core/src/components/picker/picker.tsx
View File

@ -1,31 +1,8 @@
import {
Component,
Element,
Event,
EventEmitter,
Listen,
Method,
Prop,
State
} from '@stencil/core';
import {
Animation,
AnimationBuilder,
Config,
CssClassMap,
Mode,
PickerButton,
PickerColumn
} from '../../interface';
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
import {
OverlayEventDetail,
OverlayInterface,
dismiss,
eventMethod,
present
} from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';
import { dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
@ -35,9 +12,6 @@ import { iosLeaveAnimation } from './animations/ios.leave';
styleUrls: {
ios: 'picker.ios.scss',
md: 'picker.md.scss'
},
host: {
theme: 'picker'
}
})
export class Picker implements OverlayInterface {
@ -305,6 +279,9 @@ export class Picker implements OverlayInterface {
hostData() {
return {
class: {
...createThemedClasses(this.mode, 'picker'),
},
style: {
zIndex: 20000 + this.overlayId
}