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 // Horizontal layout (like forms)
 145 .dl-horizontal {
 146   dt {
 147     float: left;
 148     width: (@component-offset-horizontal - 20);
 149     clear: left;
 150     text-align: right;
 151     .text-overflow();
 152   }
 153   dd {
 154     .clearfix(); // Clear the floated `dt` if an empty `dd` is present
 155     margin-left: @component-offset-horizontal;
 156   }
 157 }
 158
 159 // MISC
 160 // ----
 161
 162 // Abbreviations and acronyms
 163 abbr[title],
 164 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 165 abbr[data-original-title] {
 166   cursor: help;
 167   border-bottom: 1px dotted @abbr-border-color;
 168 }
 169 abbr.initialism {
 170   font-size: 90%;
 171   text-transform: uppercase;
 172 }
 173
 174 // Blockquotes
 175 blockquote {
 176   padding: (@line-height-computed / 2) @line-height-computed;
 177   margin: 0 0 @line-height-computed;
 178   border-left: 5px solid @blockquote-border-color;
 179   p {
 180     font-size: (@font-size-base * 1.25);
 181     font-weight: 300;
 182     line-height: 1.25;
 183   }
 184   p:last-child {
 185     margin-bottom: 0;
 186   }
 187   small {
 188     display: block;
 189     line-height: @line-height-base;
 190     color: @blockquote-small-color;
 191     &:before {
 192       content: '\2014 \00A0';// EM DASH, NBSP
 193     }
 194   }
 195
 196   // Float right with text-align: right
 197   &.pull-right {
 198     float: right;
 199     padding-right: 15px;
 200     padding-left: 0;
 201     border-right: 5px solid @blockquote-border-color;
 202     border-left: 0;
 203     p,
 204     small {
 205       text-align: right;
 206     }
 207     small {
 208       &:before {
 209         content: '';
 210       }
 211       &:after {
 212         content: '\00A0 \2014';// NBSP, EM DASH
 213       }
 214     }
 215   }
 216 }
 217
 218 // Quotes
 219 q:before,
 220 q:after,
 221 blockquote:before,
 222 blockquote:after {
 223   content: "";
 224 }
 225
 226 // Addresses
 227 address {
 228   display: block;
 229   margin-bottom: @line-height-computed;
 230   font-style: normal;
 231   line-height: @line-height-base;
 232 }