diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss index dfdc75b6c1..996e11ee74 100644 --- a/packages/core/src/components/alert/alert.ios.scss +++ b/packages/core/src/components/alert/alert.ios.scss @@ -107,7 +107,7 @@ .alert-ios .alert-tappable { display: flex; - min-height: $alert-ios-button-min-height; + min-height: $alert-ios-tappable-min-height; } diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss index 2966078d0e..f262345cf9 100644 --- a/packages/core/src/components/alert/alert.ios.vars.scss +++ b/packages/core/src/components/alert/alert.ios.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.ios"; +@import "../item/item.vars"; + // iOS Alert // -------------------------------------------------- @@ -281,3 +283,6 @@ $alert-ios-translucent-filter: saturate(180%) blur(20px) !defau /// @prop - Opacity of the translucent alert $alert-ios-translucent-opacity: .88 !default; + +/// @prop - Minimum height of the tappable inputs in the checkbox alert +$alert-ios-tappable-min-height: $item-min-height !default; \ No newline at end of file diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss index 927133b11e..573f2c2e0a 100644 --- a/packages/core/src/components/alert/alert.md.scss +++ b/packages/core/src/components/alert/alert.md.scss @@ -90,8 +90,7 @@ overflow: hidden; - // TODO this should be a variable that matches item - min-height: 4.4rem; + min-height: $alert-md-tappable-min-height; } diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss index a51808aac5..db7817a164 100644 --- a/packages/core/src/components/alert/alert.md.vars.scss +++ b/packages/core/src/components/alert/alert.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.vars"; + // Material Design Alert // -------------------------------------------------- @@ -311,3 +313,6 @@ $alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert- /// @prop - Transform of the icon in the checkbox alert $alert-md-checkbox-icon-transform: rotate(45deg) !default; + +/// @prop - Minimum height of the tappable inputs in the checkbox alert +$alert-md-tappable-min-height: $item-min-height !default; diff --git a/packages/core/src/components/app/app.ios.scss b/packages/core/src/components/app/app.ios.scss index 5dd3b827b2..cb2e59a955 100644 --- a/packages/core/src/components/app/app.ios.scss +++ b/packages/core/src/components/app/app.ios.scss @@ -23,4 +23,8 @@ } } +a { + color: $link-ios-color; +} + @import "../icon/icon.ios"; diff --git a/packages/core/src/components/app/app.md.scss b/packages/core/src/components/app/app.md.scss index aa34acd458..7c0fdbb02a 100644 --- a/packages/core/src/components/app/app.md.scss +++ b/packages/core/src/components/app/app.md.scss @@ -22,4 +22,8 @@ } } +a { + color: $link-md-color; +} + @import "../icon/icon.md"; diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss index 355a3cb55d..cdb63f024a 100644 --- a/packages/core/src/components/content/content.scss +++ b/packages/core/src/components/content/content.scss @@ -16,12 +16,6 @@ ion-content { padding: 0 !important; // scss-lint:disable all } -a { - // TODO - // color: $link-color; -} - - // Scrollable Content // -------------------------------------------------- diff --git a/packages/core/src/components/input/input.ios.scss b/packages/core/src/components/input/input.ios.scss index 86422e5cc2..08aa7eceb4 100644 --- a/packages/core/src/components/input/input.ios.scss +++ b/packages/core/src/components/input/input.ios.scss @@ -24,6 +24,8 @@ // iOS Highlighted Input // -------------------------------------------------- +// TODO this is angular specific scss + // Input highlight mixin for focus, valid, and invalid states @mixin ios-input-highlight($highlight-color) { border-bottom-color: $highlight-color; @@ -34,17 +36,13 @@ // In order to get a 2px border we need to add an inset // box-shadow 1px (this is to avoid the div resizing) - // TODO remove all uses of input-has-focus in v4 - // TODO remove all uses of input-has-value in v4 - .item-ios.item-input.item-input-has-focus .item-inner, - .item-ios.item-input.input-has-focus .item-inner { + .item-ios.item-input.item-input-has-focus .item-inner { @include ios-input-highlight($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 - .list-ios .item-input.item-input-has-focus:last-child, - .list-ios .item-input.input-has-focus:last-child { + .list-ios .item-input.item-input-has-focus:last-child { @include ios-input-highlight($input-ios-highlight-color); .item-inner { @@ -55,13 +53,11 @@ // Show the valid highlight when it has the .ng-valid class and a value @if ($input-ios-show-valid-highlight) { - .item-ios.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, - .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner { + .item-ios.item-input.ng-valid.item-input-has-value:not(.item-input-has-focus) .item-inner { @include ios-input-highlight($input-ios-highlight-color-valid); } - .list-ios .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child, - .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child { + .list-ios .item-input.ng-valid.item-input-has-value:not(.item-input-has-focus):last-child { @include ios-input-highlight($input-ios-highlight-color-valid); .item-inner { @@ -72,11 +68,11 @@ // Show the invalid highlight when it has the invalid class and has been touched @if ($input-ios-show-invalid-highlight) { - .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner { + .item-ios.item-input.ng-invalid.ng-touched:not(.item-input-has-focus) .item-inner { @include ios-input-highlight($input-ios-highlight-color-invalid); } - .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child { + .list-ios .item-input.ng-invalid.ng-touched:not(.item-input-has-focus):last-child { @include ios-input-highlight($input-ios-highlight-color-invalid); .item-inner { diff --git a/packages/core/src/components/input/input.md.scss b/packages/core/src/components/input/input.md.scss index 3ae21ac27c..94f800746f 100644 --- a/packages/core/src/components/input/input.md.scss +++ b/packages/core/src/components/input/input.md.scss @@ -35,16 +35,13 @@ // In order to get a 2px border we need to add an inset // box-shadow 1px (this is to avoid the div resizing) - // TODO remove all uses of input-has-focus in v4 - .item-md.item-input.item-input-has-focus .item-inner, - .item-md.item-input.input-has-focus .item-inner { + .item-md.item-input.item-input-has-focus .item-inner { @include md-input-highlight($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 - .list-md .item-input.item-input-has-focus:last-child, - .list-md .item-input.input-has-focus:last-child { + .list-md .item-input.item-input-has-focus:last-child { @include md-input-highlight($input-md-highlight-color); .item-inner { @@ -53,17 +50,15 @@ } } +// TODO this is angular specific scss + // Show the valid highlight when it has the .ng-valid class and a value @if ($input-md-show-valid-highlight) { - // TODO remove all uses of input-has-focus in v4 - // TODO remove all uses of input-has-value in v4 - .item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, - .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner { + .item-md.item-input.ng-valid.item-input-has-value:not(.item-input-has-focus) .item-inner { @include md-input-highlight($input-md-highlight-color-valid); } - .list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child, - .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child { + .list-md .item-input.ng-valid.item-input-has-value:not(.item-input-has-focus):last-child { @include md-input-highlight($input-md-highlight-color-valid); .item-inner { @@ -74,11 +69,11 @@ // Show the invalid highlight when it has the invalid class and has been touched @if ($input-md-show-invalid-highlight) { - .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner { + .item-md.item-input.ng-invalid.ng-touched:not(.item-input-has-focus) .item-inner { @include md-input-highlight($input-md-highlight-color-invalid); } - .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child { + .list-md .item-input.ng-invalid.ng-touched:not(.item-input-has-focus):last-child { @include md-input-highlight($input-md-highlight-color-invalid); .item-inner { diff --git a/packages/core/src/components/input/input.scss b/packages/core/src/components/input/input.scss index bb5441c495..ec2a186636 100644 --- a/packages/core/src/components/input/input.scss +++ b/packages/core/src/components/input/input.scss @@ -145,8 +145,6 @@ input.text-input:-webkit-autofill { background-repeat: no-repeat; } -// TODO remove all uses of input-has-focus in v4 -// TODO remove all uses of input-has-value in v4 .item-input-has-focus.item-input-has-value .text-input-clear-icon { display: block; } diff --git a/packages/core/src/components/item/item.scss b/packages/core/src/components/item/item.scss index 702ee852cb..2b706ab698 100644 --- a/packages/core/src/components/item/item.scss +++ b/packages/core/src/components/item/item.scss @@ -1,4 +1,4 @@ -@import "../../themes/ionic.globals"; +@import "./item.vars"; // Item // -------------------------------------------------- @@ -20,7 +20,6 @@ ion-item { contain: content; } - .item-block { @include margin(0); @include padding(0); @@ -33,7 +32,7 @@ ion-item { justify-content: space-between; width: 100%; - min-height: 4.4rem; + min-height: $item-min-height; border: 0; diff --git a/packages/core/src/components/item/item.vars.scss b/packages/core/src/components/item/item.vars.scss new file mode 100644 index 0000000000..ebccdc06d7 --- /dev/null +++ b/packages/core/src/components/item/item.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals"; + +// Item +// -------------------------------------------------- + +/// @prop - Minimum height of the item +$item-min-height: 44px !default; \ No newline at end of file diff --git a/packages/core/src/components/label/label.ios.scss b/packages/core/src/components/label/label.ios.scss index 22ad5cd961..d1ea478a97 100644 --- a/packages/core/src/components/label/label.ios.scss +++ b/packages/core/src/components/label/label.ios.scss @@ -48,12 +48,8 @@ transition: transform 150ms ease-in-out; } -// TODO remove all uses of input-has-focus in v4 -// TODO remove all uses of input-has-value in v4 .item-input-has-focus .label-ios[floating], -.input-has-focus .label-ios[floating], -.item-input-has-value .label-ios[floating], -.input-has-value .label-ios[floating] { +.item-input-has-value .label-ios[floating] { @include transform(translate3d(0, 0, 0), scale(.8)); } @@ -63,9 +59,7 @@ } .item-input-has-focus .label-ios[stacked], -.input-has-focus .label-ios[stacked], -.item-input-has-focus .label-ios[floating], -.input-has-focus .label-ios[floating] { +.item-input-has-focus .label-ios[floating] { color: $label-ios-text-color-focused; } diff --git a/packages/core/src/components/label/label.md.scss b/packages/core/src/components/label/label.md.scss index b002ea72b6..be88853350 100644 --- a/packages/core/src/components/label/label.md.scss +++ b/packages/core/src/components/label/label.md.scss @@ -8,10 +8,9 @@ @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start); } -// TODO uncomment this and get working [text-wrap] .label-md { - // font-size: $item-md-body-text-font-size; - // line-height: $item-md-body-text-line-height; + font-size: $label-md-text-wrap-font-size; + line-height: $label-md-text-wrap-line-height; } // Material Design Default Label Inside An Input/Select Item @@ -43,19 +42,13 @@ @include margin(null, null, 0, 0); } -// TODO remove all uses of input-has-focus in v4 -// TODO remove all uses of input-has-value in v4 .item-input-has-focus .label-md[stacked], -.input-has-focus .label-md[stacked], -.item-input-has-focus .label-md[floating], -.input-has-focus .label-md[floating] { +.item-input-has-focus .label-md[floating] { color: $label-md-text-color-focused; } .item-input-has-focus .label-md[floating], -.input-has-focus .label-md[floating], -.item-input-has-value .label-md[floating], -.input-has-value .label-md[floating] { +.item-input-has-value .label-md[floating] { @include transform(translate3d(0, 0, 0), scale(.8)); } diff --git a/packages/core/src/components/label/label.md.vars.scss b/packages/core/src/components/label/label.md.vars.scss index a88b8a18f2..79a84b678d 100644 --- a/packages/core/src/components/label/label.md.vars.scss +++ b/packages/core/src/components/label/label.md.vars.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals.md"; +@import "../item/item.md.vars"; + // Material Design Label // -------------------------------------------------- @@ -20,3 +22,9 @@ $label-md-margin-bottom: $item-md-padding-bottom !default; /// @prop - Margin start of the label $label-md-margin-start: 0 !default; + +/// @prop - Font size of the label when the text wraps +$label-md-text-wrap-font-size: $item-md-body-text-font-size !default; + +/// @prop - Line height of the label when the text wraps +$label-md-text-wrap-line-height: $item-md-body-text-line-height !default; diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss index 8116227275..7bb9bf5654 100644 --- a/packages/core/src/components/select/select.scss +++ b/packages/core/src/components/select/select.scss @@ -39,7 +39,6 @@ ion-select { @include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start); } -// TODO remove .select-option { display: none; } diff --git a/packages/core/src/themes/ionic.mixins.scss b/packages/core/src/themes/ionic.mixins.scss index cfee41e838..d8fad6a1fa 100644 --- a/packages/core/src/themes/ionic.mixins.scss +++ b/packages/core/src/themes/ionic.mixins.scss @@ -184,14 +184,14 @@ // If deprecated variable exists, use it, otherwise, use alternative // @param {string} $property - property to default +// @param {string} $variable-name - the deprecated variable's name // @param {string} $variable - the deprecated variable // ---------------------------------------------------------- -@mixin deprecated-variable($property, $variable) { +@mixin deprecated-variable($property, $variable-name, $variable) { @if $variable == null { @content; } @else { - // TODO find variable name - @warn "you are using a deprecated variable"; + @warn "you are using a deprecated variable: #{$variable-name}"; #{$property}: $variable; } } diff --git a/packages/core/src/themes/ionic.theme.dark.ios.scss b/packages/core/src/themes/ionic.theme.dark.ios.scss index e034224f5d..17a221aa92 100644 --- a/packages/core/src/themes/ionic.theme.dark.ios.scss +++ b/packages/core/src/themes/ionic.theme.dark.ios.scss @@ -5,6 +5,7 @@ $colors-ios: copy-colors($colors) !default; +$link-ios-color: $link-color !default; $text-ios-color: $text-color !default; $background-ios-color: $background-color !default; $subdued-text-ios-color: $subdued-text-color !default; diff --git a/packages/core/src/themes/ionic.theme.dark.md.scss b/packages/core/src/themes/ionic.theme.dark.md.scss index cc3bd5e9e4..6e6bdd0791 100644 --- a/packages/core/src/themes/ionic.theme.dark.md.scss +++ b/packages/core/src/themes/ionic.theme.dark.md.scss @@ -6,6 +6,7 @@ $colors-md: copy-colors($colors) !default; +$link-md-color: $link-color !default; $text-md-color: $text-color !default; $background-md-color: $background-color !default; $subdued-text-md-color: $subdued-text-color !default; diff --git a/packages/core/src/themes/ionic.theme.default.ios.scss b/packages/core/src/themes/ionic.theme.default.ios.scss index d11c7f4f42..e5a734d467 100644 --- a/packages/core/src/themes/ionic.theme.default.ios.scss +++ b/packages/core/src/themes/ionic.theme.default.ios.scss @@ -6,6 +6,7 @@ $colors-ios: copy-colors($colors) !default; +$link-ios-color: $link-color !default; $text-ios-color: $text-color !default; $background-ios-color: $background-color !default; $subdued-text-ios-color: $subdued-text-color !default; diff --git a/packages/core/src/themes/ionic.theme.default.md.scss b/packages/core/src/themes/ionic.theme.default.md.scss index 6b269ca6b8..91db8fea3b 100644 --- a/packages/core/src/themes/ionic.theme.default.md.scss +++ b/packages/core/src/themes/ionic.theme.default.md.scss @@ -6,6 +6,7 @@ $colors-md: copy-colors($colors) !default; +$link-md-color: $link-color !default; $text-md-color: $text-color !default; $background-md-color: $background-color !default; $subdued-text-md-color: $subdued-text-color !default;