Closed choldgraf closed 3 years ago
btw - in case you are wondering why I wanted to do this, I was trying to experiment with whether we could create a bootstrap timeline using only panels :-) maybe something to consider in its own little standalone directive if we wish, I don't think the CSS would be too hard.
.card
class hasborder: 1
by default
I'm not sure what you mean by this?
When using sphinx-book-theme (i.e. panels_bootstrap_css=True)
all the panel CSS derives from bootstrap itself.
So how does this work in vanilla bootstrap? or does it not?
Yeh sounds interesting though
Ah I think I figured out the problem - as you suggest, card
comes with a bunch of its own stylings. So that makes it non-trivial to get it to have the border one would expect. With a little bit of custom styling I got it looking pretty decent I think. Maybe we can add an example like this to the docs to show people how to customize? I dunno if it's too-specific for its own directive.
/* Timeline CSS */
div.timeline div.card {
border: 0px;
}
div.timeline div.left {
text-align: right;
border-right: 1px solid black;
}
div.timeline div.entry::after {
width: 1em;
height: 1em;
background: white;
border-radius: 50%;
content: "";
top: 1em;
display: block;
position: absolute;
border: 1px black solid;
z-index: 999;
}
div.timeline div.entry.left::after {
right: -.5em;
}
div.timeline div.entry.right::after {
left: -.5em;
}
with this markdown:
```{panels}
:container: timeline
:column: col-6 p-0
:card:
---
:column: +entry left
**2020-01-02**
^^^
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
---
:column: +right
---
:column: +left
---
:column: +entry right
**2020-01-03**
^^^
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
---
:column: +entry left
**2020-01-04**
^^^
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
---
:column: +right
---
:column: +left
---
:column: +entry right
**2020-01-05**
^^^
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST
yields:
![image](https://user-images.githubusercontent.com/1839645/94999384-d8b13b80-056d-11eb-8cb9-eb2bcffffee3.png)
yeh it feels like this should just be a separate directive, which shouldn't be too hard to implement
Describe the bug
In bootstrap you can specify a border to only appear on one side via
border-<side>
. However, if you specify this for cards insphinx-panels
, all borders are displayed because the.card
class hasborder: 1
by default.If you pair
border-<side>
withborder-0
, then no borders are displayed because the0
over-rides the<side>
rule.To Reproduce
Add
:card: border-right
to one of the cards.