mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
fix(segment-button): separate button styles from segment and fix styling
- this separates the segment button styles from the segment itself - removes unused / no longer needed styles - fixes a bug where activated segments were not getting opacity when they were also disabled
This commit is contained in:
Brandy Carney
@ -1,29 +1,53 @@
|
||||
# ion-segment-button
|
||||
|
||||
Segment buttons are a group of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. Only one segment button can be selected at a time.
|
||||
Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
|
||||
|
||||
```html
|
||||
<ion-content>
|
||||
<!-- Segment buttons with icons -->
|
||||
<ion-segment>
|
||||
<!-- Segment buttons with text -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
Friends
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
Enemies
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
Paid
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
Free
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
Top
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with values and icons -->
|
||||
<ion-segment>
|
||||
<ion-segment-button value="camera">
|
||||
<ion-icon name="camera"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="bookmark">
|
||||
<ion-icon name="bookmark"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with text -->
|
||||
<ion-segment>
|
||||
<ion-segment-button value="friends">
|
||||
Friends
|
||||
<!-- Segment with a value that checks the last button -->
|
||||
<ion-segment value="shared">
|
||||
<ion-segment-button value="bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="enemies">
|
||||
Enemies
|
||||
<ion-segment-button value="reading">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-content>
|
||||
<ion-segment-button value="shared">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@ -0,0 +1,151 @@
|
||||
@import "./segment-button";
|
||||
@import "./segment-button.ios.vars";
|
||||
|
||||
// iOS Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-segment-button {
|
||||
&:first-of-type .segment-button-ios {
|
||||
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
|
||||
@include margin-horizontal(null, 0);
|
||||
}
|
||||
|
||||
&:not(:first-of-type) .segment-button-ios {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-of-type .segment-button-ios {
|
||||
@include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
|
||||
@include margin-horizontal(0, null);
|
||||
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-button-ios {
|
||||
flex: 1;
|
||||
|
||||
height: $segment-button-ios-height;
|
||||
|
||||
border-width: $segment-button-ios-border-width;
|
||||
border-style: solid;
|
||||
border-color: $segment-button-ios-background-color-activated;
|
||||
|
||||
font-size: $segment-button-ios-font-size;
|
||||
line-height: $segment-button-ios-line-height;
|
||||
|
||||
color: $segment-button-ios-background-color-activated;
|
||||
background-color: $segment-button-ios-background-color;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-ios-icon-size;
|
||||
line-height: $segment-button-ios-icon-line-height;
|
||||
}
|
||||
|
||||
&.segment-activated {
|
||||
color: $segment-button-ios-text-color;
|
||||
background-color: $segment-button-ios-background-color-activated;
|
||||
transition: $segment-button-ios-transition-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.segment-activated) {
|
||||
background-color: $segment-button-ios-background-color-hover;
|
||||
transition: $segment-button-ios-transition-hover;
|
||||
}
|
||||
|
||||
&:active:not(.segment-activated) {
|
||||
background-color: $segment-button-ios-background-color-active;
|
||||
transition: $segment-button-ios-transition-active;
|
||||
}
|
||||
}
|
||||
|
||||
// iOS Segment Button RTL
|
||||
// --------------------------------------------------
|
||||
|
||||
[dir="rtl"] ion-segment-button {
|
||||
&:first-of-type .segment-button-ios {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-of-type .segment-button-ios {
|
||||
border-left-width: $segment-button-ios-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Button Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-ios .segment-button-disabled {
|
||||
color: $segment-button-ios-background-color-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
.toolbar-ios ion-segment-button {
|
||||
max-width: $segment-button-ios-toolbar-button-max-width;
|
||||
}
|
||||
|
||||
.toolbar-ios .segment-button-ios {
|
||||
height: $segment-button-ios-toolbar-button-height;
|
||||
|
||||
font-size: $segment-button-ios-toolbar-font-size;
|
||||
line-height: $segment-button-ios-toolbar-line-height;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-ios-toolbar-icon-size;
|
||||
line-height: $segment-button-ios-toolbar-icon-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Button Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-segment-button($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.segment-ios-#{$color-name} {
|
||||
|
||||
.segment-button {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
|
||||
&:hover:not(.segment-activated) {
|
||||
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
|
||||
}
|
||||
|
||||
&:active:not(.segment-activated) {
|
||||
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
|
||||
}
|
||||
|
||||
&.segment-activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-button-disabled {
|
||||
color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
|
||||
@include ios-segment-button($color-name);
|
||||
|
||||
.toolbar-ios-#{$color-name} .segment-button-ios.segment-activated {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-button-ios-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background of the activated segment button
|
||||
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Background of the segment button when hovered
|
||||
$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
|
||||
|
||||
/// @prop - Background of the segment button when active
|
||||
$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
|
||||
|
||||
/// @prop - Background of the activated segment button when active
|
||||
$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
|
||||
|
||||
/// @prop - Text color of the segment button
|
||||
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
|
||||
|
||||
/// @prop - Transition of the activated segment button
|
||||
$segment-button-ios-transition-activated: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button on hover
|
||||
$segment-button-ios-transition-hover: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button when pressed
|
||||
$segment-button-ios-transition-active: 100ms all linear !default;
|
||||
|
||||
/// @prop - Border width of the segment button
|
||||
$segment-button-ios-border-width: 1px !default;
|
||||
|
||||
/// @prop - Height of the segment button
|
||||
$segment-button-ios-height: 32px !default;
|
||||
|
||||
/// @prop - Line height of the segment button
|
||||
$segment-button-ios-line-height: 28px !default;
|
||||
|
||||
/// @prop - Font size of the segment button
|
||||
$segment-button-ios-font-size: 13px !default;
|
||||
|
||||
/// @prop - Border radius of the segment button
|
||||
$segment-button-ios-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button
|
||||
$segment-button-ios-icon-size: 26px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button
|
||||
$segment-button-ios-icon-line-height: 28px !default;
|
||||
|
||||
/// @prop - Max width of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-max-width: 100px !default;
|
||||
|
||||
/// @prop - Height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-height: 26px !default;
|
||||
|
||||
/// @prop - Line height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-line-height: 22px !default;
|
||||
|
||||
/// @prop - Font size of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-font-size: 12px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-size: 22px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-line-height: 24px !default;
|
||||
|
||||
/// @prop - Opacity of the segment button on hover
|
||||
$segment-button-ios-opacity-hover: .1 !default;
|
||||
|
||||
/// @prop - Opacity of the segment button when pressed
|
||||
$segment-button-ios-opacity-active: .16 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-ios-opacity-disabled: .3 !default;
|
||||
@ -0,0 +1,66 @@
|
||||
@import "./segment-button";
|
||||
@import "./segment-button.md.vars";
|
||||
|
||||
// Material Design Segment
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-button-md {
|
||||
@include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
|
||||
|
||||
flex: 1;
|
||||
|
||||
height: $segment-button-md-height;
|
||||
|
||||
border-bottom-width: $segment-button-md-border-bottom-width;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $segment-button-md-border-bottom-color;
|
||||
|
||||
font-size: $segment-button-md-font-size;
|
||||
font-weight: $segment-button-md-font-weight;
|
||||
line-height: $segment-button-md-line-height;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $segment-button-md-text-color;
|
||||
background-color: transparent;
|
||||
opacity: $segment-button-md-opacity;
|
||||
transition: $segment-button-md-transition;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-md-icon-size;
|
||||
line-height: $segment-button-md-icon-line-height;
|
||||
}
|
||||
|
||||
&.activated,
|
||||
&.segment-activated {
|
||||
border-color: $segment-button-md-border-color-activated;
|
||||
opacity: $segment-button-md-opacity-activated;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Button Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
.segment-md .segment-button-disabled {
|
||||
opacity: $segment-button-md-opacity-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
|
||||
.segment-md-#{$color-name} .segment-button {
|
||||
color: $color-base;
|
||||
|
||||
&.activated,
|
||||
&.segment-activated {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the segment button
|
||||
$segment-button-md-text-color: $toolbar-md-color-active !default;
|
||||
|
||||
/// @prop - Width of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-width: 2px !default;
|
||||
|
||||
/// @prop - Color of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-color: rgba(#000, .10) !default;
|
||||
|
||||
/// @prop - Opacity of the segment button
|
||||
$segment-button-md-opacity: .7 !default;
|
||||
|
||||
/// @prop - Border color of the activated segment button
|
||||
$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
|
||||
|
||||
/// @prop - Opacity of the activated segment button
|
||||
$segment-button-md-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-md-opacity-disabled: .3 !default;
|
||||
|
||||
/// @prop - Padding top of the segment button
|
||||
$segment-button-md-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the segment button
|
||||
$segment-button-md-padding-end: 6px !default;
|
||||
|
||||
/// @prop - Padding bottom of the segment button
|
||||
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the segment button
|
||||
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
|
||||
|
||||
/// @prop - Height of the segment button
|
||||
$segment-button-md-height: 42px !default;
|
||||
|
||||
/// @prop - Line height of the segment button
|
||||
$segment-button-md-line-height: 40px !default;
|
||||
|
||||
/// @prop - Font size of the segment button
|
||||
$segment-button-md-font-size: 12px !default;
|
||||
|
||||
/// @prop - Font weight of the segment button
|
||||
$segment-button-md-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Transition of the segment button
|
||||
$segment-button-md-transition: 100ms all linear !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button
|
||||
$segment-button-md-icon-size: 26px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button
|
||||
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;
|
||||
@ -0,0 +1,37 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Segment Button
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-segment-button {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@include border-radius(0);
|
||||
@include margin-horizontal(0);
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
font-kerning: none;
|
||||
user-select: none;
|
||||
contain: content;
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,11 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
|
||||
let ids = 0;
|
||||
|
||||
@Component({
|
||||
tag: 'ion-segment-button'
|
||||
tag: 'ion-segment-button',
|
||||
styleUrls: {
|
||||
ios: 'segment-button.ios.scss',
|
||||
md: 'segment-button.md.scss'
|
||||
}
|
||||
})
|
||||
export class SegmentButton {
|
||||
styleTmr: any;
|
||||
|
||||
@ -8,80 +8,8 @@
|
||||
font-family: $segment-ios-font-family;
|
||||
}
|
||||
|
||||
.segment-ios ion-segment-button {
|
||||
&:first-of-type .segment-button {
|
||||
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
|
||||
@include margin-horizontal(null, 0);
|
||||
}
|
||||
|
||||
&:not(:first-of-type) .segment-button {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-of-type .segment-button {
|
||||
@include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
|
||||
@include margin-horizontal(0, null);
|
||||
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-ios .segment-button {
|
||||
flex: 1;
|
||||
|
||||
height: $segment-button-ios-height;
|
||||
|
||||
border-width: $segment-button-ios-border-width;
|
||||
border-style: solid;
|
||||
border-color: $segment-button-ios-background-color-activated;
|
||||
|
||||
font-size: $segment-button-ios-font-size;
|
||||
line-height: $segment-button-ios-line-height;
|
||||
|
||||
color: $segment-button-ios-background-color-activated;
|
||||
background-color: $segment-button-ios-background-color;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-ios-icon-size;
|
||||
line-height: $segment-button-ios-icon-line-height;
|
||||
}
|
||||
|
||||
&.segment-activated {
|
||||
color: $segment-button-ios-text-color;
|
||||
background-color: $segment-button-ios-background-color-activated;
|
||||
transition: $segment-button-ios-transition-activated;
|
||||
}
|
||||
|
||||
&:hover:not(.segment-activated) {
|
||||
background-color: $segment-button-ios-background-color-hover;
|
||||
transition: $segment-button-ios-transition-hover;
|
||||
}
|
||||
|
||||
&:active:not(.segment-activated) {
|
||||
background-color: $segment-button-ios-background-color-active;
|
||||
transition: $segment-button-ios-transition-active;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .segment-ios ion-segment-button {
|
||||
&:first-of-type .segment-button {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:last-of-type .segment-button {
|
||||
border-left-width: $segment-button-ios-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.segment-ios.segment-disabled {
|
||||
opacity: .4;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.segment-ios .segment-button-disabled {
|
||||
color: $segment-button-ios-background-color-disabled;
|
||||
opacity: $segment-ios-opacity-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -95,68 +23,3 @@
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toolbar-ios ion-segment-button {
|
||||
max-width: $segment-button-ios-toolbar-button-max-width;
|
||||
}
|
||||
|
||||
.toolbar-ios .segment-button {
|
||||
height: $segment-button-ios-toolbar-button-height;
|
||||
|
||||
font-size: $segment-button-ios-toolbar-font-size;
|
||||
line-height: $segment-button-ios-toolbar-line-height;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-ios-toolbar-icon-size;
|
||||
line-height: $segment-button-ios-toolbar-icon-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Button Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-segment-button($color-name) {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.segment-ios-#{$color-name} {
|
||||
|
||||
.segment-button {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
|
||||
|
||||
&:hover:not(.segment-activated) {
|
||||
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
|
||||
}
|
||||
|
||||
&:active:not(.segment-activated) {
|
||||
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
|
||||
}
|
||||
|
||||
&.segment-activated {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-button-disabled {
|
||||
color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS Segment Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
|
||||
@include ios-segment-button($color-name);
|
||||
|
||||
.toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,80 +6,5 @@
|
||||
/// @prop - Background of the segment button
|
||||
$segment-ios-font-family: $font-family-ios-base !default;
|
||||
|
||||
// TODO either move to button or rename
|
||||
// ---------------------------------------------
|
||||
|
||||
/// @prop - Background of the segment button
|
||||
$segment-button-ios-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background of the activated segment button
|
||||
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Background of the segment button when hovered
|
||||
$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
|
||||
|
||||
/// @prop - Background of the segment button when active
|
||||
$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
|
||||
|
||||
/// @prop - Background of the activated segment button when active
|
||||
$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
|
||||
|
||||
/// @prop - Text color of the segment button
|
||||
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
|
||||
|
||||
/// @prop - Transition of the activated segment button
|
||||
$segment-button-ios-transition-activated: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button on hover
|
||||
$segment-button-ios-transition-hover: 100ms all linear !default;
|
||||
|
||||
/// @prop - Transition of the segment button when pressed
|
||||
$segment-button-ios-transition-active: 100ms all linear !default;
|
||||
|
||||
/// @prop - Border width of the segment button
|
||||
$segment-button-ios-border-width: 1px !default;
|
||||
|
||||
/// @prop - Height of the segment button
|
||||
$segment-button-ios-height: 32px !default;
|
||||
|
||||
/// @prop - Line height of the segment button
|
||||
$segment-button-ios-line-height: 28px !default;
|
||||
|
||||
/// @prop - Font size of the segment button
|
||||
$segment-button-ios-font-size: 13px !default;
|
||||
|
||||
/// @prop - Border radius of the segment button
|
||||
$segment-button-ios-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button
|
||||
$segment-button-ios-icon-size: 26px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button
|
||||
$segment-button-ios-icon-line-height: 28px !default;
|
||||
|
||||
/// @prop - Max width of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-max-width: 100px !default;
|
||||
|
||||
/// @prop - Height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-button-height: 26px !default;
|
||||
|
||||
/// @prop - Line height of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-line-height: 22px !default;
|
||||
|
||||
/// @prop - Font size of the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-font-size: 12px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-size: 22px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button in a toolbar
|
||||
$segment-button-ios-toolbar-icon-line-height: 24px !default;
|
||||
|
||||
/// @prop - Opacity of the segment button on hover
|
||||
$segment-button-ios-opacity-hover: .1 !default;
|
||||
|
||||
/// @prop - Opacity of the segment button when pressed
|
||||
$segment-button-ios-opacity-active: .16 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-ios-opacity-disabled: .3 !default;
|
||||
/// @prop - Opacity of the disabled segment
|
||||
$segment-ios-opacity-disabled: .4 !default;
|
||||
|
||||
@ -8,84 +8,8 @@
|
||||
font-family: $segment-md-font-family;
|
||||
}
|
||||
|
||||
.segment-md .segment-button {
|
||||
@include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
|
||||
|
||||
flex: 1;
|
||||
|
||||
width: 0;
|
||||
height: $segment-button-md-height;
|
||||
|
||||
border-bottom-width: $segment-button-md-border-bottom-width;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $segment-button-md-border-bottom-color;
|
||||
|
||||
font-size: $segment-button-md-font-size;
|
||||
font-weight: 500;
|
||||
line-height: $segment-button-md-line-height;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $segment-button-md-text-color-active;
|
||||
background-color: transparent;
|
||||
opacity: $segment-button-md-opacity;
|
||||
transition: 100ms all linear;
|
||||
|
||||
ion-icon {
|
||||
font-size: $segment-button-md-icon-size;
|
||||
line-height: $segment-button-md-icon-line-height;
|
||||
}
|
||||
|
||||
&.activated,
|
||||
&.segment-activated {
|
||||
border-color: $segment-button-md-border-color-activated;
|
||||
opacity: $segment-button-md-opacity-activated;
|
||||
}
|
||||
}
|
||||
|
||||
.segment-md.segment-disabled,
|
||||
.segment-md .segment-button-disabled {
|
||||
opacity: $segment-button-md-opacity-disabled;
|
||||
.segment-md.segment-disabled {
|
||||
opacity: $segment-md-opacity-disabled;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
|
||||
.segment-md {
|
||||
@include margin(0, auto);
|
||||
}
|
||||
|
||||
.segment-md .segment-button.activated,
|
||||
.segment-md .segment-button.segment-activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Button Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-segment-button($color-name) {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
|
||||
.segment-md-#{$color-name} .segment-button {
|
||||
color: $color-base;
|
||||
|
||||
&.activated,
|
||||
&.segment-activated {
|
||||
border-color: $color-base;
|
||||
color: $color-base;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Material Design Segment Color Generation
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
@include md-segment-button($color-name);
|
||||
}
|
||||
|
||||
@ -6,50 +6,5 @@
|
||||
/// @prop - Background of the segment button
|
||||
$segment-md-font-family: $font-family-md-base !default;
|
||||
|
||||
/// @prop - Text color of the activated segment button
|
||||
$segment-button-md-text-color-active: $toolbar-md-color-active !default;
|
||||
|
||||
/// @prop - Border color of the activated segment button
|
||||
$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
|
||||
|
||||
/// @prop - Width of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-width: 2px !default;
|
||||
|
||||
/// @prop - Color of the bottom border on the segment button
|
||||
$segment-button-md-border-bottom-color: rgba(#000, .10) !default;
|
||||
|
||||
/// @prop - Opacity of the segment button
|
||||
$segment-button-md-opacity: .7 !default;
|
||||
|
||||
/// @prop - Opacity of the activated segment button
|
||||
$segment-button-md-opacity-activated: 1 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled segment button
|
||||
$segment-button-md-opacity-disabled: .3 !default;
|
||||
|
||||
/// @prop - Padding top of the segment button
|
||||
$segment-button-md-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the segment button
|
||||
$segment-button-md-padding-end: 6px !default;
|
||||
|
||||
/// @prop - Padding bottom of the segment button
|
||||
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the segment button
|
||||
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
|
||||
|
||||
/// @prop - Height of the segment button
|
||||
$segment-button-md-height: 42px !default;
|
||||
|
||||
/// @prop - Line height of the segment button
|
||||
$segment-button-md-line-height: 40px !default;
|
||||
|
||||
/// @prop - Font size of the segment button
|
||||
$segment-button-md-font-size: 12px !default;
|
||||
|
||||
/// @prop - Size of an icon in the segment button
|
||||
$segment-button-md-icon-size: 26px !default;
|
||||
|
||||
/// @prop - Line height of an icon in the segment button
|
||||
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;
|
||||
/// @prop - Opacity of the disabled segment
|
||||
$segment-md-opacity-disabled: .3 !default;
|
||||
|
||||
@ -12,36 +12,3 @@ ion-segment {
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ion-segment-button {
|
||||
display: flex;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.segment-button {
|
||||
@include border-radius(0);
|
||||
@include margin-horizontal(0);
|
||||
@include text-align(center);
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
font-kerning: none;
|
||||
user-select: none;
|
||||
contain: content;
|
||||
font-smoothing: antialiased;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,6 +32,34 @@
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment name="dynamicPropDisable" disabled color="danger">
|
||||
<ion-segment-button value="Bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Reading List">
|
||||
Reading List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="Shared Links">
|
||||
Shared Links
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment name="dynamicAttrElem" color="secondary" value="active">
|
||||
<ion-segment-button value="active">
|
||||
Active
|
||||
</ion-segment-button>
|
||||
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
||||
Disabled
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="inactive" disabled="false">
|
||||
Inactive
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment color="danger">
|
||||
<ion-segment-button value="sunny">
|
||||
@ -68,7 +96,7 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment id="dynamicPropDisable" disabled color="danger">
|
||||
<ion-segment name="dynamicPropDisable" disabled color="danger">
|
||||
<ion-segment-button value="Bookmarks">
|
||||
Bookmarks
|
||||
</ion-segment-button>
|
||||
@ -80,11 +108,11 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment id="dynamicAttrElem" color="secondary" value="active">
|
||||
<ion-segment name="dynamicAttrElem" color="secondary" value="active">
|
||||
<ion-segment-button value="active">
|
||||
Active
|
||||
</ion-segment-button>
|
||||
<ion-segment-button id="dynamicAttrDisable" value="disabled" disabled="true">
|
||||
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
||||
Disabled
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="inactive" disabled="false">
|
||||
@ -104,26 +132,32 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var dynamicAttrDisable = document.getElementById('dynamicAttrDisable');
|
||||
var dynamicPropDisable = document.getElementById('dynamicPropDisable');
|
||||
var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
|
||||
var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
|
||||
|
||||
function toggleDisabled() {
|
||||
const attrIsDisabled = dynamicAttrDisable.getAttribute('disabled') === 'true' ? false : true;
|
||||
const propIsDisabled = dynamicPropDisable.disabled === true ? false : true;
|
||||
dynamicAttrDisable.setAttribute('disabled', attrIsDisabled);
|
||||
dynamicPropDisable.disabled = propIsDisabled;
|
||||
for (var i = 0; i < dynamicAttrDisable.length; i++) {
|
||||
const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
|
||||
dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
|
||||
}
|
||||
for (var i = 0; i < dynamicPropDisable.length; i++) {
|
||||
const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
|
||||
dynamicPropDisable[i].disabled = propIsDisabled;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleValue() {
|
||||
var dynamicAttrElem = document.getElementById('dynamicAttrElem');
|
||||
var dynamicAttrValue = dynamicAttrElem.getAttribute('value');
|
||||
var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
|
||||
for (var i = 0; i < dynamicAttrElem.length; i++) {
|
||||
var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
|
||||
|
||||
if (dynamicAttrValue === 'active') {
|
||||
dynamicAttrElem.setAttribute('value', 'inactive');
|
||||
dynamicAttrElem[i].setAttribute('value', 'inactive');
|
||||
} else if (dynamicAttrValue === 'inactive') {
|
||||
dynamicAttrElem.setAttribute('value', 'disabled');
|
||||
dynamicAttrElem[i].setAttribute('value', 'disabled');
|
||||
} else {
|
||||
dynamicAttrElem.setAttribute('value', 'active');
|
||||
dynamicAttrElem[i].setAttribute('value', 'active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user