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

A Vue2.x UI Project For Mobile & HyBrid

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

// iOS Label
// --------------------------------------------------

/// @prop - Margin of the label
@label-ios-margin: @item-ios-padding-top (@item-ios-padding-right / 2) @item-ios-padding-bottom 0;

// iOS Default Label
// --------------------------------------------------

.ion-label.label-ios {
  margin: @label-ios-margin;
}

// iOS Default Label Inside An Input/Select Item
// --------------------------------------------------

.label-ios + .ion-input .text-input,
.label-ios + .ion-textarea .text-input {
  margin-left: @item-ios-padding-left;

  width: ~'calc(100% - (@{item-ios-padding-right} / 2) - @{item-ios-padding-left})';
}

// iOS Stacked & Floating Labels
// --------------------------------------------------

.label-ios[stacked] {
  margin-bottom: 4px;

  font-size: 12px;
}

.label-ios[floating] {
  margin-bottom: 0;

  transform: translate3d(0, 27px, 0);
  transform-origin: left top;
  transition: transform 150ms ease-in-out;
}

.input-has-focus .label-ios[floating],
.input-has-value .label-ios[floating] {
  transform: translate3d(0, 0, 0) scale(.8);
}

.item-ios.item-label-stacked [item-right],
.item-ios.item-label-floating [item-right] {
  margin-top: @item-ios-padding-media-top - 2;
  margin-bottom: @item-ios-padding-media-bottom - 2;
}

// Generate iOS Label colors
// --------------------------------------------------
.get-all-colors(@type) {
  @name: e('colors-@{type}');
  @n: length(@@name);
  .loop(@n);
  .loop(@n) when (@n > 0) {
    .loop((@n - 1)); // next iteration
    @color-name: extract(@@name, @n);
    @color-name-mode: e('@{color-name}-@{type}');
    @color-base: @@color-name-mode;
    @color-contrast: contrast(@color-base, black, white, @contrast-threshold);

    // content
    .label-ios-@{color-name},
    .item-input .label-ios-@{color-name},
    .item-select .label-ios-@{color-name},
    .item-datetime .label-ios-@{color-name} {
      color: @color-base;
    }
  }
}

// action
.get-all-colors(ios);