Created
May 26, 2020 18:59
-
-
Save vinigarcia87/b45daa34480fc6f4049d5d331ce26f9b to your computer and use it in GitHub Desktop.
Nice CSS for span.onsale
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ON SALE - ETIQUETA EM PE */ | |
span.onsale { | |
border-radius: 6px 6px 0 0; | |
color: #FFFFFF; | |
display: block; | |
float: left; | |
padding: 20px 10px; | |
background: theme-color("vermelhoEscuroPapelaria"); | |
font-size: 0.9rem; | |
font-weight: 600; | |
position: absolute; | |
&::before, | |
&::after { | |
content: ""; | |
position: absolute; | |
left: 0; | |
width: 0; | |
height: 0; | |
border-style: solid; | |
display: block; | |
top: 100%; | |
} | |
&::before { | |
border-width: 20px 25px 0 0; | |
border-color: theme-color("vermelhoEscuroPapelaria") transparent transparent transparent; | |
} | |
&::after { | |
border-width: 0 25px 20px 0; | |
border-color: transparent theme-color("vermelhoEscuroPapelaria") transparent transparent; | |
left: calc(100% - 25px); | |
} | |
} | |
/* ON SALE - ETIQUETA EM HORIZONTAL */ | |
.span.onsale { | |
border-radius: 6px 0 0 6px; | |
color: #fff; | |
display: block; | |
float: left; | |
padding: 10px 20px; | |
background: #93274f; | |
font-size: 20px; | |
font-weight: 400; | |
position: relative; | |
&::before, | |
&::after { | |
content: ""; | |
position: absolute; | |
left: 100%; | |
width: 0; | |
height: 0; | |
border-style: solid; | |
display: block; | |
} | |
&::before { | |
top: 0; | |
border-width: 22px 15px 0 0; | |
border-color: #93274f transparent transparent transparent; | |
} | |
&::after { | |
bottom: 0; | |
border-width: 0 15px 22px 0; | |
border-color: transparent transparent #93274f transparent; | |
} | |
} | |
/* ON SALE - BARRA DIAGONAL */ | |
span.onsale { | |
position: absolute; | |
top: -8px; | |
left: -38px; | |
padding: 0; | |
color: #ffffff; | |
font-weight: 700; | |
text-transform: uppercase; | |
font-size: 12px; | |
background-color: transparent; | |
border-radius: initial; | |
border-bottom: 60px solid theme-color("azulVolvo"); | |
border-left: 60px solid transparent; | |
border-right: 60px solid transparent; | |
transform: rotate(-45deg); | |
&::before { | |
border-left: none; | |
left: auto; | |
transform: rotate(45deg); | |
} | |
i.sale-text, | |
i.from-to, | |
i.porcentagem { | |
position: absolute; | |
top: 25px; | |
font-size: 22px; | |
width: 140px; | |
left: -36px; | |
} | |
i.sale-text { | |
font-size: 15px; | |
text-transform: capitalize; | |
top: 28px; | |
left: -25px; | |
} | |
i.from-to { | |
font-size: 15px; | |
text-transform: capitalize; | |
top: 10px; | |
left: -15px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment