1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/type.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,281 @@
1.4 +//
1.5 +// Typography
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +// Headings
1.10 +// -------------------------
1.11 +
1.12 +h1, h2, h3, h4, h5, h6,
1.13 +.h1, .h2, .h3, .h4, .h5, .h6 {
1.14 + font-family: @headings-font-family;
1.15 + font-weight: @headings-font-weight;
1.16 + line-height: @headings-line-height;
1.17 + color: @headings-color;
1.18 +
1.19 + small,
1.20 + .small {
1.21 + font-weight: normal;
1.22 + line-height: 1;
1.23 + color: @headings-small-color;
1.24 + }
1.25 +}
1.26 +
1.27 +h1,
1.28 +h2,
1.29 +h3 {
1.30 + margin-top: @line-height-computed;
1.31 + margin-bottom: (@line-height-computed / 2);
1.32 +
1.33 + small,
1.34 + .small {
1.35 + font-size: 65%;
1.36 + }
1.37 +}
1.38 +h4,
1.39 +h5,
1.40 +h6 {
1.41 + margin-top: (@line-height-computed / 2);
1.42 + margin-bottom: (@line-height-computed / 2);
1.43 +
1.44 + small,
1.45 + .small {
1.46 + font-size: 75%;
1.47 + }
1.48 +}
1.49 +
1.50 +h1, .h1 { font-size: @font-size-h1; }
1.51 +h2, .h2 { font-size: @font-size-h2; }
1.52 +h3, .h3 { font-size: @font-size-h3; }
1.53 +h4, .h4 { font-size: @font-size-h4; }
1.54 +h5, .h5 { font-size: @font-size-h5; }
1.55 +h6, .h6 { font-size: @font-size-h6; }
1.56 +
1.57 +
1.58 +// Body text
1.59 +// -------------------------
1.60 +
1.61 +p {
1.62 + margin: 0 0 (@line-height-computed / 2);
1.63 +}
1.64 +
1.65 +.lead {
1.66 + margin-bottom: @line-height-computed;
1.67 + font-size: floor(@font-size-base * 1.15);
1.68 + font-weight: 200;
1.69 + line-height: 1.4;
1.70 +
1.71 + @media (min-width: @screen-sm-min) {
1.72 + font-size: (@font-size-base * 1.5);
1.73 + }
1.74 +}
1.75 +
1.76 +
1.77 +// Emphasis & misc
1.78 +// -------------------------
1.79 +
1.80 +// Ex: 14px base font * 85% = about 12px
1.81 +small,
1.82 +.small { font-size: 85%; }
1.83 +
1.84 +// Undo browser default styling
1.85 +cite { font-style: normal; }
1.86 +
1.87 +// Contextual emphasis
1.88 +.text-muted {
1.89 + color: @text-muted;
1.90 +}
1.91 +.text-primary {
1.92 + color: @brand-primary;
1.93 + &:hover {
1.94 + color: darken(@brand-primary, 10%);
1.95 + }
1.96 +}
1.97 +.text-warning {
1.98 + color: @state-warning-text;
1.99 + &:hover {
1.100 + color: darken(@state-warning-text, 10%);
1.101 + }
1.102 +}
1.103 +.text-danger {
1.104 + color: @state-danger-text;
1.105 + &:hover {
1.106 + color: darken(@state-danger-text, 10%);
1.107 + }
1.108 +}
1.109 +.text-success {
1.110 + color: @state-success-text;
1.111 + &:hover {
1.112 + color: darken(@state-success-text, 10%);
1.113 + }
1.114 +}
1.115 +.text-info {
1.116 + color: @state-info-text;
1.117 + &:hover {
1.118 + color: darken(@state-info-text, 10%);
1.119 + }
1.120 +}
1.121 +
1.122 +// Alignment
1.123 +.text-left { text-align: left; }
1.124 +.text-right { text-align: right; }
1.125 +.text-center { text-align: center; }
1.126 +
1.127 +
1.128 +// Page header
1.129 +// -------------------------
1.130 +
1.131 +.page-header {
1.132 + padding-bottom: ((@line-height-computed / 2) - 1);
1.133 + margin: (@line-height-computed * 2) 0 @line-height-computed;
1.134 + border-bottom: 1px solid @page-header-border-color;
1.135 +}
1.136 +
1.137 +
1.138 +// Lists
1.139 +// --------------------------------------------------
1.140 +
1.141 +// Unordered and Ordered lists
1.142 +ul,
1.143 +ol {
1.144 + margin-top: 0;
1.145 + margin-bottom: (@line-height-computed / 2);
1.146 + ul,
1.147 + ol {
1.148 + margin-bottom: 0;
1.149 + }
1.150 +}
1.151 +
1.152 +// List options
1.153 +
1.154 +// Unstyled keeps list items block level, just removes default browser padding and list-style
1.155 +.list-unstyled {
1.156 + padding-left: 0;
1.157 + list-style: none;
1.158 +}
1.159 +
1.160 +// Inline turns list items into inline-block
1.161 +.list-inline {
1.162 + .list-unstyled();
1.163 +
1.164 + > li {
1.165 + display: inline-block;
1.166 + padding-left: 5px;
1.167 + padding-right: 5px;
1.168 +
1.169 + &:first-child {
1.170 + padding-left: 0;
1.171 + }
1.172 + }
1.173 +}
1.174 +
1.175 +// Description Lists
1.176 +dl {
1.177 + margin-top: 0; // Remove browser default
1.178 + margin-bottom: @line-height-computed;
1.179 +}
1.180 +dt,
1.181 +dd {
1.182 + line-height: @line-height-base;
1.183 +}
1.184 +dt {
1.185 + font-weight: bold;
1.186 +}
1.187 +dd {
1.188 + margin-left: 0; // Undo browser default
1.189 +}
1.190 +
1.191 +// Horizontal description lists
1.192 +//
1.193 +// Defaults to being stacked without any of the below styles applied, until the
1.194 +// grid breakpoint is reached (default of ~768px).
1.195 +
1.196 +@media (min-width: @grid-float-breakpoint) {
1.197 + .dl-horizontal {
1.198 + dt {
1.199 + float: left;
1.200 + width: (@component-offset-horizontal - 20);
1.201 + clear: left;
1.202 + text-align: right;
1.203 + .text-overflow();
1.204 + }
1.205 + dd {
1.206 + margin-left: @component-offset-horizontal;
1.207 + .clearfix(); // Clear the floated `dt` if an empty `dd` is present
1.208 + }
1.209 + }
1.210 +}
1.211 +
1.212 +// MISC
1.213 +// ----
1.214 +
1.215 +// Abbreviations and acronyms
1.216 +abbr[title],
1.217 +// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
1.218 +abbr[data-original-title] {
1.219 + cursor: help;
1.220 + border-bottom: 1px dotted @abbr-border-color;
1.221 +}
1.222 +.initialism {
1.223 + font-size: 90%;
1.224 + text-transform: uppercase;
1.225 +}
1.226 +
1.227 +// Blockquotes
1.228 +blockquote {
1.229 + padding: (@line-height-computed / 2) @line-height-computed;
1.230 + margin: 0 0 @line-height-computed;
1.231 + border-left: 5px solid @blockquote-border-color;
1.232 + p {
1.233 + font-size: (@font-size-base * 1.25);
1.234 + font-weight: 300;
1.235 + line-height: 1.25;
1.236 + }
1.237 + p:last-child {
1.238 + margin-bottom: 0;
1.239 + }
1.240 + small,
1.241 + .small {
1.242 + display: block;
1.243 + line-height: @line-height-base;
1.244 + color: @blockquote-small-color;
1.245 + &:before {
1.246 + content: '\2014 \00A0'; // EM DASH, NBSP
1.247 + }
1.248 + }
1.249 +
1.250 + // Float right with text-align: right
1.251 + &.pull-right {
1.252 + padding-right: 15px;
1.253 + padding-left: 0;
1.254 + border-right: 5px solid @blockquote-border-color;
1.255 + border-left: 0;
1.256 + p,
1.257 + small,
1.258 + .small {
1.259 + text-align: right;
1.260 + }
1.261 + small,
1.262 + .small {
1.263 + &:before {
1.264 + content: '';
1.265 + }
1.266 + &:after {
1.267 + content: '\00A0 \2014'; // NBSP, EM DASH
1.268 + }
1.269 + }
1.270 + }
1.271 +}
1.272 +
1.273 +// Quotes
1.274 +blockquote:before,
1.275 +blockquote:after {
1.276 + content: "";
1.277 +}
1.278 +
1.279 +// Addresses
1.280 +address {
1.281 + margin-bottom: @line-height-computed;
1.282 + font-style: normal;
1.283 + line-height: @line-height-base;
1.284 +}