From a2c64e75792733be2b2d7a0fd582e829049275f8 Mon Sep 17 00:00:00 2001 From: ulrich <undisclosed> Date: Sat, 24 Feb 2018 19:19:10 +0000 Subject: [PATCH] radio-ui-Vorlage hinzugefuegt --- web/hamburger.css | 99 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 99 insertions(+), 0 deletions(-) diff --git a/web/hamburger.css b/web/hamburger.css new file mode 100644 index 0000000..bca57b2 --- /dev/null +++ b/web/hamburger.css @@ -0,0 +1,99 @@ +/*! + * entnommen aus + * + * Hamburgers + * @description Tasty CSS-animated hamburgers + * @author Jonathan Suh @jonsuh + * @site https://jonsuh.com/hamburgers + * @link https://github.com/jonsuh/hamburgers + */ + +.hamburger { + display: inline-block; + cursor: pointer; + transition-property: opacity, filter; + transition-duration: 0.15s; + transition-timing-function: linear; + font: inherit; + color: inherit; + text-transform: none; + background-color: transparent; + border: 0; + margin: 0; + overflow: visible; +} + +.hamburger:hover { + opacity: 0.7; +} + +.hamburger-box { + width: 40px; + height: 24px; + display: inline-block; + position: relative; +} + +.hamburger-inner { + display: block; + top: 50%; + margin: 0; +} + +.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { + width: 30px; + height: 4px; + background-color: #000; + border-radius: 4px; + position: absolute; + transition-property: transform; + transition-duration: 0.15s; + transition-timing-function: ease; +} + +.hamburger-inner::before, .hamburger-inner::after { + content: ""; + display: block; +} + +.hamburger-inner::before { + top: -10px; +} + +.hamburger-inner::after { + bottom: -10px; +} + +/* + * Elastic + */ +.hamburger--elastic .hamburger-inner { + top: 2px; + transition-duration: 0.275s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.hamburger--elastic .hamburger-inner::before { + top: 10px; + transition: opacity 0.125s 0.275s ease; +} + +.hamburger--elastic .hamburger-inner::after { + top: 20px; + transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.hamburger--elastic.is-active .hamburger-inner { + transform: translate3d(0, 10px, 0) rotate(135deg); + transition-delay: 0.075s; +} + +.hamburger--elastic.is-active .hamburger-inner::before { + transition-delay: 0s; + opacity: 0; +} + +.hamburger--elastic.is-active .hamburger-inner::after { + transform: translate3d(0, -20px, 0) rotate(-270deg); + transition-delay: 0.075s; +} -- Gitblit v1.9.3