replace border by box-shadox in flex-bloc and flex-table

We use box-shadow instead of border
to avoid to manage border double-width
when blocs are resized for small screen !

Then we can simulate border-collapse: collapse (table)
This commit is contained in:
Mathieu Jaumotte 2021-05-28 12:46:04 +02:00
parent 622c254cc4
commit 666c1e7ae7
3 changed files with 13 additions and 35 deletions

View File

@ -84,16 +84,7 @@ export default {
div.flex-bloc {
margin-top: 1em;
div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: 25%;
margin: 0;
border: 1px solid #000;
padding: 1em;
&:not(:first-child) {
border-left: 0;
}
flex-basis: 25%;
ul.list-content {
list-style-type: none;
padding-left: 0;

View File

@ -79,6 +79,18 @@ div.flex-table {
h2, h3, h4 {
color: var(--chill-blue);
}
div.item-bloc {
// We use box-shadow instead of border
// to avoid to manage border double-width
// when blocs are resized for small screen !
// Then we can simulate border-collapse: collapse (table)
box-shadow:
1px 0 0 0 #000,
0 1px 0 0 #000,
1px 1px 0 0 #000, /* fix the corner */
1px 0 0 0 #000 inset,
0 1px 0 0 #000 inset;
}
}
/*
@ -94,21 +106,8 @@ div.flex-bloc {
div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
margin: 0;
border: 1px solid #000;
padding: 1em;
border-top: 0;
&:nth-child(1), &:nth-child(2) {
border-top: 1px solid #000;
}
border-left: 0;
&:nth-child(odd) {
border-left: 1px solid #000;
}
//background-color: #e6e6e6;
display: flex;
flex-direction: column;
@ -145,12 +144,6 @@ div.flex-bloc {
@media only screen and (max-width: 900px) {
flex-direction: column;
margin: auto 0;
div.item-bloc {
border-left: 1px solid #000;
&:nth-child(2) {
border-top: 0;
}
}
}
}
@ -167,11 +160,6 @@ div.flex-table {
display: flex;
flex-direction: column;
padding: 1em;
border: 1px solid #000;
border-top: 0;
&:first-child {
border-top: 1px solid #000;
}
&:nth-child(even) {
background-color: #e6e6e6;
}

View File

@ -144,7 +144,6 @@ div.flex-table {
}
div.item-bloc {
background-color: white !important;
border: 1px solid #000;
padding: 1em;
margin-top: 1em;
.content-bloc {