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

26
core/src/components/item-option/item-option.ios.scss
View File

@ -4,31 +4,17 @@
// iOS Item Option
// --------------------------------------------------
.item-option-ios {
:host {
font-size: $item-option-button-ios-font-size;
color: $item-option-button-ios-text-color;
background-color: $item-option-button-ios-background-color;
--ion-color-base: #{$item-option-button-ios-background-color};
--ion-color-contrast: #{$item-option-button-ios-text-color};
}
.list-ios .item-options-end ion-item-option:last-child {
:host(.in-list.item-options-end:last-child) {
@include safe-area-padding-horizontal(null, .7em);
}
.list-ios .item-options-start ion-item-option:first-child {
:host(.in-list.item-options-start:first-child) {
@include safe-area-padding-horizontal(.7em, null);
}
// Generate iOS Option Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
$color-shade: ion-color($colors-ios, $color-name, tint, ios);
.item-option-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
}

6
core/src/components/item-option/item-option.ios.vars.scss
View File

@ -7,10 +7,10 @@
$item-option-button-ios-font-size: 16px !default;
/// @prop - Background color of the item option button
$item-option-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
$item-option-button-ios-background-color: ion-color(primary, base) !default;
/// @prop - Text color of the item option button
$item-option-button-ios-text-color: ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default;
$item-option-button-ios-text-color: ion-color(primary, contrast) !default;
/// @prop - color of the item option button icon
$item-option-button-ios-icon-color: ion-color($colors-ios, $item-option-button-ios-background-color, contrast, ios) !default;
$item-option-button-ios-icon-color: ion-color(primary, contrast) !default;

25
core/src/components/item-option/item-option.md.scss
View File

@ -4,28 +4,11 @@
// Material Design Item Option
// --------------------------------------------------
.item-option-md {
:host {
font-size: $item-option-button-md-font-size;
color: $item-option-button-md-text-color;
background-color: $item-option-button-md-background-color;
}
.item-option-md .item-option-button {
font-weight: 500;
text-transform: uppercase;
}
// Generate Material Design Option Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
$color-shade: ion-color($colors-md, $color-name, tint, md);
.item-option-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}
--ion-color-base: #{$item-option-button-md-background-color};
--ion-color-contrast: #{$item-option-button-md-text-color};
}

6
core/src/components/item-option/item-option.md.vars.scss
View File

@ -7,10 +7,10 @@
$item-option-button-md-font-size: 14px !default;
/// @prop - Background color of the sliding option button
$item-option-button-md-background-color: ion-color($colors-md, primary, base, md) !default;
$item-option-button-md-background-color: ion-color(primary, base) !default;
/// @prop - Text color of the sliding option button
$item-option-button-md-text-color: ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default;
$item-option-button-md-text-color: ion-color(primary, contrast) !default;
/// @prop - color of the sliding option button icon
$item-option-button-md-icon-color: ion-color($colors-md, $item-option-button-md-background-color, contrast, md) !default;
$item-option-button-md-icon-color: ion-color(primary, contrast) !default;

69
core/src/components/item-option/item-option.scss
View File

@ -3,22 +3,28 @@
// Item Option
// --------------------------------------------------
.item-option-button {
:host {
color: #{current-color(contrast)};
}
.item-option-native {
@include padding(0, .7em);
width: 100%;
height: 100%;
border: 0;
font-size: 1em;
outline: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
color: inherit;
background: none;
&:active,
&:focus {
outline: none;
}
background: #{current-color(base)};
appearance: none;
}
.item-option-button-inner {
@ -32,10 +38,17 @@
width: 100%;
height: 100%;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
.item-option-button [slot="icon-only"] {
::slotted([slot="icon-only"]) {
@include padding(0);
@include margin(0, 10px);
min-width: .9em;
@ -46,46 +59,10 @@
// Item Expandable Animation
// --------------------------------------------------
.item-option-expandable {
:host(.item-option-expandable) {
flex-shrink: 0;
transition-duration: 0;
transition-property: none;
transition-timing-function: cubic-bezier(.65, .05, .36, 1);
}
.item-sliding-active-swipe-right .item-options-end .item-option-expandable {
transition-duration: .6s;
transition-property: padding-left;
@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-left: 90%;
}
@include ltr() {
order: 1;
}
@include rtl() {
order: -1;
}
}
.item-sliding-active-swipe-left .item-options-start .item-option-expandable {
transition-duration: .6s;
transition-property: padding-right;
@include multi-dir() {
// scss-lint:disable PropertySpelling
padding-right: 90%;
}
@include ltr() {
order: -1;
}
@include rtl() {
order: 1;
}
}

17
core/src/components/item-option/item-option.tsx
View File

@ -1,17 +1,19 @@
import { Component, Prop } from '@stencil/core';
import { Component, Element, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@Component({
tag: 'ion-item-option',
host: {
theme: 'item-option'
},
styleUrls: {
ios: 'item-option.ios.scss',
md: 'item-option.md.scss'
}
},
shadow: true
})
export class ItemOption {
@Element() el!: HTMLElement;
/**
* The color to use for the option
*/
@ -47,6 +49,7 @@ export class ItemOption {
hostData() {
return {
class: {
...createColorClasses(this.color),
'item-option-expandable': this.expandable
}
};
@ -57,7 +60,7 @@ export class ItemOption {
return (
<TagType
class="item-option-button"
class="item-option-native"
disabled={this.disabled}
href={this.href}
onClick={this.clickedOptionButton.bind(this)}
@ -66,7 +69,7 @@ export class ItemOption {
<slot name="start" />
<slot name="top" />
<slot name="icon-only" />
<slot />
<slot></slot>
<slot name="bottom" />
<slot name="end" />
</span>