Commit 22733549 authored by Monica Basta's avatar Monica Basta Committed by Commit Bot

[ProfilePicker]: Add scrollbar to the profile container grid.

Screenshot: https://drive.google.com/file/d/1TVPFiVBhgMFsdfOHSL9AvrJqF_cHKFBC/view?usp=sharing

Bug: 1063856
Change-Id: Ibaa987e941d11269eacfe1dc091dab234f8b206e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2302034Reviewed-by: default avatarRebekah Potter <rbpotter@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789879}
parent 4f8f453d
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
display: flex; display: flex;
font-size: 100%; font-size: 100%;
margin: 0; margin: 0;
min-height: 100vh;
} }
</style> </style>
<cr-view-manager id="viewManager"> <cr-view-manager id="viewManager">
......
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
--grid-gutter: 24px; --grid-gutter: 24px;
--profile-item-height:178px; --profile-item-height:178px;
--profile-item-width: 162px; --profile-item-width: 162px;
--scrollbar-width: 4px;
align-items: center; align-items: center;
display: grid; display: grid;
grid-column-gap: var(--grid-gutter); grid-column-gap: var(--grid-gutter);
...@@ -39,6 +40,26 @@ ...@@ -39,6 +40,26 @@
margin: auto; margin: auto;
margin-inline-end: 140px; margin-inline-end: 140px;
margin-inline-start: 140px; margin-inline-start: 140px;
max-height: calc((var(--profile-item-height) + var(--grid-gutter)) * 2 +
30px);
overflow-y: auto;
padding-inline-end: var(--scrollbar-width);
padding-inline-start: var(--scrollbar-width);
}
.profiles-container::-webkit-scrollbar {
width: var(--scrollbar-width);
}
/* Track */
.profiles-container::-webkit-scrollbar-track {
border-radius: var(--scrollbar-width);
}
/* Handle */
.profiles-container::-webkit-scrollbar-thumb {
background: var(--google-grey-refresh-100);
border-radius: var(--scrollbar-width);
} }
.profile-item { .profile-item {
...@@ -60,8 +81,8 @@ ...@@ -60,8 +81,8 @@
--cr-icon-button-icon-size: var(--avatar-icon-size); --cr-icon-button-icon-size: var(--avatar-icon-size);
--cr-icon-button-size: 84px; --cr-icon-button-size: 84px;
--cr-icon-button-fill-color: var(--google-grey-refresh-100); --cr-icon-button-fill-color: var(--google-grey-refresh-100);
--cr-icon-button-margin-end: 0px; --cr-icon-button-margin-end: 0;
--cr-icon-button-margin-start: 0px; --cr-icon-button-margin-start: 0;
--cr-icon-button-stroke-color: var(--google-grey-refresh-700); --cr-icon-button-stroke-color: var(--google-grey-refresh-700);
} }
......
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