colette/src/styl/_components/_breakingnews.styl

A CSS and JS starter kit for 20 Minutes web projects

// Breaking News
//
// A banner with important title.
// Is usualy a link to this article.
//
// Markup: breakingnews.twig
//
// Styleguide: Components.BreakingNews

.breakingnews
    _p(1 0)
    _fontload($fontstack-secondary)
    background var(--color-highlight)
    color var(--color-highlight-foreground)
    font-weight bold
    border 0 // no border even it’s box
    display flex
    justify-content space-between
    align-items center

    &-link
        display flex
        align-items center

        &-label
        &-title
            display flex
            align-items center
            line-height 1.3em
            padding 0 0.75rem

        &-label
            position relative
            text-transform uppercase
            font-size .75em

            &:after
                content ""
                width 1px
                height 100%
                background-color var(--color-highlight-foreground)
                position absolute
                right 0

            @media $breakpoints.md
                font-size 1em

        &-title
            font-size _rem(16px)
            font-weight bold
            text-overflow ellipsis
            overflow hidden
            display -webkit-box
            -webkit-line-clamp 3
            -webkit-box-orient vertical
            white-space normal

    &-close
        _p(0 2)
        transform rotate(45deg)
        background transparent
        color $color-white