1 // scss-lint:disable QualifyingElement
16 padding-bottom: .75rem;
17 background-color: rgba(86,61,124,.15);
18 border: 1px solid rgba(86,61,124,.2);
26 background-color: rgba(255,0,0,.1);
30 .bd-example-row-flex-cols .row {
32 background-color: rgba(255,0,0,.1);
36 background-color: rgba($bd-purple, .15);
37 border: 1px solid rgba($bd-purple, .15);
42 // Container illustrations
45 .bd-example-container {
52 .bd-example-container-header {
55 background-color: lighten($brand-primary, 50%);
56 border-radius: .25rem;
59 .bd-example-container-sidebar {
63 background-color: lighten($brand-warning, 25%);
64 border-radius: .25rem;
67 .bd-example-container-body {
70 background-color: lighten($bd-purple, 25%);
71 border-radius: .25rem;
74 .bd-example-container-fluid {
87 border: solid #f7f7f9;
88 border-width: .2rem 0 0;
91 @include media-breakpoint-up(sm) {
100 + .clipboard + .highlight {
112 @include media-breakpoint-up(sm) {
126 > .progress + .progress,
131 > .dropdown-menu:first-child {
136 > .form-group:last-child {
141 .bd-example > .close {
146 .bd-example-type .table .type-info {
148 vertical-align: middle;
150 .bd-example-type .table td {
154 .bd-example-type .table tr:first-child td {
162 .bd-example-type h6 {
166 // Contextual background colors
167 .bd-example-bg-classes p {
179 .bd-example > .btn-group {
181 margin-bottom: .25rem;
183 .bd-example > .btn-toolbar + .btn-toolbar {
188 .bd-example-control-sizing select,
189 .bd-example-control-sizing input[type="text"] + input[type="text"] {
192 .bd-example-form .input-group {
193 margin-bottom: .5rem;
195 .bd-example > textarea.form-control {
200 .bd-example > .list-group {
209 margin: -1rem -1rem 1rem;
213 margin: 1rem -1rem -1rem;
216 @include media-breakpoint-up(sm) {
219 margin: -1.5rem -1.5rem 1rem;
222 margin: 1rem -1.5rem -1.5rem;
228 .bd-example .pagination {
230 margin-bottom: .5rem;
235 background-color: #fafafa;
254 // Example tabbable tabs
255 .bd-example-tabs .nav-tabs {
260 .bd-example-tooltips {
263 .bd-example-tooltips > .btn {
265 margin-bottom: .25rem;
269 .bd-example-popover-static {
270 padding-bottom: 1.5rem;
271 background-color: #f9f9f9;
273 .bd-example-popover-static .popover {
286 .bd-example-tooltip-static .tooltip {
288 display: inline-block;
293 // Scrollspy demo on fixed height div
313 margin-bottom: .5rem;
318 .bd-example-border-utils {
320 display: inline-block;
324 background-color: #f5f5f5;
335 margin: 1rem (-$grid-gutter-width-base / 2);
336 background-color: #f7f7f9;
337 -ms-overflow-style: -ms-autohiding-scrollbar;
339 @include media-breakpoint-up(sm) {
349 background-color: transparent;
352 .highlight pre code {
354 color: $gray-dark; // Effectively the base text color