Closed sarbbottam closed 7 years ago
sure, something like this should work.
let rule = {
opacity: 0,
'& + label': {
position: 'relative'
},
'& + label:before, & + label:after': {
content: '""',
position: 'absolute'
}
// etc...
}
// ...
<input type="checkbox" id="toggle" className={rule} />
<label htmlFor="toggle">Toggle </label>
Awesome. I would give it a try.
Would you consider to showcase such complex use case in the readme
/docs
? I would be happy to raise a PR.
Well... I've started a complete rewrite of the docs, mind if I ping you when I have something to share there? Would be happy to take docs PRs into that.
Not at all. Would love to contribute to this awesome project.
I have been looking around for the perfect CSS solution
. Wasn't happy with the existing ones, so created Sheer. It is good but far from my desired one, no scoping, specificity issues. I looked at atomizer, which addressed those issues but would create a readability concern with the example I provided above. I loved css-module, but it does not seem to be in active development, tried few more ... and then gave up, went back to Sheer.
I did come across glamor
earlier but did not quite follow/like the syntax
<div
{...style({ color: 'red' })}
{...hover({ color: 'pink' })}>
>
Visited again a while back, directed from Next.js. And guess what, the current syntax is so intuitive. I guess this is the CSS Solution
rather Presentation Solution
I have been looking for.
More than happy to contribute, if I may be of any help.
Thanks for reading!
Sheer looks great! I'll loop you in if I need any help, thanks! Lemme know how using glamor goes for you.
Did anybody get this method to work? Trying to style a checkbox label but having difficulty implementing.
So, as I've recently discovered content: '',
and content: '""',
are not the same. content: '',
will not work, since JS needs quotes in a string literal. I struggled with this for a good half hour before tweaking the right knob.
(This may be a good gotcha to note in the readme?)
Hope this helps!
Wow @jguffey Took me forever to find this post, but so glad I did. Had the exact same problem. Thank you!
Is it possible to something like http://codepen.io/sarbbottam/pen/YGjXjq?editors=0100 with glamor?
If so, a working example would be great.
Thanks!