// scss-lint:disable QualifyingElement // // Grid examples // .bd-example-row { .row + .row { margin-top: 1rem; } .row { > .col, > [class^="col-"] { padding-top: .75rem; padding-bottom: .75rem; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } } .flex-items-top, .flex-items-middle, .flex-items-bottom { min-height: 6rem; background-color: rgba(255,0,0,.1); } } .bd-example-row-flex-cols .row { min-height: 10rem; background-color: rgba(255,0,0,.1); } .bd-highlight { background-color: rgba($bd-purple, .15); border: 1px solid rgba($bd-purple, .15); } // // Container illustrations // .bd-example-container { min-width: 16rem; max-width: 25rem; margin-right: auto; margin-left: auto; } .bd-example-container-header { height: 3rem; margin-bottom: .5rem; background-color: lighten($brand-primary, 50%); border-radius: .25rem; } .bd-example-container-sidebar { float: right; width: 4rem; height: 8rem; background-color: lighten($brand-warning, 25%); border-radius: .25rem; } .bd-example-container-body { height: 8rem; margin-right: 4.5rem; background-color: lighten($bd-purple, 25%); border-radius: .25rem; } .bd-example-container-fluid { max-width: none; } // // Docs examples // .bd-example { position: relative; padding: 1rem; margin: 1rem (-$grid-gutter-width-base / 2); border: solid #f7f7f9; border-width: .2rem 0 0; @include clearfix(); @include media-breakpoint-up(sm) { padding: 1.5rem; margin-right: 0; margin-bottom: 0; margin-left: 0; border-width: .2rem; } + .highlight, + .clipboard + .highlight { margin-top: 0; } + p { margin-top: 2rem; } .pos-f-t { position: relative; margin: -1rem; @include media-breakpoint-up(sm) { margin: -1.5rem; } } > .form-control { + .form-control { margin-top: .5rem; } } > .nav + .nav, > .alert + .alert, > .navbar + .navbar, > .progress + .progress, > .progress + .btn { margin-top: 1rem; } > .dropdown-menu:first-child { position: static; display: block; } > .form-group:last-child { margin-bottom: 0; } } .bd-example > .close { float: none; } // Typography .bd-example-type .table .type-info { color: #999; vertical-align: middle; } .bd-example-type .table td { padding: 1rem 0; border-color: #eee; } .bd-example-type .table tr:first-child td { border-top: 0; } .bd-example-type h1, .bd-example-type h2, .bd-example-type h3, .bd-example-type h4, .bd-example-type h5, .bd-example-type h6 { margin: 0; } // Contextual background colors .bd-example-bg-classes p { padding: 1rem; } // Images .bd-example > img { + img { margin-left: .5rem; } } // Buttons .bd-example > .btn-group { margin-top: .25rem; margin-bottom: .25rem; } .bd-example > .btn-toolbar + .btn-toolbar { margin-top: .5rem; } // Forms .bd-example-control-sizing select, .bd-example-control-sizing input[type="text"] + input[type="text"] { margin-top: .5rem; } .bd-example-form .input-group { margin-bottom: .5rem; } .bd-example > textarea.form-control { resize: vertical; } // List groups .bd-example > .list-group { max-width: 400px; } // Navbars .bd-example { .fixed-top, .sticky-top { position: static; margin: -1rem -1rem 1rem; } .fixed-bottom { position: static; margin: 1rem -1rem -1rem; } @include media-breakpoint-up(sm) { .fixed-top, .sticky-top { margin: -1.5rem -1.5rem 1rem; } .fixed-bottom { margin: 1rem -1.5rem -1.5rem; } } } // Pagination .bd-example .pagination { margin-top: .5rem; margin-bottom: .5rem; } // Example modals .bd-example-modal { background-color: #fafafa; .modal { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; display: block; } .modal-dialog { left: auto; margin-right: auto; margin-left: auto; } } // Example tabbable tabs .bd-example-tabs .nav-tabs { margin-bottom: 1rem; } // Tooltips .bd-example-tooltips { text-align: center; } .bd-example-tooltips > .btn { margin-top: .25rem; margin-bottom: .25rem; } // Popovers .bd-example-popover-static { padding-bottom: 1.5rem; background-color: #f9f9f9; } .bd-example-popover-static .popover { position: relative; display: block; float: left; width: 260px; margin: 1.25rem; } // Tooltips .tooltip-demo a { white-space: nowrap; } .bd-example-tooltip-static .tooltip { position: relative; display: inline-block; margin: 10px 20px; opacity: 1; } // Scrollspy demo on fixed height div .scrollspy-example { position: relative; height: 200px; margin-top: .5rem; overflow: auto; } // Helpers .bd-example > { .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-inverse, .bg-faded { &:not(.navbar) { padding: .5rem; margin-top: .5rem; margin-bottom: .5rem; } } } .bd-example-border-utils { [class^="border-"] { display: inline-block; width: 6rem; height: 6rem; margin: .25rem; background-color: #f5f5f5; border: 1px solid; } } // // Code snippets // .highlight { padding: 1rem; margin: 1rem (-$grid-gutter-width-base / 2); background-color: #f7f7f9; -ms-overflow-style: -ms-autohiding-scrollbar; @include media-breakpoint-up(sm) { padding: 1.5rem; margin-right: 0; margin-left: 0; } } .highlight pre { padding: 0; margin-top: 0; margin-bottom: 0; background-color: transparent; border: 0; } .highlight pre code { font-size: inherit; color: $gray-dark; // Effectively the base text color }