mirror of
https://github.com/betagouv/mon-entreprise
synced 2025-02-09 05:15:02 +00:00
ff8a5b165c
Pour par exemple séparer l'entreprise du dirigeant Attention, le composant TargetSelection est beaucoup trop complexe, il mérite d'être séparé en plein de plus petits composants
140 lines
2.7 KiB
CSS
140 lines
2.7 KiB
CSS
#targetSelection h1 {
|
|
margin: 0.6em;
|
|
color: inherit;
|
|
text-align: center;
|
|
font-size: 180%;
|
|
}
|
|
|
|
#targetSelection .targets {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
#targetSelection .targets > li:last-child {
|
|
margin-bottom: -1rem;
|
|
}
|
|
#targetSelection .targets > li:first-child {
|
|
border-top: none;
|
|
margin-top: -1rem;
|
|
}
|
|
|
|
#targetSelection .targets > li.small-target * {
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
}
|
|
#targetSelection .targets > li.small-target {
|
|
border-top: none;
|
|
}
|
|
#targetSelection .targets > li.small-target .targetInput {
|
|
border-width: 1px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#targetSelection .targets > li {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
|
padding: 0.6rem 1rem;
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
#targetSelection .targets > li .main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#targetSelection .targets > li p {
|
|
margin: 0.2em 0 0;
|
|
font-style: italic;
|
|
opacity: 0.8;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
#targetSelection li .header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#targetSelection .targets > li.small-target .header p {
|
|
display: none;
|
|
}
|
|
|
|
#targetSelection .optionTitle {
|
|
font-size: 115%;
|
|
font-weight: 500;
|
|
}
|
|
#targetSelection .optionTitle a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
#targetSelection .optionTitle a:hover,
|
|
#targetSelection #aidesGlimpse a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (hover: none) {
|
|
#targetSelection .optionTitle {
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 0.25em;
|
|
padding: 0.05em 0.4em;
|
|
font-size: 125%;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
#targetSelection #labelNew {
|
|
background: #e2011c; /* Couleur de la marianne */
|
|
border-radius: 0.3em;
|
|
padding: 0 0.3em;
|
|
}
|
|
|
|
#targetSelection .targetInputOrValue {
|
|
font-size: 125%;
|
|
margin-left: 0.6rem;
|
|
text-align: right;
|
|
}
|
|
|
|
#targetSelection .editable:not(.attractClick) {
|
|
border: 2px solid rgba(0, 0, 0, 0);
|
|
border-bottom: 1px dashed #ffffff91;
|
|
min-width: 2.5em;
|
|
display: inline-block;
|
|
}
|
|
#targetSelection .targetInputOrValue > :not(.targetInput):not(.attractClick) {
|
|
margin: 0.2rem 0.6rem;
|
|
}
|
|
|
|
#targetSelection .attractClick.editable::before {
|
|
content: '€';
|
|
}
|
|
|
|
#targetSelection .attractClick,
|
|
#targetSelection .targetInput {
|
|
width: 5.5em !important;
|
|
display: inline-block;
|
|
text-align: right;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
cursor: text;
|
|
padding: 0;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 0.3rem;
|
|
border: 2px solid;
|
|
font-size: inherit;
|
|
}
|
|
|
|
#targetSelection .unit {
|
|
margin-left: 0.4em;
|
|
font-size: 110%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.input-error {
|
|
padding: 0 0.6em;
|
|
margin-right: 0.6em;
|
|
font-size: 90%;
|
|
font-style: italic;
|
|
color: #c0392b;
|
|
background: yellow;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
|