Commit d1e7ae19 authored by Kyle Milka's avatar Kyle Milka Committed by Commit Bot

[NTP] Fixing spacing for hardcoded bg selection tiles

The hardcoded "Upload from device" and "No background" tiles
were slightly misaligned. Partly due to a single character space
being inserted between inline-block elements. Fix the issues by
moving some properties between elements and setting the font size
of the parent to 0px. This fixes some problems with keyboard
navigation as well as the slight visual misalignment.

Bug: 937570
Change-Id: Iab866d50ae288d9bf4d5dc12280053253e6f3767
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1691260Reviewed-by: default avatarKristi Park <kristipark@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675696}
parent 3ea640af
...@@ -1047,10 +1047,8 @@ html[dir=rtl] .menu-option { ...@@ -1047,10 +1047,8 @@ html[dir=rtl] .menu-option {
#backgrounds-default.bg-sel-tile-bg { #backgrounds-default.bg-sel-tile-bg {
background-color: white; background-color: white;
border: 1px solid rgb(var(--GG300-rgb)); height: 176px;
height: 174px; width: 176px;
margin-inline-end: 6px;
width: 174px;
} }
#customization-menu .bg-sel-tile-bg.selected { #customization-menu .bg-sel-tile-bg.selected {
...@@ -1064,13 +1062,14 @@ html[dir=rtl] .menu-option { ...@@ -1064,13 +1062,14 @@ html[dir=rtl] .menu-option {
} }
} }
#backgrounds-menu {
/* Remove extra spacing between inline-block elements. */
font-size: 0;
}
#backgrounds-upload.bg-sel-tile-bg { #backgrounds-upload.bg-sel-tile-bg {
background-color: white; background-color: white;
border: 1px solid rgb(var(--GG300-rgb));
height: 174px;
margin-inline-end: 6px;
vertical-align: top; vertical-align: top;
width: 174px;
} }
#menu-back-wrapper { #menu-back-wrapper {
...@@ -1137,6 +1136,8 @@ html[dir=rtl] #menu-back { ...@@ -1137,6 +1136,8 @@ html[dir=rtl] #menu-back {
} }
#backgrounds-upload-wrapper { #backgrounds-upload-wrapper {
border: 1px solid rgb(var(--GG300-rgb));
box-sizing: border-box;
display: inline-block; display: inline-block;
left: 0; left: 0;
opacity: 1; opacity: 1;
...@@ -1158,6 +1159,7 @@ html[dir=rtl] #menu-back { ...@@ -1158,6 +1159,7 @@ html[dir=rtl] #menu-back {
#backgrounds-upload-text { #backgrounds-upload-text {
color: rgb(var(--GG700-rgb)); color: rgb(var(--GG700-rgb));
font-size: 13px;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
...@@ -1191,6 +1193,8 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check { ...@@ -1191,6 +1193,8 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
#backgrounds-default-icon { #backgrounds-default-icon {
background-color: white; background-color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
border: 1px solid rgb(var(--GG300-rgb));
box-sizing: border-box;
margin: auto; margin: auto;
opacity: 1; opacity: 1;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment