83 .customize-partial-edit-shortcut button:focus { |
82 .customize-partial-edit-shortcut button:focus { |
84 box-shadow: 0 0 0 2px #008ec2; |
83 box-shadow: 0 0 0 2px #008ec2; |
85 } |
84 } |
86 |
85 |
87 body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button { |
86 body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button { |
88 -webkit-animation-name: customize-partial-edit-shortcut-bounce-appear; |
|
89 animation-name: customize-partial-edit-shortcut-bounce-appear; |
87 animation-name: customize-partial-edit-shortcut-bounce-appear; |
90 pointer-events: auto; |
88 pointer-events: auto; |
91 } |
89 } |
92 body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button { |
90 body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button { |
93 -webkit-animation-name: customize-partial-edit-shortcut-bounce-disappear; |
|
94 animation-name: customize-partial-edit-shortcut-bounce-disappear; |
91 animation-name: customize-partial-edit-shortcut-bounce-disappear; |
95 pointer-events: none; |
92 pointer-events: none; |
96 } |
93 } |
97 |
94 |
98 .page-sidebar-collapsed .customize-partial-edit-shortcut button, |
95 .page-sidebar-collapsed .customize-partial-edit-shortcut button, |
99 .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button { |
96 .customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button { |
100 visibility: hidden; |
97 visibility: hidden; |
101 } |
98 } |
102 |
99 |
103 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear { |
100 @keyframes customize-partial-edit-shortcut-bounce-appear { |
104 from, 20%, 40%, 60%, 80%, to { |
101 from, 20%, 40%, 60%, 80%, to { |
105 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
106 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
102 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
107 } |
103 } |
108 0% { |
104 0% { |
109 opacity: 0; |
105 opacity: 0; |
110 -webkit-transform: scale3d(.3, .3, .3); |
|
111 transform: scale3d(.3, .3, .3); |
106 transform: scale3d(.3, .3, .3); |
112 } |
107 } |
113 20% { |
108 20% { |
114 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
115 transform: scale3d(1.1, 1.1, 1.1); |
109 transform: scale3d(1.1, 1.1, 1.1); |
116 } |
110 } |
117 40% { |
111 40% { |
118 -webkit-transform: scale3d(.9, .9, .9); |
|
119 transform: scale3d(.9, .9, .9); |
112 transform: scale3d(.9, .9, .9); |
120 } |
113 } |
121 60% { |
114 60% { |
122 opacity: 1; |
115 opacity: 1; |
123 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
124 transform: scale3d(1.03, 1.03, 1.03); |
116 transform: scale3d(1.03, 1.03, 1.03); |
125 } |
117 } |
126 80% { |
118 80% { |
127 -webkit-transform: scale3d(.97, .97, .97); |
|
128 transform: scale3d(.97, .97, .97); |
119 transform: scale3d(.97, .97, .97); |
129 } |
120 } |
130 to { |
121 to { |
131 opacity: 1; |
122 opacity: 1; |
132 -webkit-transform: scale3d(1, 1, 1); |
|
133 transform: scale3d(1, 1, 1); |
123 transform: scale3d(1, 1, 1); |
134 } |
|
135 } |
|
136 |
|
137 @keyframes customize-partial-edit-shortcut-bounce-appear { |
|
138 from, 20%, 40%, 60%, 80%, to { |
|
139 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
140 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
141 } |
|
142 0% { |
|
143 opacity: 0; |
|
144 -webkit-transform: scale3d(.3, .3, .3); |
|
145 transform: scale3d(.3, .3, .3); |
|
146 } |
|
147 20% { |
|
148 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
149 transform: scale3d(1.1, 1.1, 1.1); |
|
150 } |
|
151 40% { |
|
152 -webkit-transform: scale3d(.9, .9, .9); |
|
153 transform: scale3d(.9, .9, .9); |
|
154 } |
|
155 60% { |
|
156 opacity: 1; |
|
157 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
158 transform: scale3d(1.03, 1.03, 1.03); |
|
159 } |
|
160 80% { |
|
161 -webkit-transform: scale3d(.97, .97, .97); |
|
162 transform: scale3d(.97, .97, .97); |
|
163 } |
|
164 to { |
|
165 opacity: 1; |
|
166 -webkit-transform: scale3d(1, 1, 1); |
|
167 transform: scale3d(1, 1, 1); |
|
168 } |
|
169 } |
|
170 |
|
171 @-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear { |
|
172 from, 20%, 40%, 60%, 80%, to { |
|
173 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
174 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
175 } |
|
176 0% { |
|
177 opacity: 1; |
|
178 -webkit-transform: scale3d(1, 1, 1); |
|
179 transform: scale3d(1, 1, 1); |
|
180 } |
|
181 20% { |
|
182 -webkit-transform: scale3d(.97, .97, .97); |
|
183 transform: scale3d(.97, .97, .97); |
|
184 } |
|
185 40% { |
|
186 opacity: 1; |
|
187 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
188 transform: scale3d(1.03, 1.03, 1.03); |
|
189 } |
|
190 60% { |
|
191 -webkit-transform: scale3d(.9, .9, .9); |
|
192 transform: scale3d(.9, .9, .9); |
|
193 } |
|
194 80% { |
|
195 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
196 transform: scale3d(1.1, 1.1, 1.1); |
|
197 } |
|
198 to { |
|
199 opacity: 0; |
|
200 -webkit-transform: scale3d(.3, .3, .3); |
|
201 transform: scale3d(.3, .3, .3); |
|
202 } |
124 } |
203 } |
125 } |
204 |
126 |
205 @keyframes customize-partial-edit-shortcut-bounce-disappear { |
127 @keyframes customize-partial-edit-shortcut-bounce-disappear { |
206 from, 20%, 40%, 60%, 80%, to { |
128 from, 20%, 40%, 60%, 80%, to { |
207 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
|
208 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
129 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); |
209 } |
130 } |
210 0% { |
131 0% { |
211 opacity: 1; |
132 opacity: 1; |
212 -webkit-transform: scale3d(1, 1, 1); |
|
213 transform: scale3d(1, 1, 1); |
133 transform: scale3d(1, 1, 1); |
214 } |
134 } |
215 20% { |
135 20% { |
216 -webkit-transform: scale3d(.97, .97, .97); |
|
217 transform: scale3d(.97, .97, .97); |
136 transform: scale3d(.97, .97, .97); |
218 } |
137 } |
219 40% { |
138 40% { |
220 opacity: 1; |
139 opacity: 1; |
221 -webkit-transform: scale3d(1.03, 1.03, 1.03); |
|
222 transform: scale3d(1.03, 1.03, 1.03); |
140 transform: scale3d(1.03, 1.03, 1.03); |
223 } |
141 } |
224 60% { |
142 60% { |
225 -webkit-transform: scale3d(.9, .9, .9); |
|
226 transform: scale3d(.9, .9, .9); |
143 transform: scale3d(.9, .9, .9); |
227 } |
144 } |
228 80% { |
145 80% { |
229 -webkit-transform: scale3d(1.1, 1.1, 1.1); |
|
230 transform: scale3d(1.1, 1.1, 1.1); |
146 transform: scale3d(1.1, 1.1, 1.1); |
231 } |
147 } |
232 to { |
148 to { |
233 opacity: 0; |
149 opacity: 0; |
234 -webkit-transform: scale3d(.3, .3, .3); |
|
235 transform: scale3d(.3, .3, .3); |
150 transform: scale3d(.3, .3, .3); |
236 } |
151 } |
237 } |
152 } |
238 |
153 |
239 @media screen and (max-width:800px) { |
154 @media screen and (max-width: 800px) { |
240 .widget .customize-partial-edit-shortcut button, |
155 .widget .customize-partial-edit-shortcut button, |
241 .customize-partial-edit-shortcut button { |
156 .customize-partial-edit-shortcut button { |
242 right: -32px; |
157 right: -32px; |
243 } |
158 } |
244 } |
159 } |
245 |
160 |
246 @media screen and (max-width:320px) { |
161 @media screen and (max-width: 320px) { |
247 .widget .customize-partial-edit-shortcut button, |
162 .widget .customize-partial-edit-shortcut button, |
248 .customize-partial-edit-shortcut button { |
163 .customize-partial-edit-shortcut button { |
249 right: -30px; |
164 right: -30px; |
250 } |
165 } |
251 } |
166 } |