@atlassian/aui/src/less/aui-page-typography.less

Atlassian User Interface Framework

@import './imports/global';

/**
 * TYPOGRAPHY - 14px base font size, agnostic font stack
 */
body {
    color: @aui-text-color;
    font-family: @aui-font-family;
    font-size: @aui-font-size-medium;
    font-weight: @aui-font-weight-normal;
    line-height: unit(20 / @aui-font-size-medium);
    letter-spacing: @aui-font-letter-spacing;
}

/* International Font Stacks*/
[lang|=en] {
    font-family: @aui-font-family;
}

[lang|=ja] {
    font-family: @aui-font-family-ja;
}

/* Default margins */
p,
ul,
ol,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
pre,
form.aui,
table.aui,
.aui-tabs,
.aui-panel,
.aui-group {
    margin: @aui-grid 0 0 0;
}

/* No top margin to interfere with box padding */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
blockquote:first-child,
pre:first-child,
form.aui:first-child,
table.aui:first-child,
.aui-tabs:first-child,
.aui-panel:first-child,
.aui-group:first-child {
    margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: @aui-text-color;
}

/* Headings: desired line height in px / font size = unitless line height */
h1 {
    #aui.typography.h700();
    margin: (@aui-grid * 3) 0 0 0;
}
h2 {
    #aui.typography.h600();
    margin: (@aui-grid * 3) 0 0 0;
}
h3 {
    #aui.typography.h500();
    margin: (@aui-grid * 3) 0 0 0;
}
h4 {
    #aui.typography.h400();
    margin: (@aui-grid * 2) 0 0 0;
}
h5 {
    #aui.typography.h300();
    margin: (@aui-grid * 2) 0 0 0;
}
h6 {
    #aui.typography.h200();
    margin: (@aui-grid * 2) 0 0 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}
/* Nice styles for using subheadings */
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
    margin-top: @aui-grid;
}
/* Increase the margins on all headings when used in the group/item pattern ... */
.aui-group > .aui-item > h1:first-child,
.aui-group > .aui-item > h2:first-child,
.aui-group > .aui-item > h3:first-child,
.aui-group > .aui-item > h4:first-child,
.aui-group > .aui-item > h5:first-child,
.aui-group > .aui-item > h6:first-child {
    margin-top: (@aui-grid * 2);
}
/* ... unless they're the first-child */
.aui-group:first-child > .aui-item > h1:first-child,
.aui-group:first-child > .aui-item > h2:first-child,
.aui-group:first-child > .aui-item > h3:first-child,
.aui-group:first-child > .aui-item > h4:first-child,
.aui-group:first-child > .aui-item > h5:first-child,
.aui-group:first-child > .aui-item > h6:first-child {
    margin-top: 0;
}

/* Other typographical elements */
small {
    color: @aui-small-text-color;
    font-size: @aui-font-size-small;
    line-height: unit(16 / @aui-font-size-small);
}
code,
kbd {
    font-family: @aui-code-font-family;
}
var,
address,
dfn,
cite {
    font-style: italic;
}
cite:before {
    content: "\2014 \2009";
}
blockquote {
    border-left: @aui-border-width @aui-border-style @aui-border-color;
    color: @aui-blockquote-text-color;
    margin-left: (@aui-grid * 2 - 1);
    padding: @aui-grid (@aui-grid * 2);
}
blockquote > cite {
    display: block;
    margin-top: @aui-grid;
}
q {
    color: @aui-quote-text-color;
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}
abbr {
    border-bottom: 1px @aui-abbr-border-color dotted;
    cursor: help;
}

/* Deprecated header styles; to be removed in AUI 8.0 */
.aui-page-header-hero .aui-page-header-main h1,
.aui-page-header-hero .aui-page-header-main h2,
.aui-page-header-marketing .aui-page-header-main h1,
.aui-page-header-marketing .aui-page-header-main h2 {
    #aui.typography.h800();
    margin: (@aui-grid * 3) 0 0 0;
}
.aui-page-header-hero .aui-page-header-main p,
.aui-page-header-marketing .aui-page-header-main p {
    #aui.typography.h600();
    margin: (@aui-grid * 3) 0 0 0;
}