Fix css parser and update blocks components

index.html

@@ -572,6 +572,43 @@
 				.sub-btn:active{
 					background-color: #573f5c;
 				}
+				.blk-row::after{
+					content: "";
+				  clear: both;
+				  display: block;
+				}
+				.blk-row{
+					padding: 10px;
+				}
+				.blk1{
+					width: 100%;
+					padding: 10px;
+					min-height: 75px;
+				}
+				.blk2{
+					float: left;
+					width: 50%;
+					padding: 10px;
+					min-height: 75px;
+				}
+				.blk3{
+					float: left;
+					width: 33.3333%;
+					padding: 10px;
+					min-height: 75px;
+				}
+				.blk37l{
+					float: left;
+					width: 30%;
+					padding: 10px;
+					min-height: 75px;
+				}
+				.blk37r{
+					float: left;
+					width: 70%;
+					padding: 10px;
+					min-height: 75px;
+				}
 				pc-regular
 			</style>
 		</div>

src/editor/config/config.js

@@ -38,7 +38,7 @@ define(function () {
 		storageType: 'local',
 
 		// The css that could only be seen (for instance, inside the code viewer)
-		protectedCss: 'body{margin:0;height:100%}#wrapper{min-height:100%; overflow:auto}',
+		protectedCss: '*{box-sizing: border-box;}body{margin:0;height:100%}#wrapper{min-height:100%; overflow:auto}',
 
 		//Configurations for Asset Manager
 		assetManager			: {},
@@ -101,22 +101,22 @@ define(function () {
 			'blocks': [{
 					id: 'b1',
 	        label: '1 Block',
-	        content: '<h1>Block 1</h1>',
+	        content: '<div class="blk-row"><div class="blk1"></div></div>',
 	        attributes: {class:'wte-fonts wte-f-b1'}
 	      },{
 					id: 'b2',
 	        label: '2 Blocks',
-	        content: '<h2>Block 2</h2>',
+	        content: '<div class="blk-row"><div class="blk2"></div><div class="blk2"></div></div>',
 	        attributes: {class:'wte-fonts wte-f-b2'}
 	      },{
 					id: 'b3',
 	        label: '3 Blocks',
-	        content: '<div>Block 3</div>',
+	        content: '<div class="blk-row"><div class="blk3"></div><div class="blk3"></div><div class="blk3"></div></div>',
 	        attributes: {class:'wte-fonts wte-f-b3'}
 	      },{
 					id: 'b4',
 	        label: '3/7 Block',
-	        content: '<div>Block 4</div>',
+	        content: '<div class="blk-row"><div class="blk37l"></div><div class="blk37r"></div></div></div>',
 	        attributes: {class:'wte-fonts wte-f-b37'}
 	      },{
 					id: 'hero',

src/parser/model/ParserCss.js

@@ -22,7 +22,7 @@ define(function(require) {
           var sel = sels[i].trim();
           // Will accept only concatenated classes and last
           // class might be with state (eg. :hover), nothing else.
-          if (/^(\.{1}[\w\-]+)+(:{1}[\w\-()]+)?$/ig.test(sel)) {
+          if (/^(\.{1}[\w\-]+)+(:{1,2}[\w\-()]+)?$/ig.test(sel)) {
             var cls = sel.split('.').filter(Boolean);
             result.push(cls);
           }
@@ -72,10 +72,11 @@ define(function(require) {
             var model = {};
 
             //Isolate state from selector
-            var stateArr = selArr[selArr.length - 1].split(':');
+            var stateArr = selArr[selArr.length - 1].split(/:(.+)/);
             if(stateArr[1]){
               selArr[selArr.length - 1] = stateArr[0];
               model.state = stateArr[1];
+              stateArr.splice(stateArr.length - 1, 1);
             }
 
             model.selectors = selArr;

test/specs/parser/model/ParserCss.js

@@ -101,6 +101,16 @@ define([path + 'model/ParserCss',],
             obj.parse(str).should.deep.equal(result);
           });
 
+          it('Parse rule with state like after', function() {
+            var str = ' .test1.test2::after{ color:red }';
+            var result = {
+              selectors: ['test1', 'test2'],
+              style: { color: 'red'},
+              state: ':after'
+            };
+            obj.parse(str).should.deep.equal(result);
+          });
+
           it('Parse rule with nth-x state', function() {
             var str = ' .test1.test2:nth-of-type(2n){ color:red }';
             var result = {