improve flex-table logic, with accompanying period list template

This commit is contained in:
2021-08-01 18:38:31 +02:00
parent d34a00b2c0
commit ee819e7767
10 changed files with 180 additions and 147 deletions

View File

@@ -4,29 +4,24 @@
/*
* PERSON CONTEXT
*/
div#header-person-name {
background: none repeat scroll 0 0 $chill-green-dark;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
div#header-person-details {
background: none repeat scroll 0 0 $chill-green;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
div.contact {
& > * {
margin-right: 1em;
}
}
}
div#person_details_container {
padding-top: 20px;
padding-bottom: 20px;
div.banner {
div#header-person-name {
background: none repeat scroll 0 0 $chill-green-dark;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
div#header-person-details {
background: none repeat scroll 0 0 $chill-green;
color: $white;
padding-top: 1em;
padding-bottom: 1em;
div.contact {
& > * {
margin-right: 1em;
}
}
}
}
div.person-view {
@@ -83,83 +78,77 @@ div.person-view {
* ACCOMPANYING_COURSE CONTEXT
* Header custom for Accompanying Course
*/
$chill-accourse: #718596;
$chill-accourse-context: #718596;
div#header-accompanying_course-name {
background: none repeat scroll 0 0 $chill-accourse;
color: $white;
h1 {
margin: 0.4em 0;
}
span {
a {
color: $white;
div.banner {
div#header-accompanying_course-name {
background: none repeat scroll 0 0 $chill-accourse-context;
color: $white;
h1 {
margin: 0.4em 0;
}
a:hover {
text-decoration: underline;
span {
a {
color: $white;
}
a:hover {
text-decoration: underline;
}
}
}
}
div#header-accompanying_course-details {
background: none repeat scroll 0 0 tint-color($chill-accourse, 20%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
// flex-table precision
div.accompanyingcourse-resume {
div.associated-persons {
.flex-table .item-row .item-col:first-child { flex-basis: 33%; }
div#header-accompanying_course-details {
background: none repeat scroll 0 0 tint-color($chill-accourse-context, 20%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
}
}
/*
* HOUSEHOLD CONTEXT
* Header custom for Household
*/
$chill-household: #929d69;
$chill-household-context: #929d69;
div#header-household-name {
background: none repeat scroll 0 0 $chill-household;
color: $white;
h1 {
margin: 0.4em 0;
}
span {
a {
color: $white;
div.banner {
div#header-household-name {
background: none repeat scroll 0 0 $chill-household-context;
color: $white;
h1 {
margin: 0.4em 0;
}
a:hover {
text-decoration: underline;
span {
a {
color: $white;
}
a:hover {
text-decoration: underline;
}
}
div.household-members {
display: flex;
flex-direction: row;
flex-wrap: wrap;
span.badge-member {
flex-shrink: 0; flex-grow: 0; flex-basis: auto;
color: $white;
border: 1px solid #ffffff3b;
border-radius: 8px;
padding: 0.4em 0.8em;
margin-bottom: 0.2em;
margin-right: 0.3em;
&.holder { order: -1; }
&.child { order: 2; }
}
}
}
div.household-members {
display: flex;
flex-direction: row;
flex-wrap: wrap;
span.badge-member {
flex-shrink: 0; flex-grow: 0; flex-basis: auto;
color: $white;
border: 1px solid #ffffff3b;
border-radius: 8px;
padding: 0.4em 0.8em;
margin-bottom: 0.2em;
margin-right: 0.3em;
&.holder { order: -1; }
&.child { order: 2; }
div#header-household-details {
background: none repeat scroll 0 0 tint-color($chill-household-context, 15%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
span.current-members-explain {
font-weight: bold;
}
}
}
div#header-household-details {
background: none repeat scroll 0 0 tint-color($chill-household, 15%);
color: $white;
padding-top: 1em;
padding-bottom: 1em;
span.current-members-explain {
font-weight: bold;
}
}