1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- // .bs-example{
- // [class^="col-"]{
- // span{
- // padding: .75rem;
- // background-color: rgba(86, 61, 124, 0.15);
- // border: 1px solid rgba(86, 61, 124, 0.2);
- // display: block;
- // }
- // margin-bottom: 1rem;
- // }
- // .row + .row {
- // margin-top: 1rem;
- // }
- // }
- //
- // 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(86, 61, 124, .15);
- border: 1px solid rgba(86, 61, 124, .15);
- }
- // Grid mixins
- .example-container {
- width: 800px;
- @include make-container();
- }
- .example-row {
- @include make-row();
- }
- .example-content-main {
- @include make-col-ready();
- @include media-breakpoint-up(sm) {
- @include make-col(6);
- }
- @include media-breakpoint-up(lg) {
- @include make-col(8);
- }
- }
- .example-content-secondary {
- @include make-col-ready();
- @include media-breakpoint-up(sm) {
- @include make-col(6);
- }
- @include media-breakpoint-up(lg) {
- @include make-col(4);
- }
- }
|