Only add .pointer-active for non-touch events

The sticky hover issue seems an expected behaviour according to this
bug crbug.com/316974, so we will just keep it as it is.

The issue here is that the sticky hover doesn't look good with the
.pointer-active class: when we scroll the list view, pointer-active will
be turned on, and when we lift our finger, it will be turned off. With
the .pointer-active on/off, the hover effect will hide/show, thus the
flickering issue.

The fix is we don't add .pointer-active for touch related pointer down
event, the hover still sticks when scrolling, but won't be flickering
any more.

After removing the .pointer-active for touch pointerdown, there are also
some changes to the CSS. Previously we rely on ".pointer-active" to
control the show/hide of <paper-ripple> elements for breadcrumb and
menu, the removal of ".pointer-active" for touch will break that CSS,
so we also need to remove those CSS rules. It won't break
<paper-ripple> after removing the CSS though, because <paper-ripple>
component can control its show/hide internally.

Demo: http://shortn/_UA0M8OqGsV
Appiness demo: http://shortn/_7H0h6hfIrk (Testing there's no unexpected
hover in touch after this change)

Bug: 1311472
Test: deploy to DUT and visually inspect
Change-Id: If54ef210236cd1251f3f9344ff5992b1c8395c84
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3574505
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Wenbo Jie <wenbojie@chromium.org>
Cr-Commit-Position: refs/heads/main@{#996573}