framework7/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);
}

// Display
@display: flex, block, inline-flex, inline-block, inline, none;
.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, justify;
.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);

// Padding
.no-padding {
  padding: 0 !important;
}
.no-padding-left {
  padding-left: 0 !important;
}
.no-padding-right {
  padding-right: 0 !important;
}
.no-padding-top {
  padding-top: 0 !important;
}
.no-padding-bottom {
  padding-bottom: 0 !important;
}
// Margin
.no-margin {
  margin: 0 !important;
}
.no-margin-left {
  margin-left: 0 !important;
}
.no-margin-right {
  margin-right: 0 !important;
}
.no-margin-top {
  margin-top: 0 !important;
}
.no-margin-bottom {
  margin-bottom: 0 !important;
}

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

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