diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 8b686b40c0..1b48c6d3d8 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -3,8 +3,14 @@ // iOS Label // -------------------------------------------------- +/// @prop - Text color of the label by an input, select, or datetime +$label-ios-text-color: unset !default; + +/// @prop - Text color of the stacked/floating label when it is focused +$label-ios-text-color-focused: unset !default; + /// @prop - Margin of the label -$label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0 !default; +$label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0 !default; // iOS Default Label @@ -18,6 +24,16 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / // iOS Default Label Inside An Input/Select Item // -------------------------------------------------- +.item-input .label-ios, +.item-select .label-ios, +.item-datetime .label-ios { + color: $label-ios-text-color; +} + + +// iOS Input By Label +// -------------------------------------------------- + .label-ios + ion-input .text-input, .label-ios + ion-textarea .text-input, .label-ios + .input + .cloned-input { @@ -59,6 +75,11 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / margin-bottom: $item-ios-padding-media-bottom - 2; } +.input-has-focus .label-ios[stacked], +.input-has-focus .label-ios[floating] { + color: $label-ios-text-color-focused; +} + // Generate iOS Label colors // -------------------------------------------------- diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 484e157f91..6276b7d720 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -3,10 +3,10 @@ // Material Design Label // -------------------------------------------------- -/// @prop - Text color of the label +/// @prop - Text color of the label by an input, select, or datetime $label-md-text-color: #999 !default; -/// @prop - Text color of the label when it has focused +/// @prop - Text color of the stacked/floating label when it is focused $label-md-text-color-focused: color($colors-md, primary) !default; /// @prop - Margin of the label diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index ccb55ddcad..94f2f1c294 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -3,10 +3,10 @@ // Windows Label // -------------------------------------------------- -/// @prop - Text color of the label +/// @prop - Text color of the label by an input, select, or datetime $label-wp-text-color: #999 !default; -/// @prop - Text color of the label when it has focused +/// @prop - Text color of the stacked/floating label when it is focused $label-wp-text-color-focused: color($colors-wp, primary) !default;