Create CSS label objectt

markahesketh · Sep 20, 2012 · cabd603 · cabd603
1 parent 784e0dd
commit cabd603
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 26 deletions.
diff --git a/css/global.css b/css/global.css
@@ -580,7 +580,7 @@ body > footer .block ul {
   margin: 0;
 }
 body > footer .block ul li {
-  padding: 0.5em 0 0.5em 0.4em;
+  padding: 0.5em 0 0.5em 0;
 }
 .hidden,
 .collapsed {
@@ -591,3 +591,24 @@ body > footer .block ul li {
   display: block;
   visibility: visible;
 }
+.label {
+  font-size: 11px;
+  font-size: 1.1rem;
+  background: #990000;
+  display: inline;
+  padding: 3px 5px;
+  color: #fff;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-weight: bold;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  vertical-align: baseline;
+}
diff --git a/css/global.less b/css/global.less
@@ -81,7 +81,7 @@ body > footer {
 			.no-bullets;
 
 			li {
-				padding: 0.5em 0 0.5em 0.4em;
+				padding: 0.5em 0 0.5em 0;
 			}
 		}
 	}
@@ -90,4 +90,21 @@ body > footer {
 // =|= Objects ==============================================================
 .hidden,
 .collapsed {display: none; visibility: hidden;}
-.expanded {display: block; visibility: visible;}
+.expanded {display: block; visibility: visible;}
+
+// -|- Labels -----------------------------------------
+.label {
+	.font-size(11);
+	background: @primary;
+	display: inline;
+	padding: 3px 5px;
+	color: #fff;
+	.rounded(5px);
+	position: absolute;
+	left: 0;
+	top: 0;
+	font-weight: bold;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	white-space: nowrap;
+	vertical-align: baseline;
+}
diff --git a/css/modules/blockspecials/blockspecials.css b/css/modules/blockspecials/blockspecials.css
@@ -36,19 +36,7 @@ body:after {
   font-size: 14px;
   font-size: 1.4rem;
 }
-.blockspecials span.reduction {
-  background: #990000;
-  display: inline;
-  padding: 3px 5px;
-  color: #fff;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  position: absolute;
-  left: 0;
+.blockspecials span.label {
   top: 60%;
 }
 .blockspecials h2,

diff --git a/css/modules/blockspecials/blockspecials.less b/css/modules/blockspecials/blockspecials.less
@@ -25,15 +25,8 @@
 		&.price {
 			.font-size(14);
 		}
-		&.reduction {
-			background: @primary;
-			display: inline;
-			padding: 3px 5px;
-			color: #fff;
-			.rounded(5px);
-			position: absolute;
-			left: 0;
-			top: 60%;
+		&.label {
+			top: 60%
 		}
 	}
 

diff --git a/modules/blockspecials/blockspecials.tpl b/modules/blockspecials/blockspecials.tpl
@@ -7,7 +7,7 @@
 		{if $special.specific_prices}
 			{assign var='specific_prices' value=$special.specific_prices}
 			{if $specific_prices.reduction_type == 'percentage' && ($specific_prices.from == $specific_prices.to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $specific_prices.to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $specific_prices.from))}
-				<span class="reduction">-{$specific_prices.reduction*100|floatval}%</span>
+				<span class="label">-{$specific_prices.reduction*100|floatval}%</span>
 			{/if}
 		{/if}