87 lines
1.8 KiB
SCSS
87 lines
1.8 KiB
SCSS
|
|
.ribbon-wrapper {
|
|
width: 72px;
|
|
height: 88px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: -3px;
|
|
right: -3px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ribbon {
|
|
font: bold 12px $font-family-bold;
|
|
color: $gray-darker;
|
|
text-align: center;
|
|
text-shadow: rgba(255,255,255,0.2) 0px 1px 0px;
|
|
position: relative;
|
|
padding: 3px 0;
|
|
left: -4px;
|
|
top: 16px;
|
|
width: 99px;
|
|
@include box-shadow(2px 3px 3px rgba(0,0,0,0.2));
|
|
transform: rotate(45deg);
|
|
|
|
|
|
&:before, &:after{
|
|
content: "";
|
|
border-left: 3px solid transparent;
|
|
border-right: 3px solid transparent;
|
|
position:absolute;
|
|
bottom: -3px;
|
|
}
|
|
|
|
&.ribbon-default{
|
|
color: $gray-lighter;
|
|
background-color: darken($modal-content-bg, 3%);
|
|
background-image: linear-gradient(top, darken($modal-content-bg, 6%), darken($gray-dark, 3%));
|
|
|
|
&:before, &:after{
|
|
border-top: 3px solid darken($gray-dark, 23%);
|
|
}
|
|
}
|
|
|
|
&.ribbon-green{
|
|
background-color: $green;
|
|
background-image: linear-gradient(top, darken($green, 3%), darken($green-dark, 3%));
|
|
|
|
&:before, &:after{
|
|
border-top: 3px solid darken($green-dark, 23%);
|
|
}
|
|
}
|
|
|
|
&.ribbon-orange{
|
|
background-color: $orange;
|
|
background-image: linear-gradient(top, darken($orange, 3%), darken($orange-dark, 3%));
|
|
|
|
&:before, &:after{
|
|
border-top: 3px solid darken($orange-dark, 18%) ;
|
|
}
|
|
}
|
|
|
|
&.ribbon-red{
|
|
background-color: $red;
|
|
background-image: linear-gradient(top, darken($red, 10%), darken($red, 18%));
|
|
|
|
&:before, &:after{
|
|
border-top: 3px solid darken($red, 38%);
|
|
}
|
|
}
|
|
|
|
&.ribbon-blue{
|
|
background-color: $blue;
|
|
background-image: linear-gradient(top, darken($blue, 3%), darken($blue-dark, 3%));
|
|
|
|
&:before, &:after{
|
|
border-top: 3px solid darken($blue-dark, 18%);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.ribbon:before {
|
|
left: 0;
|
|
}
|
|
.ribbon:after {
|
|
right: 0;
|
|
} |