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

A Vue2.x UI Project For Mobile & HyBrid

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

// iOS List
// --------------------------------------------------

/// @prop - Margin top of the list
@list-ios-margin-top: 10px;

/// @prop - Margin right of the list
@list-ios-margin-right: 0;

/// @prop - Margin bottom of the list
@list-ios-margin-bottom: 32px;

/// @prop - Margin left of the list
@list-ios-margin-left: 0;

/// @prop - Margin top of the inset list
@list-inset-ios-margin-top: 16px;

/// @prop - Margin right of the inset list
@list-inset-ios-margin-right: 16px;

/// @prop - Margin bottom of the inset list
@list-inset-ios-margin-bottom: 16px;

/// @prop - Margin left of the inset list
@list-inset-ios-margin-left: 16px;

/// @prop - Border radius of the inset list
@list-inset-ios-border-radius: 4px;

/// @prop - Padding left of the header in a list
@list-ios-header-padding-left: @item-ios-padding-left;

/// @prop - Border bottom of the header in a list
@list-ios-header-border-bottom: @hairlines-width solid @list-ios-border-color;

/// @prop - Font size of the header in a list
@list-ios-header-font-size: 12px;

/// @prop - Font weight of the header in a list
@list-ios-header-font-weight: 500;

/// @prop - Letter spacing of the header in a list
@list-ios-header-letter-spacing: 1px;

/// @prop - Text transform of the header in a list
@list-ios-header-text-transform: uppercase;

/// @prop - Text color of the header in a list
@list-ios-header-color: #333;

/// @prop - Background color of the header in a list
@list-ios-header-background-color: transparent;

// iOS Default List
// --------------------------------------------------

.ion-list.list-ios {
  margin: -1px @list-ios-margin-right @list-ios-margin-bottom @list-ios-margin-left; /* no */
}

.list-ios > .item-block:first-child {
  border-top: @hairlines-width solid @list-ios-border-color; /* no */
}

.list-ios > .item-block:last-child,
.list-ios > .item-wrapper:last-child .item-block {
  border-bottom: @hairlines-width solid @list-ios-border-color; /* no */
}

.list-ios > .item-block:last-child .item-inner,
.list-ios > .item-wrapper:last-child .item-block .item-inner {
  border-bottom: 0;
}

.list-ios .item-block .item-inner {
  border-bottom: @hairlines-width solid @list-ios-border-color; /* no */
}

// If the item has the no-lines attribute remove the bottom border from:
// the item itself (for last-child items)
// the item-inner class (if it is not last)
.list-ios .ion-item[no-lines],
.list-ios .ion-item[no-lines] .item-inner {
  border-width: 0;
}

.list-ios .ion-item-options {
  border-bottom: @hairlines-width solid @list-ios-border-color; /* no */
}

.list-ios .ion-item-options .button {
  display: inline-flex;

  align-items: center;

  margin: 0;

  height: 100%;
  min-height: 100%;

  border: 0;
  border-radius: 0;

  box-sizing: border-box;
}

.list-ios .ion-item-options .button::before {
  margin: 0 auto;
}

.list-ios:not([inset]) + .list-ios:not([inset]) .ion-list-header {
  margin-top: -@list-ios-margin-top;
  padding-top: 0;
}

// iOS Inset List
// --------------------------------------------------

.list-ios[inset] {
  margin: @list-inset-ios-margin-top @list-inset-ios-margin-right @list-inset-ios-margin-bottom @list-inset-ios-margin-left;

  border-radius: @list-inset-ios-border-radius;
}

.list-ios[inset] .ion-list-header {
  background-color: @list-ios-background-color;
}

.list-ios[inset] .ion-item {
  border-bottom: 1px solid @list-ios-border-color; /* no */
}

.list-ios[inset] .item-inner {
  border-bottom: 0 !important;
}

.list-ios[inset] > .ion-item:first-child,
.list-ios[inset] > .item-wrapper:first-child .ion-item {
  border-top: 0;
}

.list-ios[inset] > .ion-item:last-child,
.list-ios[inset] > .item-wrapper:last-child .ion-item {
  border-bottom: 0;
}

.list-ios[inset] + .ion-list[inset] {
  margin-top: 0;
}

// iOS No Lines List
// --------------------------------------------------

.list-ios[no-lines] .ion-list-header,
.list-ios[no-lines] .ion-item-options,
.list-ios[no-lines] .ion-item,
.list-ios[no-lines] .ion-item .item-inner {
  border-width: 0;
}

// iOS List Header
// --------------------------------------------------

.ion-list .list-header-ios {
  position: relative;

  padding-left: @list-ios-header-padding-left;

  border-bottom: @list-ios-header-border-bottom;
  font-size: @list-ios-header-font-size;
  font-weight: @list-ios-header-font-weight;
  letter-spacing: @list-ios-header-letter-spacing; /* no */
  text-transform: @list-ios-header-text-transform;
  color: @list-ios-header-color;
  background: @list-ios-header-background-color;
}

// Generate iOS List Header 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
    .list-header-ios-@{color-name} {
      color: @color-contrast !important;
      background-color: @color-base !important;
    }
  }
}

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