From 49ab065be7a55b850528d8bebc8dd5222a25e7c6 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 13 Sep 2018 19:23:34 +0200 Subject: [PATCH] fix(segment): fix css var + host-context() --- core/src/components/segment-button/readme.md | 35 +++++++++---------- .../segment-button/segment-button.scss | 14 ++++---- core/src/components/segment/segment.ios.scss | 28 ++++++++++----- core/src/components/segment/segment.md.scss | 27 +++++++------- core/src/components/segment/segment.scss | 29 ++++++--------- core/src/components/segment/segment.tsx | 13 ++----- 6 files changed, 70 insertions(+), 76 deletions(-) diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md index d6fa0b3a9c..3fc2239e63 100644 --- a/core/src/components/segment-button/readme.md +++ b/core/src/components/segment-button/readme.md @@ -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 | ---------------------------------------------- diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss index 3892f9d46e..7d7b7f8a9a 100644 --- a/core/src/components/segment-button/segment-button.scss +++ b/core/src/components/segment-button/segment-button.scss @@ -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; diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss index 190329fa64..76613f8b6f 100644 --- a/core/src/components/segment/segment.ios.scss +++ b/core/src/components/segment/segment.ios.scss @@ -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)}; diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss index c3a18531b6..d624e5ae56 100644 --- a/core/src/components/segment/segment.md.scss +++ b/core/src/components/segment/segment.md.scss @@ -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)}; -} diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss index 0fa1b28ca9..91051ffa13 100644 --- a/core/src/components/segment/segment.scss +++ b/core/src/components/segment/segment.scss @@ -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; -} +} \ No newline at end of file diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index ac869596b5..4659aa0580 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -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 ; - } - }