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

feat(windows): add segment component

Browse Source 
references #5565
This commit is contained in:
Brandy Carney
2016-02-23 16:39:46 -05:00
parent 2699b44778
commit 922e1f17b8
5 changed files with 93 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.wp.scss
View File

@ -13,4 +13,5 @@
"components/checkbox/checkbox.wp", "components/checkbox/checkbox.wp",
"components/chip/chip.wp", "components/chip/chip.wp",
"components/radio/radio.wp", "components/radio/radio.wp",
"components/segment/segment.wp",
"components/toolbar/toolbar.wp"; "components/toolbar/toolbar.wp";

3
ionic/components/segment/segment.ios.scss
View File

@ -42,6 +42,9 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
color: $segment-button-ios-bg-color-activated; color: $segment-button-ios-bg-color-activated;
background-color: $segment-button-ios-bg-color; background-color: $segment-button-ios-bg-color;
flex: 1;
width: 0;
ion-icon { ion-icon {
font-size: $segment-button-ios-icon-size; font-size: $segment-button-ios-icon-size;
line-height: $segment-button-ios-icon-line-height; line-height: $segment-button-ios-icon-line-height;

3
ionic/components/segment/segment.md.scss
View File

@ -31,6 +31,9 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
flex: 1;
width: 0;
opacity: 0.7; opacity: 0.7;
color: $segment-button-md-text-color-activated; color: $segment-button-md-text-color-activated;
background-color: transparent; background-color: transparent;

3
ionic/components/segment/segment.scss
View File

@ -19,9 +19,6 @@ ion-segment {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
flex: 1;
width: 0;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;

86
ionic/components/segment/segment.wp.scss Normal file
View File

@ -0,0 +1,86 @@
@import "../../globals.wp";
@import "./segment";
// Windows Segment
// --------------------------------------------------
$segment-button-wp-text-color-activated: $toolbar-wp-text-color !default;
$segment-button-wp-padding: 0 6px !default;
$segment-button-wp-height: 4.0rem !default;
$segment-button-wp-line-height: 4.0rem !default;
$segment-button-wp-font-size: 1.3rem !default;
$segment-button-wp-text-transform: uppercase !default;
$segment-button-wp-font-weight: bold !default;
$segment-button-wp-icon-size: 2.6rem !default;
$segment-button-wp-icon-line-height: $segment-button-wp-line-height !default;
$segment-button-wp-background-color: transparent !default;
$segment-button-wp-opacity: 0.7 !default;
$segment-button-wp-opacity-activated: 1.0 !default;
$segment-button-wp-buttons-justify-content: flex-start !default;
ion-segment {
justify-content: $segment-button-wp-buttons-justify-content;
}
.segment-button {
padding: $segment-button-wp-padding;
height: $segment-button-wp-height;
line-height: $segment-button-wp-line-height;
font-size: $segment-button-wp-font-size;
text-transform: $segment-button-wp-text-transform;
font-weight: $segment-button-wp-font-weight;
opacity: $segment-button-wp-opacity;
color: $segment-button-wp-text-color-activated;
background-color: $segment-button-wp-background-color;
ion-icon {
font-size: $segment-button-wp-icon-size;
line-height: $segment-button-wp-icon-line-height;
}
}
.toolbar {
ion-segment {
margin: 0 auto;
}
.segment-button.activated,
.segment-button.segment-activated {
opacity: $segment-button-wp-opacity-activated;
}
}
// Windows Segment Button Mixin
// --------------------------------------------------
@mixin wp-segment-button($color-name, $color-value) {
ion-segment[#{$color-name}] .segment-button {
color: $color-value;
&.activated,
&.segment-activated {
opacity: $segment-button-wp-opacity-activated;
border-color: $color-value;
color: $color-value;
}
}
}
// Windows Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-wp {
@include wp-segment-button($color-name, $color-value);
}