74 lines
2.4 KiB
SCSS
74 lines
2.4 KiB
SCSS
|
|
||
|
|
.button-ios {
|
||
|
|
min-height: $button-ios-height
|
||
|
|
}
|
||
|
|
|
||
|
|
// Light buttons color.
|
||
|
|
.button-ios-light {
|
||
|
|
color: color($colors, primary, base);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Highlights inside the input element.
|
||
|
|
@if ($mm-text-input-ios-show-highlight) {
|
||
|
|
.card-ios, .list-ios {
|
||
|
|
// In order to get a 2px border we need to add an inset
|
||
|
|
// box-shadow 1px (this is to avoid the div resizing)
|
||
|
|
|
||
|
|
// The last item in a list has a border on the item, not the
|
||
|
|
// inner item, so add it to the item itself
|
||
|
|
.item-input.item-input-has-focus:last-child,
|
||
|
|
.item-input.input-has-focus:last-child {
|
||
|
|
@include ios-input-highlight($text-input-ios-highlight-color);
|
||
|
|
|
||
|
|
.item-inner ion-input {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show the focus highlight when the input has focus
|
||
|
|
.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
|
||
|
|
.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
|
||
|
|
@include ios-input-highlight($text-input-ios-highlight-color-valid);
|
||
|
|
|
||
|
|
.item-inner ion-input {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
|
||
|
|
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
|
||
|
|
|
||
|
|
.item-inner ion-input {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-ios.item-input {
|
||
|
|
.item-inner {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.item-block .item-inner ion-input {
|
||
|
|
border-bottom: $hairlines-width solid $list-border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO remove all uses of input-has-focus in v4
|
||
|
|
&.item-input-has-focus .item-inner ion-input,
|
||
|
|
&.input-has-focus .item-inner ion-input {
|
||
|
|
@include ios-input-highlight($text-input-ios-highlight-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show the valid highlight when it has the .ng-valid class and a value
|
||
|
|
&.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input,
|
||
|
|
&.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
|
||
|
|
@include ios-input-highlight($text-input-ios-highlight-color-valid);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show the invalid highlight when it has the invalid class and has been touched
|
||
|
|
&.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner ion-input {
|
||
|
|
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|