diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss index 2ee89a3e46..41e203d778 100644 --- a/ionic/components/list/modes/md.scss +++ b/ionic/components/list/modes/md.scss @@ -113,6 +113,11 @@ ion-list[inset] { border-bottom-left-radius: $list-inset-md-border-radius; } + ion-input.item { + padding-right: 0; + padding-left: 0; + } + + ion-list[inset] { margin-top: 0; } diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss index bc22d0f8d8..a3fb2b242c 100644 --- a/ionic/components/text-input/modes/ios.scss +++ b/ionic/components/text-input/modes/ios.scss @@ -6,50 +6,45 @@ $input-label-ios-color: #7f7f7f !default; -ion-list, -ion-card { - - [text-input] { - margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; - padding: 0; - } - - ion-input[inset] [text-input] { - margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left; - padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); - } - - ion-label { - margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; - color: $input-label-ios-color; - } - - ion-label + [text-input] { - margin-left: $item-ios-padding-left; - } - - [stacked-label] ion-label { - font-size: 1.2rem; - margin-bottom: 4px; - } - - [stacked-label] [text-input], - [floating-label] [text-input] { - margin-left: 0; - margin-top: 8px; - margin-bottom: 8px; - } - - [floating-label] ion-label { - margin-bottom: 0; - transform-origin: left top; - transform: translate3d(0, 27px, 0); - transition: transform 150ms ease-in-out; - } - - [floating-label].has-focus ion-label, - [floating-label].has-value ion-label { - transform: translate3d(0, 0, 0) scale(0.8); - } - +[text-input] { + margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; + padding: 0; +} + +ion-input[inset] [text-input] { + margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left; + padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); +} + +ion-label { + margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; + color: $input-label-ios-color; +} + +ion-label + [text-input] { + margin-left: $item-ios-padding-left; +} + +[stacked-label] ion-label { + font-size: 1.2rem; + margin-bottom: 4px; +} + +[stacked-label] [text-input], +[floating-label] [text-input] { + margin-left: 0; + margin-top: 8px; + margin-bottom: 8px; +} + +[floating-label] ion-label { + margin-bottom: 0; + transform-origin: left top; + transform: translate3d(0, 27px, 0); + transition: transform 150ms ease-in-out; +} + +[floating-label].has-focus ion-label, +[floating-label].has-value ion-label { + transform: translate3d(0, 0, 0) scale(0.8); } diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss index 43ae0403b3..c62061e873 100644 --- a/ionic/components/text-input/modes/md.scss +++ b/ionic/components/text-input/modes/md.scss @@ -7,74 +7,65 @@ $text-input-highlight-color: map-get($colors, primary) !default; $input-label-md-color: #999 !default; -ion-list, -ion-card { - - [text-input] { - margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); - padding: 0; - } - - ion-input.item:before, - ion-input.item:after { - left: 0; - } - - ion-input[inset] [text-input] { - margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left; - padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2); - } - - ion-label { - margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); - color: $input-label-md-color; - } - - ion-input.has-focus:after { - border-top: 2px solid $text-input-highlight-color !important; - z-index: 1; - } - - ion-input.has-focus + ion-input:before { - border-top-color: $text-input-highlight-color !important; - } - - [stacked-label] ion-label { - font-size: 1.2rem; - margin-bottom: 0; - } - - [stacked-label] ion-label, - [floating-label] ion-label { - margin-left: 0; - } - - [stacked-label].has-focus ion-label, - [floating-label].has-focus ion-label { - color: $text-input-highlight-color; - } - - [stacked-label] [text-input], - [floating-label] [text-input] { - margin-bottom: 8px; - margin-top: 8px; - margin-left: 0; - } - - [floating-label] ion-label { - margin-bottom: 0; - transform-origin: left top; - transform: translate3d(0, 27px, 0); - transition: transform 150ms ease-in-out; - } - - [floating-label].has-focus ion-label, - [floating-label].has-value ion-label { - transform: translate3d(0, 0, 0) scale(0.8); - } +[text-input] { + margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); + padding: 0; } -ion-list[inset] ion-input.item { - padding-right: 0; - padding-left: 0; +ion-input.item:before, +ion-input.item:after { + left: 0; +} + +ion-input[inset] [text-input] { + margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left; + padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2); +} + +ion-label { + margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); + color: $input-label-md-color; +} + +ion-input.has-focus:after { + border-top: 2px solid $text-input-highlight-color !important; + z-index: 1; +} + +ion-input.has-focus + ion-input:before { + border-top-color: $text-input-highlight-color !important; +} + +[stacked-label] ion-label { + font-size: 1.2rem; + margin-bottom: 0; +} + +[stacked-label] ion-label, +[floating-label] ion-label { + margin-left: 0; +} + +[stacked-label].has-focus ion-label, +[floating-label].has-focus ion-label { + color: $text-input-highlight-color; +} + +[stacked-label] [text-input], +[floating-label] [text-input] { + margin-bottom: 8px; + margin-top: 8px; + margin-left: 0; +} + +[floating-label] ion-label { + margin-bottom: 0; + transform-origin: left top; + transform: translate3d(0, 27px, 0); + transition: transform 150ms ease-in-out; +} + +[floating-label].has-focus ion-label, +[floating-label].has-value ion-label { + transform: translate3d(0, 0, 0) scale(0.8); } diff --git a/ionic/components/text-input/test/inline-labels/main.html b/ionic/components/text-input/test/inline-labels/main.html index d7a32de256..bdd43cd9b1 100644 --- a/ionic/components/text-input/test/inline-labels/main.html +++ b/ionic/components/text-input/test/inline-labels/main.html @@ -78,9 +78,11 @@ -
- -
+ + No List + + +