chill-bundles/src/Bundle/ChillActivityBundle/Resources/public/scss/chillactivity.scss

@import '~ChillMainSass/custom/config/colors';
@import '~ChillMainSass/custom/mixins/entity';

.chill-entity.chill-entity__activity-reason {
    @include entity($chill-pink, white);
}

.activity {
    color: $chill-green;
}

// exceptions for flex-bloc in concerned-groups
div.flex-bloc.concerned-groups {
   margin-top: 1em;
   div.item-bloc {
      flex-grow: 0; flex-shrink: 0; flex-basis: 25%; //4 blocs
      ul.list-content {
         list-style-type: none;
         padding-left: 0;
         li {
            margin-bottom: 0.2em;
            a {
               color: white;
               cursor: pointer;
               &:hover {
                  color: #ffffffab;
               }
            }
         }
      }
   }
   &.person div.item-bloc {
      flex-basis: 33%; //3 blocs
   }
}

// exceptions for flex-table in list-records
div.flex-table.list-records {
   div.item-bloc {
      div.item-row.main {
         div.item-col {
            &:first-child {
               flex-basis: 27%;
            }
            ul.list-content {
               li.social-issues, li.social-actions {
                  .badge-primary {
                     font-variant: small-caps;
                     font-weight: bold;
                     font-size: 88%;
                     margin-bottom: 0.2em;
                  }
               }
               li.social-issues .badge-primary {
                  background-color: var(--chill-orange);
               }
               li.social-actions .badge-primary {
                  background-color: var(--chill-green);
               }
            }
         }
      }
      div.item-row.details {
         flex-direction: row;
         & > div.item-col {
            justify-content: flex-start;
            align-self: center;
            &:nth-child(1) {
               flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
            }
            &:nth-child(2) {
               flex-grow: 0; flex-shrink: 1; flex-basis: 70%;
            }
            
            &:only-child {
               flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
               & > div.concerned-groups {
                  flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
                  display: flex;
                  flex-direction: column; // TODO pas fini
                  div.group {
                     flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
                     h4 {} 
                     ul.list-content {
                        li { 
                           display: inline;
                        } 
                     }
                  }
               }
            }
         }
         div.concerned-groups {
            font-size: 85%;
            h4 {
               text-transform: uppercase;
            }
         }
      }
      ul.list-content {
         list-style-type: none;
         padding-left: 1em;
         margin: 0 0;
         li {
            margin-bottom: 0.2em;
         }
      }
   }
   div.duration {
      font-size: smaller;
      padding-left: 1em;
      margin-top: 1em;
   }
}