gistfile1.txt

// VARIABLES
// --------------------------------------------------
// 1. Fonts
// 2. Typography
// 3. Layout Structure, Sizes & Spacing
//    - Breakpoints
//    - Media Queries
//    - Z-Index Scale
// 4. Elements and Components

// Fonts
// --------------------------------------------------

// Font families
@sans-font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@base-font-family: @sans-font-family; // There were reasons at the time, for reusability


// Font weight scale allows for name (normal, bold) or finer control
// via numeric (100-900) values, depending on font support.
@normal-font-weight: 400; // Same as normal.
@bold-font-weight:   700; // Same as bold.
@light-font-weight:  200; // Displays as 400/normal if not supported.

// Desired body font size in pixels, leave unitless for calculations
@base-font-size: 14;

// Typography
// --------------------------------------------------

// Unitless values are used since all font sizes
// should be converted to rem units with a pixel
// fallback via the .rem() mixin.

// Note this .rem mixin proved to be way more hassle than it was worth, and I wouldn't use it again.

@print-font-size: 10; // Desired body font size, when printing, in pts.

@_root-font-size:  16;              // Constant value used for calculations, do not change
@_typographic-scale-font-size:  14; // Constant value used for generating typographic scale, do not change
@_typographic-scale-multiplier: (@base-font-size / @_typographic-scale-font-size); // Constant value used for generating typographic scale, do not change
@_html-font-size: percentage(@base-font-size / @_root-font-size); // Percentage value set on HTML element, allows Terra to inherit user defined font-size
@_base-line-height: 20 * @_typographic-scale-multiplier;

@sm-text:    12 * @_typographic-scale-multiplier;
@body-text:  @base-font-size;
@super-text: 48 * @_typographic-scale-multiplier;

@xs-heading: 16 * @_typographic-scale-multiplier;
@sm-heading: 18 * @_typographic-scale-multiplier;
@md-heading: 20 * @_typographic-scale-multiplier;
@lg-heading: 24 * @_typographic-scale-multiplier;
@xl-heading: 30 * @_typographic-scale-multiplier;


// Layout Structure, Sizes & Spacing
// --------------------------------------------------
@ltr: ~"[dir=ltr]";
@rtl: ~"[dir=rtl]";

// The width of a printed page.
@print-portrait-width: 8.5; // In inches.
@print-landscape-width: 11; // In inches.

// Sets unit for baseline grid
@baseline:      @_base-line-height / 2;
@half-baseline: @baseline * 0.5;

// Amount of columns in structural grid
@grid-columns: 12;

// Gutters run vertically between columns and content.
@gutter:      20;
@half-gutter: @gutter * 0.5;

// Top and bottom margins
@default-margin: @baseline * 2;
@thin-margin:    @baseline;
@wide-margin:    @baseline * 4;

// Breakpoints
@xs-breakpoint:   580px;
@sm-breakpoint:   760px;
@md-breakpoint:  1024px;
@lg-breakpoint:  1276px;
@xl-breakpoint:  1540px;
@xxl-breakpoint: 2068px;

@layout-sub-width: (@md-breakpoint - 1);

// Media Queries
@xs-mq-max: ~"screen and (max-width: @{xs-breakpoint})";
@xs-mq: ~"screen and (min-width: @{xs-breakpoint})";
@sm-mq: ~"screen and (min-width: @{sm-breakpoint})";
@md-mq: ~"screen and (min-width: @{md-breakpoint})";
@lg-mq: ~"screen and (min-width: @{lg-breakpoint})";
@xl-mq: ~"screen and (min-width: @{xl-breakpoint})";
@xxl-mq: ~"screen and (min-width: @{xxl-breakpoint})";

// Z-Index Scale
// Provides an at-a-glance way of setting stacking values
// and dissuades the use of arbitrary values.
// The scale should not be altered or overridden.
//
@z-index-1:   100;
@z-index-2:   200;
@z-index-3:   300;
@z-index-4:   400;
@z-index-5:   500;
@z-index-6:   600;
@z-index-7:   700;
@z-index-8:   800;
@z-index-9:   900;
@z-index-10: 1000;
@z-index-11: 1100;

// Elements and Components
// --------------------------------------------------
@border-radius:      0.25em;
@border-radius-sm:   @border-radius * 0.5; // Not suitable for elements with text size smaller than 16px.
@border-radius-lg:   @border-radius * 2;
@popup-caret-size: 8px;


------------------------------------------------------
// TYPOGRAPHY
// --------------------------------------------------
// 1. Text Style Helpers
// 2. Text Size Helpers
// 3. Heading Elements
// 4. Text Elements

// Text Style Helpers
// - Alignment
// - Weight
// - Miscellaneous
// --------------------------------------------------

// Note: Some elements may have margin set by .reset-normalize in core.less

// Text alignment
.text-left {
  .text-align-start();
}

.text-right {
  .text-align-end();
}

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

// Text weight
b,
strong,
.text-bold {
  font-weight: @bold-font-weight;
}

.text-normal {
  font-weight: @normal-font-weight;
}

.text-light {
  font-weight: @light-font-weight;
}

