mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 23:23:51 +00:00
improve flex-table logic, with accompanying period list template
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -8,6 +8,7 @@ require('./scss/household_banner.scss');
|
||||
require('./scss/accompanying_period_work.scss');
|
||||
require('./scss/person_by_phonenumber.scss');
|
||||
require('./scss/render_box.scss');
|
||||
require('./scss/flex_table.scss');
|
||||
require('./scss/address_history.scss');
|
||||
|
||||
require('./svg/phone-alt-solid.svg');
|
||||
|
@@ -0,0 +1,31 @@
|
||||
/*
|
||||
* flex-table overwrite: precision and exceptions
|
||||
*/
|
||||
|
||||
///
|
||||
div.accompanyingcourse-resume {
|
||||
div.associated-persons {
|
||||
.flex-table .item-row .item-col:first-child {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
div.accompanyingcourse-list, div.household-members {
|
||||
.flex-table .item-bloc .item-row {
|
||||
&:nth-child(2) {
|
||||
flex-direction: row;
|
||||
}
|
||||
&:last-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
div.list-with-period {
|
||||
div.flex-table div.item-row div.item-col:first-child {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
}
|
@@ -1,11 +1,6 @@
|
||||
/// overwrite flex-table
|
||||
div.list-with-period {
|
||||
div.flex-table div.item-row div.item-col:first-child { flex-basis: 33%; }
|
||||
}
|
||||
|
||||
///
|
||||
div.list-with-period,
|
||||
div.list-household-members {
|
||||
div.list-with-period, div.list-household-members {
|
||||
|
||||
div.periods {
|
||||
div.header,
|
||||
|
Reference in New Issue
Block a user