$ribbon-color: #999; $gdg-ribbon-border-color: #427fed; $gde-ribbon-border-color: #db4437; .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; } .gde { border-right: 4px solid $gde-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); } .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%); } } } }