mon-entreprise/source/components/ComparativeTargets.css

83 lines
1.7 KiB
CSS

/* .comparative-targets {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 800px) {
.comparative-targets {
flex-direction: column;
align-items: center;
}
} */
.comparaison-grid {
display: grid;
justify-items: stretch;
grid-template-columns: [row-legend] 15rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 1fr [end];
}
.comparaison-grid > * {
border-bottom: 1px solid #dfdfdf;
padding: 0.6rem 1.2rem;
border-right: 1px solid #dfdfdf;
display: flex;
justify-content: center;
align-items: center;
text-align: right;
}
.comparaison-grid > h2 {
margin: 0;
flex-direction: column;
border: none;
}
.comparaison-grid > .legend {
justify-content: flex-end;
grid-column: row-legend;
}
.comparaison-grid > .AS-et-indep {
grid-column: assimilé-salarié / auto-entrepreneur;
}
.comparaison-grid > .AS {
grid-column: assimilé-salarié;
}
.comparaison-grid > .indep {
grid-column: indépendant;
}
.comparaison-grid > .auto {
grid-column: auto-entrepreneur;
}
.comparaison-grid > .all {
grid-column: assimilé-salarié / end;
border-left: 1px solid #dfdfdf;
margin-left: -1px;
}
.comparaison-grid > .indep-et-auto {
grid-column: indépendant / end;
text-align: center;
}
.comparaison-grid.hide-auto-entrepreneur {
grid-template-columns: [row-legend] 15rem [assimilé-salarié] 1fr [indépendant] 1fr [auto-entrepreneur] 0 [end];
}
.comparaison-grid.hide-auto-entrepreneur > .auto {
display: none;
}
.comparaison-grid > .green {
font-size: 120%;
font-weight: bold;
color: limegreen;
}
.comparaison-grid > .red {
font-size: 120%;
font-weight: bold;
color: red;
}
.comparaison-grid > .ui__.button {
place-self: center;
margin: 1rem 0;
}