// Miscellaneous text style helpers

// Word breaks may be inserted between any character
// causing long strings to wrap instead of overflow.
.text-breakable {
  .word-wrap(break-word);
}

// Meta-level content sets font-size/opacity relative to parent.
.meta {
  opacity: 0.6;
  font-size: 85%;
}

// Text Sizing Helpers
// - Individual font-size and line-height helpers,
//   along with a text helper that combines both.
// - Helpers are grouped in descending order by size.
// --------------------------------------------------

// Super large display text
.super-text-size {
  .rem(font-size; @xl-heading); //30
  @media @sm-mq {
    .rem(font-size; @super-text); //48
  }
}

.super-text-line-height {
  .rem(line-height; (@_base-line-height * 3));
}

.text-super {
  .text-light();
  .super-text-size();
  .super-text-line-height();
}

// Extra-large level 1 headings
.x-large-heading-size {
  .rem(font-size; @lg-heading); //24
  @media @sm-mq {
    .rem(font-size; @xl-heading); //30
  }
}

.x-large-heading-line-height {
  .rem(line-height; (@_base-line-height * 2.5))
}

.x-large-heading {
  .x-large-heading-size();
  .x-large-heading-line-height();
}

// Large level 2 headings
.large-heading-size {
  .rem(font-size; @md-heading); //20
  @media @sm-mq {
    .rem(font-size; @lg-heading); //24
  }
}

.large-heading-line-height {
  .rem(line-height; (@_base-line-height * 1.5))
}

.large-heading {
  .large-heading-size();
  .large-heading-line-height();
}

// Medium level 3 headings
.medium-heading-size {
  .rem(font-size; @sm-heading); //18
  @media @sm-mq {
    .rem(font-size; @md-heading); //20
  }
}

.medium-heading-line-height {
  .rem(line-height; @_base-line-height)
}

.medium-heading {
  .medium-heading-size();
  .medium-heading-line-height();
}

// Small level 4 headings
.small-heading-size {
  .rem(font-size; @xs-heading); //16
  @media @sm-mq {
    .rem(font-size; @sm-heading); //18
  }
}

.small-heading-line-height {
  .rem(line-height; @_base-line-height)
}

.small-heading {
  .small-heading-size();
  .small-heading-line-height();
}

// Extra-small level 5 headings
.x-small-heading-size {
  .rem(font-size; @xs-heading); //16
}

.x-small-heading-line-height {
  .rem(line-height; @_base-line-height)
}

.x-small-heading {
  .x-small-heading-size();
  .x-small-heading-line-height();
}

// Baseline body text
.body-text-size {
  .rem(font-size; @xs-heading); //16
  @media @sm-mq {
    .rem(font-size; @body-text); //14
  }
}

.body-text-line-height {
  .rem(line-height; @_base-line-height);
}

.text-body {
  .body-text-size();
  .body-text-line-height();
}

// Fine-print text
.small-text-size {
  .rem(font-size; @body-text); //14
  @media @sm-mq {
    .rem(font-size; @sm-text); //12
  }
}

.small-text-line-height {
  .rem(line-height; (@_base-line-height * 0.75));
}

.text-small {
  .small-text-size();
  .small-text-line-height();
}

// Heading Elements
// --------------------------------------------------
h1 {
  .x-large-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h2 {
  .large-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h3 {
  .medium-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h4 {
  .small-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

// Reset small for major headers.
h1, h2, h3, h4 {
  small {
    .text-normal();
    color: @medium-bg-10;
    line-height: 1;
  }
}

h5 {
  .x-small-heading();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

h6 {
  .text-body();
  font-family: @header-font-family;
  font-weight: @normal-font-weight;
}

// Text Elements
// --------------------------------------------------


// Address styling not present in IE 9/10/11, Safari, and Chrome.
abbr[title],
abbr[data-original-title] {
  .border-bottom(@style: dotted);
  cursor: help;
}

// Prevent certain browsers from italicizing addresses.
address {
  display: block;
  font-style: normal;
}

cite {
  font-style: normal;
}

// Address odd `em`-unit font size rendering in all browsers.
code,
kbd,
samp {
  font-family: @mono-font-family;
  font-size: 1em;
}

code {
  .rem(padding; 2, 4);
  background: @accent-bg-40;
  color: @medium-fg-40;

  // because of the perceived largeness of monospaced font,
  // we can't use small-text(), so we'll set manually.
  font-size: 80%;
}

em {
  font-style: italic;
}

// Address styling not present in Safari and Chrome.
dfn {
  font-style: italic;
}

// Address differences between Firefox and other browsers.
hr {
  .border(@width: 0);
  .border-top();
  .margin-top-bottom();
  height: 0;
}

// Font-family set to allow pre to inherit parent container font
// Overflow set to contain overflow in all browsers.
pre {
  .pre-wrap();
  font-family: inherit;
  overflow: auto;

  // Reset terra code element styles
  code {
    .pre-wrap();
    display: block;
  }
}

// Address inconsistent and variable font size in all browsers.
small {
  font-size: 85%;
}

// Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}