diff options
| author | Mark Otto <markdotto@gmail.com> | 2018-04-02 00:10:34 +0300 |
|---|---|---|
| committer | Mark Otto <markd.otto@gmail.com> | 2018-04-02 04:15:06 +0300 |
| commit | 974742942461ef99ba8603eef4a90f7edbe9c68e (patch) | |
| tree | 50c5f93f627c53a883a1a43aa73bf52adc7361bd /docs | |
| parent | e47fb40ff250a82bcd24577e0073ce8aa147ef0f (diff) | |
Update offcanvas example for IE support
- Replaces CSS variables with their appropriate hex values
- Fixes the broken navbar transition by moving from 2D translates to using position
- Fix broken IE navbar toggler placement with some utilities (not necessary anywhere else, but necessary given flexbox quirks)
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/examples/offcanvas/index.html | 4 | ||||
| -rw-r--r-- | docs/4.0/examples/offcanvas/offcanvas.css | 24 |
2 files changed, 13 insertions, 15 deletions
diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html index eb85d1040e..ed315db328 100644 --- a/docs/4.0/examples/offcanvas/index.html +++ b/docs/4.0/examples/offcanvas/index.html @@ -18,8 +18,8 @@ <body class="bg-light"> - <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark"> - <a class="navbar-brand" href="#">Offcanvas navbar</a> + <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark"> + <a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a> <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas"> <span class="navbar-toggler-icon"></span> </button> diff --git a/docs/4.0/examples/offcanvas/offcanvas.css b/docs/4.0/examples/offcanvas/offcanvas.css index d570b1a16e..7edfa0bc9c 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.css +++ b/docs/4.0/examples/offcanvas/offcanvas.css @@ -7,27 +7,25 @@ body { padding-top: 56px; } -@media (max-width: 767.98px) { +@media (max-width: 991.98px) { .offcanvas-collapse { position: fixed; top: 56px; /* Height of navbar */ bottom: 0; + left: 100%; width: 100%; padding-right: 1rem; padding-left: 1rem; overflow-y: auto; visibility: hidden; - background-color: var(--gray-dark); - transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out; - transition: visibility .3s ease-in-out, transform .3s ease-in-out; - transition: visibility .3s ease-in-out, transform .3s ease-in-out, -webkit-transform .3s ease-in-out; - -webkit-transform: translateX(100%); - transform: translateX(100%); + background-color: #343a40; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: left, visibility; } .offcanvas-collapse.open { + left: 0; visibility: visible; - -webkit-transform: translateX(-1rem); - transform: translateX(-1rem); /* Account for horizontal padding on navbar */ } } @@ -56,21 +54,21 @@ body { padding-top: .75rem; padding-bottom: .75rem; font-size: .875rem; - color: var(--secondary); + color: #6c757d; } .nav-underline .nav-link:hover { - color: var(--blue); + color: #007bff; } .nav-underline .active { font-weight: 500; - color: var(--gray-dark); + color: #343a40; } .text-white-50 { color: rgba(255, 255, 255, .5); } -.bg-purple { background-color: var(--purple); } +.bg-purple { background-color: #6f42c1; } .border-bottom { border-bottom: 1px solid #e5e5e5; } |