datamad2017/_sass/partials/_ribbon.scss

$ribbon-color: #999;
$gdg-ribbon-border-color: #427fed;
$gdgw-ribbon-border-color: #ed2c82;
$gde-ribbon-border-color: #db4437;
$wt-ribbon-border-color: #72e1b3;
.ribbon-wrapper {
    position: absolute;
    z-index: 5;
    right: 0;
    margin-top: 10px;
    list-style: none;
    li {
        overflow: hidden;
        margin-bottom: 5px;
        &:nth-child(3) .abbr, &:nth-child(3) .full-title {
            transition-delay: .1s;
        }
        &:nth-child(2) .abbr, &:nth-child(2) .full-title {
            transition-delay: .15s;
        }
    }
    .gdg {
        border-right: 4px solid $gdg-ribbon-border-color;
    }
    .gdgw {
        border-right: 4px solid $gdgw-ribbon-border-color;
    }
    .gde {
        border-right: 4px solid $gde-ribbon-border-color;
    }
    .wt {
        border-right: 4px solid $wt-ribbon-border-color;
    }
    .ribbon {
        font-size: 13px;
        font-weight: 300;
        line-height: 22px;
        display: inline-block;
        float: right;
        min-width: 44px;
        height: 22px;
        margin: 0;
        padding: 0 7px;
        transition: $base-transition;
        text-align: left;
        word-wrap: normal;
        color: $ribbon-color;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    .first {
        color: black;
        background-color: #FFD100;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    }
    .second {
        color: white;
        background-color: #666666;
    }
    .third{
      color: black;
      background-color: #FF7500;
    }
    .abbr {
        .ribbon-activator:hover & {
            transform: translateX(100%);
            @media (max-width: 767px) {
                transform: translateX(0);
            }
        }
    }
    .full-title {
        clear: both;
        margin-top: -22px;
        transform: translateX(100%);
        .ribbon-activator:hover & {
            transform: translateX(0);
            @media (max-width: 767px) {
                transform: translateX(100%);
            }
        }
    }
}