source: trip-planner-front/node_modules/bootstrap/less/type.less@ ceaed42

Last change on this file since ceaed42 was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

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