_font-mixins.less

// Smooths the font on the pixel level rather than the subpixel.
// Switching from subpixel rendering to antialiasing for
// light text on dark backgrounds makes it look lighter.
// --------------------------------------------------
.font-smoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Globals
// --------------------------------------------------
body {
  .font-smoothing;
  font-family: @body-family;
  font-size: @body-size;
  font-weight: @body-weight;
  line-height: @body-line-height;
  color: @font-color;

  // Set up a language specific font override.
  // This will need to be uncommented out, duplicated and updated if there are
  // more languages that require overriding. All overrides must be duplicated
  // and added to each of the font mixins below.
  // html[lang="de"] & {
  //   font-family: Impact;
  // }
}

.instruction-text() {
  font-family: @instruction-family;
  font-size: @instruction-size;
  font-weight: @instruction-weight;
  line-height: @instruction-line-height;
  font-style: @instruction-font-style;
}

.button-text() {
  font-family: @btn-family;
  font-size: @btn-size;
  font-weight: @btn-weight;
  line-height: @btn-line-height;
  letter-spacing: @btn-letter-spacing;
}

.link-text() {
  font-family: @link-family;
  font-size: @link-size;
  font-weight: @link-weight;
  line-height: @link-line-height;
  color: @link;

  .no-touch &:hover {
    color: @link-hover;
    .transition(color @duration ease-in);
  }
}

b,
strong {
  font-weight: @font-weight-bold;
}

// Menu header
// --------------------------------------------------
.menu-title() {
  font-family: @menu-title-family;
  font-size: @menu-title-size * @menu-title-mobile-percentage;
  font-weight: @menu-title-weight;
  line-height: @menu-title-line-height;
  letter-spacing: @menu-title-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @menu-title-size;
  }
}

.menu-subtitle() {
  font-family: @menu-subtitle-family;
  font-size: @menu-subtitle-size * @menu-subtitle-mobile-percentage;
  font-weight: @menu-subtitle-weight;
  line-height: @menu-subtitle-line-height;
  letter-spacing: @menu-subtitle-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @menu-subtitle-size;
  }
}

.menu-body() {
  font-family: @menu-body-family;
  font-size: @menu-body-size;
  font-weight: @menu-body-weight;
  line-height: @menu-body-line-height;
}

.menu-instruction() {
  font-family: @menu-instruction-family;
  font-size: @menu-instruction-size;
  font-weight: @menu-instruction-weight;
  line-height: @menu-instruction-line-height;
  font-style: @menu-instruction-font-style;
}

// Menu item
// --------------------------------------------------
.menu-item-title() {
  font-family: @menu-item-title-family;
  font-size: @menu-item-title-size;
  font-weight: @menu-item-title-weight;
  line-height: @menu-item-title-line-height;
  letter-spacing: @menu-item-title-letter-spacing;
}

.menu-item-body() {
  font-family: @menu-item-body-family;
  font-size: @menu-item-body-size;
  font-weight: @menu-item-body-weight;
  line-height: @menu-item-body-line-height;
}

// Page header
// --------------------------------------------------
.page-title() {
  font-family: @page-title-family;
  font-size: @page-title-size * @page-title-mobile-percentage;
  font-weight: @page-title-weight;
  line-height: @page-title-line-height;
  letter-spacing: @page-title-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @page-title-size;
  }
}

.page-subtitle() {
  font-family: @page-subtitle-family;
  font-size: @page-subtitle-size * @page-subtitle-mobile-percentage;
  font-weight: @page-subtitle-weight;
  line-height: @page-subtitle-line-height;
  letter-spacing: @page-subtitle-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @page-subtitle-size;
  }
}

.page-body() {
  font-family: @page-body-family;
  font-size: @page-body-size;
  font-weight: @page-body-weight;
  line-height: @page-body-line-height;
}

.page-instruction() {
  font-family: @page-instruction-family;
  font-size: @page-instruction-size;
  font-weight: @page-instruction-weight;
  line-height: @page-instruction-line-height;
  font-style: @page-instruction-font-style;
}

