Adding a 'horizontal' option to description lists, similar to .form-horizontal

This commit is contained in:
Dominic Barnes
2012-02-25 21:21:05 -06:00
parent 43760eb202
commit 0a8efd5320
7 changed files with 575 additions and 207 deletions

View File

@@ -130,6 +130,41 @@ dt {
dd {
margin-left: @baseLineHeight / 2;
}
// Horizontal layout (like forms)
dl.horizontal {
dt {
float: left;
clear: left;
width: 120px;
text-align: right;
}
dd {
margin-left: 130px;
}
&.horizontal-mini {
dt { width: 50px; }
dd { margin-left: 60px; }
}
&.horizontal-small {
dt { width: 90px; }
dd { margin-left: 100px; }
}
&.horizontal-normal {
// no additional styles needed
}
&.horizontal-large {
dt { width: 140px; }
dd { margin-left: 150px; }
}
&.horizontal-xlarge {
dt { width: 170px; }
dd { margin-left: 180px; }
}
&.horizontal-xxlarge {
dt { width: 190px; }
dd { margin-left: 200px; }
}
}
// MISC
// ----
@@ -198,7 +233,7 @@ blockquote {
// Quotes
q:before,
q:after,
blockquote:before,
blockquote:before,
blockquote:after {
content: "";
}