javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +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

40
src/components/picker/picker.ios.scss
View File

@ -1,5 +1,4 @@
@import "../../globals.ios";
@import "./picker";
@import "../../themes/ionic.globals.ios";
// iOS Picker
// --------------------------------------------------
@ -12,7 +11,7 @@ $picker-ios-toolbar-height: 44px !default;
$picker-ios-toolbar-background-color: $picker-ios-background-color !default;
$picker-ios-button-height: $picker-ios-toolbar-height !default;
$picker-ios-button-text-color: $link-ios-color !default;
$picker-ios-button-text-color: color($colors-ios, primary) !default;
$picker-ios-button-background-color: transparent !default;
$picker-ios-column-padding: 0 4px !default;
@ -24,10 +23,8 @@ $picker-ios-option-font-size: 20px !default;
$picker-ios-option-height: 42px !default;
$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default;
$picker-highlight-opacity: .8 !default;
.picker-wrapper {
.picker-ios .picker-wrapper {
height: $picker-ios-height;
border-top: 1px solid $picker-ios-border-color;
@ -35,35 +32,30 @@ $picker-highlight-opacity: .8 !default;
background: $picker-ios-background-color;
}
.picker-toolbar {
.picker-ios .picker-toolbar {
display: flex;
height: $picker-ios-toolbar-height;
border-bottom: 1px solid $picker-ios-border-color;
border-bottom: $hairlines-width solid $picker-ios-border-color;
background: $picker-ios-toolbar-background-color;
}
.hairlines .picker-wrapper,
.hairlines .picker-toolbar {
border-width: $hairlines-width;
}
.picker-toolbar-button {
.picker-ios .picker-toolbar-button {
flex: 1;
text-align: right;
}
.picker-toolbar-cancel {
.picker-ios .picker-toolbar-cancel {
font-weight: normal;
text-align: left;
}
.picker-button,
.picker-button.activated {
.picker-ios .picker-button,
.picker-ios .picker-button.activated {
margin: 0;
height: $picker-ios-button-height;
@ -78,15 +70,15 @@ $picker-highlight-opacity: .8 !default;
perspective: $picker-ios-column-perspective;
}
.picker-col {
.picker-ios .picker-col {
padding: $picker-ios-column-padding;
transform-style: preserve-3d;
}
.picker-prefix,
.picker-suffix,
.picker-opts {
.picker-ios .picker-prefix,
.picker-ios .picker-suffix,
.picker-ios .picker-opts {
top: $picker-ios-option-offset-y;
font-size: $picker-ios-option-font-size;
@ -98,7 +90,7 @@ $picker-highlight-opacity: .8 !default;
pointer-events: none;
}
.picker-opt {
.picker-ios .picker-opt {
margin: 0;
padding: $picker-ios-option-padding;
@ -115,7 +107,7 @@ $picker-highlight-opacity: .8 !default;
pointer-events: auto;
}
.picker-above-highlight {
.picker-ios .picker-above-highlight {
position: absolute;
top: 0;
left: 0;
@ -134,7 +126,7 @@ $picker-highlight-opacity: .8 !default;
transform: translate3d(0, 0, 90px);
}
.picker-below-highlight {
.picker-ios .picker-below-highlight {
position: absolute;
top: $picker-ios-option-offset-y + $picker-ios-option-height - 4;
left: 0;

50
src/components/picker/picker.md.scss
View File

@ -1,5 +1,4 @@
@import "../../globals.md";
@import "./picker";
@import "../../themes/ionic.globals.md";
// Material Design Picker
// --------------------------------------------------
@ -12,7 +11,7 @@ $picker-md-toolbar-height: 44px !default;
$picker-md-toolbar-background-color: $picker-md-background-color !default;
$picker-md-button-height: $picker-md-toolbar-height !default;
$picker-md-button-text-color: $link-md-color !default;
$picker-md-button-text-color: color($colors-md, primary) !default;
$picker-md-button-background-color: transparent !default;
$picker-md-column-padding: 0 8px !default;
@ -24,20 +23,18 @@ $picker-md-option-height: 42px !default;
$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default;
$picker-md-option-selected-font-size: 22px !default;
$picker-md-option-selected-color: $link-md-color !default;
$picker-highlight-opacity: .8 !default;
$picker-md-option-selected-color: color($colors-md, primary) !default;
.picker-wrapper {
.picker-md .picker-wrapper {
height: $picker-md-height;
border-top: 1px solid $picker-md-border-color;
border-top: $hairlines-width solid $picker-md-border-color;
background: $picker-md-background-color;
}
.picker-toolbar {
.picker-md .picker-toolbar {
display: flex;
justify-content: flex-end;
@ -47,13 +44,8 @@ $picker-highlight-opacity: .8 !default;
background: $picker-md-toolbar-background-color;
}
.hairlines .picker-wrapper,
.hairlines .picker-toolbar {
border-width: $hairlines-width;
}
.picker-button,
.picker-button.activated {
.picker-md .picker-button,
.picker-md .picker-button.activated {
margin: 0;
height: $picker-md-button-height;
@ -64,21 +56,21 @@ $picker-highlight-opacity: .8 !default;
box-shadow: none;
}
.picker-columns {
.picker-md .picker-columns {
height: $picker-md-height - $picker-md-toolbar-height;
perspective: 1800px;
}
.picker-col {
.picker-md .picker-col {
padding: $picker-md-column-padding;
transform-style: preserve-3d;
}
.picker-prefix,
.picker-suffix,
.picker-opts {
.picker-md .picker-prefix,
.picker-md .picker-suffix,
.picker-md .picker-opts {
top: $picker-md-option-offset-y;
font-size: $picker-md-option-font-size;
@ -90,11 +82,11 @@ $picker-highlight-opacity: .8 !default;
pointer-events: none;
}
.picker-opts ion-button-effect {
.picker-md .picker-opts .button-effect {
display: none;
}
.picker-opt {
.picker-md .picker-opt {
margin: 0;
padding: $picker-md-option-padding;
@ -110,19 +102,19 @@ $picker-highlight-opacity: .8 !default;
pointer-events: auto;
}
.picker-opt .button-inner {
.picker-md .picker-opt .button-inner {
transition: 200ms;
}
.picker-prefix,
.picker-suffix,
.picker-opt-selected {
.picker-md .picker-prefix,
.picker-md .picker-suffix,
.picker-md .picker-opt-selected {
font-size: $picker-md-option-selected-font-size;
color: $picker-md-option-selected-color;
}
.picker-above-highlight {
.picker-md .picker-above-highlight {
position: absolute;
top: 0;
left: 0;
@ -140,7 +132,7 @@ $picker-highlight-opacity: .8 !default;
transform: translate3d(0, 0, 90px);
}
.picker-below-highlight {
.picker-md .picker-below-highlight {
position: absolute;
top: $picker-md-option-offset-y + $picker-md-option-height - 4;
left: 0;

56
src/components/picker/picker.wp.scss
View File

@ -1,5 +1,4 @@
@import "../../globals.wp";
@import "./picker";
@import "../../themes/ionic.globals.wp";
// Windows Picker
// --------------------------------------------------
@ -12,7 +11,7 @@ $picker-wp-toolbar-height: 44px !default;
$picker-wp-toolbar-background-color: $picker-wp-background-color !default;
$picker-wp-button-height: $picker-wp-toolbar-height !default;
$picker-wp-button-text-color: $link-wp-color !default;
$picker-wp-button-text-color: color($colors-wp, primary) !default;
$picker-wp-button-background-color: transparent !default;
$picker-wp-column-padding: 0 4px !default;
@ -24,48 +23,43 @@ $picker-wp-option-height: 42px !default;
$picker-wp-option-offset-y: (($picker-wp-height - $picker-wp-toolbar-height) / 2) - ($picker-wp-option-height / 2) - 10 !default;
$picker-wp-option-selected-font-size: 22px !default;
$picker-wp-option-selected-color: $link-wp-color !default;
$picker-highlight-opacity: .8 !default;
$picker-wp-option-selected-color: color($colors-wp, primary) !default;
.picker-wrapper {
.picker-wp .picker-wrapper {
height: $picker-wp-height;
border-top: 1px solid $picker-wp-border-color;
border-top: $hairlines-width solid $picker-wp-border-color;
background: $picker-wp-background-color;
}
.picker-toolbar {
.picker-wp .picker-toolbar {
display: flex;
justify-content: flex-end;
height: $picker-wp-toolbar-height;
border-width: $hairlines-width;
background: $picker-wp-toolbar-background-color;
}
.hairlines .picker-wrapper,
.hairlines .picker-toolbar {
border-width: $hairlines-width;
}
.picker-toolbar-button {
.picker-wp .picker-toolbar-button {
flex: 1;
text-align: right;
}
.picker-toolbar-cancel {
.picker-wp .picker-toolbar-cancel {
font-weight: normal;
text-align: left;
}
.picker-button,
.picker-button.activated {
.picker-wp .picker-button,
.picker-wp .picker-button.activated {
margin: 0;
height: $picker-wp-button-height;
@ -76,21 +70,21 @@ $picker-highlight-opacity: .8 !default;
box-shadow: none;
}
.picker-columns {
.picker-wp .picker-columns {
height: $picker-wp-height - $picker-wp-toolbar-height;
perspective: 1800px;
}
.picker-col {
.picker-wp .picker-col {
padding: $picker-wp-column-padding;
transform-style: preserve-3d;
}
.picker-prefix,
.picker-suffix,
.picker-opts {
.picker-wp .picker-prefix,
.picker-wp .picker-suffix,
.picker-wp .picker-opts {
top: $picker-wp-option-offset-y;
font-size: $picker-wp-option-font-size;
@ -102,11 +96,11 @@ $picker-highlight-opacity: .8 !default;
pointer-events: none;
}
.picker-opts ion-button-effect {
.picker-wp .picker-opts .button-effect {
display: none;
}
.picker-opt {
.picker-wp .picker-opt {
margin: 0;
padding: $picker-wp-option-padding;
@ -122,19 +116,19 @@ $picker-highlight-opacity: .8 !default;
pointer-events: auto;
}
.picker-opt .button-inner {
.picker-wp .picker-opt .button-inner {
transition: 200ms;
}
.picker-prefix,
.picker-suffix,
.picker-opt-selected {
.picker-wp .picker-prefix,
.picker-wp .picker-suffix,
.picker-wp .picker-opt-selected {
font-size: $picker-wp-option-selected-font-size;
color: $picker-wp-option-selected-color;
}
.picker-above-highlight {
.picker-wp .picker-above-highlight {
position: absolute;
top: 0;
left: 0;
@ -152,7 +146,7 @@ $picker-highlight-opacity: .8 !default;
transform: translate3d(0, 0, 90px);
}
.picker-below-highlight {
.picker-wp .picker-below-highlight {
position: absolute;
top: $picker-wp-option-offset-y + $picker-wp-option-height - 4;
left: 0;