colette/src/styl/_themes/_skin.styl

A CSS and JS starter kit for 20 Minutes web projects

// Skins
//
// Add a skin over the image of a content block on listing pages, and depending on the skin, modify the teaser text and/or background colors.
// Note that:
// - the `.skin-#` class is applied on a content preview selector (which may contain `.media` | `.teaser` | `.box-footer` children)
// - the skin is applied on a `<figure class="media">` tag,
// - the image must be placed within a `<p>` or a `<div>` tag for icon skins
//
// .skin-blog        - Text skin: "blog", text color: community
// .skin-bytheweb    - Text skin: "by the web", text color: hightech
// .skin-chat        - Text skin: "chat"
// .skin-exclusive   - Text skin: "exclusif", text color: highlight
// .skin-fakeoff     - Text skin: "fake off", text color: default
// .skin-alertInfo   - Text skin: "alerte info", text color: white, background-color: highlight
// .skin-live        - Text skin: "live", headline color: highlight
// .skin-partner     - Text skin: "partenaire"
// .skin-people      - Text skin: "people"
// .skin-quiz        - Text skin: "quiz", title and description color: community
// .skin-weird       - Text skin: "t'as vu"
// .skin-summer      - Text skin: 'L’info en série'
// .skin-community   - Icon skin: 'community', text color: community
// .skin-gallery     - Icon skin: 'images'
// .skin-podcast     - Icon skin: 'podcast'
// .skin-video       - Icon skin: 'play'
//
// Markup: skin.twig
//
// Styleguide: Themes.skins

/* Text skins */
.skin
    &-blog
    &-bytheweb
    &-chat
    &-exclusive
    &-fakeoff
    &-alertInfo
    &-live
    &-partner
    &-people
    &-quiz
    &-weird
    &-summer
        .media-wrap:before
            {fontSecondary}
            position absolute
            top 0
            left 0
            z-index: $zIndex.base
            padding 0 1em
            height 2.8em
            line-height @height
            color $color-white
            text-align center
            box-shadow .27em .27em 0 .27em rgba(0, 0, 0, .3)

    &-blog
        .media-wrap:before
            content 'blog'
            background-color var(--color-theme-community)

        .teaser
            &-headline
            &-title
            &-summary
                color var(--color-theme-community)

    &-bytheweb
        .media-wrap:before
            content 'by the web'
            background-color var(--color-theme-hightech)

    &-summer
        .media-wrap:before
            content 'L’info en série'
            background-color var(--color-theme-summer)

    &-chat
        .media-wrap:before
            content 'chat'
            background-color var(--color-theme-community)

    &-exclusive
        .media-wrap:before
            content 'exclusif'
            background-color var(--color-highlight)

        .teaser
            &-headline
            &-title
            &-summary
                color var(--color-highlight)

    &-fakeoff
        .media-wrap:before
            content 'fake off'
            background-color var(--color-theme-default)

    &-alertInfo
        background-color var(--color-highlight)

        .media-wrap:before
            content 'alerte info'
            background-color var(--color-highlight)

        .teaser
            &-headline
            &-title
            &-summary
                color $color-white

        .preview-related-link
            color $color-white

            svg
                color $color-white

    &-live
        .media-wrap:before
            content 'live'
            background-color var(--color-highlight)

        .teaser-headline
            color var(--color-highlight)

    &-partner
        .media-wrap:before
            content 'Partenaire'
            background-color var(--color-native)
            color var(--color-native-foreground)

    &-people
        .media-wrap:before
            content 'People'
            background-color var(--color-theme-entertainment)

    &-quiz
        .media-wrap:before
            content 'quiz'
            background-color var(--color-theme-community)

        .teaser
            &-headline
            &-title
            &-summary
                color var(--color-theme-community)

    &-weird
        .media-wrap:before
            content 'T’as vu'
            background-color var(--color-theme-weird)

    /* Icon skins */
    &-community
    &-gallery
    &-podcast
    &-video
        .media-wrap:before
            display block
            position absolute
            z-index: $zIndex.base
            content ''
            bottom .5em
            left .5em
            padding .5em
            width 3.5em
            height 2.5em
            border-radius .3em
            background-color rgba(0, 0, 0, .5)
            background-repeat no-repeat
            background-size 1.9em
            background-position center center

    &-community
        .media-wrap:before
            top _rem(10px)
            left _rem(10px)
            width _rem(92px)
            height _rem(44px)
            background-size 4.74em
            background-color var(--color-theme-community)
            background-image svgImport('../../svg/community.svg', '
                path
                    fill ' + $color-white + '
            ') // @stylint ignore

        .teaser
            &-headline
            &-title
            &-summary
                color var(--color-theme-community)

    &-video
        .media-wrap:before
            background-image svgImport('../../svg/play.svg', '
                path
                    fill ' + $color-white + '
            ') // @stylint ignore

    &-podcast
        .media-wrap:before
            background-image svgImport('../../svg/podcast.svg', '
                path
                    fill ' + $color-white + '
            ') // @stylint ignore

    &-gallery
        .media-wrap:before
            background-image svgImport('../../svg/diapo.svg', '
                path
                    fill ' + $color-white + '
            ') // @stylint ignore