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/index.html | 172 +++++++++++++++++------------- docs/4.0/examples/offcanvas/offcanvas.css | 109 +++++++++++-------- docs/4.0/examples/offcanvas/offcanvas.js | 2 +- 3 files changed, 163 insertions(+), 120 deletions(-) (limited to 'docs/4.0/examples/offcanvas') diff --git a/docs/4.0/examples/offcanvas/index.html b/docs/4.0/examples/offcanvas/index.html index f95cf64a5..e03f9f30c 100644 --- a/docs/4.0/examples/offcanvas/index.html +++ b/docs/4.0/examples/offcanvas/index.html @@ -7,7 +7,7 @@ - Off Canvas Template for Bootstrap + Offcanvas template for Bootstrap @@ -16,27 +16,30 @@ - + -
+
+ +
-
+
+
+ +
+
Bootstrap
+ Since 2011 +
+
-
-

- +

+
Recent updates
+
+ +

+ @username + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
-

Hello, world!

-

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

-
-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-
+
+
+ +

+ @username + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. +

+
+
+ +

+ @username + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. +

+
+ + All updates + +
-
- -
-

© Company 2017

-
+
+
+ +
+
+ Full Name + Follow +
+ @username +
+
+
+ +
+
+ Full Name + Follow +
+ @username +
+
+ + All suggestions + + +
@@ -128,6 +153,7 @@ + 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; } diff --git a/docs/4.0/examples/offcanvas/offcanvas.js b/docs/4.0/examples/offcanvas/offcanvas.js index a41847081..bc3e46711 100644 --- a/docs/4.0/examples/offcanvas/offcanvas.js +++ b/docs/4.0/examples/offcanvas/offcanvas.js @@ -2,6 +2,6 @@ $(function () { 'use strict' $('[data-toggle="offcanvas"]').on('click', function () { - $('.row-offcanvas').toggleClass('active') + $('.offcanvas-collapse').toggleClass('open') }) }) -- cgit v1.2.3