@pi0/framework7/src/components/typography/typography.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Typography === */
.rules-loop(@values, @ruleName) {
  .loop(@array, @i: 1) when (@i =< length(@array)) {
    @value: extract(@array, @i);
    .@{ruleName}-@{value} {
      @{ruleName}: @value !important;
    }
    .loop(@array, (@i + 1));
  }
  .loop(@values);
}

// Flex
@display: flex, block, inline-flex, inline-block, inline;
.rules-loop(@display, display);

// Flex Shrink
@shrinks: 0,1,2,3,4,5,6,7,8,9,10;
.rules-loop(@shrinks, flex-shrink);

// Justify Content
@justify: flex-start, center, flex-end, space-between, space-around, space-evenly, stretch, start, end, left, right;
.rules-loop(@justify, justify-content);

// Align Content
@alignContent: flex-start, flex-end, center, space-between, space-around, stretch;
.rules-loop(@alignContent, align-content);

// Align Items
@alignItems: flex-start, flex-end, center, stretch;
.rules-loop(@alignItems, align-items);

// Align Self
@alignSelf: flex-start, flex-end, center, stretch;
.rules-loop(@alignSelf, align-self);

// Text Align
@textAlign: left, center, right;
.rules-loop(@textAlign, text-align);

// Float
@float: left, right, none;
.rules-loop(@float, float);

// Vertical Align
@verticalAlign: bottom, middle, top;
.rules-loop(@verticalAlign, vertical-align);

// Width
.width-auto {
  width: auto !important;
}
.width-100 {
  width: 100% !important;
}

& when (@include-ios-theme) {
  @import url('./typography-ios.less');
}
& when (@include-md-theme) {
  @import url('./typography-md.less');
}