-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add link theme for vaadin-tab #82
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of an explicit theme="link"
, I would just use negative margin on the slotted a
element.
7fff8e3
to
e8d0d7c
Compare
Done. Review status: 0 of 1 files reviewed at latest revision, all discussions resolved. Comments from Reviewable |
e8d0d7c
to
5cdefb1
Compare
I think it's important then to check if the click event has special keys involved (e.g. control/meta) since in that case the tab selection should not occur since the link could be opened in a new browser tab/window. |
Closing this now as the theme-only change is obviously not enough. Will figure out a better way to implement this later. |
Could this PR + vaadin/vaadin-list-mixin/pull/30 be a solution? To this I'd force the color of links and add the style for hovered ones, e.g. :host ::slotted(a) {
display: flex;
align-items: center;
width: calc(100% + 2em);
height: 100%;
margin: -.25em -1em;
padding: .25em 1em;
text-decoration: none;
- color: inherit;
+ color: inherit !important;
outline: none;
}
+ :host ::slotted(a:hover) {
+ text-decoration: none !important;
+ } Also, icons inside the anchor should be styled the same as icons inside the tab (aside, on top, etc.). |
Pretty much this: vaadin/vaadin-tabs/compare/master...heruan:links-in-tab 😄 |
|
Interesting, somehow it renders correctly: https://jsfiddle.net/heruan/rz60k8a2/ From the inspector it seems the selector matches, at least in Safari and Firefox. Out of the spec but supported by browsers, maybe? |
Firefox is still polyfilled (no native shadow), so that’s why it works – the polyfill doesn’t strip the stuff after |
Got it, thank you! Tested in Chrome too and it works, but I understand it's not reliable if out of the spec. I've placed this on a local |
Fixes #81
This feature was inspired by work on the elements-viewer navigation where I had to use absolute positioning to achieve what I needed: https://github.com/web-padawan/elements-viewer/blob/master/src/viewer-link.html#L13
@jouni PTAL
This change is![Reviewable](https://camo.githubusercontent.com/23b05f5fb48215c989e92cc44cf6512512d083132bd3daf689867c8d9d386888/68747470733a2f2f72657669657761626c652e696f2f7265766965775f627574746f6e2e737667)