zmp-ui/box/styles/index.less

Zalo Mini App framework

@import './variables.less';
@import './mixins.less';

.@{box-prefix-cls}{
	padding: @box-default-padding;
  margin: @box-default-margin;
  display: block;
  each(@juistify-content, {
    @className: @value;
    @val: @value;
    &-justify-@{className}{
      justify-content: @val;
    }
  });
  each(@align-item, {
    @className: @value;
    @val: @value;
    &-align-items-@{className}{
      align-items: @val;
    }
  });
  each(@align-content, {
    @className: @value;
    @val: @value;
    &-align-content-@{className}{
      align-items: @val;
    }
  });
  each(@text-align, {
    @className: @value;
    @val: @value;
    &-text-align-@{className}{
      text-align: @val;
    }
  });
  each(@vertical-align, {
    @className: @value;
    @val: @value;
    &-vertical-align-@{className}{
      vertical-align: @val;
    }
  });
  each(@spacing, {
    @className: floor((@value));
    @val: calc(@value*4px);
    &-m-@{className} {
      margin: @val;
    }
    &-p-@{className} {
      padding: @val;
    }
    &-mt-@{className}{
      margin-top: @val;
    }
    &-ml-@{className}{
      margin-left: @val;
    }
    &-mb-@{className}{
      margin-bottom: @val;
    }
    &-mr-@{className}{
      margin-right: @val;
    }
    &-mx-@{className}{
      margin-left: @val;
      margin-right: @val;
    }
    &-my-@{className}{
      margin-top: @val;
      margin-bottom: @val;
    }
    
    &-p-@{className} {
      padding: @val;
    }
    &-p-@{className} {
      padding: @val;
    }
    &-pt-@{className}{
      padding-top: @val;
    }
    &-pl-@{className}{
      padding-left: @val;
    }
    &-pb-@{className}{
      padding-bottom: @val;
    }
    &-pr-@{className}{
      padding-right: @val;
    }
    &-px-@{className}{
      padding-left: @val;
      padding-right: @val;
    }
    &-py-@{className}{
      padding-top: @val;
      padding-bottom: @val;
    }
    &-inline{
      display: inline-block;
    }
  });
  &-no-space {
    margin: 0;
    padding: 0;
  }
  &-flex {
    display: flex;
  }
  &-flex-row {
    display: flex;
    flex-direction: row;
  }
  &-flex-column {
    display: flex;
    flex-direction: column;
  }
  &-flex-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  &-flex-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
  &-flex-wrap {
    display: flex;
    flex-wrap: wrap;
  }
  &-flex-nowrap {
    display: flex;
    flex-wrap: wrap;
  }
}