mirror of
				https://gitlab.com/Chill-Projet/chill-bundles.git
				synced 2025-10-31 01:08:26 +00:00 
			
		
		
		
	household banner context colors
This commit is contained in:
		| @@ -45,33 +45,6 @@ table { | ||||
|    } | ||||
| } | ||||
|  | ||||
| /* | ||||
|  *  ACCOMPANYING_COURSE | ||||
|  *  Header custom for Accompanying Course | ||||
|  */ | ||||
|  | ||||
| div#header-accompanying_course-name { | ||||
|   background: none repeat scroll 0 0 #718596; | ||||
|   color: #FFF; | ||||
|   h1 { | ||||
|     margin: 0.4em 0; | ||||
|   } | ||||
|   span { | ||||
|     a { | ||||
|       color: white; | ||||
|     } | ||||
|     a:hover { | ||||
|       text-decoration: underline; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| div#header-accompanying_course-details { | ||||
|   background: none repeat scroll 0 0 #718596ab; | ||||
|   color: #FFF; | ||||
|   padding-top: 1em; | ||||
|   padding-bottom: 1em; | ||||
| } | ||||
|  | ||||
| /* | ||||
| *  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION | ||||
| */ | ||||
| @@ -216,8 +189,6 @@ div.flex-table { | ||||
|    } | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
| /* | ||||
| * Address form | ||||
| */ | ||||
|   | ||||
| @@ -1,2 +1,2 @@ | ||||
| require('./sass/person.scss'); | ||||
| require('./sass/chillperson.scss'); | ||||
| require('./sass/person_with_period.scss'); | ||||
|   | ||||
| @@ -0,0 +1,218 @@ | ||||
| @import '~ChillMainSass/custom/config/colors'; | ||||
|  | ||||
| /* | ||||
| *  PERSON CONTEXT | ||||
| */ | ||||
|  | ||||
| div#header-person-name { | ||||
|    background: none repeat scroll 0 0 $chill-green-dark; | ||||
|    color: #FFF; | ||||
|    padding-top: 1em; | ||||
|    padding-bottom: 1em; | ||||
| } | ||||
|  | ||||
| div#header-person-details { | ||||
|    background: none repeat scroll 0 0 $chill-green; | ||||
|    color: #FFF; | ||||
|    padding-top: 1em; | ||||
|    padding-bottom: 1em; | ||||
| } | ||||
|  | ||||
| div#person_details_container { | ||||
|    padding-top: 20px; | ||||
|    padding-bottom: 20px; | ||||
| } | ||||
|  | ||||
| div.person-view { | ||||
|    figure.person-details { | ||||
|       h2 { | ||||
|          font-family: 'Open Sans'; | ||||
|          font-weight: 600; | ||||
|          margin-bottom: 0.3em; | ||||
|          font-variant: small-caps; | ||||
|       } | ||||
|       dl { | ||||
|          margin-top: 0.3em; | ||||
|       } | ||||
|       dt { | ||||
|          font-family: 'Open Sans'; | ||||
|          font-weight: 600; | ||||
|       } | ||||
|       dd { | ||||
|          margin-left: 0; | ||||
|       } | ||||
|       /* | ||||
|          a.sc-button { background-color: $black; padding-top: 0.2em; padding-bottom: 0.2em; } | ||||
|       */ | ||||
|    } | ||||
|    /* custom fields on the home page */ | ||||
|    div.custom-fields { | ||||
|       figure.person-details { | ||||
|          display: flex; | ||||
|          flex-flow: row wrap; | ||||
|          div.cf_title_box:nth-child(4n+1) h2 { | ||||
|             @extend .chill-red; | ||||
|          } | ||||
|          div.cf_title_box:nth-child(4n+2) h2 { | ||||
|             @extend .chill-green; | ||||
|          } | ||||
|          div.cf_title_box:nth-child(4n+3) h2 { | ||||
|             @extend .chill-orange; | ||||
|          } | ||||
|          div.cf_title_box:nth-child(4n+4) h2 { | ||||
|             @extend .chill-blue; | ||||
|          } | ||||
|          div.cf_title_box:nth-child(2n+1) { | ||||
|             width: 50%; | ||||
|             margin-right: 40px; | ||||
|          } | ||||
|          div.cf_title_box:nth-child(2n+2) { | ||||
|             width: calc(50% - 40px); | ||||
|          } | ||||
|       } | ||||
|    } | ||||
| } | ||||
|  | ||||
| /* | ||||
|  *  ACCOMPANYING_COURSE CONTEXT | ||||
|  *  Header custom for Accompanying Course | ||||
|  */ | ||||
|  | ||||
| div#header-accompanying_course-name { | ||||
|   background: none repeat scroll 0 0 #718596; | ||||
|   color: #FFF; | ||||
|   h1 { | ||||
|     margin: 0.4em 0; | ||||
|   } | ||||
|   span { | ||||
|     a { | ||||
|       color: white; | ||||
|     } | ||||
|     a:hover { | ||||
|       text-decoration: underline; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| div#header-accompanying_course-details { | ||||
|   background: none repeat scroll 0 0 #718596ab; | ||||
|   color: #FFF; | ||||
|   padding-top: 1em; | ||||
|   padding-bottom: 1em; | ||||
| } | ||||
|  | ||||
| /* | ||||
|  *  HOUSEHOLD CONTEXT | ||||
|  *  Header custom for Household | ||||
|  */ | ||||
|   | ||||
| div#header-household-name { | ||||
|    background: none repeat scroll 0 0 #929d69; //#b97a7a; | ||||
|    color: #FFF; | ||||
|    h1 { | ||||
|      margin: 0.4em 0; | ||||
|    } | ||||
|    span { | ||||
|      a { | ||||
|        color: white; | ||||
|      } | ||||
|      a:hover { | ||||
|        text-decoration: underline; | ||||
|      } | ||||
|    } | ||||
| } | ||||
| div#header-household-details { | ||||
|    background: none repeat scroll 0 0 #b0b984; //#d29791; | ||||
|    color: #FFF; | ||||
|    padding-top: 1em; | ||||
|    padding-bottom: 1em; | ||||
|    span.current-members-explain { | ||||
|       font-weight: bold; | ||||
|    } | ||||
| } | ||||
|  | ||||
| div.household__address, | ||||
| div.person__address { | ||||
|    div.row { | ||||
|       height: 100px; | ||||
|       width: 100%; | ||||
|       position: relative; | ||||
|  | ||||
|       & > div { | ||||
|          position: absolute; | ||||
|          display: table; | ||||
|          height: 100%; | ||||
|          border: 1px dotted #c3c3c3; | ||||
|       } | ||||
|  | ||||
|       div.household__address--date, | ||||
|       div.person__address--date { | ||||
|          width: 30%; | ||||
|          background-color: #c3c3c3; | ||||
|          height: 100%; | ||||
|  | ||||
|          div.cell { | ||||
|             box-sizing: border-box; | ||||
|             position: relative; | ||||
|             height: 100%; | ||||
|             width: 100%; | ||||
|             margin-left: 50%; | ||||
|  | ||||
|             div.pill { | ||||
|                position: absolute; | ||||
|                box-sizing: border-box; | ||||
|                width: 120px; | ||||
|                height: 40px; | ||||
|                bottom: -20px; | ||||
|                background-color: white; | ||||
|                padding: 10px; | ||||
|                border-radius: 30px; | ||||
|                left: -60px; | ||||
|                text-align: center; | ||||
|                z-index: 10; | ||||
|             } | ||||
|          } | ||||
|       } | ||||
|  | ||||
|       div.household__address--content, | ||||
|       div.person__address--content { | ||||
|          width: 70%; | ||||
|          left: 30%; | ||||
|          text-align: left; | ||||
|          background-color: #ececec; | ||||
|          border: 1px solid #888; | ||||
|  | ||||
|          div.cell { | ||||
|             display: table-cell; | ||||
|             padding: 5px 30px; | ||||
|             vertical-align: middle; | ||||
|  | ||||
|             & > div { | ||||
|                display: flex; | ||||
|                justify-content: space-between; | ||||
|             } | ||||
|  | ||||
|             i.dot::after, | ||||
|             i.dot::before { | ||||
|                position: absolute; | ||||
|                width: 20px; | ||||
|                height: 20px; | ||||
|                content: ''; | ||||
|                border: 0; | ||||
|                background-color: white; | ||||
|                border-radius: 50%; | ||||
|                border: 5px solid #c3c3c3; | ||||
|                z-index: 10; | ||||
|                left: -15px; | ||||
|                bottom: -15px; | ||||
|             } | ||||
|          } | ||||
|       } | ||||
|    } | ||||
| } | ||||
|  | ||||
| div.household__address-move { | ||||
|    div.household__address-move__create { | ||||
|       display: flex; | ||||
|       flex-direction: column; | ||||
|    } | ||||
| } | ||||
| @@ -1,168 +0,0 @@ | ||||
|  | ||||
| @import '~ChillMainSass/custom/config/colors'; | ||||
|  | ||||
| div#header-person-name { | ||||
|     background: none repeat scroll 0 0 $chill-green-dark; | ||||
|     color: #FFF; | ||||
|     padding-top: 1em; | ||||
|     padding-bottom: 1em; | ||||
| } | ||||
|  | ||||
| div#header-person-details { | ||||
|     background: none repeat scroll 0 0 $chill-green; | ||||
|     color: #FFF; | ||||
|     padding-top: 1em; | ||||
|     padding-bottom: 1em; | ||||
| } | ||||
|  | ||||
| div#person_details_container { | ||||
| 	padding-top: 20px; | ||||
| 	padding-bottom: 20px; | ||||
| } | ||||
|  | ||||
| div.person-view { | ||||
|     figure.person-details { | ||||
|             h2 { | ||||
|                 font-family: 'Open Sans'; | ||||
|                 font-weight: 600; | ||||
|                 margin-bottom: 0.3em; | ||||
|                 font-variant: small-caps; | ||||
|             } | ||||
|  | ||||
|             dl { | ||||
|                     margin-top: 0.3em; | ||||
|             } | ||||
|  | ||||
|             dt { | ||||
|             font-family: 'Open Sans'; | ||||
|             font-weight: 600; | ||||
|             } | ||||
|  | ||||
|             dd { | ||||
|                     margin-left: 0; | ||||
|             } | ||||
|  | ||||
| //            a.sc-button { | ||||
| /*                    background-color: $black; | ||||
|                     padding-top: 0.2em; | ||||
|                     padding-bottom: 0.2em; | ||||
|             }*/ | ||||
|     } | ||||
|  | ||||
|     /* custom fields on the home page */ | ||||
|     div.custom-fields { | ||||
|         figure.person-details { | ||||
|             display: flex; | ||||
|             flex-flow: row wrap; | ||||
|  | ||||
|             div.cf_title_box:nth-child(4n+1) h2 { | ||||
|                 @extend .chill-red; | ||||
|             } | ||||
|  | ||||
|             div.cf_title_box:nth-child(4n+2) h2 { | ||||
|                 @extend .chill-green; | ||||
|             } | ||||
|  | ||||
|             div.cf_title_box:nth-child(4n+3) h2 { | ||||
|                 @extend .chill-orange; | ||||
|             } | ||||
|  | ||||
|             div.cf_title_box:nth-child(4n+4) h2 { | ||||
|                 @extend .chill-blue; | ||||
|             } | ||||
|  | ||||
|             div.cf_title_box:nth-child(2n+1){ | ||||
|                 width: 50%; | ||||
|                 margin-right: 40px; | ||||
|             } | ||||
|  | ||||
|             iv.cf_title_box:nth-child(2n+2) { | ||||
|                 width: calc(50% - 40px); | ||||
|             } | ||||
|  | ||||
|         } | ||||
|  | ||||
|  | ||||
|     } | ||||
|  | ||||
| } | ||||
|  | ||||
|  | ||||
| /* | ||||
|  *  HOUSEHOLD | ||||
|  */ | ||||
|  | ||||
|  | ||||
| div.household__address, div.person__address { | ||||
|     div.row { | ||||
|         height: 100px; | ||||
|         width: 100%; | ||||
|         position: relative; | ||||
|         & > div { | ||||
|             position: absolute; | ||||
|             display: table; | ||||
|             height: 100%; | ||||
|             border: 1px dotted #c3c3c3; | ||||
|         } | ||||
|         div.household__address--date, div.person__address--date { | ||||
|             width: 30%; | ||||
|             background-color: #c3c3c3; | ||||
|             height: 100%; | ||||
|             div.cell { | ||||
|                 box-sizing: border-box; | ||||
|                 position: relative; | ||||
|                 height: 100%; | ||||
|                 width: 100%; | ||||
|                 margin-left: 50%; | ||||
|                 div.pill { | ||||
|                     position: absolute; | ||||
|                     box-sizing: border-box; | ||||
|                     width: 120px; | ||||
|                     height: 40px; | ||||
|                     bottom: -20px; | ||||
|                     background-color: white; | ||||
|                     padding: 10px; | ||||
|                     border-radius: 30px; | ||||
|                     left: -60px; | ||||
|                     text-align: center; | ||||
|                     z-index: 10; | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
|         div.household__address--content, div.person__address--content { | ||||
|             width: 70%; | ||||
|             left: 30%; | ||||
|             text-align: left; | ||||
|             background-color: #ececec; | ||||
|             border: 1px solid #888; | ||||
|             div.cell { | ||||
|                 display: table-cell; | ||||
|                 padding: 5px 30px; | ||||
|                 vertical-align: middle; | ||||
|                 & > div { | ||||
|                     display: flex; | ||||
|                     justify-content: space-between; | ||||
|                 } | ||||
|                 i.dot::before, i.dot::after { | ||||
|                     position: absolute; | ||||
|                     width: 20px; | ||||
|                     height: 20px; | ||||
|                     content: ''; | ||||
|                     border: 0; | ||||
|                     background-color: white; | ||||
|                     border-radius: 50%; | ||||
|                     border: 5px solid #c3c3c3; | ||||
|                     z-index: 10; | ||||
|                     left: -15px; | ||||
|                     bottom: -15px; | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| } | ||||
| div.household__address-move { | ||||
|     div.household__address-move__create { | ||||
|         display: flex; | ||||
|         flex-direction: column; | ||||
|     } | ||||
| } | ||||
| @@ -1,5 +1,5 @@ | ||||
| <div class="subheader banner-household"> | ||||
|     <div class="grid-12 parent" id="header-accompanying_course-name" > | ||||
|     <div class="grid-12 parent" id="header-household-name" > | ||||
|         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> | ||||
|  | ||||
|             <div class="grid-6">{% set title = title %} | ||||
| @@ -16,7 +16,7 @@ | ||||
|  | ||||
|         </div> | ||||
|     </div> | ||||
|     <div class="grid-12 parent" id="header-accompanying_course-details" > | ||||
|     <div class="grid-12 parent" id="header-household-details" > | ||||
|         <div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent"> | ||||
|             <div id="banner-misc"> | ||||
|               {%- set persons = household.getCurrentPersons() -%} | ||||
|   | ||||
| @@ -34,7 +34,7 @@ household: | ||||
|     is not holder: N'est pas titulaire | ||||
|     holder: Titulaire | ||||
|     Edit member household: Modifier l'appartenance au ménage | ||||
|     Current household members: Membres actuels du ménage | ||||
|     Current household members: Membres actuels | ||||
|     Household summary: Résumé | ||||
|     Addresses: Adresses | ||||
|     Edit household members: Modifier l'appartenance au ménage | ||||
| @@ -61,4 +61,3 @@ household: | ||||
|     from: Depuis | ||||
|     to: Jusqu'au | ||||
|     person history: Ménages | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user