Cannot make borders only appear on one side

[choldgraf]

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 in sphinx-panels, all borders are displayed because the .card class has border: 1 by default.

If you pair border-<side> with border-0, then no borders are displayed because the 0 over-rides the <side> rule.

To Reproduce

Add :card: border-right to one of the cards.

[choldgraf]

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.

[chrisjsewell]

.card class has border: 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

[choldgraf]

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)

[chrisjsewell]

yeh it feels like this should just be a separate directive, which shouldn't be too hard to implement