From e946348eca928fa1c42dbb92c7a612543832dccc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 14 Jan 2018 16:06:52 -0800 Subject: Examples updates (#24898) * fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress --- docs/4.0/examples/offcanvas/offcanvas.css | 109 +++++++++++++++++------------- 1 file changed, 63 insertions(+), 46 deletions(-) (limited to 'docs/4.0/examples/offcanvas/offcanvas.css') diff --git a/docs/4.0/examples/offcanvas/offcanvas.css b/docs/4.0/examples/offcanvas/offcanvas.css index 1762cd5c1..bc1650f49 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.css +++ b/docs/4.0/examples/offcanvas/offcanvas.css @@ -1,63 +1,80 @@ -/* - * Style tweaks - * -------------------------------------------------- - */ html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ } + body { - padding-top: 70px; -} -footer { - padding: 30px 0; + padding-top: 56px; } -/* - * Off Canvas - * -------------------------------------------------- - */ -@media screen and (max-width: 767.98px) { - .row-offcanvas { - position: relative; - transition: all .25s ease-out; +@media (max-width: 767.98px) { + .offcanvas-collapse { + position: fixed; + top: 56px; /* Height of navbar */ + bottom: 0; + width: 100%; + padding-right: 1rem; + padding-left: 1rem; + overflow-y: auto; + background-color: var(--gray-dark); + transition: -webkit-transform .3s ease-in-out; + transition: transform .3s ease-in-out; + transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; + -webkit-transform: translateX(100%); + transform: translateX(100%); } - - .row-offcanvas-right { - right: 0; + .offcanvas-collapse.open { + -webkit-transform: translateX(-1rem); + transform: translateX(-1rem); /* Account for horizontal padding on navbar */ } +} - .row-offcanvas-left { - left: 0; - } +.nav-scroller { + position: relative; + z-index: 2; + height: 2.75rem; + overflow-y: hidden; +} - .row-offcanvas-right .sidebar-offcanvas { - right: -100%; /* 12 columns */ - } +.nav-scroller .nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + padding-bottom: 1rem; + margin-top: -1px; + overflow-x: auto; + color: rgba(255, 255, 255, .75); + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} - .row-offcanvas-right.active .sidebar-offcanvas { - right: -50%; /* 6 columns */ - } +.nav-underline .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; + color: var(--secondary); +} - .row-offcanvas-left .sidebar-offcanvas { - left: -100%; /* 12 columns */ - } +.nav-underline .nav-link:hover { + color: var(--blue); +} - .row-offcanvas-left.active .sidebar-offcanvas { - left: -50%; /* 6 columns */ - } +.nav-underline .active { + font-weight: 500; + color: var(--gray-dark); +} - .row-offcanvas-right.active { - right: 50%; /* 6 columns */ - } +.text-white-50 { color: rgba(255, 255, 255, .5); } - .row-offcanvas-left.active { - left: 50%; /* 6 columns */ - } +.bg-purple { background-color: var(--purple); } - .sidebar-offcanvas { - position: absolute; - top: 0; - width: 50%; /* 6 columns */ - } -} +.border-bottom { border-bottom: 1px solid #e5e5e5; } + +.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } + +.lh-100 { line-height: 1; } +.lh-125 { line-height: 1.25; } +.lh-150 { line-height: 1.5; } -- cgit v1.2.3