formir/src/less/core/helpers/items.less

Pure CSS / HTML Framework

.@{items} {
  margin-top: -@items-gutter;
  margin-left: -@items-gutter;
  .display-flex;
  .justify-content(flex-start);
  .flex-wrap(wrap);
  > * {
    margin-top: @items-gutter;
    margin-left: @items-gutter;
  }
  &.@{items-end} {
    margin-right: -@items-gutter;
    margin-left: 0;
    .justify-content(flex-end);
    > * {
      margin-right: @items-gutter;
      margin-left: 0;
    }
  }
  &.@{items-center} {
    margin-right: -@items-gutter/2;
    margin-left: -@items-gutter/2;
    .justify-content(center);
    > * {
      margin-right: @items-gutter/2;
      margin-left: @items-gutter/2;
    }
  }
  &.@{items-stretch} {
    margin-right: -@items-gutter/2;
    margin-left: -@items-gutter/2;
    .justify-content(space-between);
    > * {
      margin-right: @items-gutter/2;
      margin-left: @items-gutter/2;
    }
  }
}

ul.@{items} {
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  > li {
    .display-flex;
    .align-items(center);
  }
}