Documentation states:
“bottom” and “right” hairlines are made using
:after
pseudo elements
but how can I add a right (vertical) hairline to side-panel? (or even a list) using the pseudo-element?
Documentation states:
“bottom” and “right” hairlines are made using
:after
pseudo elements
but how can I add a right (vertical) hairline to side-panel? (or even a list) using the pseudo-element?
I think the Hairlines documents are in relation to elements which have existing hairlines. I don’t believe Side Panels do.
You’d be able to write your own CSS to provide hairlines.
Sorry - the question was a bit unsharp: It’s more like:
How can I add a right (vertical) hairline to a supported element using the pseudo-element? (I just understand how to differenciate ‘bottom’ and ‘right’ here…
and: which elements support vertical hairlines?
you can start with this
<div class="selector"></div>
.selector {
width: 100px;
height: 100px;
position: relative;
}
.selector::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 100%;
background-color: var(--f7-list-border-color);
}
That’s something else.
Maybe I mis-read the docs, but for me it looked like I can attach the ‘hairline’ already out of the box:
https://framework7.io/docs/hairlines.html
As opposed to drawing a line with a fixed width like in your snippet - or even:
calc(1px / var(--f7-device-pixel-ratio))
, drawing using transforms give nicer results on retina displays.
But my (new) guess is, that documentation just shows how to remove the hairline, in case it is already attached… - so I mis-read the documentation.
@nolimits4web Maybe it would be a good idea to add a sentence, that this part of documentation is meant for existing
elements only.
thx anyway
Yes, this part of docs only how to handle existing hairlines.
P.S. iOS (if that is the case) supports fractional border so you can just do border-right: 0.5px solid
or border-left: 0.33px solid
, etc.