vimo-dt/src/components/list/backup/list.md.less

A Vue2.x UI Project For Mobile & HyBrid

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

// Material Design List
// --------------------------------------------------

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

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

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

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

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

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

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

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

/// @prop - Border radius of the inset list
@list-inset-md-border-radius: 2px;

/// @prop - Margin bottom of the header in a list
@list-md-header-margin-bottom: 13px;

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

/// @prop - Minimum height of the header in a list
@list-md-header-min-height: 45px;

/// @prop - Border top of the header in a list
@list-md-header-border-top: 1px solid @list-md-border-color;

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

/// @prop - Text color of the header in a list
@list-md-header-color: #757575;

// Material Design Default List
// --------------------------------------------------

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

.list-md .item-block .item-inner {
  border-bottom: 1px solid @list-md-border-color; /* no */
}

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

.list-md > .ion-input:last-child::after {
  left: 0;
}

.list-md .ion-item-options {
  border-bottom: 1px solid @list-md-border-color; /* no */
}

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

  align-items: center;

  margin: 1px 0; /* no */

  height: calc(100% - 2px);

  border: 0;
  border-radius: 0;
  box-shadow: none;

  box-sizing: border-box;
}

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

// 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-md .item[no-lines],
.list-md .item[no-lines] .item-inner {
  border-width: 0;
}

.list-md + .ion-list .ion-list-header {
  margin-top: -@list-md-margin-top; /* no */
}

// Material Design Inset List
// --------------------------------------------------

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

  border-radius: @list-inset-md-border-radius; /* no */
}

.list-md[inset] .item:first-child {
  border-top-width: 0;
  border-top-left-radius: @list-inset-md-border-radius; /* no */
  border-top-right-radius: @list-inset-md-border-radius; /* no */
}

.list-md[inset] .item:last-child {
  border-bottom-width: 0;
  border-bottom-left-radius: @list-inset-md-border-radius; /* no */
  border-bottom-right-radius: @list-inset-md-border-radius; /* no */
}

.list-md[inset] .item-input {
  padding-right: 0;
  padding-left: 0;
}

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

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

// Material Design No Lines List
// --------------------------------------------------

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

// Material Design List Header
// --------------------------------------------------
.ion-list-header.list-header-md {
  margin-bottom: @list-md-header-margin-bottom;
  padding-left: @list-md-header-padding-left;

  min-height: @list-md-header-min-height;

  border-top: @list-md-header-border-top; /* no */
  font-size: @list-md-header-font-size;
  color: @list-md-header-color;
}

// Generate Material Design 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-md-@{color-name} {
      color: @color-contrast;
      background-color: @color-base;
    }
  }
}

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

// Material Design List inputs
// --------------------------------------------------

.list-md .item-input:last-child {
  border-bottom: 1px solid @list-md-border-color; /* no */
}