Index: chrome/browser/resources/sync_confirmation/sync_confirmation.css |
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.css b/chrome/browser/resources/sync_confirmation/sync_confirmation.css |
index c57ae25abf23667d4587ebe291e312e443872a20..ab041f343d52eb42269af728e5732bbe19d62448 100644 |
--- a/chrome/browser/resources/sync_confirmation/sync_confirmation.css |
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.css |
@@ -28,7 +28,6 @@ a { |
.top-title-bar { |
-webkit-padding-start: 24px; |
- -webkit-padding-start: 24px; |
align-items: center; |
border-bottom: 1px solid lightgray; |
color: #333; |
@@ -49,7 +48,7 @@ a { |
padding-bottom: 32px; |
} |
-.picture-container { |
+#picture-container { |
align-items: center; |
display: flex; |
justify-content: center; |
@@ -57,29 +56,17 @@ a { |
} |
.picture { |
+ -webkit-margin-start: 84px; |
height: 96px; |
position: relative; |
width: 96px; |
} |
#profile-picture, |
-.checkmark-bubble { |
+.checkmark-circle { |
position: absolute; |
} |
-.checkmark-bubble { |
- background-color: white; |
- background-image: url(//resources/images/check_circle.svg); |
- background-size: 100%; |
- border: 1px solid white; |
- border-radius: 50%; |
- display: inline-block; |
- height: 30px; |
- left: 64px; |
- top: 66px; |
- width: 30px; |
-} |
- |
.action-container { |
align-items: baseline; |
display: flex; |
@@ -100,3 +87,237 @@ paper-button { |
#undoButton { |
color: #5A5A5A; |
} |
+ |
+#illustration { |
+ height: 96px; |
+ margin: 0 auto; |
+ position: relative; |
+ width: 264px; |
+} |
+ |
+#checkmark-circle { |
+ background: rgb(66, 133, 244); |
+ border: 2px solid #fff; |
+ border-radius: 50%; |
+ bottom: 0; |
+ height: 24px; |
+ position: absolute; |
+ right: 0; |
+ transform: scale(0); |
+ width: 24px; |
+} |
+ |
+.loaded #checkmark-circle { |
+ animation: scale-circle 300ms cubic-bezier(0, 0, 0.2, 1) forwards; |
+} |
+ |
+@keyframes scale-circle { |
+ from { transform: scale(0); } |
+ to { transform: scale(1); } |
+} |
+ |
+#checkmark-check { |
+ left: 5px; |
+ position: absolute; |
+ top: 7px; |
+} |
+ |
+.loaded #checkmark-path { |
+ animation: draw-path 300ms cubic-bezier(0, 0, 0.2, 1) 100ms forwards; |
+} |
+ |
+@keyframes draw-path { |
+ from { stroke-dashoffset: 16; } |
+ to { stroke-dashoffset: 0; } |
+} |
+ |
+#icons { |
+ height: 96px; |
+ position: absolute; |
+ width: 264px; |
+} |
+ |
+#icons > div { |
+ animation-delay: 200ms; |
+ animation-duration: 1.4s; |
Dan Beam
2016/02/29 20:31:08
1.4s O_o
anthonyvd
2016/03/01 15:21:51
Just confirming that this is indeed the value in t
|
+ animation-fill-mode: forwards; |
+ animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7); |
+ background-size: cover; |
+ opacity: 0; |
+ position: absolute; |
+} |
+ |
+#icon-bookmarks { |
+ background: url(../../../../ui/webui/resources/images/icon_bookmarks.svg); |
+ height: 36px; |
+ left: 58px; |
+ top: 0; |
+ width: 36px; |
+} |
+ |
+#icon-extensions { |
+ background: url(../../../../ui/webui/resources/images/icon_extensions.svg); |
+ height: 24px; |
+ left: 30px; |
+ top: 30px; |
+ width: 24px; |
+} |
+ |
+ |
+#icon-passwords { |
+ background: url(../../../../ui/webui/resources/images/icon_passwords.svg); |
+ height: 30px; |
+ left: 38px; |
+ top: 66px; |
+ width: 40px; |
+} |
+ |
+#icon-history { |
+ background: url(../../../../ui/webui/resources/images/icon_history.svg); |
+ height: 36px; |
+ left: 190px; |
+ top: 6px; |
+ width: 36px; |
+} |
+ |
+#icon-tabs { |
+ background: url(../../../../ui/webui/resources/images/icon_tabs.svg); |
+ height: 24px; |
+ left: 222px; |
+ top: 44px; |
+ width: 24px; |
+} |
+ |
+#icon-themes { |
+ background: url(../../../../ui/webui/resources/images/icon_themes.svg); |
+ height: 30px; |
+ left: 184px; |
+ top: 62px; |
+ width: 32px; |
+} |
+ |
+#icon-circle-open { |
+ border: 2px solid #000; |
+ border-radius: 50%; |
+ height: 8px; |
+ left: 6px; |
+ top: 56px; |
+ width: 8px; |
+} |
+ |
+.icon-circle { |
+ background: #000; |
+ border-radius: 50%; |
+ height: 4px; |
+ width: 4px; |
+} |
+ |
+#icon-circle-1 { |
+ left: 64px; |
+ top: 50px; |
+} |
+ |
+#icon-circle-2 { |
+ left: 178px; |
+ top: 18px; |
+} |
+ |
+#icon-circle-3 { |
+ left: 194px; |
+ top: 50px; |
+} |
+ |
+#icon-circle-4 { |
+ left: 258px; |
+ top: 36px; |
+} |
+ |
+.loaded .fade-top-left { |
+ animation-name: fade-in-icon-top-left; |
+} |
+ |
+.loaded .fade-top-right { |
+ animation-name: fade-in-icon-top-right; |
+} |
+ |
+.loaded .fade-middle-left { |
+ animation-name: fade-in-icon-middle-left; |
+} |
+ |
+.loaded .fade-middle-right { |
+ animation-name: fade-in-icon-middle-right; |
+} |
+ |
+.loaded .fade-bottom-left { |
+ animation-name: fade-in-icon-bottom-left; |
+} |
+ |
+.loaded .fade-bottom-right { |
+ animation-name: fade-in-icon-bottom-right; |
+} |
+ |
+@keyframes fade-in-icon-top-left { |
+ from { |
+ opacity: 0; |
+ transform: translate(0, 0); |
+ } |
+ to { |
+ opacity: 0.1; |
+ transform: translate(-4px, -4px); |
+ } |
+} |
+ |
+@keyframes fade-in-icon-top-right { |
+ from { |
+ opacity: 0; |
+ transform: translate(0, 0); |
+ } |
+ to { |
+ opacity: 0.1; |
+ transform: translate(4px, -4px); |
+ } |
+} |
+ |
+@keyframes fade-in-icon-middle-left { |
+ from { |
+ opacity: 0; |
+ transform: translate(0, 0); |
+ } |
+ to { |
+ opacity: 0.1; |
+ transform: translate(-4px, 0); |
+ } |
+} |
+ |
+@keyframes fade-in-icon-middle-right { |
+ from { |
+ opacity: 0; |
+ transform: translate(0, 0); |
+ } |
+ to { |
+ opacity: 0.1; |
+ transform: translate(4px, 0); |
+ } |
+} |
+ |
+@keyframes fade-in-icon-bottom-left { |
+ from { |
+ opacity: 0; |
+ transform: translate(0, 0); |
+ } |
+ to { |
+ opacity: 0.1; |
+ transform: translate(-4px, 4px); |
+ } |
+} |
+ |
+@keyframes fade-in-icon-bottom-right { |
+ from { |
+ opacity: 0; |
+ transform: translate(0, 0); |
+ } |
+ to { |
+ opacity: 0.1; |
+ transform: translate(4px, 4px); |
+ } |
+} |