git.roojs.org Git - roojs1/blob - less/bootstrap/type.less

   1 //
   2 // Typography
   3 // --------------------------------------------------
   4
   5
   6 // Headings
   7 // -------------------------
   8
   9 h1, h2, h3, h4, h5, h6,
  10 .h1, .h2, .h3, .h4, .h5, .h6 {
  11   font-family: @headings-font-family;
  12   font-weight: @headings-font-weight;
  13   line-height: @headings-line-height;
  14   color: @headings-color;
  15
  16   small,
  17   .small {
  18     font-weight: normal;
  19     line-height: 1;
  20     color: @headings-small-color;
  21   }
  22 }
  23
  24 h1, .h1,
  25 h2, .h2,
  26 h3, .h3 {
  27   margin-top: @line-height-computed;
  28   margin-bottom: (@line-height-computed / 2);
  29
  30   small,
  31   .small {
  32     font-size: 65%;
  33   }
  34 }
  35 h4, .h4,
  36 h5, .h5,
  37 h6, .h6 {
  38   margin-top: (@line-height-computed / 2);
  39   margin-bottom: (@line-height-computed / 2);
  40
  41   small,
  42   .small {
  43     font-size: 75%;
  44   }
  45 }
  46
  47 h1, .h1 { font-size: @font-size-h1; }
  48 h2, .h2 { font-size: @font-size-h2; }
  49 h3, .h3 { font-size: @font-size-h3; }
  50 h4, .h4 { font-size: @font-size-h4; }
  51 h5, .h5 { font-size: @font-size-h5; }
  52 h6, .h6 { font-size: @font-size-h6; }
  53
  54
  55 // Body text
  56 // -------------------------
  57
  58 p {
  59   margin: 0 0 (@line-height-computed / 2);
  60 }
  61
  62 .lead {
  63   margin-bottom: @line-height-computed;
  64   font-size: floor((@font-size-base * 1.15));
  65   font-weight: 300;
  66   line-height: 1.4;
  67
  68   @media (min-width: @screen-sm-min) {
  69     font-size: (@font-size-base * 1.5);
  70   }
  71 }
  72
  73
  74 // Emphasis & misc
  75 // -------------------------
  76
  77 // Ex: (12px small font / 14px base font) * 100% = about 85%
  78 small,
  79 .small {
  80   font-size: floor((100% * @font-size-small / @font-size-base));
  81 }
  82
  83 mark,
  84 .mark {
  85   background-color: @state-warning-bg;
  86   padding: .2em;
  87 }
  88
  89 // Alignment
  90 .text-left           { text-align: left; }
  91 .text-right          { text-align: right; }
  92 .text-center         { text-align: center; }
  93 .text-justify        { text-align: justify; }
  94 .text-nowrap         { white-space: nowrap; }
  95
  96 // Transformation
  97 .text-lowercase      { text-transform: lowercase; }
  98 .text-uppercase      { text-transform: uppercase; }
  99 .text-capitalize     { text-transform: capitalize; }
 100
 101 // Contextual colors
 102 .text-muted {
 103   color: @text-muted;
 104 }
 105 .text-primary {
 106   .text-emphasis-variant(@brand-primary);
 107 }
 108 .text-success {
 109   .text-emphasis-variant(@state-success-text);
 110 }
 111 .text-info {
 112   .text-emphasis-variant(@state-info-text);
 113 }
 114 .text-warning {
 115   .text-emphasis-variant(@state-warning-text);
 116 }
 117 .text-danger {
 118   .text-emphasis-variant(@state-danger-text);
 119 }
 120
 121 // Contextual backgrounds
 122 // For now we'll leave these alongside the text classes until v4 when we can
 123 // safely shift things around (per SemVer rules).
 124 .bg-primary {
 125   // Given the contrast here, this is the only class to have its color inverted
 126   // automatically.
 127   color: #fff;
 128   .bg-variant(@brand-primary);
 129 }
 130 .bg-success {
 131   .bg-variant(@state-success-bg);
 132 }
 133 .bg-info {
 134   .bg-variant(@state-info-bg);
 135 }
 136 .bg-warning {
 137   .bg-variant(@state-warning-bg);
 138 }
 139 .bg-danger {
 140   .bg-variant(@state-danger-bg);
 141 }
 142
 143
 144 // Page header
 145 // -------------------------
 146
 147 .page-header {
 148   padding-bottom: ((@line-height-computed / 2) - 1);
 149   margin: (@line-height-computed * 2) 0 @line-height-computed;
 150   border-bottom: 1px solid @page-header-border-color;
 151 }
 152
 153
 154 // Lists
 155 // -------------------------
 156
 157 // Unordered and Ordered lists
 158 ul,
 159 ol {
 160   margin-top: 0;
 161   margin-bottom: (@line-height-computed / 2);
 162   ul,
 163   ol {
 164     margin-bottom: 0;
 165   }
 166 }
 167
 168 // List options
 169
 170 // Unstyled keeps list items block level, just removes default browser padding and list-style
 171 .list-unstyled {
 172   padding-left: 0;
 173   list-style: none;
 174 }
 175
 176 // Inline turns list items into inline-block
 177 .list-inline {
 178   .list-unstyled();
 179   margin-left: -5px;
 180
 181   > li {
 182     display: inline-block;
 183     padding-left: 5px;
 184     padding-right: 5px;
 185   }
 186 }
 187
 188 // Description Lists
 189 dl {
 190   margin-top: 0; // Remove browser default
 191   margin-bottom: @line-height-computed;
 192 }
 193 dt,
 194 dd {
 195   line-height: @line-height-base;
 196 }
 197 dt {
 198   font-weight: bold;
 199 }
 200 dd {
 201   margin-left: 0; // Undo browser default
 202 }
 203
 204 // Horizontal description lists
 205 //
 206 // Defaults to being stacked without any of the below styles applied, until the
 207 // grid breakpoint is reached (default of ~768px).
 208
 209 .dl-horizontal {
 210   dd {
 211     &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
 212   }
 213
 214   @media (min-width: @dl-horizontal-breakpoint) {
 215     dt {
 216       float: left;
 217       width: (@dl-horizontal-offset - 20);
 218       clear: left;
 219       text-align: right;
 220       .text-overflow();
 221     }
 222     dd {
 223       margin-left: @dl-horizontal-offset;
 224     }
 225   }
 226 }
 227
 228
 229 // Misc
 230 // -------------------------
 231
 232 .initialism {
 233   font-size: 90%;
 234   .text-uppercase();
 235 }
 236
 237 // Blockquotes
 238 blockquote {
 239   padding: (@line-height-computed / 2) @line-height-computed;
 240   margin: 0 0 @line-height-computed;
 241   font-size: @blockquote-font-size;
 242   border-left: 5px solid @blockquote-border-color;
 243
 244   p,
 245   ul,
 246   ol {
 247     &:last-child {
 248       margin-bottom: 0;
 249     }
 250   }
 251
 252   // Note: Deprecated small and .small as of v3.1.0
 253   // Context: https://github.com/twbs/bootstrap/issues/11660
 254   footer,
 255   small,
 256   .small {
 257     display: block;
 258     font-size: 80%; // back to default font-size
 259     line-height: @line-height-base;
 260     color: @blockquote-small-color;
 261
 262     &:before {
 263       content: '\2014 \00A0'; // em dash, nbsp
 264     }
 265   }
 266 }
 267
 268 // Opposite alignment of blockquote
 269 //
 270 // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
 271 .blockquote-reverse,
 272 blockquote.pull-right {
 273   padding-right: 15px;
 274   padding-left: 0;
 275   border-right: 5px solid @blockquote-border-color;
 276   border-left: 0;
 277   text-align: right;
 278
 279   // Account for citation
 280   footer,
 281   small,
 282   .small {
 283     &:before { content: ''; }
 284     &:after {
 285       content: '\00A0 \2014'; // nbsp, em dash
 286     }
 287   }
 288 }
 289
 290 // Addresses
 291 address {
 292   margin-bottom: @line-height-computed;
 293   font-style: normal;
 294   line-height: @line-height-base;
 295 }