javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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 2282 additions and 2675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/label/label.wp.scss
View File

@ -1,5 +1,4 @@
@import "../../globals.wp";
@import "./label";
@import "../../themes/ionic.globals.wp";
// Windows Label
// --------------------------------------------------
@ -11,7 +10,7 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default;
// Windows Default Label
// --------------------------------------------------
ion-label {
.label-wp {
margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0;
}
@ -19,9 +18,9 @@ ion-label {
// Windows Default Label Inside An Input/Select Item
// --------------------------------------------------
.item-input ion-label,
.item-select ion-label,
.item-datetime ion-label {
.item-input .label-wp,
.item-select .label-wp,
.item-datetime .label-wp {
color: $label-wp-text-color;
}
@ -29,33 +28,33 @@ ion-label {
// Windows Stacked & Floating Labels
// --------------------------------------------------
ion-label[stacked] {
.label-wp[stacked] {
font-size: 1.2rem;
}
ion-label[floating] {
.label-wp[floating] {
transform: translate3d(8px, 34px, 0);
transform-origin: left top;
}
ion-label[stacked],
ion-label[floating] {
.label-wp[stacked],
.label-wp[floating] {
margin-bottom: 0;
margin-left: 0;
}
.input-has-focus ion-label[stacked],
.input-has-focus ion-label[floating] {
.input-has-focus .label-wp[stacked],
.input-has-focus .label-wp[floating] {
color: $label-wp-text-color-focused;
}
.input-has-focus ion-label[floating],
.input-has-value ion-label[floating] {
.input-has-focus .label-wp[floating],
.input-has-value .label-wp[floating] {
transform: translate3d(0, 0, 0) scale(.8);
}
.item-label-stacked [item-right],
.item-label-floating [item-right] {
.item-wp.item-label-stacked [item-right],
.item-wp.item-label-floating [item-right] {
margin-top: $item-wp-padding-media-top + 4;
margin-bottom: $item-wp-padding-media-top + 4;
}
@ -66,10 +65,10 @@ ion-label[floating] {
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
.label-#{$color-name},
.item-input .label-#{$color-name},
.item-select .label-#{$color-name},
.item-datetime .label-#{$color-name} {
.label-wp-#{$color-name},
.item-input .label-wp-#{$color-name},
.item-select .label-wp-#{$color-name},
.item-datetime .label-wp-#{$color-name} {
color: $color-base;
}