Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Mark Otto's avatar
    Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) · eb2e1102
    Mark Otto authored 
    * remove the $enable-flex variable option

* remove bootstrap-flex.css dist file and it's grunt task

* remove the separate flex css file for docs; it's all the same now

* remove flexbox docs (porting some to the main grid docs in next commit)

* clean up few grid docs bits to simplify copy, start to mention flexbox

* port relevant flexbox-grid.md content to grid.md

- clean up mixins
- update how it works section
- bring over sizing and alignment sections

* remove the $enable-flex from the options.md page

* update lead paragraph to mention flexbox

* update migration to mention loss of ie9 support

* remove mention of flexbox dist file

* clarify IE support

* making a note

* remove flexbox variant mentions from component docs

- updates docs for media object, navs, list group, and cards to consolidate docs
- no more need to callout flexbox variants since it's now the default

* remove $e...
    eb2e1102
_component-examples.scss 5.81 KiB
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-intro {
31 
  .container {
32 
    padding: 1px;
33 
    border: 1px solid rgba($red,.5);
34 
  }
35 
  .row {
36 
    padding: 1px;
37 
    border: 1px solid rgba($blue,.5);
38 
  }
39 
}
40
41 
.bd-example-row-flex-cols .row {
42 
  min-height: 10rem;
43 
  background-color: rgba(255,0,0,.1);
44 
}
45
46
47 
//
48 
// Container illustrations
49 
//
50
51 
.bd-example-container {
52 
  min-width: 16rem;
53 
  max-width: 25rem;
54 
  margin-right: auto;
55 
  margin-left: auto;
56 
}
57
58 
.bd-example-container-header {
59 
  height: 3rem;
60 
  margin-bottom: .5rem;
61 
  background-color: lighten($brand-primary, 50%);
62 
  border-radius: .25rem;
63 
}
64
65 
.bd-example-container-sidebar {
66 
  float: right;
67 
  width: 4rem;
68 
  height: 8rem;
69 
  background-color: lighten($brand-warning, 25%);
70 
  border-radius: .25rem;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
} .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 -1rem; 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; } // Undo width of container .container { width: auto; } > .form-control { + .form-control { margin-top: .5rem; } } // Card examples should be horizontal > .card { max-width: 20rem; } > .nav + .nav, > .alert + .alert, > .navbar + .navbar, > .progress + .progress, > .progress + .btn { margin-top: 1rem; } > .dropdown-menu:first-child { position: static; display: block;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
} > .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; }
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
// Navbars .bd-example { .navbar-fixed-top { position: static; margin: -1rem -1rem 1rem; } .navbar-fixed-bottom { position: static; margin: 1rem -1rem -1rem; } @include media-breakpoint-up(sm) { .navbar-fixed-top { margin: -1.5rem -1.5rem 1rem; } .navbar-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: #f5f5f5; } .bd-example-modal .modal { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; display: block; } .bd-example-modal .modal-dialog { left: auto; margin-right: auto; margin-left: auto; } // Example dropdowns .bd-example > .dropdown > .dropdown-toggle { float: left; } .bd-example > .dropdown > .dropdown-menu { position: static; display: block; margin-bottom: .25rem; clear: left; } // 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; }
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
// 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;
351352353354355356357358359360361362363364365366367368369
@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 }