syrup/less/text.less

A collection of common UI utilities and libraries leveraged by AI2.

/* ==========================================================================
   Default settings related to textual content.
   ========================================================================== */

@import url(//fonts.googleapis.com/css?family=Oxygen:400italic,400,300,700);

/**
 * Set font-size variables
 */
@font-size: 1rem; // 16px
@font-size-xxsm: @font-size * 0.6875; // 11px
@font-size-xsm: @font-size * 0.75; // 12px
@font-size-sm: @font-size * 0.875; // 14px
@font-size-m: @font-size * 1.125; // 18px
@font-size-l: @font-size * 1.25; // 20px
@font-size-xl: @font-size * 1.5; // 24px
@font-size-xxl: @font-size * 2; // 32px

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select,
textarea {
  font-family: 'Oxygen', sans-serif;
}

body {
  color: @off-black;
  font-size: @font-size;
  line-height: 1.4;
}

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: @spacing 0;
}

h1 {
  font-size: @font-size-xxl;
}

h2 {
  font-size: @font-size-xl;
}

h3 {
  font-size: @font-size-l;
}

h4 {
  font-size: @font-size-m;
}

h5 {
  font-size: @font-size;
}

h6 {
  font-size: @font-size-sm;
}

.header-with-rule {
  border-bottom: 1px solid @light-gray;
  padding-bottom: @spacing-xxsm;
}

/**
 * Text alignment
 */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}