summaryrefslogtreecommitdiff
path: root/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss
diff options
context:
space:
mode:
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss')
-rw-r--r--xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss357
1 files changed, 216 insertions, 141 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss
index 5670b49..7fee043 100644
--- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss
+++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss
@@ -1,209 +1,284 @@
-// Typography.less
-// Headings, body text, lists, code, and more for a versatile and durable typography system
-// ----------------------------------------------------------------------------------------
+//
+// Typography
+// --------------------------------------------------
-// BODY TEXT
-// ---------
+// Headings
+// -------------------------
-p {
- margin: 0 0 $baseLineHeight / 2;
- font-family: $baseFontFamily;
- font-size: $baseFontSize;
- line-height: $baseLineHeight;
- small {
- font-size: $baseFontSize - 2;
- color: $grayLight;
- }
-}
-.lead {
- margin-bottom: $baseLineHeight;
- font-size: 20px;
- font-weight: 200;
- line-height: $baseLineHeight * 1.5;
-}
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ font-family: $headings-font-family;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: $headings-color;
-// HEADINGS
-// --------
-
-h1, h2, h3, h4, h5, h6 {
- margin: 0;
- font-weight: bold;
- color: $grayDark;
- text-rendering: optimizelegibility; // Fix the character spacing for headings
- small {
+ small,
+ .small {
font-weight: normal;
- color: $grayLight;
+ line-height: 1;
+ color: $headings-small-color;
}
}
-h1 {
- font-size: 30px;
- line-height: $baseLineHeight * 2;
- small {
- font-size: 18px;
- }
-}
-h2 {
- font-size: 24px;
- line-height: $baseLineHeight * 2;
- small {
- font-size: 18px;
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+ margin-top: $line-height-computed;
+ margin-bottom: ($line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 65%;
}
}
-h3 {
- line-height: $baseLineHeight * 1.5;
- font-size: 18px;
- small {
- font-size: 14px;
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+ margin-top: ($line-height-computed / 2);
+ margin-bottom: ($line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 75%;
}
}
-h4, h5, h6 {
- line-height: $baseLineHeight;
+
+h1, .h1 { font-size: $font-size-h1; }
+h2, .h2 { font-size: $font-size-h2; }
+h3, .h3 { font-size: $font-size-h3; }
+h4, .h4 { font-size: $font-size-h4; }
+h5, .h5 { font-size: $font-size-h5; }
+h6, .h6 { font-size: $font-size-h6; }
+
+
+// Body text
+// -------------------------
+
+p {
+ margin: 0 0 ($line-height-computed / 2);
}
-h4 {
- font-size: 14px;
- small {
- font-size: 12px;
+
+.lead {
+ margin-bottom: $line-height-computed;
+ font-size: floor(($font-size-base * 1.15));
+ font-weight: 200;
+ line-height: 1.4;
+
+ @media (min-width: $screen-sm-min) {
+ font-size: ($font-size-base * 1.5);
}
}
-h5 {
- font-size: 12px;
+
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: 14px base font * 85% = about 12px
+small,
+.small { font-size: 85%; }
+
+// Undo browser default styling
+cite { font-style: normal; }
+
+// Alignment
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+.text-justify { text-align: justify; }
+
+// Contextual colors
+.text-muted {
+ color: $text-muted;
}
-h6 {
- font-size: 11px;
- color: $grayLight;
- text-transform: uppercase;
+
+@include text-emphasis-variant('.text-primary', $brand-primary);
+
+@include text-emphasis-variant('.text-success', $state-success-text);
+
+@include text-emphasis-variant('.text-info', $state-info-text);
+
+@include text-emphasis-variant('.text-warning', $state-warning-text);
+
+@include text-emphasis-variant('.text-danger', $state-danger-text);
+
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+.bg-primary {
+ // Given the contrast here, this is the only class to have its color inverted
+ // automatically.
+ color: #fff;
}
+@include bg-variant('.bg-primary', $brand-primary);
+
+@include bg-variant('.bg-success', $state-success-bg);
+
+@include bg-variant('.bg-info', $state-info-bg);
+
+@include bg-variant('.bg-warning', $state-warning-bg);
+
+@include bg-variant('.bg-danger', $state-danger-bg);
+
// Page header
+// -------------------------
+
.page-header {
- padding-bottom: $baseLineHeight - 1;
- margin: $baseLineHeight 0;
- border-bottom: 1px solid $grayLighter;
+ padding-bottom: (($line-height-computed / 2) - 1);
+ margin: ($line-height-computed * 2) 0 $line-height-computed;
+ border-bottom: 1px solid $page-header-border-color;
}
-.page-header h1 {
- line-height: 1;
-}
-
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
// Unordered and Ordered lists
-ul, ol {
- padding: 0;
- margin: 0 0 $baseLineHeight / 2 25px;
-}
-ul ul, ul ol, ol ol, ol ul {
- margin-bottom: 0;
-}
-ul {
- list-style: disc;
-}
+ul,
ol {
- list-style: decimal;
-}
-li {
- line-height: $baseLineHeight;
+ margin-top: 0;
+ margin-bottom: ($line-height-computed / 2);
+ ul,
+ ol {
+ margin-bottom: 0;
+ }
}
-ul.unstyled, ol.unstyled {
- margin-left: 0;
+
+// List options
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+ padding-left: 0;
list-style: none;
}
+// Inline turns list items into inline-block
+.list-inline {
+ @extend .list-unstyled;
+ margin-left: -5px;
+
+ > li {
+ display: inline-block;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+}
+
// Description Lists
dl {
- margin-bottom: $baseLineHeight;
+ margin-top: 0; // Remove browser default
+ margin-bottom: $line-height-computed;
}
-dt, dd {
- line-height: $baseLineHeight;
+dt,
+dd {
+ line-height: $line-height-base;
}
dt {
font-weight: bold;
}
dd {
- margin-left: $baseLineHeight / 2;
+ margin-left: 0; // Undo browser default
}
-// MISC
-// ----
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
-// Horizontal rules
-hr {
- margin: $baseLineHeight 0;
- border: 0;
- border-top: 1px solid $hrBorder;
- border-bottom: 1px solid $white;
+@media (min-width: $grid-float-breakpoint) {
+ .dl-horizontal {
+ dt {
+ float: left;
+ width: ($component-offset-horizontal - 20);
+ clear: left;
+ text-align: right;
+ @include text-overflow();
+ }
+ dd {
+ margin-left: $component-offset-horizontal;
+ @include clearfix(); // Clear the floated `dt` if an empty `dd` is present
+ }
+ }
}
-// Emphasis
-strong {
- font-weight: bold;
-}
-em {
- font-style: italic;
-}
-.muted {
- color: $grayLight;
-}
+// MISC
+// ----
// Abbreviations and acronyms
-abbr {
+abbr[title],
+// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+abbr[data-original-title] {
+ cursor: help;
+ border-bottom: 1px dotted $abbr-border-color;
+}
+.initialism {
font-size: 90%;
text-transform: uppercase;
- border-bottom: 1px dotted #ddd;
- cursor: help;
}
// Blockquotes
blockquote {
- padding: 0 0 0 15px;
- margin: 0 0 $baseLineHeight;
- border-left: 5px solid $grayLighter;
- p {
- margin-bottom: 0;
- @include font-shorthand(16px,300,$baseLineHeight * 1.25);
+ padding: ($line-height-computed / 2) $line-height-computed;
+ margin: 0 0 $line-height-computed;
+ font-size: $blockquote-font-size;
+ border-left: 5px solid $blockquote-border-color;
+
+ p,
+ ul,
+ ol {
+ &:last-child {
+ margin-bottom: 0;
+ }
}
- small {
+
+ // Note: Deprecated small and .small as of v3.1.0
+ // Context: https://github.com/twbs/bootstrap/issues/11660
+ footer,
+ small,
+ .small {
display: block;
- line-height: $baseLineHeight;
- color: $grayLight;
+ font-size: 80%; // back to default font-size
+ line-height: $line-height-base;
+ color: $blockquote-small-color;
+
&:before {
- content: '\2014 \00A0';
+ content: '\2014 \00A0'; // em dash, nbsp
}
}
+}
- // Float right with text-align: right
- &.pull-right {
- float: right;
- padding-left: 0;
- padding-right: 15px;
- border-left: 0;
- border-right: 5px solid $grayLighter;
- p, small {
- text-align: right;
+// Opposite alignment of blockquote
+//
+// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
+.blockquote-reverse,
+blockquote.pull-right {
+ padding-right: 15px;
+ padding-left: 0;
+ border-right: 5px solid $blockquote-border-color;
+ border-left: 0;
+ text-align: right;
+
+ // Account for citation
+ footer,
+ small,
+ .small {
+ &:before { content: ''; }
+ &:after {
+ content: '\00A0 \2014'; // nbsp, em dash
}
}
}
// Quotes
-q:before, q:after, blockquote:before, blockquote:after {
+blockquote:before,
+blockquote:after {
content: "";
}
// Addresses
address {
- display: block;
- margin-bottom: $baseLineHeight;
- line-height: $baseLineHeight;
+ margin-bottom: $line-height-computed;
font-style: normal;
+ line-height: $line-height-base;
}
-
-// Misc
-small {
- font-size: 100%;
-}
-cite {
- font-style: normal;
-} \ No newline at end of file
View Lorry Controller Status