git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/type.less

   1 //
   2 // Typography
   3 // --------------------------------------------------
   4
   5
   6 // Body text
   7 // -------------------------
   8
   9 p {
  10   margin: 0 0 (@line-height-computed / 2);
  11 }
  12 .lead {
  13   margin-bottom: @line-height-computed;
  14   font-size: (@font-size-base * 1.15);
  15   font-weight: 200;
  16   line-height: 1.4;
  17
  18   @media (min-width: 768px) {
  19     font-size: (@font-size-base * 1.5);
  20   }
  21 }
  22
  23
  24 // Emphasis & misc
  25 // -------------------------
  26
  27 // Ex: 14px base font * 85% = about 12px
  28 small   { font-size: 85%; }
  29
  30 // Undo browser default styling
  31 cite    { font-style: normal; }
  32
  33 // Contextual emphasis
  34 .text-muted          { color: @text-muted; }
  35 .text-primary        { color: @brand-primary; }
  36 .text-warning        { color: @state-warning-text; }
  37 .text-danger         { color: @state-danger-text; }
  38 .text-success        { color: @state-success-text; }
  39 .text-info           { color: @state-info-text; }
  40
  41 // Alignment
  42 .text-left           { text-align: left; }
  43 .text-right          { text-align: right; }
  44 .text-center         { text-align: center; }
  45
  46
  47 // Headings
  48 // -------------------------
  49
  50 h1, h2, h3, h4, h5, h6,
  51 .h1, .h2, .h3, .h4, .h5, .h6 {
  52   font-family: @headings-font-family;
  53   font-weight: @headings-font-weight;
  54   line-height: @headings-line-height;
  55   small {
  56     font-weight: normal;
  57     line-height: 1;
  58     color: @headings-small-color;
  59   }
  60 }
  61
  62 h1,
  63 h2,
  64 h3 {
  65   margin-top: @line-height-computed;
  66   margin-bottom: (@line-height-computed / 2);
  67 }
  68 h4,
  69 h5,
  70 h6 {
  71   margin-top: (@line-height-computed / 2);
  72   margin-bottom: (@line-height-computed / 2);
  73 }
  74
  75 h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
  76 h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
  77 h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
  78 h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
  79 h5, .h5 { font-size:  @font-size-base; }
  80 h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
  81
  82 h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
  83 h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
  84 h3 small, .h3 small,
  85 h4 small, .h4 small { font-size: @font-size-base; }
  86
  87
  88 // Page header
  89 // -------------------------
  90
  91 .page-header {
  92   padding-bottom: ((@line-height-computed / 2) - 1);
  93   margin: (@line-height-computed * 2) 0 @line-height-computed;
  94   border-bottom: 1px solid @page-header-border-color;
  95 }
  96
  97
  98
  99 // Lists
 100 // --------------------------------------------------
 101
 102 // Unordered and Ordered lists
 103 ul,
 104 ol {
 105   margin-top: 0;
 106   margin-bottom: (@line-height-computed / 2);
 107   ul,
 108   ol{
 109     margin-bottom: 0;
 110   }
 111 }
 112
 113 // List options
 114
 115 // Unstyled keeps list items block level, just removes default browser padding and list-style
 116 .list-unstyled {
 117   padding-left: 0;
 118   list-style: none;
 119 }
 120 // Inline turns list items into inline-block
 121 .list-inline {
 122   .list-unstyled();
 123   > li {
 124     display: inline-block;
 125     padding-left: 5px;
 126     padding-right: 5px;
 127   }
 128 }
 129
 130 // Description Lists
 131 dl {
 132   margin-bottom: @line-height-computed;
 133 }
 134 dt,
 135 dd {
 136   line-height: @line-height-base;
 137 }
 138 dt {
 139   font-weight: bold;
 140 }
 141 dd {
 142   margin-left: 0; // Undo browser default
 143 }
 144
 145 // Horizontal description lists
 146 //
 147 // Defaults to being stacked without any of the below styles applied, until the
 148 // grid breakpoint is reached (default of ~768px).
 149
 150 @media (min-width: @grid-float-breakpoint) {
 151   .dl-horizontal {
 152     dt {
 153       float: left;
 154       width: (@component-offset-horizontal - 20);
 155       clear: left;
 156       text-align: right;
 157       .text-overflow();
 158     }
 159     dd {
 160       margin-left: @component-offset-horizontal;
 161       .clearfix(); // Clear the floated `dt` if an empty `dd` is present
 162     }
 163   }
 164 }
 165
 166 // MISC
 167 // ----
 168
 169 // Abbreviations and acronyms
 170 abbr[title],
 171 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 172 abbr[data-original-title] {
 173   cursor: help;
 174   border-bottom: 1px dotted @abbr-border-color;
 175 }
 176 abbr.initialism {
 177   font-size: 90%;
 178   text-transform: uppercase;
 179 }
 180
 181 // Blockquotes
 182 blockquote {
 183   padding: (@line-height-computed / 2) @line-height-computed;
 184   margin: 0 0 @line-height-computed;
 185   border-left: 5px solid @blockquote-border-color;
 186   p {
 187     font-size: (@font-size-base * 1.25);
 188     font-weight: 300;
 189     line-height: 1.25;
 190   }
 191   p:last-child {
 192     margin-bottom: 0;
 193   }
 194   small {
 195     display: block;
 196     line-height: @line-height-base;
 197     color: @blockquote-small-color;
 198     &:before {
 199       content: '\2014 \00A0';// EM DASH, NBSP
 200     }
 201   }
 202
 203   // Float right with text-align: right
 204   &.pull-right {
 205     padding-right: 15px;
 206     padding-left: 0;
 207     border-right: 5px solid @blockquote-border-color;
 208     border-left: 0;
 209     p,
 210     small {
 211       text-align: right;
 212     }
 213     small {
 214       &:before {
 215         content: '';
 216       }
 217       &:after {
 218         content: '\00A0 \2014';// NBSP, EM DASH
 219       }
 220     }
 221   }
 222 }
 223
 224 // Quotes
 225 q:before,
 226 q:after,
 227 blockquote:before,
 228 blockquote:after {
 229   content: "";
 230 }
 231
 232 // Addresses
 233 address {
 234   display: block;
 235   margin-bottom: @line-height-computed;
 236   font-style: normal;
 237   line-height: @line-height-base;
 238 }