mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(components): update to use shadow DOM and work with css variables
- 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
@ -28,14 +28,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
|
||||
boolean
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
Contains a URL or a URL fragment that the hyperlink points to.
|
||||
If this property is set, an anchor tag will be rendered.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
string
|
||||
@ -73,14 +65,6 @@ Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"wa
|
||||
boolean
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
Contains a URL or a URL fragment that the hyperlink points to.
|
||||
If this property is set, an anchor tag will be rendered.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
string
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-button-ios-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background of the activated segment button
|
||||
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Background alpha of the activated segment button
|
||||
$segment-button-ios-background-color-alpha-hover: .1 !default;
|
||||
|
||||
/// @prop - Background of the segment button when hovered
|
||||
$segment-button-ios-background-color-hover: ion-color($colors-ios, primary, base, ios, $segment-button-ios-background-color-alpha-hover) !default;
|
||||
|
||||
/// @prop - Background alpha of the segment button when hovered
|
||||
$segment-button-ios-background-color-alpha-active: .1 !default;
|
||||
|
||||
/// @prop - Background of the segment button when active
|
||||
$segment-button-ios-background-color-active: ion-color($colors-ios, primary, base, ios, $segment-button-ios-background-color-alpha-active) !default;
|
||||
|
||||
/// @prop - Background alpha of the segment button when active
|
||||
$segment-button-ios-background-color-alpha-disabled: .5 !default;
|
||||
|
||||
/// @prop - Background of the activated segment button when active
|
||||
$segment-button-ios-background-color-disabled: ion-color($colors-ios, primary, base, ios, $segment-button-ios-background-color-alpha-disabled) !default;
|
||||
|
||||
/// @prop - Text color of the segment button
|
||||
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
|
||||
|
||||
/// @prop - Transition of the activated segment button
|
||||
$segment-button-ios-transition-activated: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button on hover
|
||||
$segment-button-ios-transition-hover: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button when pressed
|
||||
$segment-button-ios-transition-active: 100ms all linear !default;
|
||||
|
||||
/// @prop - Border width of the segment button
|
||||
$segment-button-ios-border-width: 1px !default;
|
||||
|
||||
/// @prop - Height of the segment button
|
||||
$segment-button-ios-height: 32px !default;
|
||||
|
||||
/// @prop - Line height of the segment button
|
||||
$segment-button-ios-line-height: 28px !default;
|
||||
|
||||
/// @prop - Font size of the segment button
|
||||
$segment-button-ios-font-size: 13px !default;
|
||||
|
||||
/// @prop - Border radius of the segment button
|
||||
$segment-button-ios-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button
|
||||
$segment-button-ios-icon-size: 26px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button
|
||||
$segment-button-ios-icon-line-height: 28px !default;
|
||||
|
||||
/// @prop - Max width of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-max-width: 100px !default;
|
||||
|
||||
/// @prop - Height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-height: 30px !default;
|
||||
|
||||
/// @prop - Line height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-line-height: 22px !default;
|
||||
|
||||
/// @prop - Font size of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-font-size: 12px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-size: 22px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-line-height: 24px !default;
|
||||
|
||||
/// @prop - Opacity of the segment button on hover
|
||||
$segment-button-ios-opacity-hover: .1 !default;
|
||||
|
||||
/// @prop - Opacity of the segment button when pressed
|
||||
$segment-button-ios-opacity-active: .16 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-ios-opacity-disabled: .3 !default;
|
||||
@ -1,66 +0,0 @@
|
||||
@import "./segment-button";
|
||||
@import "./segment-button.md.vars";
|
||||
|
||||
// Material Design Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-button-md {
|
||||
@include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
|
||||
|
||||
flex: 1;
|
||||
|
||||
height: $segment-button-md-height;
|
||||
|
||||
border-bottom-width: $segment-button-md-border-bottom-width;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $segment-button-md-border-bottom-color;
|
||||
|
||||
font-size: $segment-button-md-font-size;
|
||||
font-weight: $segment-button-md-font-weight;
|
||||
line-height: $segment-button-md-line-height;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $segment-button-md-text-color;
|
||||
background-color: transparent;
|
||||
opacity: $segment-button-md-opacity;
|
||||
transition: $segment-button-md-transition;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-md-icon-size;
|
||||
line-height: $segment-button-md-icon-line-height;
|
||||
}
|
||||
|
||||
&.activated,
|
||||
&.segment-checked {
|
||||
border-color: $segment-button-md-border-color-activated;
|
||||
opacity: $segment-button-md-opacity-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Button Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-md .segment-button-disabled {
|
||||
opacity: $segment-button-md-opacity-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
|
||||
.segment-md-#{$color-name} .segment-button {
|
||||
color: $color-base;
|
||||
|
||||
&.activated,
|
||||
&.segment-checked {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -3,24 +3,45 @@
|
||||
// Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-segment-button {
|
||||
display: flex;
|
||||
|
||||
:host {
|
||||
flex: 1;
|
||||
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
|
||||
--icon-size: 1em;
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@include border-radius(0);
|
||||
@include margin-horizontal(0);
|
||||
@include text-align(center);
|
||||
:host(:first-of-type) .segment-button-native {
|
||||
@include border-radius(var(--border-radius), 0, 0, var(--border-radius));
|
||||
|
||||
--padding-end: 0;
|
||||
}
|
||||
|
||||
:host(:not(:first-of-type)) .segment-button-native {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
:host(:last-of-type) .segment-button-native {
|
||||
@include border-radius(0, var(--border-radius),var(--border-radius), 0);
|
||||
|
||||
--padding-start: 0;
|
||||
}
|
||||
|
||||
.segment-button-native {
|
||||
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
|
||||
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
|
||||
text-align: center;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-transform: inherit;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -30,8 +51,26 @@ ion-segment-button {
|
||||
user-select: none;
|
||||
contain: content;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
transition: var(--transition);
|
||||
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
|
||||
background: var(--background);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(ion-icon) {
|
||||
font-size: var(--icon-size);
|
||||
}
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
|
||||
import { Color, Mode } from '../../interface';
|
||||
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
let ids = 0;
|
||||
|
||||
@Component({
|
||||
tag: 'ion-segment-button',
|
||||
styleUrls: {
|
||||
ios: 'segment-button.ios.scss',
|
||||
md: 'segment-button.md.scss'
|
||||
}
|
||||
styleUrl: 'segment-button.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class SegmentButton {
|
||||
|
||||
@ -37,12 +35,6 @@ export class SegmentButton {
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* Contains a URL or a URL fragment that the hyperlink points to.
|
||||
* If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
@Prop() href?: string;
|
||||
|
||||
/**
|
||||
* The value of the segment button.
|
||||
*/
|
||||
@ -60,33 +52,28 @@ export class SegmentButton {
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
|
||||
const hostClasses = getElementClassMap(this.el.classList);
|
||||
|
||||
const buttonClasses = {
|
||||
'segment-button-disabled': this.disabled,
|
||||
'segment-checked': this.checked,
|
||||
...themedClasses,
|
||||
...hostClasses,
|
||||
hostData() {
|
||||
const { disabled, checked, color } = this;
|
||||
return {
|
||||
class: {
|
||||
...createColorClasses(color),
|
||||
'segment-button-disabled': disabled,
|
||||
'segment-checked': checked,
|
||||
},
|
||||
'tappable': true,
|
||||
};
|
||||
}
|
||||
|
||||
const TagType = this.href ? 'a' : 'button';
|
||||
const attrs = (TagType === 'button')
|
||||
? {type: 'button'}
|
||||
: {};
|
||||
|
||||
render() {
|
||||
return [
|
||||
<TagType
|
||||
{...attrs}
|
||||
<button
|
||||
aria-pressed={this.checked}
|
||||
class={buttonClasses}
|
||||
class="segment-button-native"
|
||||
disabled={this.disabled}
|
||||
href={this.href}
|
||||
onClick={() => this.checked = true }>
|
||||
<slot></slot>
|
||||
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
|
||||
</TagType>
|
||||
{ this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> }
|
||||
</button>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user