_grid.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. // .bs-example{
  2. // [class^="col-"]{
  3. // span{
  4. // padding: .75rem;
  5. // background-color: rgba(86, 61, 124, 0.15);
  6. // border: 1px solid rgba(86, 61, 124, 0.2);
  7. // display: block;
  8. // }
  9. // margin-bottom: 1rem;
  10. // }
  11. // .row + .row {
  12. // margin-top: 1rem;
  13. // }
  14. // }
  15. //
  16. // Grid examples
  17. //
  18. .bd-example-row {
  19. .row + .row {
  20. margin-top: 1rem;
  21. }
  22. .row {
  23. > .col,
  24. > [class^="col-"] {
  25. padding-top: .75rem;
  26. padding-bottom: .75rem;
  27. background-color: rgba(86,61,124,.15);
  28. border: 1px solid rgba(86,61,124,.2);
  29. }
  30. }
  31. .flex-items-top,
  32. .flex-items-middle,
  33. .flex-items-bottom {
  34. min-height: 6rem;
  35. background-color: rgba(255,0,0,.1);
  36. }
  37. }
  38. .bd-example-row-flex-cols .row {
  39. min-height: 10rem;
  40. background-color: rgba(255,0,0,.1);
  41. }
  42. .bd-highlight {
  43. background-color: rgba(86, 61, 124, .15);
  44. border: 1px solid rgba(86, 61, 124, .15);
  45. }
  46. // Grid mixins
  47. .example-container {
  48. width: 800px;
  49. @include make-container();
  50. }
  51. .example-row {
  52. @include make-row();
  53. }
  54. .example-content-main {
  55. @include make-col-ready();
  56. @include media-breakpoint-up(sm) {
  57. @include make-col(6);
  58. }
  59. @include media-breakpoint-up(lg) {
  60. @include make-col(8);
  61. }
  62. }
  63. .example-content-secondary {
  64. @include make-col-ready();
  65. @include media-breakpoint-up(sm) {
  66. @include make-col(6);
  67. }
  68. @include media-breakpoint-up(lg) {
  69. @include make-col(4);
  70. }
  71. }