update docs, adjust debug highlight outline offset

README.md

@@ -16,9 +16,9 @@ Vue Layout System lets you intuitively arrange your components. Simply drop your
 
 With Vue Layout System developers are empowered to
 
-- Create various types of layout without writing CSS
-- Arrange contents in a intuitive and predictable way
-- Control space between contents precisely with one consistent spacing system
+- Create various types of layout with much shorter developing time
+- Arrange contents faster in a intuitive and predictable way
+- Control space between contents precisely with system-wide consistency
 
 ![](https://leeboyin.github.io/vue-layout-system/layout_highlight.gif)
 

docs/src/guide/README.md

@@ -6,9 +6,9 @@ Simply drop your contents into slots, configure options with props, Vue Layout s
 
 With Vue Layout System developers are empowered to
 
-- Create various types of layout without writing CSS
-- Arrange contents in a intuitive and predictable way
-- Control space between contents precisely with one consistent spacing system
+- Create various types of layout with much shorter developing time
+- Arrange contents faster in a intuitive and predictable way
+- Control space between contents precisely with system-wide consistency
 
 ## Installation
 

src/scss/_layoutMixin.scss

@@ -9,6 +9,7 @@
 
 @mixin debug-highlight($name, $child-selectors: (' > *')) {
 	$debug-color: map-get($layout-debug-color-map, $name);
+	$outline-width: 2px;
 
 	.layout-u-debug & {
 		background-color: #{ transparentize($debug-color, 0.92) };
@@ -24,7 +25,8 @@
 				transparent 10px
 			),
 			rgba(255, 255, 255, 0.5);
-		outline: 2px solid #{ transparentize($debug-color, 0.4) };
+		outline: $outline-width solid #{ transparentize($debug-color, 0.4) };
+		outline-offset: -$outline-width;
 
 		// show component name on hover
 		&:before {
@@ -49,7 +51,8 @@
 	@each $child-selector in $child-selectors {
 		&.layout--debug#{ & }#{ $child-selector }:not(:empty) {
 			background-color: #{ mix($debug-color, white, 20%) };
-			outline: 2px dashed #{ transparentize($debug-color, 0.4) };
+			outline: $outline-width dashed #{ transparentize($debug-color, 0.4) };
+			outline-offset: -$outline-width;
 		}
 	}
 }