Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(segment-button): add --indicator-height property to segment butt…
…on (#19653)
  • Loading branch information
nikosdouvlis authored and brandyscarney committed Jan 23, 2020
1 parent b59d764 commit d76a503
Show file tree
Hide file tree
Showing 6 changed files with 12 additions and 6 deletions.
1 change: 1 addition & 0 deletions core/api.txt
Expand Up @@ -969,6 +969,7 @@ ion-segment-button,css-prop,--color-disabled
ion-segment-button,css-prop,--color-hover
ion-segment-button,css-prop,--indicator-box-shadow
ion-segment-button,css-prop,--indicator-color
ion-segment-button,css-prop,--indicator-height
ion-segment-button,css-prop,--indicator-transform
ion-segment-button,css-prop,--indicator-transition
ion-segment-button,css-prop,--margin-bottom
Expand Down
1 change: 1 addition & 0 deletions core/src/components/segment-button/readme.md
Expand Up @@ -647,6 +647,7 @@ export const SegmentButtonExample: React.FC = () => (
| `--color-hover` | Color of the segment button on hover |
| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button |
| `--indicator-color` | Color of the indicator for the checked segment button |
| `--indicator-height` | Height of the indicator for the checked segment button |
| `--indicator-transform` | Transform of the indicator for the checked segment button |
| `--indicator-transition` | Transition of the indicator for the checked segment button |
| `--margin-bottom` | Bottom margin of the segment button |
Expand Down
1 change: 1 addition & 0 deletions core/src/components/segment-button/segment-button.ios.scss
Expand Up @@ -14,6 +14,7 @@
--border-style: solid;
--indicator-box-shadow: #{$segment-button-ios-box-shadow-checked};
--indicator-color: #{$segment-button-ios-indicator-color};
--indicator-height: 100%;
--indicator-transition: #{$segment-button-ios-transition-animated};
--indicator-transform: none;
--transition: #{$segment-button-ios-transition};
Expand Down
3 changes: 1 addition & 2 deletions core/src/components/segment-button/segment-button.md.scss
Expand Up @@ -12,6 +12,7 @@
--color-checked: #{$segment-button-md-text-color-checked};
--indicator-box-shadow: none;
--indicator-color: var(--color-checked);
--indicator-height: 2px;
--indicator-transition: #{$segment-button-md-transition-animated};
--indicator-transform: none;
--padding-top: #{$segment-button-md-padding-top};
Expand Down Expand Up @@ -105,8 +106,6 @@
}

.segment-button-indicator-background {
height: 2px;

background: var(--indicator-color);
}

Expand Down
3 changes: 2 additions & 1 deletion core/src/components/segment-button/segment-button.scss
Expand Up @@ -32,6 +32,7 @@
*
* @prop --transition: Transition of the segment button
*
* @prop --indicator-height: Height of the indicator for the checked segment button
* @prop --indicator-box-shadow: Box shadow on the indicator for the checked segment button
* @prop --indicator-color: Color of the indicator for the checked segment button
* @prop --indicator-transition: Transition of the indicator for the checked segment button
Expand Down Expand Up @@ -230,7 +231,7 @@ ion-ripple-effect {

.segment-button-indicator-background {
width: 100%;
height: 100%;
height: var(--indicator-height);

transform: var(--indicator-transform);

Expand Down
9 changes: 6 additions & 3 deletions core/src/components/segment/test/custom/index.html
Expand Up @@ -197,24 +197,27 @@
* This tests that the colors are able to be overridden on
* a segment inside of a toolbar
*
* Indicator color / ripple color can be set on ion-segment
* Ripple color can be set on ion-segment
*
* Backgrounds / colors for the button must be set on the
* ion-segment-button
*/
.custom-checked {
--ripple-color: purple;
--indicator-color: purple;
}

.ios .custom-checked ion-segment-button {
--color-checked: white;
--color-checked: magenta;
--indicator-color: red;
--indicator-height: 50%;
}

.md .custom-checked ion-segment-button {
--background-hover: rgba(17, 228, 10, 0.5);
--color-checked: purple;
--color-hover: blue;
--indicator-color: red;
--indicator-height: 5px;
}

/*
Expand Down

0 comments on commit d76a503

Please sign in to comment.