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

refactor(css): scope component css to mode

Browse Source
This commit is contained in:
Brandy Carney
2016-09-13 16:52:35 -05:00
committed by Adam Bradley
parent a154d837a0
commit 750cde38e2
97 changed files with 2539 additions and 2932 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/segment/segment.ios.scss
View File

@ -1,5 +1,4 @@
@import "../../globals.ios";
@import "./segment";
@import "../../themes/ionic.globals.ios";
// iOS Segment
// --------------------------------------------------
@ -33,7 +32,7 @@ $segment-button-ios-toolbar-icon-size: 2.2rem !default;
$segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
.segment-button {
.segment-ios .segment-button {
flex: 1;
width: 0;
@ -90,33 +89,34 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
}
}
.segment-button-disabled {
.segment-ios .segment-button-disabled {
color: rgba($segment-button-ios-background-color-activated, $segment-button-ios-opacity-disabled);
pointer-events: none;
}
.toolbar {
ion-segment {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
// iOS Segment in Toolbar
// --------------------------------------------------
.segment-button {
max-width: $segment-button-ios-toolbar-button-max-width;
height: $segment-button-ios-toolbar-button-height;
.toolbar-ios .segment-ios {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
font-size: $segment-button-ios-toolbar-font-size;
line-height: $segment-button-ios-toolbar-line-height;
.toolbar-ios .segment-button {
max-width: $segment-button-ios-toolbar-button-max-width;
height: $segment-button-ios-toolbar-button-height;
ion-icon {
font-size: $segment-button-ios-toolbar-icon-size;
line-height: $segment-button-ios-toolbar-icon-line-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;
}
}
@ -126,7 +126,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
@mixin ios-segment-button($color-name, $color-base, $color-contrast) {
.segment-#{$color-name} {
.segment-ios-#{$color-name} {
.segment-button {
border-color: $color-base;
@ -162,7 +162,7 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default;
@include ios-segment-button($color-name, $color-base, $color-contrast);
.toolbar-#{$color-name} .segment-button.segment-activated {
.toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
color: $color-base;
}
}

15
src/components/segment/segment.md.scss
View File

@ -1,5 +1,4 @@
@import "../../globals.md";
@import "./segment";
@import "../../themes/ionic.globals.md";
// Material Design Segment
// --------------------------------------------------
@ -22,7 +21,7 @@ $segment-button-md-icon-size: 2.6rem !default;
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;
.segment-button {
.segment-md .segment-button {
flex: 1;
padding: $segment-button-md-padding;
@ -56,7 +55,7 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
}
}
.segment-button-disabled {
.segment-md .segment-button-disabled {
opacity: $segment-button-md-opacity-disabled;
pointer-events: none;
@ -64,12 +63,12 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
.toolbar {
ion-segment {
.segment-md {
margin: 0 auto;
}
.segment-button.activated,
.segment-button.segment-activated {
.segment-md .segment-button.activated,
.segment-md .segment-button.segment-activated {
opacity: 1;
}
@ -81,7 +80,7 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d
@mixin md-segment-button($color-name, $color-base, $color-contrast) {
.segment-#{$color-name} .segment-button {
.segment-md-#{$color-name} .segment-button {
color: $color-base;
&.activated,

13
src/components/segment/segment.wp.scss
View File

@ -1,5 +1,4 @@
@import "../../globals.wp";
@import "./segment";
@import "../../themes/ionic.globals.wp";
// Windows Segment
// --------------------------------------------------
@ -22,11 +21,11 @@ $segment-button-wp-opacity-disabled: .3 !default;
$segment-button-wp-buttons-justify-content: flex-start !default;
ion-segment {
.segment-wp {
justify-content: $segment-button-wp-buttons-justify-content;
}
.segment-button {
.segment-wp .segment-button {
padding: $segment-button-wp-padding;
height: $segment-button-wp-height;
@ -51,7 +50,7 @@ ion-segment {
}
}
.segment-button-disabled {
.segment-wp .segment-button-disabled {
opacity: $segment-button-wp-opacity-disabled;
pointer-events: none;
@ -59,7 +58,7 @@ ion-segment {
.toolbar {
ion-segment {
.segment-wp {
margin: 0 auto;
}
}
@ -70,7 +69,7 @@ ion-segment {
@mixin wp-segment-button($color-name, $color-base) {
.segment-#{$color-name} .segment-button {
.segment-wp-#{$color-name} .segment-button {
color: $color-base;
&.activated,