-
Notifications
You must be signed in to change notification settings - Fork 2
/
transburger-icon-styles.html
114 lines (108 loc) · 4.88 KB
/
transburger-icon-styles.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<dom-module id="transburger-icon-styles"><template><style>
:host {
display: inline-block; }
:host([hidden]) {
display: none; }
button {
border: var(--transburger-icon-button-border, 0);
margin: var(--transburger-icon-button-margin, 0);
padding: var(--transburger-icon-button-padding, 0);
overflow: var(--transburger-icon-button-overflow, visible);
vertical-align: var(--transburger-icon-button-vertical-align, middle);
font-family: var(--transburger-icon-button-font-family, inherit);
font-size: var(--transburger-icon-button-font-size, var(--transburger-icon-height, 14px));
color: var(--transburger-icon-button-color, inherit);
cursor: var(--transburger-icon-button-cursor, initial);
outline: var(--transburger-icon-button-outline, initial);
border-radius: var(--transburger-icon-button-border-radius, initial);
box-shadow: var(--transburger-icon-button-box-shadow, none);
background: var(--transburger-icon-button-background, #ccc); }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.t-icon-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
:host([icon-position="right"]) button .t-icon-content {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1; }
.t-icon {
font-size: var(--transburger-icon-height, inherit);
width: var(--transburger-icon-width, 1.42857em);
height: 1em;
margin: var(--transburger-icon-margin, 0.85714em);
color: currentColor;
position: relative; }
.t-icon__middle, .t-icon::after, .t-icon::before {
width: 100%;
height: var(--transburger-icon-lines-height, 2px);
background: currentColor;
border-radius: var(--transburger-icon-line-radius, 2px);
position: absolute;
margin: auto; }
.t-icon::after, .t-icon::before {
content: "";
display: block;
@apply --transburger-icon-top-bottom-lines; }
.t-icon::before {
top: 0; }
.t-icon::after {
bottom: 0; }
.t-icon__middle {
top: 0;
bottom: 0; }
.t-icon--arrow-left::before, .t-icon--arrow-left::after, .t-icon--arrow-right::before, .t-icon--arrow-right::after {
transition: -webkit-transform 0.2s cubic-bezier(0.51, 0.2, 0.31, 0.85);
transition: transform 0.2s cubic-bezier(0.51, 0.2, 0.31, 0.85);
transition: transform 0.2s cubic-bezier(0.51, 0.2, 0.31, 0.85), -webkit-transform 0.2s cubic-bezier(0.51, 0.2, 0.31, 0.85); }
.t-icon--arrow-left.is-active::before {
-webkit-transform: translate3d(-0.35714em, calc(1em / 7), 0) rotate(-40deg) scaleX(0.7);
transform: translate3d(-0.35714em, calc(1em / 7), 0) rotate(-40deg) scaleX(0.7); }
.t-icon--arrow-left.is-active::after {
-webkit-transform: translate3d(-0.35714em, calc(-1em / 7), 0) rotate(40deg) scaleX(0.7);
transform: translate3d(-0.35714em, calc(-1em / 7), 0) rotate(40deg) scaleX(0.7); }
.t-icon--arrow-right.is-active::before {
-webkit-transform: translate3d(0.35714em, calc(1em / 7), 0) rotate(40deg) scaleX(0.7);
transform: translate3d(0.35714em, calc(1em / 7), 0) rotate(40deg) scaleX(0.7); }
.t-icon--arrow-right.is-active::after {
-webkit-transform: translate3d(0.35714em, calc(-1em / 7), 0) rotate(-40deg) scaleX(0.7);
transform: translate3d(0.35714em, calc(-1em / 7), 0) rotate(-40deg) scaleX(0.7); }
.t-icon--close::before, .t-icon--close::after {
-webkit-transform: rotate(0);
transform: rotate(0); }
.t-icon--close::before {
bottom: calc(100% - .14286em);
transition: bottom .2s .24s ease, -webkit-transform .2s ease;
transition: transform .2s ease, bottom .2s .24s ease;
transition: transform .2s ease, bottom .2s .24s ease, -webkit-transform .2s ease; }
.t-icon--close::after {
top: calc(100% - .14286em);
transition: top .2s .24s ease, -webkit-transform .2s ease;
transition: transform .2s ease, top .2s .24s ease;
transition: transform .2s ease, top .2s .24s ease, -webkit-transform .2s ease; }
.t-icon--close .t-icon__middle {
transition: opacity .2s; }
.t-icon--close.is-active .t-icon__middle {
opacity: 0; }
.t-icon--close.is-active::before {
bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: bottom .2s ease, -webkit-transform .2s .24s ease;
transition: bottom .2s ease, transform .2s .24s ease;
transition: bottom .2s ease, transform .2s .24s ease, -webkit-transform .2s .24s ease;
@apply --transburger-icon-close-top-bottom-lines-active; }
.t-icon--close.is-active::after {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: top .2s ease, -webkit-transform .2s .24s ease;
transition: top .2s ease, transform .2s .24s ease;
transition: top .2s ease, transform .2s .24s ease, -webkit-transform .2s .24s ease;
@apply --transburger-icon-close-top-bottom-lines-active; }
</style></template></dom-module>