skill-row now scss

rpg-docs/client/views/GeneralCSS/main.scss

@@ -72,8 +72,9 @@ List items
 }
 
 .item {
+	background: white;
 	height: 40px;
-	margin: 1px;
+	margin: 1px 0 1px 0;
 	&.small {
 		height: 32px;
 	}

rpg-docs/client/views/character/stats/skillRow/skillRow.css

@@ -1,40 +0,0 @@
-.skillRow {
-	height: 32px;
-	margin: 0 -16px 0 -16px;
-	background: white;
-}
-
-.skillRow core-icon {
-	color: rgba(0,0,0,0.54);
-}
-
-.skillMod {
-	width: 42px;
-	text-align: center;
-}
-
-.skillName, .skillMod{
-	
-}
-
-.fail.skillMod {
-	color: #D50000;
-}
-
-.advantage{
-	background-image: url(/png/advantage/greenUp.png);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-.disadvantage{
-	background-image: url(/png/advantage/redDown.png);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-.hasConditionals::after{
-	content: "*";
-}

rpg-docs/client/views/character/stats/skillRow/skillRow.html

@@ -1,16 +1,24 @@
 <template name="skillRow">
-	<paper-item class="skillRow" layout horizontal hero-id="main" {{detailHero skill ../_id}}>
-		<core-icon icon="{{profIcon}}"></core-icon>
-		{{#if failSkill}}
-		<div class="fail skillMod">fail</div>
-		{{else}}
-		<div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
-		{{/if}}
-		<div class="{{#if conditionalCount}}hasConditionals{{/if}} skillName">
-			{{name}}
-			{{#if showPassive}}
-				({{../passiveSkill skill}})
+	<div class="item-slot">
+		<div class="skill-row item small" 
+			 hero-id="main" 
+			 {{detailHero skill ../_id}} 
+			 layout horizontal center>
+			<core-icon icon="{{profIcon}}"></core-icon>
+			{{#if failSkill}}
+				<div class="fail skill-mod">fail</div>
+			{{else}}
+				<div class="{{advantage}} skill-mod">{{../skillMod skill}}</div>
 			{{/if}}
+			<div flex>
+				{{name}}
+				{{#if conditionalCount}}
+					*
+				{{/if}}
+				{{#if showPassive}}
+					({{../passiveSkill skill}})
+				{{/if}}
+			</div>
 		</div>
-	</paper-item>
+	</div>
 </template>

rpg-docs/client/views/character/stats/skillRow/skillRow.scss

@@ -0,0 +1,24 @@
+.skill-row {
+	core-icon {
+		color: rgba(0,0,0,0.54);
+	}
+	.skill-mod{
+		width: 45px;
+		text-align: center;
+		&.fail {
+			color: #D50000;
+		}
+		&.advantage{
+			background-image: url(/png/advantage/greenUp.png);
+			background-size: contain;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+		&.disadvantage{
+			background-image: url(/png/advantage/redDown.png);
+			background-size: contain;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+	}
+}

rpg-docs/client/views/character/stats/stats.js

@@ -23,7 +23,7 @@ Template.stats.events({
 			heroId:   charId + this.ability,
 		});
 	},
-	"tap .skillRow": function(event, instance){
+	"tap .skill-row": function(event, instance){
 		var skill = this.skill;
 		var charId = instance.data._id;
 		GlobalUI.setDetail({