File "sticker-style.css"
Full Path: /var/www/vhosts/hogsandbbqs.co.uk/httpdocs/dev/css/js/php/sticker-style.css
File size: 16.67 KB
MIME-type: text/plain
Charset: utf-8
.customCatTooltip {
}
.customCatTooltip .imgSection {
text-align:center;
}
.customCatTooltip .imgSection img {
text-align:center;
max-height:160px !important;
max-width:220px !important;
}
.rowStikerLayout {
display:inline-block;
width:100%;
}
.rowStikerLayout .die_stiker_box {
float: none;
max-width: 100%;
margin-bottom: 5px;
margin-top:0px;
margin-right:0px;
}
body h1, body h2, body h3, body h4, body h5, body h6, body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
/*line-height:inherit;*/
}
.rowStikerLayout .die_stiker_1 {
border-bottom:20px solid #08fd0a;
border-left:5px solid #08fd0a;
border-right:5px solid #08fd0a;
border-top:5px solid #08fd0a;
text-align: center;
border-radius: 10px;
}
.rowStikerLayout .die_stiker_2 {
border-bottom:20px solid #f1fd08;
border-left:5px solid #f1fd08;
border-right:5px solid #f1fd08;
border-top:5px solid #f1fd08;
text-align: center;
border-radius: 10px;
}
.rowStikerLayout .die_stiker_3 {
text-align: center;
border-radius: 10px;
border-bottom:20px solid #fd0846;
border-left:5px solid #fd0846;
border-right:5px solid #fd0846;
border-top:5px solid #fd0846;
}
.rowStikerLayout .die_stiker_1 .head-bar {
background-color:#08fd0a;
padding:10px;
}
.rowStikerLayout .die_stiker_2 .head-bar {
background-color:#f1fd08;
padding:10px;
}
.rowStikerLayout .die_stiker_3 .head-bar {
background-color:#fd0846;
padding:10px;
}
.rowStikerLayout .boxTitle {
font-size: 12px;
font-weight: normal;
padding:5px 10px;
}
.rowStikerLayout .boxContent {
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
}
.stickerBox {
padding: 10px;
z-index: 999;
position: relative;
}
.demoLayout1 {
padding: 10px 7% 40px;
}
.demoLayout1 .bar {
color: #FFF;
background-color: #a047c6;
padding: 15px;
width: 100%;
margin: 10px auto 0;
font: 28px/32px 'Bree Serif', Courier, monospaced;
text-align: center;
position: relative;
text-transform: uppercase;
border: 2px transparent solid;
box-shadow: 0 10px 30px -10px gray;
min-height:125px;
}
.extraStickerSection .stickerBox.demoLayout1 .extra_content {
margin-top:10px;
}
.demoLayout1 .bar span {
position: absolute;
}
.demoLayout1 .bar span:nth-child(1),.bar span:nth-child(3) {
border-style: solid;
border-width: 15px;
z-index: -1;
display:none;
}
.demoLayout1 .bar span:nth-child(1) {
border-color: #000 #000 transparent transparent;
top: 120px;
left: -2px;
display:none;
}
.demoLayout1 .bar span:nth-child(3) {
border-color: #000 transparent transparent #000 ;
top: 120px;
left: 92%;
}
.demoLayout1 .bar span:nth-child(2), .bar span:nth-child(4) {
top: 30px;
border-style: solid;
border-width: 35px;
z-index: -2;
}
.demoLayout1 .bar span:nth-child(2) {
border-color: #6f3289 #6f3289 #6f3289 transparent;
left: -70px;
box-shadow: 20px 20px 30px -10px grey;
}
.demoLayout1 .bar span:nth-child(4) {
border-color: #6f3289 transparent #6f3289 #6f3289;
left: 92%;
box-shadow: -20px 19px 30px -10px grey;
}
/** Demo Layout 1 **/
.demoLayout2 .sticker {
align-items: center;
background-image:
linear-gradient(
to bottom,
#da6930,
#da6930 50%,
#da6930 50%,
#90ca42 50%
);
border: 15px solid #da6930;
border-radius: 100%;
color: #fff;
display: flex;
flex-flow: column;
height: 250px;
padding: 0.6em;
width: 250px;
}
.demoLayout2 .sticker__top,
.demoLayout2 .sticker-bottom {
flex: 0 50%;
}
.demoLayout2 .sticker__top {
display: flex;
flex-flow: row wrap;
position: relative;
top: -10px;
width: 85%;
}
.demoLayout2 .sticker__top::before,
.demoLayout2 .sticker__top::after {
content: "";
height: 50%;
background-size: cover;
}
.demoLayout2 .sticker__top::before {
border-top-left-radius: 100%;
flex: 40%;
order: 1;
}
.demoLayout2 .sticker__top::after {
background-image:
linear-gradient( /* Altnerates transparent and red stripes */
to bottom,
#90ca42,
#90ca42 14%,
transparent 14%,
transparent 28%,
#90ca42 28%,
#90ca42 42%,
transparent 42%,
transparent 56%,
#90ca42 56%,
#90ca42 70%,
transparent 70%,
transparent 84%,
#90ca42 84%,
#90ca42 98%,
transparent 100%
);
border-top-right-radius: 100%;
flex: 40%;
margin-left:10px;
right: 5px;
position: relative;
order: 2;
}
.demoLayout2 .sticker__top h1 {
font-family: 'Raleway', sans-serif;
font-size: 26px;
line-height: 26px;
order: 3;
text-align: center;
text-transform: uppercase;
width: 100%;
margin-top: 5px;
}
@media only screen and (min-width:768px) {
.extraStickerSection {
float: right;
max-width: 280px;
margin-top: -50px;
margin-right: -60px;
}
}
@media only screen and (max-width:768px) {
.extraStickerSection {
max-width: 100%;
}
}
@media only screen and (max-width:415px) {
body .demoLayout2 .sticker {
width:100%;
}
}
.demoLayout2 .sticker__bottom {
border-bottom-right-radius: 100%;
border-bottom-left-radius: 100%;
width: 80%;
}
.demoLayout2 .sticker__bottom ul {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
list-style: none;
padding: 0;
text-align: center;
width: 100%;
}
.demoLayout2 .sticker__bottom li {
flex: auto;
margin: 1em;
font-size: 16px;
line-height: 22px;
}
.demoLayout2 .sticker__bottom li:nth-child(11) {
flex: 100%;
}
/**** Demo Layout 2 *****/
.demoLayout3 aside.sticker {
margin: 10px;
font-size: 20px;
text-shadow: 0px 0px 3px rgba(0,0,0,0.4);
color: black;
width: 250px;
height: 250px;
display: inline-block;
border-radius: 100%;
background: -webkit-linear-gradient(135deg, transparent 32px, #aaa 20px, #eee);
text-align: center;
padding-top: 15%;
box-sizing: border-box;
overflow: hidden;
}
.demoLayout3 aside.sticker:after {
content: " ";
display: block;
border-radius: 100%;
border-radius: 100%;
background: -webkit-linear-gradient(135deg, transparent 135px, #000 200px,#666 200px, #fff 85%);
box-shadow: -3px -3px 15px 1px rgba(0, 0, 0, 0.2);
width: 250px;
height: 215px;
margin-left: 100px;
margin-top: 10px;
}
.demoLayout3 aside.sticker.green {
color: white;
background: -webkit-linear-gradient(135deg, transparent 32px, #46a82d 20px, #70c757);
}
.demoLayout3 aside.sticker.cyan {
color: white;
background: -webkit-linear-gradient(135deg, transparent 32px, #2d8aa6 20px, #57b1c7);
}
.demoLayout3 aside.sticker.yellow {
color: white;
background: -webkit-linear-gradient(135deg, transparent 32px, #a69c2e 20px, #c7b857);
}
.demoLayout3 aside.sticker.pink {
color: white;
background: -webkit-linear-gradient(135deg, transparent 32px, #8e2ea6 20px, #b457c7);
}
/**** Demo Layout 3 *****/
.demoLayout4 .price-container,
.demoLayout4 .price-container:before,
.demoLayout4 .price-container:after,
.demoLayout4 .price-container .price,
.demoLayout4 .price-container .price:before,
.demoLayout4 .price-container .price:after {
height: 12.5em;
width: 12.5em;
background: #90ca42;
background-size: 8.5em;
}
.demoLayout4 .price-container:before,
.demoLayout4 .price-container:after,
.demoLayout4 .price-container .price:before,
.demoLayout4 .price-container .price:after {
content: "";
position: absolute;
}
.demoLayout4 .price-container {
margin: 40px auto;
position: relative;
top: 20px;
left: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.demoLayout4 .price-container:before {
top: 0;
left: 0;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.demoLayout4 .price-container:after {
top: 0;
left: 0;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.demoLayout4 .price-container .price {
padding: 10px 0em;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
.demoLayout4 .price-container .price:before {
top: 0;
left: 0;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.demoLayout4 .price-container .price:after {
top: 0;
left: 0;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
.demoLayout4 .price-container .price span {
position: relative;
z-index: 100;
display: block;
text-align: center;
color: #FE3D5C;
font-size: 20px;
text-transform: uppercase;
}
.demoLayout4 .price-container .price span.number {
font-weight: bold;
font-size: 2.2em;
line-height: 1.3em;
color: #fff;
}
/** Demo 4 End ***/
.demoLayout5 .badges {
padding-top:30px;
position:relative;
margin:70px auto 10px;
width:200px;
height:200px;
background:#90ca42;
border-radius:100%;
color: #FFF;
line-height: 28px;
text-align: center;
text-transform: uppercase;
font-family: "Open Sans",sans-serif;
-webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
-moz-animation: 3s ease-in-out 0s normal none infinite running swing;
-o-animation: 3s ease-in-out 0s normal none infinite running swing;
animation: 3s ease-in-out 0s normal none infinite running swing;
-webkit-transform-origin: 100px -71px;
-moz-transform-origin: 100px -71px;
-o-transform-origin: 100px -71px;
transform-origin: 100px -71px;
}
.demoLayout5 .badges:before{
content:'';
position:absolute;
top:90px;left:90px;
width:20px;height:20px;
border-radius:100%;
-webkit-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
-20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
-56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
-71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
-moz-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
-20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
-56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
-71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
-o-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
-20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
-56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
-71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
-20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
-56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
-71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
}
.demoLayout5 .badges:after{
content:'';
position:absolute;
top:-70px;left:99px;
width:2px;height:81px;
border-radius:0%;
background:#000;
}
.demoLayout5 .badges {
font-size: 24px;
font-weight: 300;
}
.demoLayout5 .badges strong {
font-size: 36px;
line-height: 36px;
font-weight: 600;
}
@-webkit-keyframes swing{
0%{-webkit-transform:rotate(5deg);}
50%{-webkit-transform:rotate(-5deg);}
100%{-webkit-transform:rotate(5deg);}
}
@-moz-keyframes swing{
0%{-moz-transform:rotate(5deg);}
50%{-moz-transform:rotate(-5deg);}
100%{-moz-transform:rotate(5deg);}
}
@-o-keyframes swing{
0%{-o-transform:rotate(5deg);}
50%{-o-transform:rotate(-5deg);}
100%{-o-transform:rotate(5deg);}
}
@keyframes swing{
0%{transform:rotate(5deg);}
50%{transform:rotate(-5deg);}
100%{transform:rotate(5deg);}
}
/*** Demo 5 End ***/
.demoLayout6 .box {
width: 100%;
min-height: 150px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.demoLayout6 .box .contents {
padding:10px 40px 10px 10px;
}
.demoLayout6 .ribbon {
position: absolute;
right: -16px;
top: -10px;
z-index: 1;
overflow: hidden;
width: 130px;
height: 105px;
text-align: right;
}
.demoLayout6 .ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 160px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 23px; right: -20px;
}
.demoLayout6 .ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.demoLayout6 .ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.demoLayout7 {
margin-left:30px;
}
.demoLayout7 .badge {
font-size: 32px;
transform: rotate(45deg);
margin: 20px auto;
background: #90ca42;
width: 180px;
height: 180px;
line-height: 36px;
text-align: center;
text-transform: uppercase;
border-radius: 8px;
color: #FFFFFF;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.demoLayout7 .badge span {
display: inline-block;
transform: rotate(-45deg);
opacity: .9;
width: 100%;
margin-left: -82px;
margin-top: 50px;
}
.tooltiptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 40%;
left: 10%;
margin-left: -20px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.extraStickerSection:hover .tooltiptext, .tooltipSection:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.extraStickerSection .stickerBox .extra_content {
padding: 5px;
width: 100%;
font-size: 12px;
font-style: italic;
}