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

fix(segment): add and document custom properties

Browse Source 
references #14850
references #14808
closes #14854
This commit is contained in:
Cam Wiegert
2018-08-17 10:56:30 -05:00
parent 3adfb985e8
commit 08c6c974d5
6 changed files with 111 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
core/src/components/segment/segment.md.scss
View File

@ -5,21 +5,15 @@
// --------------------------------------------------
:host {
color: $segment-button-md-text-color;
--background: transparent;
--background-checked: transparent;
--border-color: #{$segment-button-md-border-bottom-color};
--color: #{$segment-button-md-text-color};
--color-checked: #{$segment-button-md-text-color};
font-family: $segment-md-font-family;
}
:host(.ion-color) {
// TODO can we remove important here
/* stylelint-disable-next-line declaration-no-important */
color: #{current-color(base)} !important;
}
:host(.in-color-toolbar) {
color: inherit;
}
:host(.segment-disabled) {
opacity: $segment-md-opacity-disabled;
}
@ -32,8 +26,6 @@
--padding-end: #{$segment-button-md-padding-end};
--padding-bottom: #{$segment-button-md-padding-bottom};
--padding-start: #{$segment-button-md-padding-start};
--background: transparent;
--border-color: #{$segment-button-md-border-bottom-color};
--border-width: #{0 0 $segment-button-md-border-bottom-width 0};
--border-style: solid;
--opacity: #{$segment-button-md-opacity};
@ -42,8 +34,6 @@
height: $segment-button-md-height;
color: inherit;
font-size: $segment-button-md-font-size;
font-weight: $segment-button-md-font-weight;
@ -57,10 +47,13 @@
// Checked Segment Button
// --------------------------------------------------
::slotted(.activated),
::slotted(.segment-checked) {
--border-color: currentColor;
: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;
}
@ -70,3 +63,10 @@
::slotted(.segment-button-disabled) {
opacity: $segment-button-md-opacity-disabled;
}
// In Toolbar
// --------------------------------------------------
:host(.in-color-toolbar:not(.ion-color)) {
--color: #{current-color(contrast)};
}