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

113
src/components/input/input.ios.scss
View File

@@ -1,5 +1,4 @@
@import "../../globals.ios";
@import "./input";
@import "../../themes/ionic.globals.ios";
// iOS Input
// --------------------------------------------------
@@ -28,7 +27,7 @@ $text-input-ios-highlight-color-invalid: color($colors-ios, danger) !default;
// iOS Default Input
// --------------------------------------------------
.text-input {
.text-input-ios {
margin: $text-input-ios-margin-top $text-input-ios-margin-right $text-input-ios-margin-bottom $text-input-ios-margin-left;
padding: 0;
@@ -39,59 +38,12 @@ $text-input-ios-highlight-color-invalid: color($colors-ios, danger) !default;
// iOS Inset Input
// --------------------------------------------------
.inset-input {
.input-ios .inset-input {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}
// iOS Stacked & Floating Inputs
// --------------------------------------------------
.item-label-stacked .text-input,
.item-label-floating .text-input {
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0;
width: calc(100% - #{$text-input-ios-margin-right});
}
.item-label-stacked ion-select,
.item-label-floating ion-select {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 0;
}
.item-label-floating .text-input.cloned-input,
.item-label-stacked .text-input.cloned-input {
top: 30px;
}
// iOS Clear Input Icon
// --------------------------------------------------
ion-input[clearInput] {
position: relative;
.text-input {
padding-right: $text-input-ios-input-clear-icon-width;
}
}
.text-input-clear-icon {
@include svg-background-image($text-input-ios-input-clear-icon-svg);
right: ($item-ios-padding-right / 2);
width: $text-input-ios-input-clear-icon-width;
background-size: $text-input-ios-input-clear-icon-size;
}
// iOS Highlighted Input
// --------------------------------------------------
@@ -104,13 +56,13 @@ ion-input[clearInput] {
@if ($text-input-ios-show-focus-highlight) {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
.item-input.input-has-focus .item-inner {
.item-ios.item-input.input-has-focus .item-inner {
@include ios-input-highlight($text-input-ios-highlight-color);
}
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
ion-list .item-input.input-has-focus:last-child {
.list-ios .item-input.input-has-focus:last-child {
@include ios-input-highlight($text-input-ios-highlight-color);
.item-inner {
@@ -121,11 +73,11 @@ ion-input[clearInput] {
// Show the valid highlight when it has the .ng-valid class and a value
@if ($text-input-ios-show-valid-highlight) {
.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
.item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
@include ios-input-highlight($text-input-ios-highlight-color-valid);
}
ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
.list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
@include ios-input-highlight($text-input-ios-highlight-color-valid);
.item-inner {
@@ -136,11 +88,11 @@ ion-input[clearInput] {
// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-ios-show-invalid-highlight) {
.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
.item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
}
ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
.list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
.item-inner {
@@ -148,3 +100,50 @@ ion-input[clearInput] {
}
}
}
// iOS Stacked & Floating Inputs
// --------------------------------------------------
.item-ios.item-label-stacked .text-input,
.item-ios.item-label-floating .text-input {
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0;
width: calc(100% - #{$text-input-ios-margin-right});
}
.item-label-stacked .select-ios,
.item-label-floating .select-ios {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 0;
}
.item-label-floating .text-input-ios.cloned-input,
.item-label-stacked .text-input-ios.cloned-input {
top: 30px;
}
// iOS Clear Input Icon
// --------------------------------------------------
.input-ios[clearInput] {
position: relative;
}
.input-ios .text-input {
padding-right: $text-input-ios-input-clear-icon-width;
}
.input-ios .text-input-clear-icon {
@include svg-background-image($text-input-ios-input-clear-icon-svg);
right: ($item-ios-padding-right / 2);
width: $text-input-ios-input-clear-icon-width;
background-size: $text-input-ios-input-clear-icon-size;
}

43
src/components/input/input.md.scss
View File

@@ -1,5 +1,4 @@
@import "../../globals.md";
@import "./input";
@import "../../themes/ionic.globals.md";
// Material Design Input
// --------------------------------------------------
@@ -28,7 +27,7 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
// Material Design Default Input
// --------------------------------------------------
.text-input {
.text-input-md {
margin: $text-input-md-margin-top $text-input-md-margin-right $text-input-md-margin-bottom $text-input-md-margin-left;
padding: 0;
@@ -39,7 +38,7 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
// Material Design Inset Input
// --------------------------------------------------
.inset-input {
.input-md .inset-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);
}
@@ -58,13 +57,13 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
@if ($text-input-md-show-focus-highlight) {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
.item-input.input-has-focus .item-inner {
.item-md.item-input.input-has-focus .item-inner {
@include md-input-highlight($text-input-md-highlight-color);
}
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
ion-list .item-input.input-has-focus:last-child {
.list-md .item-input.input-has-focus:last-child {
@include md-input-highlight($text-input-md-highlight-color);
.item-inner {
@@ -75,11 +74,11 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
// Show the valid highlight when it has the .ng-valid class and a value
@if ($text-input-md-show-valid-highlight) {
.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
@include md-input-highlight($text-input-md-highlight-color-valid);
}
ion-list .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
@include md-input-highlight($text-input-md-highlight-color-valid);
.item-inner {
@@ -90,11 +89,11 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-md-show-invalid-highlight) {
.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
@include md-input-highlight($text-input-md-highlight-color-invalid);
}
ion-list .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
@include md-input-highlight($text-input-md-highlight-color-invalid);
.item-inner {
@@ -107,8 +106,8 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
// Material Design Stacked & Floating Inputs
// --------------------------------------------------
.item-label-stacked .text-input,
.item-label-floating .text-input {
.item-label-stacked .text-input-md,
.item-label-floating .text-input-md {
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0;
@@ -116,18 +115,18 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
width: calc(100% - #{$text-input-md-margin-right});
}
.item-label-stacked ion-select,
.item-label-floating ion-select {
.item-label-stacked .select-md,
.item-label-floating .select-md {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 0;
}
.item-label-floating .text-input.cloned-input {
.item-label-floating .text-input-md.cloned-input {
top: 32px;
}
.item-label-stacked .text-input.cloned-input {
.item-label-stacked .text-input-md.cloned-input {
top: 27px;
}
@@ -135,15 +134,15 @@ $text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
// Material Design Clear Input Icon
// --------------------------------------------------
ion-input[clearInput] {
.input-md[clearInput] {
position: relative;
.text-input {
padding-right: $text-input-md-input-clear-icon-width;
}
}
.text-input-clear-icon {
.input-md[clearInput] .text-input {
padding-right: $text-input-md-input-clear-icon-width;
}
.input-md .text-input-clear-icon {
@include svg-background-image($text-input-md-input-clear-icon-svg);
right: ($item-md-padding-right / 2);

41
src/components/input/input.wp.scss
View File

@@ -1,5 +1,4 @@
@import "../../globals.wp";
@import "./input";
@import "../../themes/ionic.globals.wp";
// Windows Input
// --------------------------------------------------
@@ -33,7 +32,7 @@ $text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
// Windows Default Input
// --------------------------------------------------
.text-input {
.text-input-wp {
margin: $text-input-wp-margin-top $text-input-wp-margin-right $text-input-wp-margin-bottom $text-input-wp-margin-left;
padding: $text-input-wp-padding-vertical $text-input-wp-padding-horizontal;
@@ -47,7 +46,7 @@ $text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
// Windows Inset Input
// --------------------------------------------------
.inset-input {
.item-wp .inset-input {
margin: ($item-wp-padding-top / 2) $item-wp-padding-right ($item-wp-padding-bottom / 2) $item-wp-padding-left;
padding: ($item-wp-padding-top / 2) ($item-wp-padding-right / 2) ($item-wp-padding-bottom / 2) ($item-wp-padding-left / 2);
}
@@ -58,21 +57,21 @@ $text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
// Show the focus highlight when the input has focus
@if ($text-input-wp-show-focus-highlight) {
.item-input.input-has-focus .text-input {
.item-wp.item-input.input-has-focus .text-input {
border-color: $text-input-wp-highlight-color;
}
}
// Show the valid highlight when it has the .ng-valid class and a value
@if ($text-input-wp-show-valid-highlight) {
.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
.item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
border-color: $text-input-wp-highlight-color-valid;
}
}
// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-wp-show-invalid-highlight) {
.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
.item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
border-color: $text-input-wp-highlight-color-invalid;
}
}
@@ -81,10 +80,10 @@ $text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
// Windows Stacked & Floating Inputs
// --------------------------------------------------
.item-label-stacked .text-input,
.item-label-floating .text-input,
.item-label-stacked ion-select,
.item-label-floating ion-select {
.item-label-stacked .text-input-wp,
.item-label-floating .text-input-wp,
.item-label-stacked .select-wp,
.item-label-floating .select-wp {
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0;
@@ -92,31 +91,31 @@ $text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
width: calc(100% - #{$text-input-wp-margin-right});
}
.item-label-floating .text-input.cloned-input {
.item-label-floating .text-input-wp.cloned-input {
top: 32px;
}
.item-label-stacked .text-input.cloned-input {
.item-label-stacked .text-input-wp.cloned-input {
top: 27px;
}
.item-label-stacked [item-right],
.item-label-floating [item-right] {
.item-wp.item-label-stacked [item-right],
.item-wp.item-label-floating [item-right] {
align-self: flex-end;
}
// Windows Clear Input Icon
// --------------------------------------------------
ion-input[clearInput] {
.input-wp[clearInput] {
position: relative;
.text-input {
padding-right: $text-input-wp-input-clear-icon-width;
}
}
.text-input-clear-icon {
.input-wp[clearInput] .text-input {
padding-right: $text-input-wp-input-clear-icon-width;
}
.input-wp .text-input-clear-icon {
@include svg-background-image($text-input-wp-input-clear-icon-svg);
right: ($item-wp-padding-right / 2);