// Page
// --------------------------------------------------
.article-title() {
  font-family: @article-title-family;
  font-size: @article-title-size * @article-title-mobile-percentage;
  font-weight: @article-title-weight;
  line-height: @article-title-line-height;
  letter-spacing: @article-title-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @article-title-size;
  }
}

.block-title() {
  font-family: @block-title-family;
  font-size: @block-title-size * @block-title-mobile-percentage;
  font-weight: @block-title-weight;
  line-height: @block-title-line-height;
  letter-spacing: @block-title-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @block-title-size;
  }
}

.component-title() {
  font-family: @component-title-family;
  font-size: @component-title-size * @component-title-mobile-percentage;
  font-weight: @component-title-weight;
  line-height: @component-title-line-height;
  letter-spacing: @component-title-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @component-title-size;
  }
}

.notify-title() {
  font-family: @notify-title-family;
  font-size: @notify-title-size * @notify-title-mobile-percentage;
  font-weight: @notify-title-weight;
  line-height: @notify-title-line-height;
  letter-spacing: @notify-title-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @notify-title-size;
  }
}

// Drawer
// --------------------------------------------------
.drawer-item-title() {
  font-family: @drawer-item-title-family;
  font-size: @drawer-item-title-size;
  font-weight: @drawer-item-title-weight;
  line-height: @drawer-item-title-line-height;
  letter-spacing: @drawer-item-title-letter-spacing;
}

.drawer-item-body() {
  font-family: @drawer-item-body-family;
  font-size: @drawer-item-body-size;
  font-weight: @drawer-item-body-weight;
  line-height: @drawer-item-body-line-height;
}

.resources-filter-btn() {
  font-family: @resources-filter-btn-family;
  font-size: @resources-filter-btn-size;
  font-weight: @resources-filter-btn-weight;
  line-height: @resources-filter-btn-line-height;
}

// Components
// --------------------------------------------------
.item-title() {
  font-family: @item-title-family;
  font-size: @item-title-size;
  font-weight: @item-title-weight;
  line-height: @item-title-line-height;
  letter-spacing: @item-title-letter-spacing;
}

// Quote
// --------------------------------------------------
.quote-body() {
  font-size: @quote-body-size;
  font-family: @quote-body-family;
  font-weight: @quote-body-weight;
  line-height: @quote-body-line-height;
  font-style: @quote-body-font-style;
  letter-spacing: @quote-body-letter-spacing;
}

.quote-attribution() {
  font-size: @quote-attribution-size;
  font-family: @quote-attribution-family;
  font-weight: @quote-attribution-weight;
  line-height: @quote-attribution-line-height;
  font-style: @quote-attribution-font-style;
  letter-spacing: @quote-attribution-letter-spacing;
}

// Pull quote
// --------------------------------------------------
.pull-quote-body() {
  font-size: @pull-quote-body-size * @pull-quote-body-mobile-percentage;
  font-family: @pull-quote-body-family;
  font-weight: @pull-quote-body-weight;
  line-height: @pull-quote-body-line-height;
  font-style: @pull-quote-body-font-style;
  letter-spacing: @pull-quote-body-letter-spacing;

  @media (min-width: @device-width-medium) {
    font-size: @pull-quote-body-size;
  }
}

// Left over - to sort
// --------------------------------------------------
// p {
//   // Override base.less <p> tag margin
//   margin-top: 0;
//   margin-bottom: 0;
// }

// html {
// 	// preserve HTML font-size (iPhone orientation change)
// 	-ms-text-size-adjust: 100%;
// 	-webkit-text-size-adjust: 100%;
// }

// select {
// 	font-family: @body-text-font-family;
// 	font-size: @body-text-font-size;
// 	font-weight: @body-text-font-weight;
// 	line-height: @body-text-line-height;
// }

// button::-moz-focus-inner {
// 	border: 0;
// 	padding: 0;
// }