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-top: 0.5em;
            font-size: 70%;
            padding-left: 1rem;
        }

        &:hover {
            background-color: $chill-ll-gray;
        }
    }
}

/// theses links apply on badge (or other styled elements) as parent tag.
// They don't have button, picto or simple text appearance
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: ;
        }
    }
}

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

/// AccompanyingCourse: HeaderSlider Carousel
div#header-accompanying_course-details {
    button.carousel-control-prev,
    button.carousel-control-next {
        width: 8%;
        opacity: inherit;
    }
    button.carousel-control-prev {
        left: unset;
        right: 0;
    }
    span.to-social-issues,
    span.to-persons-associated {
        display: inline-block;
        border-radius: 15px;
        width: 24px;
        height: 24px;
        box-shadow: 0 0 3px 1px grey;
        opacity: 0.8;
        &:hover {
            opacity: 1;
        }
    }
    span.to-social-issues {
        background-color: #4bafe8;
        border-left: 12px solid #32749a;
    }
    span.to-persons-associated {
        background-color: #16d9b4;
        border-right: 12px solid #ffffff;
    }
}