Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Created January 20, 2017 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/351f6198d18da0f37c80618a9d4bbbf9 to your computer and use it in GitHub Desktop.
Save timelyportfolio/351f6198d18da0f37c80618a9d4bbbf9 to your computer and use it in GitHub Desktop.
test css variables in RStudio Viewer
library(htmltools)
library(pipeR)
# from https://gist.github.com/LeaVerou/b775702d198bb3d8fdcb22fb7394050f
# thanks Lea Verou
svg <- '
<svg viewBox="0 0 100 100" width="200" height="200">
<circle r="10" cx="50" cy="50" fill="var(--foo)" style="r: var(--radius); transform: translateX(calc(var(--translate) + 10px)" />
</svg>
'
css <- '
:root {
--foo: red;
}
svg {
--foo: #0ac;
--translate: 10px;
--radius: 30;
}
circle:hover {
--foo: #f06;
--translate: 0px;
--radius: 50;
}'
tagList(tags$style(css), HTML(svg)) %>>%
browsable()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment