php-the-right-way/styles/base/typography.less

/**
 * Name Here
 *
 * @version     1.0
 * @package     Name Here
 * @author      New Media Campaigns
 * @copyright   2012 New Media Campaigns
 * @link        http://www.newmediacampaigns.com
 *
 * Copyright (c) 2012 New Media Campaigns
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is furnished
 * to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

/**
 * Typography
 *
 * This LESS file defines the baseline, color, font-size, and other typographical
 * styles for text elements.
 */

/* Settings */

@import 'variables.less';

/*
@baseline: @baseline;

@body-color: @body-color;
@body-font-family: @body-font-family;
@body-font-size: @body-font-size;
@body-accent-color: @body-accent-color;

@header-color: @header-clor;
@header-font-family: @header-font-family;
@header-font-weight: @header-font-weight;
*/

/* Base */

html, body {
    font-family: @body-font-family;
    color: @body-color;
    font-size: @body-font-size;
    .lhs;
}

/* Block-level */

h1, h2, h3, h4, h5, h6, ul, ol, dl, p, blockquote, table, form, pre{
    .mbs;
}

/* Headers */

.all-headers{
    color: @header-color;
    font-family: @header-font-family;
    font-weight: @header-font-weight;
}
h1, .alpha{
    .all-headers;
    font-size: @body-font-size * 2.5;
    .lhd;
}
h2, .beta{
    .all-headers;
    font-size: @body-font-size * 1.75;
    .lhd;
}
h3, .gamma{
    .all-headers;
    font-size: @body-font-size * 1.2;
    .lhd;
    .mbn;
}
h4, .delta{
    .all-headers;
    font-size: @body-font-size * 1;
    .lhd;
    .mbn;
}
h5, .epsilon{
    .all-headers;
    font-size: @body-font-size * 1;
    .lhs;
    .mbn
}
h6, .zeta{
    .all-headers;
    font-size: @body-font-size * 1;
    .lhs;
    .mbn;
}

/* Headers (above scale) */

.giga{
    .all-headers;
    font-size: @body-font-size * 6;
    line-height: @baseline * 4;
}
.mega{
    .all-headers;
    font-size: @body-font-size * 5;
    line-height: @baseline * 3;
}
.kilo{
    .all-headers;
    font-size: @body-font-size * 4;
    line-height: @baseline * 3;
}

/* Headers (below scale) */

.milli{
    .all-headers;
    font-size: @body-font-size * 0.8;
}

/* Text */

a{
    color: @body-accent-color;
}
a:link{
    text-decoration: underline;
}
a:visited{

}
a:hover{
    text-decoration: none;
}
a:active{

}
a:focus{

}
small {
    font-size: 80%;
}
sup, sub {
    font-size: 80%;
    .lhn;
}
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}

.lead{
    color: darken(@body-color, 20%);
    font-size: @baseline * 0.8;
}

blockquote{
    border-left: 5px solid fade(#000, 10%);
    .mhs;
    .pls;
    color: lighten(@body-color, 20%);
    font-size: @baseline * 0.8;
    font-style: italic;

    :last-child{
        .mbn;
    }
    small{
        color: fade(#000, 50%);
        font-size: @baseline * 0.7;
        font-style: normal;
    }
}
pre, code, kbd{
    background: #F8F8F8;
    border: 1px solid #EAEAEA;
    .border-radius(3px);
    margin: 0 2px;
    padding: 0 5px;
    font-family: Consolas, "Courier New", Courier, mono;
    font-size: @body-font-size * 0.9;
    color: @body-color;
    word-wrap: break-word;
}
pre{
    .mhs;
    .pah;

    code{
        border: none;
        .man;
        .pan;
    }
}
a code{
    background: none;
    border: none;
    .pan;
    .man;
}
strong{
    font-weight: bold;
}
em{
    font-style: italic;
}
ol, ul, dl{
    .mls;
    .pls;
    ol,ul {
        .mbn;
    }
}
dt{
    font-weight: bold;
}
dd{
    .mls;
}

.table{
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
    .table th, .table td{
        border-top: 1px solid fade(#000, 10%);
        padding: 8px;
        text-align: left;
    }
    .table thead th{
        vertical-align: bottom;
        font-weight: bold;
    }
    .table thead tr:first-child th{
        border-top: none;
    }
.table-bordered{
    border: 1px solid fade(#000, 10%);
    border-collapse: separate;
    border-left: none;
    .border-radius(4px);

    th, td{
        border-left: 1px solid fade(#000, 10%);
    }
    thead:last-child tr:last-child th:first-child,
    tbody:last-child tr:last-child td:first-child{
        .border-radius(0 0 0 4px);
    }
}
.table-striped{
    tbody tr:nth-child(odd) td{
        background: fade(@body-accent-color, 4%);
    }
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert{
    background: #FCF8E3;
    border: 1px solid #FBEED5;
    .border-radius(4px);
    .mbs;
    .pah;
    color: #C09853;
}
.alert-success{
    .alert;
    background-color: #DFF0D8;
    border-color: #D6E9C6;
    color: #468847;
}
.alert-error{
    .alert;
    background-color: #F2DEDE;
    border-color: #EED3D7;
    color: #B94A48;
}
.alert-info{
    .alert;
    background-color: #D9EDF7;
    border-color: #BCE8F1;
    color: #3A87AD;
}

/* ==========================================================================
   Forms
   ========================================================================== */

label{
    display: block;
    font-weight: bold;

    .req{
        color: @body-accent-color;
        font-weight: bold;
    }
}
input.text,
textarea,
select,
.radio-group,
.checkbox-group{
    .mbs;
}
input.text, textarea{
    .no-form;
    background: #EEE;
    border: 1px solid #CCC;
    .border-box;
    .border-radius(4px);
    .inner-shadow(fade(#000, 10%) 0 1px 3px);
    height: @baseline * 1.5;
    .pah;
    width: 100%;
}
textarea{
    height: @baseline * 6;
}
select{
    min-width: 30%;
}
.checkbox-group label,
.radio-group label{
    font-weight: normal;
}
.error{
    background-color: #F2DEDE !important;
    border-color: red !important;
    outline-color: red !important;
    color: red !important;
}