Open MayaGans opened 3 years ago
Merging #94 (b374645) into master (14fb86d) will decrease coverage by
1.13%
. The diff coverage is0.00%
.
@@ Coverage Diff @@
## master #94 +/- ##
==========================================
- Coverage 37.84% 36.70% -1.14%
==========================================
Files 17 18 +1
Lines 613 632 +19
==========================================
Hits 232 232
- Misses 381 400 +19
Impacted Files | Coverage Δ | |
---|---|---|
R/flashcard.R | 0.00% <0.00%> (ø) |
Continue to review full report at Codecov.
Legend - Click here to learn more
Δ = absolute <relative> (impact)
,ø = not affected
,? = missing data
Powered by Codecov. Last update 14fb86d...accb099. Read the comment docs.
I'd like to use var(--header-color) or other dynamic variables
This is a great idea and will work really well! I love making the design customizable via CSS variables. The way that I typically approach this is two fold:
:root
element in flashcards.css
. This makes that CSS file portable, and by setting the values on the :root
element, it's easier to override the defaults with a more specific selector. Alternatively, you can use var(--header-foreground, red)
syntax to provide a fallback value if the variable isn't found.style_flashcards()
function with R-styled arguments that writes a chunk of CSS to set these variables for a selector. For an example, see style_search().style_search(
search_input_foreground = "black",
search_match_background = "rgb(38, 220, 249)"
)
<style>
.search {
--search-icon-fill: rgba(128, 128, 128, 0.5);
--search-input-background: rgb(204, 204, 204);
--search-input-foreground: black;
--search-input-border: 1px solid rgb(249, 38, 114);
--search-match-background: rgb(38, 220, 249);
--search-match-foreground: black;
--search-match-current-background: rgb(38, 249, 68);
--search-match-current-foreground: black;
}</style>
One place that I'm kind of picky: when referencing the color
property, I prefer -foreground
, which makes it okay to use -background
for the background-color
property. I've found that it's easy to get confused about which of text or background color a variable references when it's called something-color
. (Hence --header-foreground
instead of --header-color
.) Otherwise, it's best to have the variable name match the CSS property name as much as reasonable.
First of all thanks for giving a home to my little orphan idea! This is still a mess but the basic idea worked when I made a little markdown with the chunk:
Changelog
R/flashcard.R
creates our little flashcardinst/flashcard/flashcard.css
does the flipping. This really needs be cleaned up though because I was thinking I'd like to use var(--header-color) or other dynamic variables from xaringanThemer. Curious how you'd css this one.....Some more thoughts Im not sure how to operationalize....
Somehow if the user makes more than one card we should put it inside a flexbox container so the cards become a grid cuz right now I assume they'll just be vertically aligned?
Happy to change whatever you think necessary to make this more generic