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

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use