javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): fix css var + host-context()

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-13 19:23:34 +02:00
parent 44364198b8
commit 49ab065be7
6 changed files with 70 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
core/src/components/segment-button/readme.md
View File

@ -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 |
----------------------------------------------

14
core/src/components/segment-button/segment-button.scss
View File

@ -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;