// --------------------------------------------------
+// Headings
+// -------------------------
+
+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;
+
+ small,
+ .small {
+ font-weight: normal;
+ line-height: 1;
+ color: @headings-small-color;
+ }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+ margin-top: @line-height-computed;
+ margin-bottom: (@line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 65%;
+ }
+}
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+ margin-top: (@line-height-computed / 2);
+ margin-bottom: (@line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 75%;
+ }
+}
+
+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 @baseLineHeight / 2;
+ margin: 0 0 (@line-height-computed / 2);
}
+
.lead {
- margin-bottom: @baseLineHeight;
- font-size: @baseFontSize * 1.5;
+ margin-bottom: @line-height-computed;
+ font-size: floor((@font-size-base * 1.15));
font-weight: 200;
- line-height: @baseLineHeight * 1.5;
+ line-height: 1.4;
+
+ @media (min-width: @screen-sm-min) {
+ font-size: (@font-size-base * 1.5);
+ }
}
// Emphasis & misc
// -------------------------
-small {
- font-size: 85%; // Ex: 14px base font * 85% = about 12px
-}
-strong {
- font-weight: bold;
+// 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;
}
-em {
- font-style: italic;
+.text-primary {
+ .text-emphasis-variant(@brand-primary);
}
-cite {
- font-style: normal;
+.text-success {
+ .text-emphasis-variant(@state-success-text);
}
-
-// Utility classes
-.muted {
- color: @grayLight;
+.text-info {
+ .text-emphasis-variant(@state-info-text);
}
.text-warning {
- color: @warningText;
+ .text-emphasis-variant(@state-warning-text);
}
-.text-error {
- color: @errorText;
+.text-danger {
+ .text-emphasis-variant(@state-danger-text);
}
-.text-info {
- color: @infoText;
+
+// 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;
+ .bg-variant(@brand-primary);
}
-.text-success {
- color: @successText;
+.bg-success {
+ .bg-variant(@state-success-bg);
}
-
-
-// Headings
-// -------------------------
-
-h1, h2, h3, h4, h5, h6 {
- margin: (@baseLineHeight / 2) 0;
- font-family: @headingsFontFamily;
- font-weight: @headingsFontWeight;
- line-height: 1;
- color: @headingsColor;
- text-rendering: optimizelegibility; // Fix the character spacing for headings
- small {
- font-weight: normal;
- line-height: 1;
- color: @grayLight;
- }
+.bg-info {
+ .bg-variant(@state-info-bg);
+}
+.bg-warning {
+ .bg-variant(@state-warning-bg);
+}
+.bg-danger {
+ .bg-variant(@state-danger-bg);
}
-h1 { font-size: 36px; line-height: 40px; }
-h2 { font-size: 30px; line-height: 40px; }
-h3 { font-size: 24px; line-height: 40px; }
-h4 { font-size: 18px; line-height: 20px; }
-h5 { font-size: 14px; line-height: 20px; }
-h6 { font-size: 12px; line-height: 20px; }
-
-h1 small { font-size: 24px; }
-h2 small { font-size: 18px; }
-h3 small { font-size: 14px; }
-h4 small { font-size: 14px; }
// Page header
// -------------------------
.page-header {
- padding-bottom: (@baseLineHeight / 2) - 1;
- margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
- 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;
}
-
// 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;
-}
-li {
- line-height: @baseLineHeight;
-}
-ul.unstyled,
-ol.unstyled {
- margin-left: 0;
+ul,
+ol {
+ margin-top: 0;
+ margin-bottom: (@line-height-computed / 2);
+ ul,
+ ol {
+ margin-bottom: 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 {
+ .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;
+ line-height: @line-height-base;
}
dt {
font-weight: bold;
}
dd {
- margin-left: @baseLineHeight / 2;
-}
-// Horizontal layout (like forms)
-.dl-horizontal {
- .clearfix(); // Ensure dl clears floats if empty dd elements present
- dt {
- float: left;
- width: @horizontalComponentOffset - 20;
- clear: left;
- text-align: right;
- .text-overflow();
- }
- dd {
- margin-left: @horizontalComponentOffset;
+ margin-left: 0; // Undo browser default
+}
+
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
+
+@media (min-width: @grid-float-breakpoint) {
+ .dl-horizontal {
+ dt {
+ float: left;
+ width: (@component-offset-horizontal - 20);
+ clear: left;
+ text-align: right;
+ .text-overflow();
+ }
+ dd {
+ margin-left: @component-offset-horizontal;
+ &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
+ }
}
}
// MISC
// ----
-// Horizontal rules
-hr {
- margin: @baseLineHeight 0;
- border: 0;
- border-top: 1px solid @hrBorder;
- border-bottom: 1px solid @white;
-}
-
// Abbreviations and acronyms
-abbr[title] {
+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 @grayLight;
+ border-bottom: 1px dotted @abbr-border-color;
}
-abbr.initialism {
+.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
blockquote {
- padding: 0 0 0 15px;
- margin: 0 0 @baseLineHeight;
- border-left: 5px solid @grayLighter;
- p {
- margin-bottom: 0;
- #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-right: 15px;
- padding-left: 0;
- border-right: 5px solid @grayLighter;
- border-left: 0;
- p,
- small {
- text-align: right;
- }
- small {
- &:before {
- content: '';
- }
- &:after {
- content: '\00A0 \2014';
- }
+// 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 {
content: "";
// Addresses
address {
- display: block;
- margin-bottom: @baseLineHeight;
+ margin-bottom: @line-height-computed;
font-style: normal;
- line-height: @baseLineHeight;
+ line-height: @line-height-base;
}
projects / e-DoKo.git / blobdiff