Rumpf-Konstrukt fuer Webapps
view | history | commit | commitdiff
ulrich
2021-05-11 00c9b90a741b84760a50792485a871f6ca3bd333
commit | author | age
00c9b9 1 /*!
U 2  * entnommen aus
3  *
4  * Hamburgers
5  * @description Tasty CSS-animated hamburgers
6  * @author Jonathan Suh @jonsuh
7  * @site https://jonsuh.com/hamburgers
8  * @link https://github.com/jonsuh/hamburgers
9  */
10
11 .hamburger {
12   display: inline-block;
13   cursor: pointer;
14   transition-property: opacity, filter;
15   transition-duration: 0.15s;
16   transition-timing-function: linear;
17   font: inherit;
18   color: inherit;
19   text-transform: none;
20   background-color: transparent;
21   border: 0;
22   margin: 0;
23   overflow: visible;
24 }
25
26 .hamburger:hover {
27   opacity: 0.7;
28 }
29
30 .hamburger-box {
31   width: 40px;
32   height: 24px;
33   display: inline-block;
34   position: relative;
35 }
36
37 .hamburger-inner {
38   display: block;
39   top: 50%;
40   margin: 0;
41 }
42
43 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
44   width: 30px;
45   height: 4px;
46   background-color: white; /* #000; */
47   border-radius: 4px;
48   position: absolute;
49   transition-property: transform;
50   transition-duration: 0.15s;
51   transition-timing-function: ease;
52 }
53
54 .hamburger-inner::before, .hamburger-inner::after {
55   content: "";
56   display: block;
57 }
58
59 .hamburger-inner::before {
60   top: -10px;
61 }
62
63 .hamburger-inner::after {
64   bottom: -10px;
65 }
66
67 /*
68  * Elastic
69  */
70 .hamburger--elastic .hamburger-inner {
71   top: 2px;
72   transition-duration: 0.275s;
73   transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
74 }
75
76 .hamburger--elastic .hamburger-inner::before {
77   top: 10px;
78   transition: opacity 0.125s 0.275s ease;
79 }
80
81 .hamburger--elastic .hamburger-inner::after {
82   top: 20px;
83   transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
84 }
85
86 .hamburger--elastic.is-active .hamburger-inner {
87   transform: translate3d(0, 10px, 0) rotate(135deg);
88   transition-delay: 0.075s;
89 }
90
91 .hamburger--elastic.is-active .hamburger-inner::before {
92   transition-delay: 0s;
93   opacity: 0;
94 }
95
96 .hamburger--elastic.is-active .hamburger-inner::after {
97   transform: translate3d(0, -20px, 0) rotate(-270deg);
98   transition-delay: 0.075s;
99 }