/*————————————
Ribbons
————————————*/ %u-ribbon {
position: absolute; font-size: .9rem;
}
.u-ribbon {
// Ribbon Position &-center { left: 50%; transform: translateX(-50%); } // Ribbon Size &--sm { font-size: .7rem; } &--lg { font-size: 1.1rem; }
}
/* Ribbon Style Type 1 ————————————*/ .u-ribbon-v1 {
@extend %u-ribbon; display: inline-block; padding: .35rem .7rem; /* Ribbon Type 1 With icon */ &.u-ribbon-with-icon { padding: .5rem .85rem; } & .u-ribbon-icon--left { margin-right: .5rem; } & .u-ribbon-icon--right { margin-left: .5rem; }
}
/* Ribbon Style Type 2 ————————————*/ .u-ribbon-v2 {
@extend %u-ribbon; display: inline-block; padding: 1rem 1.1rem; &.u-ribbon--sm { padding: 1rem 1.2rem; } &.u-ribbon--lg { padding: 1.2rem 1.1rem; }
}
/* Bookmarked Ribbon ————————————*/ .u-ribbon-bookmark::after {
content: ""; position: absolute; bottom: -1.1rem; left: 0; width: 100%; height: 0; border-style: solid; border-left-width: 1.5rem; border-right-width: 1.5rem; border-bottom: 1rem solid transparent !important;
} .u-ribbon–lg.u-ribbon-bookmark::after {
border-right-width: 1.4rem;
}
/* Ribbon Colors ————————————*/ .u-ribbon-bookmark {
&.g-bg-primary::after { border-color: $g-color-primary; } &.g-bg-black::after { border-color: $g-color-black; } &.g-bg-white::after { border-color: $g-color-white; } &.g-bg-light-opacity::after { border-color: rgba(255,255,255, .7); } &.g-bg-dark-opacity::after { border-color: rgba(30,30,30, .7); } &.g-color-gray-light-v3::after { border-color: $g-color-gray-light-v3; } &.g-color-gray-light-v4::after { border-color: $g-color-gray-light-v4; } &.g-color-gray-dark-v5::after { border-color: $g-color-gray-dark-v5; } &.g-bg-green::after { border-color: $g-color-green; } &.g-bg-blue::after { border-color: $g-color-blue; } &.g-bg-lightblue::after { border-color: $g-color-lightblue; } &.g-bg-lightblue-v1::after { border-color: $g-color-lightblue-v1; } &.g-bg-darkblue::after { border-color: $g-color-darkblue; } &.g-bg-indigo::after { border-color: $g-color-indigo; } &.g-bg-red::after { border-color: $g-color-red; } &.g-bg-lightred::after { border-color: $g-color-lightred; } &.g-bg-darkred::after { border-color: $g-color-darkred; } &.g-bg-purple::after { border-color: $g-color-purple; } &.g-bg-darkpurple::after { border-color: $g-color-darkpurple; } &.g-bg-pink::after { border-color: $g-color-pink; } &.g-bg-orange::after { border-color: $g-color-darkred; } &.g-bg-deeporange::after { border-color: $g-color-deeporange; } &.g-bg-yellow::after { border-color: $g-color-darkred; } &.g-bg-aqua::after { border-color: $g-color-aqua; } &.g-bg-cyan::after { border-color: $g-color-cyan; } &.g-bg-teal::after { border-color: $g-color-teal; } &.g-bg-brown::after { border-color: $g-color-darkred; } &.g-bg-bluegray::after { border-color: $g-color-bluegray; }
}
/* Clipped-v1 Ribbon ————————————*/ .u-ribbon-clip-v1::before, .u-ribbon-clip-v2::before {
content: ""; position: absolute; @include px-to-rem(bottom, -10px); border-style: solid;
} .u-ribbon–left.u-ribbon-clip-v1::before, .u-ribbon–left.u-ribbon-clip-v2::before {
left: 0; @include px-to-rem(border-width, 0 10px 10px 0); border-right-color: $g-color-gray-dark-v5;
} .u-ribbon–right.u-ribbon-clip-v1::before, .u-ribbon–right.u-ribbon-clip-v2::before {
right: 0; @include px-to-rem(border-width, 0 0 10px 10px); border-left-color: $g-color-gray-dark-v5;
}
/* Clipped-v2 Ribbon ————————————*/ .u-ribbon-clip-v2 {
padding: .35rem 1.35rem; transform: skewX(-10deg) translateZ(1px);
} .u-ribbon-clip-v2.u-ribbon-with-icon {
padding: .5rem 1.35rem;
} .u-ribbon-clip-v2__inner {
display: inline-block; transform: skewX(10deg) translateZ(1px);
} .u-ribbon-clip-v2::before {
transform: skewX(10deg);
} .u-ribbon–left.u-ribbon-clip-v2::before {
@include px-to-rem(left, 1px);
} .u-ribbon–right.u-ribbon-clip-v2::before {
@include px-to-rem(right, -1px);
}
/* Clipped-v3 Ribbon ————————————*/ .u-ribbon-clip-v3 {
width: calc(100% + 20px); text-align: center;
} .u-ribbon-clip-v3::before, .u-ribbon-clip-v3::after {
content: ""; position: absolute;
} .u-ribbon-clip-v3::before {
left: 0; @include px-to-rem(bottom, -10px); width: 0; height: 0; border-top: 10px solid $g-color-gray-dark-v5; border-left: 10px solid transparent;
} .u-ribbon-clip-v3::after {
right: 0; @include px-to-rem(bottom, -10px); width: 0; height: 0; border-top: 10px solid $g-color-gray-dark-v5; border-right: 10px solid transparent;
}
/* Clipped-v4 Ribbon ————————————*/ .u-ribbon-clip-v4 {
width: 100%; height: 100%; overflow: hidden;
} .u-ribbon-clip-v4::before, .u-ribbon-clip-v4::after {
content: ""; position: absolute;
} .u-ribbon-clip-v4::before {
top: 0; @include px-to-rem(width, 40px); @include px-to-rem(height, 6px); background: $g-color-gray-dark-v5; @include px-to-rem(border-radius, 8px 8px 0 0);
} .u-ribbon-clip-v4.u-ribbon–left::before {
@include px-to-rem(left, 100px);
} .u-ribbon-clip-v4.u-ribbon–right::before {
@include px-to-rem(right, 100px);
} .u-ribbon-clip-v4::after {
@include px-to-rem(top, 100px); @include px-to-rem(width, 6px); @include px-to-rem(height, 40px); background: $g-color-gray-dark-v5;
} .u-ribbon-clip-v4.u-ribbon–left::after {
left: 0; @include px-to-rem(border-radius, 8px 0 0 8px);
} .u-ribbon-clip-v4.u-ribbon–right::after {
right: 0; @include px-to-rem(border-radius, 0 8px 8px 0);
} .u-ribbon-clip-v4__inner {
position: absolute; @include px-to-rem(top, 30px); @include px-to-rem(width, 200px); @include px-to-rem(height, 40px); @include px-to-rem(line-height, 40px); overflow: hidden; transform: rotate(45deg); text-align: center; z-index: 2; .u-ribbon--left & { @include px-to-rem(left, -50px); transform: rotate(-45deg); } .u-ribbon--right & { @include px-to-rem(right, -50px); transform: rotate(45deg); } &--bordered { border: 1px dashed rgba(255,255,255, .7); } &.g-bg-primary { box-shadow: 0 0 0 3px $g-color-primary, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-black { box-shadow: 0 0 0 3px $g-color-black, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-white { box-shadow: 0 0 0 3px $g-color-white, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-light-opacity { box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-dark-opacity { box-shadow: 0 0 0 3px rgba(30,30,30,.7), 0 21px 5px -18px rgba(0,0,0, .6); } &.g-color-gray-light-v3 { box-shadow: 0 0 0 3px $g-color-gray-light-v3, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-color-gray-light-v4 { box-shadow: 0 0 0 3px $g-color-gray-light-v4, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-color-gray-dark-v5 { box-shadow: 0 0 0 3px $g-color-gray-dark-v5, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-green { box-shadow: 0 0 0 3px $g-color-green, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-blue { box-shadow: 0 0 0 3px $g-color-blue, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-lightblue { box-shadow: 0 0 0 3px $g-color-lightblue, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-lightblue-v1 { box-shadow: 0 0 0 3px $g-color-lightblue-v1, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-darkblue { box-shadow: 0 0 0 3px $g-color-darkblue, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-indigo { box-shadow: 0 0 0 3px $g-color-indigo, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-red { box-shadow: 0 0 0 3px $g-color-red, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-lightred { box-shadow: 0 0 0 3px $g-color-lightred, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-darkred { box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-purple { box-shadow: 0 0 0 3px $g-color-purple, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-darkpurple { box-shadow: 0 0 0 3px $g-color-darkpurple, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-pink { box-shadow: 0 0 0 3px $g-color-pink, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-orange { box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-deeporange { box-shadow: 0 0 0 3px $g-color-deeporange, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-yellow { box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-aqua { box-shadow: 0 0 0 3px $g-color-aqua, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-cyan { box-shadow: 0 0 0 3px $g-color-cyan, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-teal { box-shadow: 0 0 0 3px $g-color-teal, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-brown { box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6); } &.g-bg-bluegray { box-shadow: 0 0 0 3px $g-color-bluegray, 0 21px 5px -18px rgba(0,0,0, .6); }
}