vimo-dt/lib/components/textarea/backup/textarea.ios.less

A Vue2.x UI Project For Mobile & HyBrid

@import "../../../themes/default.ios.less";

// iOS Textarea
// --------------------------------------------------

/// @prop - Background color of the input
@text-input-ios-background-color: @list-ios-background-color;

/// @prop - Margin top of the input
@text-input-ios-margin-top: @item-ios-padding-top;

/// @prop - Margin right of the input
@text-input-ios-margin-right: (@item-ios-padding-right / 2);

/// @prop - Margin bottom of the input
@text-input-ios-margin-bottom: @item-ios-padding-bottom;

/// @prop - Margin left of the input
@text-input-ios-margin-left: 0px;

/// @prop - Color of the input highlight
@text-input-ios-highlight-color: @primary-ios;

/// @prop - Color of the input highlight when valid
@text-input-ios-highlight-color-valid: @text-input-highlight-color-valid;

/// @prop - Color of the input highlight when invalid
@text-input-ios-highlight-color-invalid: @text-input-highlight-color-invalid;

// iOS Default Textarea
// --------------------------------------------------

.text-input-ios {
  .placeholder(@text-input-placeholder-color);
  margin: @text-input-ios-margin-top @text-input-ios-margin-right @text-input-ios-margin-bottom @text-input-ios-margin-left;
  padding: 0;

  width: ~'calc(100% - @{text-input-ios-margin-right} - @{text-input-ios-margin-left})';
}

// iOS Highlighted Input
// --------------------------------------------------

// Input highlight mixin for focus
// mixin
.ios-input-highlight(@highlight-color) {
  border-bottom-color: @highlight-color;
}

// Show the focus highlight when the input has focus
.item-ios.item-input.input-has-focus.show-focus-highlight .item-inner {
  .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
.list-ios .item-input.input-has-focus.show-focus-highlight:last-child {
  .ios-input-highlight(@text-input-ios-highlight-color);

  .item-inner {
    box-shadow: none;
  }
}

// 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})';
}

// Show the valid highlight when it has the .ng-valid class and a value
.item-ios.item-input.ng-valid.input-has-value.show-valid-highlight:not(.input-has-focus) .item-inner {
  .ios-input-highlight(@text-input-ios-highlight-color-valid);
}

.list-ios .item-input.ng-valid.input-has-value.show-valid-highlight:not(.input-has-focus):last-child {
  .ios-input-highlight(@text-input-ios-highlight-color-valid);

  .item-inner {
    box-shadow: none;
  }
}

// Show the invalid highlight when it has the invalid class and has been touched
.item-ios.item-input.ng-invalid.ng-touched.show-invalid-highlight:not(.input-has-focus) .item-inner {
  .ios-input-highlight(@text-input-ios-highlight-color-invalid);
}

.list-ios .item-input.ng-invalid.ng-touched.show-invalid-highlight:not(.input-has-focus):last-child {
  .ios-input-highlight(@text-input-ios-highlight-color-invalid);

  .item-inner {
    box-shadow: none;
  }
}