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

Atlassian User Interface library

@import (reference) './imports/global';

/**
 * TYPOGRAPHY
 */
html {
    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|=ja] {
    font-family: @aui-font-family-ja;
}

/* Default margins */
p,
ul,
ol,
dl,
blockquote,
pre,
form.aui,
table.aui,
.aui-tabs,
.aui-group {
    margin: @aui-grid 0 0 0;

    &:first-child {
        margin-top: 0; // No top margin to interfere with box padding
    }
}

/* 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, h2, h3, h4, h5, h6 {
    color: @aui-text-color;

    &: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-lesser-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: 2px solid @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;
}