Make thiner border for focused links #9277
Conversation
|
Thanks @MRmlik12! This looks really good. The new borders work for most things, but I noticed that it is now harder to see the borders around the Package Manager tabs (class="package-manager-tab"), especially the selected/active tab. With the changes: Original: I think we should change the color of the border around the package manager tabs, picking something with a good contrast ratio (we target a contrast ratio greater than 3:1 for UI components, and something like #0078d4 seems to have a good contrast ratio with the package manager tabs' colors). We can target this to just these package manager tabs (class="package-manager-tab"), since all the other elements look great with the new changes. |
color.mp4@advay26 I changed the border width to 3px and used #0078d4 color. It's seems to be ok. |
Yep, this looks good to me. You can move forward with that change. |
src/Bootstrap/less/theme/base.less
Outdated
| } | ||
|
|
||
| @media (min-width: @screen-sm-min) { | ||
| li { | ||
| display: inline-block; | ||
| line-height: @package-list-line-height; | ||
| max-height: (@package-list-line-height * 5 + 1px); | ||
| overflow-y: hidden; | ||
| // overflow-y: hidden; |
There was a problem hiding this comment.
nit: let's delete the line rather than comment it.
|
Done |
| } | ||
|
|
||
| @media (min-width: @screen-sm-min) { | ||
| li { | ||
| display: inline-block; | ||
| line-height: @package-list-line-height; | ||
| max-height: (@package-list-line-height * 5 + 1px); | ||
| overflow-y: hidden; |
There was a problem hiding this comment.
@advay26 This seems enabling a broader change. Is it safe to do so?
There was a problem hiding this comment.
I removed this because the focus border was cutted on bottom
There was a problem hiding this comment.
I'm not sure what else this change might affect. @MRmlik12 Correct me if I'm wrong, but as far as I could tell, the 'overflow-y: hidden' was only affecting the border around the 'package tags' on the Search page right? We can limit this change to just those tags doing something like this:
This way we can keep the focus border around the tags intact and limit any unwanted side effects.
| @@ -426,6 +431,10 @@ | |||
| font-family: @font-family-base; | |||
| color: #323130; | |||
|
|
|||
| &:focus { | |||
| outline-offset: 0; | |||
There was a problem hiding this comment.
We should also change the border color around the body tabs along with the package manager tabs
| outline-offset: 0; | |
| outline: 3px solid #0078D4; | |
| outline-offset: 0; |
advay26
added
the
Hacktoberfest
|
Thanks for your contribution @MRmlik12! 😊 |
* Update NuGetGallery.Services to address CG alerts (#9274) * Address accessibility for syntax highlighting (#9273) * address accessbility for syntax highlighting * Fix Support link (#9276) * fix broken support link * Update Download table heading (#9267) * update correct place * update table header placement * Add instructions to install MSBuildSdk packages (#9268) * Added "IsMSBuildSdkPackageType" to determine whether a package is of type MSBuildSdk. DisplayPackage view modified to show specific instructions for SDK types in project files as per #8800 * Changed "Include" to correct attribute "Name" for SDK package type Co-authored-by: Advay Tandon <[email protected]> Co-authored-by: lyndaidaii <[email protected]> * [CodeQL] Suppress CSRF token validation warnings (#9278) * Added CSRF token checks to address CodeQL bugs * Added CodeQL suppressions * Make thinner border for focused links (#9277) * Make thiner border for focused links * Change border size of package manager tabs * Delete comment line from base.less * Change nav-tabs color and make overflow-y visible for package-tags Co-authored-by: Joel Verhagen <[email protected]> Co-authored-by: lyndaidaii <[email protected]> Co-authored-by: toseni <[email protected]> Co-authored-by: Ian Rathbone <[email protected]> Co-authored-by: Advay Tandon <[email protected]> Co-authored-by: Daniel Olczyk <[email protected]>
Summary of the changes (in less than 80 characters):
Addresses #9072