Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3717)

Unified Diff: chrome/browser/resources/sync_confirmation/sync_confirmation.css

Issue 1681203002: Add the decorative icons to the sync confirmation dialog. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Address feedback Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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);
+ }
+}

Powered by Google App Engine
This is Rietveld 408576698