mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
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:
parent
622c254cc4
commit
666c1e7ae7
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user