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

/*
*  BADGES PERSON AND THIRDPARTY
*/

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-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;
    }
}

/*
*   BADGE_TITLE
*   Display Title like a badge (with background-colored label)
*/

h2.badge-title {
    display: flex;
    flex-direction: row;
    width: 100%;
    color: $dark;

    span.title_label {
        border-radius: 0.35rem 0 0 0.35rem;
        color: $white;
        font-size: 80%;
        padding: 0.5em;
        padding-right: 0;
        h3 {
            margin-bottom: 0.5rem;
        }

        //position: relative;
        span {
            display: none;
            //position: absolute;
            //top: 0;
            //left: 0;
            //transform: rotate(270deg);
            //transform-origin: 0 0;
        }
    }
    span.title_action {
        flex-grow: 1;
        margin: 0 0 0 auto;
        border-radius: 0 0.35rem 0.35rem 0;
        background-color: $chill-llight-gray;
        padding: 0.2em 1em;

        ul.small_in_title {
            margin: 0;
            //margin-top: 0.5em;
            font-size: 70%;
            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;
            }
        }
    }
}

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

/// badge_title in AccompanyingCourse Work list Page
div.accompanying_course_work-list {
    h2.badge-title {
        span.title_label {
            // Calculate same color then border:groove
            background-color: shade-color($social-action-color, 34%);
        }
        span.title_action {
            @include badge_title($social-action-color);
        }
    }
}

/// badge_title in Activities on resume page
div.activity-list {
    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 badge_title($activity-color);
        }
        span.title_label {
            div.duration {
                font-size: 70%;
                font-weight: 500;
                p {
                    margin-bottom: 0;
                    text-align: right;
                    abbr {
                        text-decoration: none;
                    }
                }
            }
        }
    }
}

/*
*/