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

update md segment

Browse Source
This commit is contained in:
Adam Bradley
2015-12-07 20:36:14 -06:00
parent 367f4a8168
commit 66e13b890f
10 changed files with 70 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components.ios.scss
View File

@ -5,6 +5,7 @@
// iOS Components
@import
"components/app/modes/ios",
"components/action-sheet/modes/ios",
"components/button/modes/ios",
"components/card/modes/ios",

1
ionic/components.md.scss
View File

@ -5,6 +5,7 @@
// Material Design Components
@import
"components/app/modes/md",
"components/action-sheet/modes/md",
"components/button/modes/md",
"components/card/modes/md",

2
ionic/components/app/modes/ios.scss
View File

@ -9,8 +9,6 @@ a {
}
hr {
border-width: 0;
height: 1px;
background-color: rgba(0, 0, 0, 0.12);
}

2
ionic/components/app/modes/md.scss
View File

@ -9,8 +9,6 @@ a {
}
hr {
border-width: 0;
height: 1px;
background-color: rgba(0, 0, 0, 0.08);
}

5
ionic/components/app/normalize.scss vendored
View File

@ -52,11 +52,10 @@ figure {
margin: 1em 40px;
}
// Address differences between Firefox and other browsers.
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
height: 1px;
border-width: 0;
}
// Contain overflow in all browsers.

10
ionic/components/segment/modes/ios.scss
View File

@ -18,11 +18,15 @@ $segment-button-ios-hover-opacity: 0.16 !default;
$segment-button-ios-toolbar-button-max-width: 100px !default;
$segment-button-ios-padding: 0 16px !default;
ion-segment {
padding: $segment-button-ios-padding;
button,
[button] {
border-width: 1px 0px 1px 1px;
border-width: $segment-button-ios-border-width;
border-style: solid;
@ -68,6 +72,12 @@ ion-segment {
}
ion-segment-button[button] {
line-height: 2.4rem;
min-height: 2.4rem;
font-size: 1.2rem;
}
.toolbar {
// TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed

93
ionic/components/segment/modes/md.scss
View File

@ -1,99 +1,80 @@
@import "../../../globals.md";
@import "../segment";
// iOS Segment
// Material Design Segment
// --------------------------------------------------
$segment-button-md-font-size: 1.2rem !default;
$segment-button-md-padding: 0 6px !default;
$segment-button-md-min-height: 4.0rem !default;
$segment-button-md-line-height: 4.0rem !default;
$segment-button-md-font-size: 1.2rem !default;
$segment-button-md-text-color-activated: map-get($colors-md, primary) !default;
$segment-button-md-border-color-activated: map-get($colors-md, primary) !default;
$segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default;
$segment-button-md-text-color-activated: $toolbar-md-active-color !default;
$segment-button-md-border-color-activated: $toolbar-md-active-color !default;
$segment-button-md-border-bottom-width: 2px !default;
$segment-button-md-border-bottom-color: rgba(#000000, 0.10) !default;
.segment-button {
border-width: 0;
transition: 100ms all linear;
font-size: $segment-button-md-font-size;
opacity: 0.7;
padding: $segment-button-md-padding;
border-bottom-width: $segment-button-md-border-bottom-width;
border-bottom-style: solid;
border-bottom-color: $segment-button-md-border-bottom-color;
min-height: $segment-button-md-min-height;
line-height: $segment-button-md-line-height;
&.activated,
&.segment-activated {
font-size: $segment-button-md-font-size;
text-transform: uppercase;
font-weight: 500;
opacity: 0.7;
color: $segment-button-md-text-color-activated;
background-color: transparent;
transition: 100ms all linear;
&.activated,
&.segment-activated {
border-color: $segment-button-md-border-color-activated;
}
border-radius: 0;
border-bottom: $segment-button-md-border-bottom;
}
.toolbar {
ion-segment {
margin: 0 auto;
}
.segment-button.activated,
.segment-button.segment-activated {
background-color: transparent;
opacity: 1;
}
}
}
// Generate Default Segment Colors
// Material Design Segment Button Mixin
// --------------------------------------------------
@mixin segment-button($button-color) {
background-color: transparent;
@mixin md-segment-button($color-name, $color-value) {
color: $button-color;
ion-segment[#{$color-name}] .segment-button {
color: $color-value;
&.activated, &.segment-activated {
background-color: transparent;
color: $button-color;
border-color: $button-color;
&.activated,
&.segment-activated {
opacity: 1;
border-color: $color-value;
color: $color-value;
}
}
}
// Loop through all of the colors to change the segment colors
// based on the toolbar color or if it isn't in a toolbar then based on
// the segment color value
// Material Design Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
$inverse-color-value: inverse($color-value);
.toolbar[#{$color-name}] {
ion-segment {
.segment-button {
@include segment-button($inverse-color-value);
}
}
// Loop through all of the colors again to change the segment colors
// for each toolbar based on the segment color
// this will take priority over the default toolbar colors
@each $color-name, $color-value in $colors-md {
ion-segment[#{$color-name}] {
.segment-button {
@include segment-button($color-value);
}
}
}
}
ion-segment[#{$color-name}] {
.segment-button {
@include segment-button($color-value);
}
}
@include md-segment-button($color-name, $color-value);
}

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

@ -3,8 +3,6 @@
// Segment
// --------------------------------------------------
$segment-button-padding: 0 16px !default;
ion-segment {
display: flex;
@ -16,22 +14,16 @@ ion-segment {
.segment-button {
position: relative;
overflow: hidden;
display: block;
margin-left: 0;
margin-right: 0;
padding: $segment-button-padding;
flex: 1;
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
background: none;
}

16
ionic/components/segment/test/basic/main.html
View File

@ -25,8 +25,8 @@
</ion-segment>
</ion-toolbar>
<ion-content padding>
<p>Are we friends or enemies? <b>{{ relationship }}</b></p>
<div padding>
<div>Are we friends or enemies? <b>{{ relationship }}</b></div>
<h4>Map mode: NgControl</h4>
@ -80,10 +80,10 @@
</ion-segment>
<p>Model Style: <b>Model {{ modelStyle }}</b></p>
</ion-content>
</div>
<ion-toolbar position="bottom" primary>
<ion-segment [(ng-model)]="appType">
<ion-segment [(ng-model)]="appType" light>
<ion-segment-button value="paid">
Primary
</ion-segment-button>
@ -96,8 +96,8 @@
</ion-segment>
</ion-toolbar>
<ion-toolbar position="bottom" light>
<ion-segment [(ng-model)]="appType" primary>
<ion-toolbar position="bottom">
<ion-segment [(ng-model)]="appType" danger>
<ion-segment-button value="paid">
Light
</ion-segment-button>
@ -110,8 +110,8 @@
</ion-segment>
</ion-toolbar>
<ion-toolbar position="bottom" light>
<ion-segment [(ng-model)]="appType">
<ion-toolbar position="bottom">
<ion-segment [(ng-model)]="appType" dark>
<ion-segment-button value="paid">
Light
</ion-segment-button>

7
ionic/components/toolbar/modes/ios.scss
View File

@ -277,7 +277,6 @@ ion-buttons[right] {
.toolbar {
[menu-toggle] {
order: map-get($toolbar-order-ios, menu-toggle-start);
cursor: pointer;
}
[menu-toggle][end],
@ -286,12 +285,6 @@ ion-buttons[right] {
}
}
ion-segment-button[button] {
line-height: 2.4rem;
min-height: 2.4rem;
font-size: 1.2rem;
}
// iOS Toolbar Color Generation
// --------------------------------------------------