Navi: Use REM instead of PX to allow scaling the chooser with font.
Screenshot in bug.
Bug: 930650
Change-Id: I2a0e791832b902e43b874e8bae479afc15524141
Reviewed-on: https://chromium-review.googlesource.com/c/1467671
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#631826}
diff --git a/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html b/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
index 0f97022..0b8da5b 100644
--- a/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
@@ -34,6 +34,7 @@
content: -webkit-image-set(
url(../images/set_as_default_illustration_1x.png) 1x,
url(../images/set_as_default_illustration_2x.png) 2x);
+ margin: auto;
width: 454px;
}
diff --git a/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html b/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html
index 5caf897..23499fb 100644
--- a/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_shared_css.html
@@ -23,16 +23,16 @@
display: inline-flex;
flex-direction: column;
font-family: inherit;
- height: 84px;
+ height: 5.25rem;
justify-content: center;
outline: 0;
position: relative;
vertical-align: bottom;
- width: 104px;
+ width: 6.5rem;
}
.option:not(:first-of-type) {
- margin-inline-start: 24px;
+ margin-inline-start: 1.5rem;
}
.option.keyboard-focused:focus {
@@ -51,18 +51,18 @@
background-position: center;
background-repeat: no-repeat;
background-size: contain;
- height: 32px;
+ height: 2rem;
margin: auto;
- width: 32px;
+ width: 2rem;
}
.option .option-icon-shadow {
background-color: var(--google-grey-refresh-100);
border-radius: 50%;
display: flex;
- height: 48px;
- margin-bottom: 4px;
- width: 48px;
+ height: 3rem;
+ margin-bottom: 0.25rem;
+ width: 3rem;
}
.option iron-icon {
@@ -70,12 +70,12 @@
background: lightgrey;
border-radius: 50%;
display: none;
- height: 12px;
+ height: 0.75rem;
margin: 0;
position: absolute;
- right: 6px;
- top: 6px;
- width: 12px;
+ right: 0.375rem;
+ top: 0.375rem;
+ width: 0.75rem;
}
.option.keyboard-focused:focus iron-icon[icon='cr:check'],
@@ -97,7 +97,7 @@
.button-bar {
display: flex;
justify-content: space-between;
- margin-top: 64px;
+ margin-top: 4rem;
}
:host-context([dir=rtl]) iron-icon {
@@ -105,10 +105,10 @@
}
iron-icon[icon='cr:chevron-right'] {
- height: 20px;
- margin-inline-end: -10px;
- margin-inline-start: 6px;
- width: 20px;
+ height: 1.25rem;
+ margin-inline-end: -0.625rem;
+ margin-inline-start: 0.375rem;
+ width: 1.25rem;
}
</style>
</template>