| Current Path : /var/www/html/templates/t3_blank/less/ |
| Current File : /var/www/html/templates/t3_blank/less/typo-core.less |
/**
*------------------------------------------------------------------------------
* @package T3 Framework for Joomla!
*------------------------------------------------------------------------------
* @copyright Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @authors JoomlArt, JoomlaBamboo, (contribute to this project at github
* & Google group to become co-author)
* @Google group: https://groups.google.com/forum/#!forum/t3fw
* @Link: http://t3-framework.org
*------------------------------------------------------------------------------
*/
// --------------------------------------------------
// TYPOGRAPHY
// --------------------------------------------------
// BODY TEXT
// ------------------------------------------------------
// Paragraphs
// ----------
p {
margin: 0 0 @T3globalMargin / 2;
small, .small {
font-size: @T3smallerFontSize;
color: @grayLight;
}
}
.lead {
margin-bottom: @T3globalMargin;
font-size: 20px;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
}
// Emphasis & misc
// ---------------
small {
font-size: 85%; // Ex: 14px base font * 85% = about 12px
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
cite {
font-style: normal;
}
.muted {
color: @grayLight;
}
a.muted:hover,
a.muted:focus { color: darken(@grayLight, 10%); }
.text-warning { color: @warningText; }
a.text-warning:hover,
a.text-warning:focus { color: darken(@warningText, 10%); }
.text-error { color: @errorText; }
a.text-error:hover,
a.text-error:focus { color: darken(@errorText, 10%); }
.text-info { color: @infoText; }
a.text-info:hover,
a.text-info:focus { color: darken(@infoText, 10%); }
.text-success { color: @successText; }
a.text-success:hover,
a.text-success:focus { color: darken(@successText, 10%); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.highlight {
background-color: #FFC;
font-weight: bold;
padding: 1px 4px;
}
// HEADINGS
// ------------------------------------------------------
h1, h2, h3, h4, h5, h6 {
margin: (@T3globalMargin / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
line-height: 1;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
font-weight: normal;
line-height: 1;
color: @grayLight;
}
}
h1 {
font-size: @baseFontSize * 2.5;
line-height: @baseLineHeight * 2;
small {
font-size: @baseFontSize * 2;
}
}
h2 {
font-size: @baseFontSize * 2;
line-height: @baseLineHeight * 2;
small {
font-size: @baseFontSize * 1.5;
}
}
h3 {
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
small {
font-size: @baseFontSize + 2px;
}
}
h4 {
font-size: @baseFontSize + 2px;
line-height: @baseLineHeight;
small {
font-size: @baseFontSize;
}
}
h5 {
font-size: @baseFontSize + 1px;
line-height: @baseLineHeight;
small {
font-size: @baseFontSize - 2px;
}
}
h6 {
font-size: @baseFontSize;
line-height: @baseLineHeight;
}
// TITLES
// ------------------------------------------------------
// Page header
// -----------
.page-header {
border-bottom: 1px solid @T3borderColor;
padding-bottom: @T3globalPadding;
margin: 0 0 (@T3globalMargin * 2);
}
.page-title,
.page-header h1 {
line-height: 1;
margin: 0;
}
// Page Subheader
// --------------
.page-subheader {
border-bottom: 1px solid @T3borderColor;
margin: 0 0 @T3globalMargin;
.clearfix();
}
.page-subtitle,
.page-subheader h2 {
line-height: 1;
margin: 0;
}
.page-header + .page-subheader {
margin-top: -@T3globalMargin; //If there is page header, then omit the space before page subheader
}
// Article Header
// --------------
.article-header {
}
.article-title,
.article-header h1, {
margin: 0 0 @T3globalMargin/2 0;
line-height: 1;
}
// Smaller "Article Title" in Blog and List layout
h2.article-title,
.article-header h2 {
}
// Item Header
// -----------
.item-title {
font-weight: bold;
}
// LISTS
// ------------------------------------------------------
// Unordered and Ordered lists
// ---------------------------
ul, ol {
padding: 0;
margin: 0 0 @T3globalMargin / 2 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
line-height: @baseLineHeight;
}
// Remove default list styles
ul.unstyled,
ol.unstyled {
margin-left: 0;
list-style: none;
}
// Single-line list items
ul.inline,
ol.inline {
margin-left: 0;
list-style: none;
> li {
display: inline-block;
.ie7-inline-block();
padding-left: 5px;
padding-right: 5px;
}
}
// Description Lists
// -----------------
dl {
margin-bottom: @baseLineHeight;
}
dt,
dd {
line-height: @baseLineHeight;
}
dt {
font-weight: bold;
}
dd {
margin-left: @T3globalMargin / 2;
}
// Horizontal layout (like forms)
.dl-horizontal {
.clearfix(); // Ensure dl clears floats if empty dd elements present
dt {
float: left;
width: @horizontalComponentOffset - 20;
clear: left;
text-align: right;
.text-overflow();
}
dd {
margin-left: @horizontalComponentOffset;
}
}
// LABELS & BADGES
// --------------------------------------------------
// Base classes
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: @baseFontSize * .846;
font-weight: bold;
line-height: 14px; // ensure proper line-height if floated
color: @white;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight;
}
// Set unique padding and border-radius
.label {
.border-radius(@baseBorderRadius);
}
.badge {
padding-left: 9px;
padding-right: 9px;
.border-radius(@baseBorderRadius);
}
// Empty labels/badges collapse
.label,
.badge {
&:empty {
display: none;
}
}
// Hover/focus state, but only for links
a {
&.label:hover,
&.label:focus,
&.badge:hover,
&.badge:focus {
color: @white;
text-decoration: none;
cursor: pointer;
}
}
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label,
.badge {
// Important (red)
&-important { background-color: @errorText; }
&-important[href] { background-color: darken(@errorText, 10%); }
// Warnings (orange)
&-warning { background-color: @orange; }
&-warning[href] { background-color: darken(@orange, 10%); }
// Success (green)
&-success { background-color: @successText; }
&-success[href] { background-color: darken(@successText, 10%); }
// Info (turquoise)
&-info { background-color: @infoText; }
&-info[href] { background-color: darken(@infoText, 10%); }
// Inverse (black)
&-inverse { background-color: @grayDark; }
&-inverse[href] { background-color: darken(@grayDark, 10%); }
}
// Quick fix for labels/badges in buttons
.btn {
.label,
.badge {
position: relative;
top: -1px;
}
}
.btn-mini {
.label,
.badge {
top: 0;
}
}
// Quick fix for labels/badges in page-header- NNTH
.page-header {
.label,
.badge {
vertical-align: middle;
}
}
// MISC
// ------------------------------------------------------
// Abbreviations and acronyms
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @grayLight;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
// -----------
blockquote {
padding: 0 0 0 15px;
margin: 0 0 @T3globalMargin;
border-left: 5px solid @grayLighter;
p {
margin-bottom: 0;
font-size: @baseFontSize * 1.25;
font-weight: 300;
line-height: 1.25;
}
small {
display: block;
line-height: @baseLineHeight;
color: @grayLight;
&:before {
content: '\2014 \00A0';
}
}
// Float right with text-align: right
&.pull-right {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @grayLighter;
border-left: 0;
p,
small {
text-align: right;
}
small {
&:before {
content: '';
}
&:after {
content: '\00A0 \2014';
}
}
}
}
// Quotes
// ------
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
// Addresses
// ---------
address {
display: block;
margin-bottom: 0;
font-style: normal;
line-height: @baseLineHeight;
}