vui-design/src/style/components/space.less

A high quality UI Toolkit based on Vue.js

@vui-space: ~"@{vui}-space";

.@{vui-space} {
  display:inline-flex;
  box-sizing:border-box;
  
  &-block {
    display:flex;
  }

  &-item {
    display:block;
    box-sizing:border-box;
  }

  &-divider {
    display:block;
    box-sizing:border-box;
    width:@space-divider-width;
    height:@space-divider-height;
    background-color:shade(@space-divider-color, 10%);
    background-image:linear-gradient(@space-divider-color, shade(@space-divider-color, 10%), @space-divider-color);
  }

  &-horizontal {
    flex-direction:row;
  }
  &-vertical {
    flex-direction:column;
  }

  &-justify-start {
    justify-content:flex-start;
  }
  &-justify-center {
    justify-content:center;
  }
  &-justify-end {
    justify-content:flex-end;
  }
  &-justify-around {
    justify-content:space-around;
  }
  &-justify-between {
    justify-content:space-between;
  }

  &-align-start {
    align-items:flex-start;
  }
  &-align-center {
    align-items:center;
  }
  &-align-end {
    align-items:flex-end;
  }
  &-align-baseline {
    align-items:baseline;
  }
  &-align-stretch {
    align-items:stretch;
  }

  &-horizontal&-small > &-item + &-item {
    margin-left:@space-size-sm;
  }
  &-horizontal&-medium > &-item + &-item {
    margin-left:@space-size-md;
  }
  &-horizontal&-large > &-item + &-item {
    margin-left:@space-size-lg;
  }

  &-horizontal&-small > &-divider {
    margin-left:@space-with-divider-size-sm;
    margin-right:@space-with-divider-size-sm;
  }
  &-horizontal&-medium > &-divider {
    margin-left:@space-with-divider-size-md;
    margin-right:@space-with-divider-size-md;
  }
  &-horizontal&-large > &-divider {
    margin-left:@space-with-divider-size-lg;
    margin-right:@space-with-divider-size-lg;
  }

  &-vertical&-small > &-item + &-item {
    margin-top:@space-size-sm;
  }
  &-vertical&-medium > &-item + &-item {
    margin-top:@space-size-md;
  }
  &-vertical&-large > &-item + &-item {
    margin-top:@space-size-lg;
  }
}