Commit b61dc1ac authored by Michael Hansen's avatar Michael Hansen Committed by Commit Bot

[Nearby] One-liner card radio buttons on contact visibility dialog.

This exposes a "part" for the checkmark on cr-card-radio-button so that
this element can be styled by consumers of this component.

We use this to style the contact visibility dialog for Nearby Share to
make the checkmark to appear on the left side of the card instead of
the right.

Screenshot:
  https://screenshot.googleplex.com/BiieNw4UJu5b6HS.png

Bug: b:168841167
Change-Id: I44695d777de60a9f62a26115e1c98c123349f9cb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2518263Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Cr-Commit-Position: refs/heads/master@{#823780}
parent 19d10593
......@@ -47,6 +47,9 @@
margin-inline-start: 5px;
padding: 0;
width: auto;
--cr-card-radio-button-checkmark-left: var(--cr-button-edge-spacing);
--cr-card-radio-button-checkmark-right: auto;
--cr-card-radio-button-checkmark-top: auto;
}
cr-card-radio-button[checked] {
......@@ -64,9 +67,18 @@
.card-contents {
color: var(--google-blue-600);
}
.card-icon {
fill: var(--google-blue-600);
margin-block-end: 8px;
margin-inline-end: 8px;
}
cr-card-radio-button[checked] .card-icon {
visibility: hidden;
}
.card-label {
display: inline-flex;
}
#zeroStateContainer {
......
......@@ -34,9 +34,10 @@
}
#checkMark {
left: var(--cr-card-radio-button-checkmark-left, auto);
position: absolute;
right: var(--cr-button-edge-spacing);
top: var(--cr-button-edge-spacing);
right: var(--cr-card-radio-button-checkmark-right, var(--cr-button-edge-spacing));
top: var(--cr-card-radio-button-checkmark-top, var(--cr-button-edge-spacing));
}
:host(:not([checked])) #checkMark {
......
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