chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

/*
*  BADGES USER, PERSON AND THIRDPARTY
*/

span.badge-user,
span.badge-person,
span.badge-thirdparty {
    display: inline-block;
    padding: 0 0.5em !important;
    background-color: $white;
    color: $dark;
    border: 1px solid $chill-ll-gray;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-radius: 6px;
    a {
        text-decoration: none;
    }
}

span.badge-user {
    border-bottom-width: 1px;
    &.system {
        background-color: $chill-llight-gray;
        font-style: italic;
        color: $chill-gray;
    }
}
span.badge-person {
    border-bottom-color: $chill-green;
}
span.badge-thirdparty {
    border-bottom-color: shade-color($chill-pink, 10%);
}

/*
*   HOUSEHOLD HOLDER MARK
*/

span.fa-holder {
    width: 1em;
    margin: -10px 0.3em -8px 0;
    i:last-child {
        font-family: "Open Sans Extrabold";
        font-weight: 900;
        font-size: 70%;
        color: $white;
    }
}

/*
*   DASHBOARDS
*/

/// Theses links apply on dashboards as parent tag.
/// They don't look like button, picto or simple text links
a.dashboard-link {
    color: unset;
    text-decoration: unset;
    & > div.dashboard {
        &:hover {
            //box-shadow: 0 0 7px 0 $chill-gray;
            //opacity: 0.8;
        }
        span.title_action {
            &:hover {
                background-color: $chill-ll-gray;
            }
        }
    }
}

div.dashboard {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    span.like-h3 {
        color: #334d5c;
    }
}
div.dashboard,
h4.badge-title,
h3.badge-title,
h2.badge-title {
    display: flex;
    flex-direction: row;
    width: 100%;
    color: $dark;
    span.title_label {
        color: $white;
        font-size: 80%;
        padding: 0.5em;
        padding-right: 0;
        border-radius: 0.35rem 0 0 0.35rem;
        h3 {
            margin-bottom: 0.5rem;
        }
    }
    span.title_action {
        flex-grow: 1;
        margin: 0 0 0 auto;
        background-color: $chill-llight-gray;
        padding: 0.2em 1em;
        border-radius: 0 0.35rem 0.35rem 0;

        ul.small_in_title {
            font-size: 70%;
        }
    }
}

ul.small_in_title {
    margin: 0;
    //margin-top: 0.5em;
    padding-left: 1rem;
    &.evaluations {
        @include list_marker_triangle($orange);
    }
}
ul.columns { // XS:1  SM:2  MD:1  LG:2  XL:2  XXL:2
    @include media-breakpoint-only(sm) {
        columns: 2; -webkit-columns: 2; -moz-columns: 2;
    }
    @include media-breakpoint-up(lg) {
        columns: 2; -webkit-columns: 2; -moz-columns: 2;
    }
}

/// dashboard_like_badge in AccompanyingCourse Work list Page
div[class*='accompanying_course_work'] {
    div.dashboard,
    h4.badge-title,
    h3.badge-title,
    h2.badge-title {
        span.title_label {
            // Calculate same color then border:groove
            background-color: shade-color($social-action-color, 34%);
        }
        span.title_action {
            @include dashboard_like_badge($social-action-color);
        }

    }
}

/// dashboard_like_badge in Activities on resume page
div[class*='activity-'] {
    div.dashboard,
    h4.badge-title,
    h3.badge-title,
    h2.badge-title {
        span.title_label {
            // Calculate same color then border:groove
            background-color: shade-color($activity-color, 34%);
            h3 {
                color: $white;
            }
        }
        span.title_action {
            @include dashboard_like_badge($activity-color);
        }
        span.title_label {
            div.duration {
                font-size: 70%;
                font-weight: 500;
                p {
                    margin-bottom: 0;
                    text-align: right;
                    abbr {
                        text-decoration: none;
                    }
                }
            }
        }
    }
}

/*
* Pill badge by entity
*/
.badge {
    &.bg-person {
        //@extend .$chill-ll-gray;
        background-color: $chill-ll-gray;
        color: $chill-green;
    }
    &.bg-user {
        //@extend .$chill-ll-gray;
        background-color: $chill-ll-gray;
        color: $chill-blue;
    }
    &.bg-confidential {
        background-color: $chill-ll-gray;
        color: $chill-red;
    }
}