chill-bundles/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

/*
 * NOTE 2021.04
 * scss/chillmain.scss is the main sass file for the new chill.2
 * scratch will be replaced by bootstrap, please avoid to edit in modules/scratch/_custom.scss
 *
 * when possible, try to use bootstrap html class
*/


@import 'alert-first-child';
@import 'alert-with-actions';


/*  [hack]  /!\ Contourne le positionnement problématique du div#content_conainter suivant,
 *  car sa position: relative le place au-dessus du bandeau et les liens sont incliquables  */
div.subheader {
  height: 130px;
}

/*
 * Specific rules
 */

// [scratch] un bouton 'disabled' non clickable
.sc-button {
   &.disabled {
      cursor: default;
      &.bt-remove {
         background-color: #d9d9d9;
      }
   }
}

// [debug] un affichage discret pour le debug
.discret {
   color: grey;
   margin-right: 1em;
}

// reserre la hauteur des rangées de tableau (ul.record_actions prennait trop de place)
table {
   ul.record_actions {
      margin: 0;
      padding: 0.5em;
   }
}

/*
 *  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
*/
div.flex-bloc,
div.flex-table {
   h2, h3, h4, dl, p {
      margin: 0;
   }
   h2, h3, h4 {
      color: var(--chill-blue);
   }
   div.item-bloc {
      // We use box-shadow instead of border
      // to avoid to manage border double-width 
      // when blocs are resized for small screen !
      // Then we can simulate border-collapse: collapse (table)
      box-shadow: 
          1px 0 0 0 #000, 
          0 1px 0 0 #000, 
          1px 1px 0 0 #000,   /* fix the corner */
          1px 0 0 0 #000 inset, 
          0 1px 0 0 #000 inset;
   }
}

/*
* Bloc appearance
*/
div.flex-bloc {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
   align-content: stretch;

   div.item-bloc {
      flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
      margin: 0;
      padding: 1em;
      border-top: 0;
      &:nth-child(1), &:nth-child(2) {
         border-top: 1px solid #000;
      }
      border-left: 0;
      &:nth-child(odd) {
         border-left: 1px solid #000;
      }

      //background-color: #e6e6e6;
      display: flex;
      flex-direction: column;

      & > div.item-row {
         flex-grow: 1; flex-shrink: 1; flex-basis: auto;
         display: flex;
         flex-direction: column;

         div.item-col {
            &:first-child {
               flex-grow: 0; flex-shrink: 0; flex-basis: auto;
            }
            &:last-child {
               flex-grow: 1; flex-shrink: 1; flex-basis: auto;
               display: flex;

               .list-content { // ul, dl, or div
               }
               ul.record_actions {
                  margin: 0;
                  align-self: flex-end;
                  flex-grow: 1; flex-shrink: 0; flex-basis: auto;
                  li {
                     margin-right: 5px;
                  }
               }
            }
         }
      }
   }
   @media only screen and (max-width: 945px) { margin: auto -0.2em; }
   @media only screen and (max-width: 935px) { margin: auto -0.5em; }
   @media only screen and (max-width: 920px) { margin: auto -0.9em; }
   @media only screen and (max-width: 900px) {
      flex-direction: column;
      margin: auto 0;
      div.item-bloc {
         border-left: 1px solid #000;
         &:nth-child(2) {
            border-top: 0;
         }
      }
   }
}

/*
* Table appearance
*/
div.flex-table {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   align-content: stretch;

   div.item-bloc {
      display: flex;
      flex-direction: column;
      padding: 1em;
      &:nth-child(even) {
         background-color: #e6e6e6;
      }

      div.item-row {
         display: flex;
         flex-direction: row;
         &:not(:first-child) {
            margin-top: 0.5em;
            border-top: 1px dotted #0000004f;
            padding-top: 0.5em;
            flex-direction: column;
         }

         div.item-col {
            &:first-child {
               flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
            }
            &:last-child {
               flex-grow: 1; flex-shrink: 1; flex-basis: auto;
               display: flex;
               justify-content: flex-end;

               .list-content { // ul, dl, or div
               }
               ul.record_actions {
                  margin: 0;
                  align-self: flex-start;
                  flex-grow: 1; flex-shrink: 0; flex-basis: auto;
                  li {
                     margin-right: 5px;
                  }
               }
            }
         }
         @media only screen and (max-width: 900px) {
            flex-direction: column;
            div.item-col {
               &:last-child {
                  ul.record_actions {
                     align-self: flex-end;
                  }
               }
            }
         }

         // neutralize
         div.chill_address div.chill_address_address p { text-indent: 0; }
      }
   }
}



/*
* Address form
*/
div.address_form {
   display: flex;
   flex-direction: column;
   div.address_form__header {

   }
   div.address_form__select {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      div.address_form__select__body {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
         div.custom-address, div.custom-postcode {
             padding: 12px;
         }
      }

      div.address_form__select__map {
         margin: 0px 20px;
         div#address_map {
            height:400px;
            width:400px;
            input {
               border: 1px solid #999;
            }
         }
      }
   }
   div.address_form__more {
      & > div {
         display: flex;
         & > label {
            width: 30%;
         }
      }
   }
}