aleph1.co.uk Git - yaffs-website/blob - vendor/twbs/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss

   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
 106 @include text-emphasis-variant('.text-primary', $brand-primary);
 107
 108 @include text-emphasis-variant('.text-success', $state-success-text);
 109
 110 @include text-emphasis-variant('.text-info', $state-info-text);
 111
 112 @include text-emphasis-variant('.text-warning', $state-warning-text);
 113
 114 @include text-emphasis-variant('.text-danger', $state-danger-text);
 115
 116 // Contextual backgrounds
 117 // For now we'll leave these alongside the text classes until v4 when we can
 118 // safely shift things around (per SemVer rules).
 119 .bg-primary {
 120   // Given the contrast here, this is the only class to have its color inverted
 121   // automatically.
 122   color: #fff;
 123 }
 124 @include bg-variant('.bg-primary', $brand-primary);
 125
 126 @include bg-variant('.bg-success', $state-success-bg);
 127
 128 @include bg-variant('.bg-info', $state-info-bg);
 129
 130 @include bg-variant('.bg-warning', $state-warning-bg);
 131
 132 @include bg-variant('.bg-danger', $state-danger-bg);
 133
 134
 135 // Page header
 136 // -------------------------
 137
 138 .page-header {
 139   padding-bottom: (($line-height-computed / 2) - 1);
 140   margin: ($line-height-computed * 2) 0 $line-height-computed;
 141   border-bottom: 1px solid $page-header-border-color;
 142 }
 143
 144
 145 // Lists
 146 // -------------------------
 147
 148 // Unordered and Ordered lists
 149 ul,
 150 ol {
 151   margin-top: 0;
 152   margin-bottom: ($line-height-computed / 2);
 153   ul,
 154   ol {
 155     margin-bottom: 0;
 156   }
 157 }
 158
 159 // List options
 160
 161 // [converter] extracted from `.list-unstyled` for libsass compatibility
 162 @mixin list-unstyled {
 163   padding-left: 0;
 164   list-style: none;
 165 }
 166 // [converter] extracted as `@mixin list-unstyled` for libsass compatibility
 167 .list-unstyled {
 168   @include list-unstyled;
 169 }
 170
 171
 172 // Inline turns list items into inline-block
 173 .list-inline {
 174   @include list-unstyled;
 175   margin-left: -5px;
 176
 177   > li {
 178     display: inline-block;
 179     padding-left: 5px;
 180     padding-right: 5px;
 181   }
 182 }
 183
 184 // Description Lists
 185 dl {
 186   margin-top: 0; // Remove browser default
 187   margin-bottom: $line-height-computed;
 188 }
 189 dt,
 190 dd {
 191   line-height: $line-height-base;
 192 }
 193 dt {
 194   font-weight: bold;
 195 }
 196 dd {
 197   margin-left: 0; // Undo browser default
 198 }
 199
 200 // Horizontal description lists
 201 //
 202 // Defaults to being stacked without any of the below styles applied, until the
 203 // grid breakpoint is reached (default of ~768px).
 204
 205 .dl-horizontal {
 206   dd {
 207     @include clearfix; // Clear the floated `dt` if an empty `dd` is present
 208   }
 209
 210   @media (min-width: $dl-horizontal-breakpoint) {
 211     dt {
 212       float: left;
 213       width: ($dl-horizontal-offset - 20);
 214       clear: left;
 215       text-align: right;
 216       @include text-overflow;
 217     }
 218     dd {
 219       margin-left: $dl-horizontal-offset;
 220     }
 221   }
 222 }
 223
 224
 225 // Misc
 226 // -------------------------
 227
 228 // Abbreviations and acronyms
 229 abbr[title],
 230 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 231 abbr[data-original-title] {
 232   cursor: help;
 233   border-bottom: 1px dotted $abbr-border-color;
 234 }
 235 .initialism {
 236   font-size: 90%;
 237   @extend .text-uppercase;
 238 }
 239
 240 // Blockquotes
 241 blockquote {
 242   padding: ($line-height-computed / 2) $line-height-computed;
 243   margin: 0 0 $line-height-computed;
 244   font-size: $blockquote-font-size;
 245   border-left: 5px solid $blockquote-border-color;
 246
 247   p,
 248   ul,
 249   ol {
 250     &:last-child {
 251       margin-bottom: 0;
 252     }
 253   }
 254
 255   // Note: Deprecated small and .small as of v3.1.0
 256   // Context: https://github.com/twbs/bootstrap/issues/11660
 257   footer,
 258   small,
 259   .small {
 260     display: block;
 261     font-size: 80%; // back to default font-size
 262     line-height: $line-height-base;
 263     color: $blockquote-small-color;
 264
 265     &:before {
 266       content: '\2014 \00A0'; // em dash, nbsp
 267     }
 268   }
 269 }
 270
 271 // Opposite alignment of blockquote
 272 //
 273 // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
 274 .blockquote-reverse,
 275 blockquote.pull-right {
 276   padding-right: 15px;
 277   padding-left: 0;
 278   border-right: 5px solid $blockquote-border-color;
 279   border-left: 0;
 280   text-align: right;
 281
 282   // Account for citation
 283   footer,
 284   small,
 285   .small {
 286     &:before { content: ''; }
 287     &:after {
 288       content: '\00A0 \2014'; // nbsp, em dash
 289     }
 290   }
 291 }
 292
 293 // Addresses
 294 address {
 295   margin-bottom: $line-height-computed;
 296   font-style: normal;
 297   line-height: $line-height-base;
 298 }