#24 - REM in CSS

modules/boonex/timeline/template/block_view.html

@@ -3,7 +3,7 @@
         <div class="__style_prefix__-back-holder">
             __back__
         </div>
-		<div class="__style_prefix__-items">
+		<div class="__style_prefix__-items bx-def-margin-sec-leftright-neg">
 			__content__
 		</div>
 		<div class="__style_prefix__-load-more-holder">

modules/boonex/timeline/template/css/post.css

@@ -33,7 +33,9 @@ div.bx-tl-uploader-file-preview {
 div.bx-tl-uploader-file-preview,
 div.bx-tl-uploader-file-preview img {
 	width: 100px;
+	width: 6.25rem;
 	height: 100px;
+	height: 6.25rem;
 }
 div.bx-tl-uploader-file-preview img {
 	background-position: center center;

modules/boonex/timeline/template/css/view.css

@@ -5,11 +5,6 @@
 div.bx-tl-view {
 	position: relative;
 }
-div.bx-tl-cnt {}
-div.bx-tl-items {
-	margin-left: -10px;
-	margin-right: -10px;
-}
 .bx-tl-grid-sizer {
 	width: 100%;
 }
@@ -20,6 +15,7 @@ div.bx-tl-items {
 	padding: 0px;
 }
 
+
 /*--- Back Style ---*/
 
 
@@ -30,6 +26,7 @@ div.bx-tl-jump-to {
 	position: relative;
 	float: right;
 	line-height: 36px;
+	line-height: 2.25rem;
 }
 
 
@@ -44,6 +41,7 @@ div.bx-tl-item-cnt {
 	position: relative;
 	overflow: hidden;
 }
+
 /*+++ Item Menu +++*/
 div.bx-tl-item-menu {
 	position: absolute;
@@ -55,8 +53,11 @@ div.bx-tl-item-menu .bx-menu-ver li {
 }
 div.bx-tl-item-menu-button {
 	width: 20px;
+	width: 1.2rem;
 	height: 20px;
+	height: 1.2rem;
 	line-height: 20px;
+	line-height: 1.2rem;
 	text-align: center;
 }
 div.bx-tl-item-menu-button a {
@@ -80,52 +81,38 @@ div.bx-tl-owner-avatar {
 	left: 0px;
 }
 
-
 /*+++ Item Text +++*/
 div.bx-tl-item-text {}
 span.bx-tl-content-see-more a {
 	font-weight: bold;
 }
 
-/*+++ Item Link +++*/
-div.bx-tl-item-links {}
-
-div.bx-tl-item-link {
-	
-}
-
 /*+++ Item Image +++*/
-div.bx-tl-item-images {
-	margin-left: -20px;
-	margin-right: -20px;
-}
 div.bx-tl-item-image {
 	text-align: center;
 	overflow: hidden;
 }
 div.bx-tl-item-image img {
-	max-width: 318px;
-	max-height: 318px;
-}
-.bx-tl-view-sizer div.bx-tl-item-image img {
 	max-width: 100%;
 	max-height: 100%;
 }
 
-
 /*+++ Item Shared +++*/
 div.bx-tl-shared div.bx-tl-item-text {
 	padding-left: 5px;
+	padding-left: 0.3rem;
+
 	border-left: 1px solid #999999;
+	border-left: 0.07rem solid #999999;
 }
 div.bx-tl-shared div.bx-tl-title {
-	font-size: 1.0em;
+	font-size: 1.0rem;
 }
 div.bx-tl-shared div.bx-tl-title a {
 	color: #999999;
 }
 div.bx-tl-shared div.bx-tl-content {
-	font-size: 0.875em;
+	font-size: 0.875rem;
 	color: #999999;
 }
 

modules/boonex/timeline/template/type_post.html

@@ -23,7 +23,7 @@
 	</div>
 </bx_if:show_links>
 <bx_if:show_images>
-	<div class="__style_prefix__-item-images bx-def-margin-top">
+	<div class="__style_prefix__-item-images bx-def-margin-top bx-def-margin-leftright-neg">
 		<bx_repeat:images>
 	   		<div class="__style_prefix__-item-image bx-def-margin-top-auto">__image__</div>
 	   	</bx_repeat:images>

template/css/default.less

@@ -1,6 +1,6 @@
 /* Default Variables */
 @bx-dv-font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-@bx-dv-font-size: 14px;
+@bx-dv-font-size: 16px;
 @bx-dv-font-weight: 400;
 @bx-dv-font-color: #333;
 
@@ -29,16 +29,25 @@
     margin-left: @bx-dv-font-size * @dimension;
     margin-left: @dimension;
 }
+.bx-dm-margin-rightbottomleft-neg (@dimension: 1.2rem) {
+	.bx-dm-margin-rightbottomleft(-@dimension);
+}
 .bx-dm-margin-leftright (@dimension: 1.2rem) {
     margin: 0px @bx-dv-font-size * @dimension;
     margin: 0px @dimension;
 }
+.bx-dm-margin-leftright-neg (@dimension: 1.2rem) {
+    .bx-dm-margin-leftright(-@dimension);
+}
 .bx-dm-margin-topbottom (@dimension: 1.2rem) {
     margin-top: @bx-dv-font-size * @dimension;
     margin-top: @dimension;
     margin-bottom: @bx-dv-font-size * @dimension;
     margin-bottom: @dimension;
 }
+.bx-dm-margin-topbottom-neg (@dimension: 1.2rem) {
+	.bx-dm-margin-topbottom(-@dimension);
+}
 .bx-dm-margin-top (@dimension: 1.2rem) {
     margin-top: @bx-dv-font-size * @dimension;
     margin-top: @dimension;
@@ -205,6 +214,9 @@
 .bx-def-margin-leftright {
 	.bx-dm-margin-leftright;
 }
+.bx-def-margin-leftright-neg {
+	.bx-dm-margin-leftright-neg;
+}
 .bx-def-margin-topbottom {
 	.bx-dm-margin-topbottom;
 }
@@ -236,6 +248,9 @@
 .bx-def-margin-sec-leftright {
 	.bx-dm-margin-leftright(0.5rem);
 }
+.bx-def-margin-sec-leftright-neg {
+	.bx-dm-margin-leftright-neg(0.5rem);
+}
 .bf-margin-sec-topbottom {
 	.bx-dm-margin-topbottom(0.5rem);
 }