]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // scss-lint:disable QualifyingElement |
2 | ||
3 | // | |
4 | // Grid examples | |
5 | // | |
6 | ||
7 | .bd-example-row { | |
8 | .row + .row { | |
9 | margin-top: 1rem; | |
10 | } | |
11 | ||
12 | .row { | |
13 | > .col, | |
14 | > [class^="col-"] { | |
15 | padding-top: .75rem; | |
16 | padding-bottom: .75rem; | |
17 | background-color: rgba(86,61,124,.15); | |
18 | border: 1px solid rgba(86,61,124,.2); | |
19 | } | |
20 | } | |
21 | ||
22 | .flex-items-top, | |
23 | .flex-items-middle, | |
24 | .flex-items-bottom { | |
25 | min-height: 6rem; | |
26 | background-color: rgba(255,0,0,.1); | |
27 | } | |
28 | } | |
29 | ||
30 | .bd-example-row-flex-cols .row { | |
31 | min-height: 10rem; | |
32 | background-color: rgba(255,0,0,.1); | |
33 | } | |
34 | ||
35 | .bd-highlight { | |
36 | background-color: rgba($bd-purple, .15); | |
37 | border: 1px solid rgba($bd-purple, .15); | |
38 | } | |
39 | ||
40 | ||
41 | // | |
42 | // Container illustrations | |
43 | // | |
44 | ||
45 | .bd-example-container { | |
46 | min-width: 16rem; | |
47 | max-width: 25rem; | |
48 | margin-right: auto; | |
49 | margin-left: auto; | |
50 | } | |
51 | ||
52 | .bd-example-container-header { | |
53 | height: 3rem; | |
54 | margin-bottom: .5rem; | |
55 | background-color: lighten($brand-primary, 50%); | |
56 | border-radius: .25rem; | |
57 | } | |
58 | ||
59 | .bd-example-container-sidebar { | |
60 | float: right; | |
61 | width: 4rem; | |
62 | height: 8rem; | |
63 | background-color: lighten($brand-warning, 25%); | |
64 | border-radius: .25rem; | |
65 | } | |
66 | ||
67 | .bd-example-container-body { | |
68 | height: 8rem; | |
69 | margin-right: 4.5rem; | |
70 | background-color: lighten($bd-purple, 25%); | |
71 | border-radius: .25rem; | |
72 | } | |
73 | ||
74 | .bd-example-container-fluid { | |
75 | max-width: none; | |
76 | } | |
77 | ||
78 | ||
79 | // | |
80 | // Docs examples | |
81 | // | |
82 | ||
83 | .bd-example { | |
84 | position: relative; | |
85 | padding: 1rem; | |
86 | margin: 1rem -1rem; | |
87 | border: solid #f7f7f9; | |
88 | border-width: .2rem 0 0; | |
89 | @include clearfix(); | |
90 | ||
91 | @include media-breakpoint-up(sm) { | |
92 | padding: 1.5rem; | |
93 | margin-right: 0; | |
94 | margin-bottom: 0; | |
95 | margin-left: 0; | |
96 | border-width: .2rem; | |
97 | } | |
98 | ||
99 | + .highlight, | |
100 | + .clipboard + .highlight { | |
101 | margin-top: 0; | |
102 | } | |
103 | ||
104 | + p { | |
105 | margin-top: 2rem; | |
106 | } | |
107 | ||
108 | .pos-f-t { | |
109 | position: relative; | |
110 | margin: -1rem; | |
111 | ||
112 | @include media-breakpoint-up(sm) { | |
113 | margin: -1.5rem; | |
114 | } | |
115 | } | |
116 | ||
117 | > .form-control { | |
118 | + .form-control { | |
119 | margin-top: .5rem; | |
120 | } | |
121 | } | |
122 | ||
123 | > .nav + .nav, | |
124 | > .alert + .alert, | |
125 | > .navbar + .navbar, | |
126 | > .progress + .progress, | |
127 | > .progress + .btn { | |
128 | margin-top: 1rem; | |
129 | } | |
130 | ||
131 | > .dropdown-menu:first-child { | |
132 | position: static; | |
133 | display: block; | |
134 | } | |
135 | ||
136 | > .form-group:last-child { | |
137 | margin-bottom: 0; | |
138 | } | |
139 | } | |
140 | ||
141 | .bd-example > .close { | |
142 | float: none; | |
143 | } | |
144 | ||
145 | // Typography | |
146 | .bd-example-type .table .type-info { | |
147 | color: #999; | |
148 | vertical-align: middle; | |
149 | } | |
150 | .bd-example-type .table td { | |
151 | padding: 1rem 0; | |
152 | border-color: #eee; | |
153 | } | |
154 | .bd-example-type .table tr:first-child td { | |
155 | border-top: 0; | |
156 | } | |
157 | .bd-example-type h1, | |
158 | .bd-example-type h2, | |
159 | .bd-example-type h3, | |
160 | .bd-example-type h4, | |
161 | .bd-example-type h5, | |
162 | .bd-example-type h6 { | |
163 | margin: 0; | |
164 | } | |
165 | ||
166 | // Contextual background colors | |
167 | .bd-example-bg-classes p { | |
168 | padding: 1rem; | |
169 | } | |
170 | ||
171 | // Images | |
172 | .bd-example > img { | |
173 | + img { | |
174 | margin-left: .5rem; | |
175 | } | |
176 | } | |
177 | ||
178 | // Buttons | |
179 | .bd-example > .btn-group { | |
180 | margin-top: .25rem; | |
181 | margin-bottom: .25rem; | |
182 | } | |
183 | .bd-example > .btn-toolbar + .btn-toolbar { | |
184 | margin-top: .5rem; | |
185 | } | |
186 | ||
187 | // Forms | |
188 | .bd-example-control-sizing select, | |
189 | .bd-example-control-sizing input[type="text"] + input[type="text"] { | |
190 | margin-top: .5rem; | |
191 | } | |
192 | .bd-example-form .input-group { | |
193 | margin-bottom: .5rem; | |
194 | } | |
195 | .bd-example > textarea.form-control { | |
196 | resize: vertical; | |
197 | } | |
198 | ||
199 | // List groups | |
200 | .bd-example > .list-group { | |
201 | max-width: 400px; | |
202 | } | |
203 | ||
204 | // Navbars | |
205 | .bd-example { | |
206 | .fixed-top, | |
207 | .sticky-top { | |
208 | position: static; | |
209 | margin: -1rem -1rem 1rem; | |
210 | } | |
211 | .fixed-bottom { | |
212 | position: static; | |
213 | margin: 1rem -1rem -1rem; | |
214 | } | |
215 | ||
216 | @include media-breakpoint-up(sm) { | |
217 | .fixed-top, | |
218 | .sticky-top { | |
219 | margin: -1.5rem -1.5rem 1rem; | |
220 | } | |
221 | .fixed-bottom { | |
222 | margin: 1rem -1.5rem -1.5rem; | |
223 | } | |
224 | } | |
225 | } | |
226 | ||
227 | // Pagination | |
228 | .bd-example .pagination { | |
229 | margin-top: .5rem; | |
230 | margin-bottom: .5rem; | |
231 | } | |
232 | ||
233 | // Example modals | |
234 | .bd-example-modal { | |
235 | background-color: #fafafa; | |
236 | ||
237 | .modal { | |
238 | position: relative; | |
239 | top: auto; | |
240 | right: auto; | |
241 | bottom: auto; | |
242 | left: auto; | |
243 | z-index: 1; | |
244 | display: block; | |
245 | } | |
246 | ||
247 | .modal-dialog { | |
248 | left: auto; | |
249 | margin-right: auto; | |
250 | margin-left: auto; | |
251 | } | |
252 | } | |
253 | ||
254 | // Example tabbable tabs | |
255 | .bd-example-tabs .nav-tabs { | |
256 | margin-bottom: 1rem; | |
257 | } | |
258 | ||
259 | // Tooltips | |
260 | .bd-example-tooltips { | |
261 | text-align: center; | |
262 | } | |
263 | .bd-example-tooltips > .btn { | |
264 | margin-top: .25rem; | |
265 | margin-bottom: .25rem; | |
266 | } | |
267 | ||
268 | // Popovers | |
269 | .bd-example-popover-static { | |
270 | padding-bottom: 1.5rem; | |
271 | background-color: #f9f9f9; | |
272 | } | |
273 | .bd-example-popover-static .popover { | |
274 | position: relative; | |
275 | display: block; | |
276 | float: left; | |
277 | width: 260px; | |
278 | margin: 1.25rem; | |
279 | } | |
280 | ||
281 | // Tooltips | |
282 | .tooltip-demo a { | |
283 | white-space: nowrap; | |
284 | } | |
285 | ||
286 | .bd-example-tooltip-static .tooltip { | |
287 | position: relative; | |
288 | display: inline-block; | |
289 | margin: 10px 20px; | |
290 | opacity: 1; | |
291 | } | |
292 | ||
293 | // Scrollspy demo on fixed height div | |
294 | .scrollspy-example { | |
295 | position: relative; | |
296 | height: 200px; | |
297 | margin-top: .5rem; | |
298 | overflow: auto; | |
299 | } | |
300 | ||
301 | // Helpers | |
302 | .bd-example > { | |
303 | .bg-primary, | |
304 | .bg-success, | |
305 | .bg-info, | |
306 | .bg-warning, | |
307 | .bg-danger, | |
308 | .bg-inverse, | |
309 | .bg-faded { | |
310 | &:not(.navbar) { | |
311 | padding: .5rem; | |
312 | margin-top: .5rem; | |
313 | margin-bottom: .5rem; | |
314 | } | |
315 | } | |
316 | } | |
317 | ||
318 | .bd-example-border-utils { | |
319 | [class^="border-"] { | |
320 | display: inline-block; | |
321 | width: 6rem; | |
322 | height: 6rem; | |
323 | margin: .25rem; | |
324 | background-color: #f5f5f5; | |
325 | border: 1px solid; | |
326 | } | |
327 | } | |
328 | ||
329 | // | |
330 | // Code snippets | |
331 | // | |
332 | ||
333 | .highlight { | |
334 | padding: 1rem; | |
335 | margin: 1rem (-$grid-gutter-width-base / 2); | |
336 | background-color: #f7f7f9; | |
337 | -ms-overflow-style: -ms-autohiding-scrollbar; | |
338 | ||
339 | @include media-breakpoint-up(sm) { | |
340 | padding: 1.5rem; | |
341 | margin-right: 0; | |
342 | margin-left: 0; | |
343 | } | |
344 | } | |
345 | .highlight pre { | |
346 | padding: 0; | |
347 | margin-top: 0; | |
348 | margin-bottom: 0; | |
349 | background-color: transparent; | |
350 | border: 0; | |
351 | } | |
352 | .highlight pre code { | |
353 | font-size: inherit; | |
354 | color: $gray-dark; // Effectively the base text color | |
355 | } |