mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
fix(segment): fix css var + host-context()
This commit is contained in:
Manu Mtz.-Almeida
@ -26,24 +26,23 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------ | ---------------------------- |
|
||||
| `--background` | Background of the button |
|
||||
| `--border-color` | Color of the button border |
|
||||
| `--border-radius` | Radius of the button border |
|
||||
| `--border-style` | Style of the button border |
|
||||
| `--border-width` | Width of the button border |
|
||||
| `--color` | Color of the button text |
|
||||
| `--icon-size` | Size of the button icon |
|
||||
| `--margin-bottom` | Bottom margin of the button |
|
||||
| `--margin-end` | End margin of the button |
|
||||
| `--margin-start` | Start margin of the button |
|
||||
| `--margin-top` | Top margin of the button |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | End padding of the button |
|
||||
| `--padding-start` | Start padding of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--transition` | Transition of the button |
|
||||
| Name | Description |
|
||||
| -------------------- | ---------------------------- |
|
||||
| `--border-radius` | Radius of the button border |
|
||||
| `--border-style` | Style of the button border |
|
||||
| `--border-width` | Width of the button border |
|
||||
| `--btn-background` | Background of the button |
|
||||
| `--btn-border-color` | Color of the button border |
|
||||
| `--icon-size` | Size of the button icon |
|
||||
| `--margin-bottom` | Bottom margin of the button |
|
||||
| `--margin-end` | End margin of the button |
|
||||
| `--margin-start` | Start margin of the button |
|
||||
| `--margin-top` | Top margin of the button |
|
||||
| `--padding-bottom` | Bottom padding of the button |
|
||||
| `--padding-end` | End padding of the button |
|
||||
| `--padding-start` | Start padding of the button |
|
||||
| `--padding-top` | Top padding of the button |
|
||||
| `--transition` | Transition of the button |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@ -5,12 +5,11 @@
|
||||
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the button
|
||||
* @prop --border-color: Color of the button border
|
||||
* @prop --btn-background: Background of the button
|
||||
* @prop --btn-border-color: Color of the button border
|
||||
* @prop --border-radius: Radius of the button border
|
||||
* @prop --border-style: Style of the button border
|
||||
* @prop --border-width: Width of the button border
|
||||
* @prop --color: Color of the button text
|
||||
* @prop --icon-size: Size of the button icon
|
||||
* @prop --margin-top: Top margin of the button
|
||||
* @prop --margin-end: End margin of the button
|
||||
@ -27,10 +26,12 @@
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
--icon-size: 1em;
|
||||
--btn-background: inherit;
|
||||
--btn-border-color: inherit;
|
||||
|
||||
flex: 1;
|
||||
|
||||
color: var(--color);
|
||||
color: inherit;
|
||||
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
@ -70,10 +71,9 @@
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
border-color: var(--btn-border-color);
|
||||
|
||||
background: var(--background);
|
||||
color: inherit;
|
||||
background: var(--btn-background);
|
||||
|
||||
contain: content;
|
||||
cursor: pointer;
|
||||
|
||||
@ -37,24 +37,36 @@
|
||||
}
|
||||
|
||||
::slotted(.segment-button-disabled) {
|
||||
--border-color: var(--border-color-disabled);
|
||||
--color: var(--color-disabled);
|
||||
--btn-border-color: var(--border-color-disabled);
|
||||
|
||||
color: var(--color-disabled);
|
||||
}
|
||||
|
||||
:host(.ion-color) ::slotted(.segment-button-disabled) {
|
||||
--border-color: #{current-color(base)};
|
||||
--color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
|
||||
:host(.ion-color)::slotted(ion-segment-button) {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
:host(.ion-color)::slotted(.segment-button-checked) {
|
||||
--btn-background: #{current-color(base)};
|
||||
--btn-border-color: #{current-color(base)};
|
||||
color: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
:host(.ion-color)::slotted(.segment-button-disabled) {
|
||||
--btn-border-color: #{current-color(base)};
|
||||
color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
|
||||
}
|
||||
|
||||
// iOS Segment in Toolbar
|
||||
// --------------------------------------------------
|
||||
:host(.in-toolbar) {
|
||||
:host-context(ion-toolbar) {
|
||||
@include position(0, 0, 0, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
:host(.in-toolbar) ::slotted(ion-segment-button) {
|
||||
:host-context(ion-toolbar)::slotted(ion-segment-button) {
|
||||
max-width: $segment-button-ios-toolbar-button-max-width;
|
||||
height: $segment-button-ios-toolbar-button-height;
|
||||
|
||||
@ -63,7 +75,7 @@
|
||||
line-height: $segment-button-ios-toolbar-line-height;
|
||||
}
|
||||
|
||||
:host(.in-color-toolbar:not(.ion-color)) {
|
||||
:host-context(ion-toolbar.ion-color):not(.ion-color) {
|
||||
--color: #{current-color(contrast)};
|
||||
--color-checked: #{current-color(base)};
|
||||
--color-disabled: #{current-color(contrast, $segment-button-ios-opacity-disabled)};
|
||||
|
||||
@ -16,6 +16,19 @@
|
||||
opacity: $segment-md-opacity-disabled;
|
||||
}
|
||||
|
||||
// Material Design Segment Button Color
|
||||
// --------------------------------------------------
|
||||
|
||||
:host-context(ion-toolbar.ion-color):not(.ion-color) {
|
||||
--color: currentColor;
|
||||
--color-checked: currentColor;
|
||||
}
|
||||
|
||||
:host(.ion-color)::slotted(.segment-button-checked) {
|
||||
color: #{current-color(base)};
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -26,7 +39,6 @@
|
||||
--padding-start: #{$segment-button-md-padding-start};
|
||||
--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};
|
||||
|
||||
@ -45,11 +57,6 @@
|
||||
// Checked Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.ion-color) ::slotted(.segment-button-checked) {
|
||||
--background: transparent;
|
||||
--color: #{current-color(base)};
|
||||
}
|
||||
|
||||
::slotted(.activated),
|
||||
::slotted(.segment-button-checked) {
|
||||
opacity: $segment-button-md-opacity-activated;
|
||||
@ -61,11 +68,3 @@
|
||||
::slotted(.segment-button-disabled) {
|
||||
opacity: $segment-button-md-opacity-disabled;
|
||||
}
|
||||
|
||||
// In Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.in-color-toolbar:not(.ion-color)) {
|
||||
--color: #{current-color(contrast)};
|
||||
--color-checked: #{current-color(contrast)};
|
||||
}
|
||||
|
||||
@ -30,32 +30,23 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host(.segment-disabled) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
::slotted(ion-segment-button) {
|
||||
--color: inherit;
|
||||
--background: inherit;
|
||||
--border-color: inherit;
|
||||
}
|
||||
--btn-background: var(--background);
|
||||
--btn-border-color: var(--border-color);
|
||||
|
||||
:host(.ion-color) ::slotted(ion-segment-button) {
|
||||
--color: #{current-color(base)};
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
::slotted(.segment-button-checked) {
|
||||
--color: var(--color-checked);
|
||||
--background: var(--background-checked);
|
||||
--border-color: var(--border-color-checked);
|
||||
--btn-background: var(--background-checked);
|
||||
--btn-border-color: var(--border-color-checked);
|
||||
|
||||
color: var(--color-checked);
|
||||
}
|
||||
|
||||
:host(.ion-color) ::slotted(.segment-button-checked) {
|
||||
--background: #{current-color(base)};
|
||||
--border-color: #{current-color(base)};
|
||||
--color: #{current-color(contrast)};
|
||||
}
|
||||
// Disabled
|
||||
|
||||
:host(.segment-disabled),
|
||||
::slotted(.segment-button-disabled) {
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
|
||||
|
||||
import { Color, Mode, TextInputChangeEvent } from '../../interface';
|
||||
import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-segment',
|
||||
@ -9,7 +9,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
|
||||
ios: 'segment.ios.scss',
|
||||
md: 'segment.md.scss'
|
||||
},
|
||||
shadow: true
|
||||
scoped: true
|
||||
})
|
||||
export class Segment {
|
||||
|
||||
@ -81,15 +81,8 @@ export class Segment {
|
||||
class: {
|
||||
...createColorClasses(this.color),
|
||||
|
||||
'segment-disabled': this.disabled,
|
||||
'in-toolbar': hostContext('ion-toolbar', this.el),
|
||||
'in-color-toolbar': hostContext('ion-toolbar.ion-color', this.el)
|
||||
'segment-disabled': this.disabled
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user