From a2b31e2240feeb35259844252cd8ea08a642007b Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Mon, 27 Apr 2015 09:35:29 +0200 Subject: [PATCH] Add animation to the "hamburger icon". Courtesy of Julien Melissas, ref. http://codepen.io/JulienMelissas/pen/LEBGLj --- docs/_includes/head.html | 34 ++++++++++++++++++++++++++++++++++ docs/_includes/navigation.html | 6 +++--- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/docs/_includes/head.html b/docs/_includes/head.html index e14b5c11..72a003eb 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -310,4 +310,38 @@ padding: 30px; } } + + /* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */ + .navbar-toggle { + border: none; + background: transparent !important; + } + .navbar-toggle:hover { + background: transparent !important; + } + .navbar-toggle .icon-bar { + width: 22px; + transition: all 0.2s; + } + .navbar-toggle .top-bar { + transform: rotate(45deg); + transform-origin: 10% 10%; + } + .navbar-toggle .middle-bar { + opacity: 0; + } + .navbar-toggle .bottom-bar { + transform: rotate(-45deg); + transform-origin: 10% 90%; + } + .navbar-toggle.collapsed .top-bar { + transform: rotate(0); + } + .navbar-toggle.collapsed .middle-bar { + opacity: 1; + } + .navbar-toggle.collapsed .bottom-bar { + transform: rotate(0); + } + diff --git a/docs/_includes/navigation.html b/docs/_includes/navigation.html index f17522e6..39487606 100644 --- a/docs/_includes/navigation.html +++ b/docs/_includes/navigation.html @@ -3,9 +3,9 @@
Select2