Estilos CSS - Bordes, fuente

@salix/app/src/app.js

@@ -7,5 +7,8 @@ import padding from './styles/layout.css'
 import margin from './styles/margin.scss'
 import layout from './styles/padding.scss'
 import background from './styles/background.scss'
+import border from './styles/border.scss'
+import fontStyle from './styles/font-style.scss'
+import misc from './styles/misc.scss'
 
 bootstrap();

@salix/app/src/styles/border.scss

@@ -0,0 +1,45 @@
+@import "colors";
+
+$border-color: #AAA;
+$border-thin: 1px;
+$border-thick: 2px;
+
+html [border-none], .border-none {
+    border: 0;
+}
+
+/* Solid border */
+
+html [border-solid], .border-solid {
+    border: $border-thin solid $border-color;
+}
+html [border-solid-top], .border-solid-top {
+    border-top: $border-thin solid $border-color;
+}
+html [border-solid-left], .border-solid-left {
+    border-left: $border-thin solid $border-color;
+}
+html [border-solid-right], .border-solid-right {
+    border-right: $border-thin solid $border-color;
+}
+html [border-solid-bottom], .border-solid-bottom {
+    border-bottom: $border-thin solid $border-color;
+}
+
+/* Dashed border */
+
+html [border-dashed], .border-dashed {
+    border: $border-thin dashed $border-color;
+}
+html [border-dashed-top], .border-dashed-top {
+    border-top: $border-thin dashed $border-color;
+}
+html [border-dashed-left], .border-dashed-left {
+    border-left: $border-thin dashed $border-color;
+}
+html [border-dashed-right], .border-dashed-right {
+    border-right: $border-thin dashed $border-color;
+}
+html [border-dashed-bottom], .border-dashed-bottom {
+    border-bottom: $border-thin dashed $border-color;
+}

@salix/app/src/styles/colors.scss

@@ -1,8 +1,7 @@
 
 $color-green: rgb(139,195,74);
 $color-orange: rgb(255,171,64);
-$color-dark-grey: #424242;
-$color-light-grey: #e6e6e6;
 $color-white: white;
 $color-dark: #3c393b;
-
+$color-dark-grey: #424242;
+$color-light-grey: #e6e6e6;

@salix/app/src/styles/font-style.scss

@@ -0,0 +1,10 @@
+@import "colors";
+
+$font-color: $color-dark-grey;
+
+body {
+    color: $font-color;
+}
+html [uppercase], .uppercase {
+    text-transform: uppercase;
+}

@salix/app/src/styles/misc.scss

@@ -0,0 +1,7 @@
+@import "padding";
+
+.form {
+    height: 100%;
+    box-sizing: border-box;
+    padding: $pad-large;
+}

@salix/crud/src/client/addresses/index.html

@@ -1,17 +1,17 @@
-<vn-vertical full-height pad-large style="box-sizing: border-box;">
+<vn-vertical class="form">
     <vn-horizontal>
         <h3 style="margin-top: 0;">Addresses</h3>
     </vn-horizontal>
-    <vn-horizontal style="border-bottom: .1em dashed; text-transform: uppercase; text-align: center;" class="pad-medium-bottom">
+    <vn-horizontal class="pad-medium-bottom border-dashed-bottom uppercase" style="text-align: center;">
         <vn-empty style="width: 7em;">Default</vn-empty>
         <vn-auto>Consignee</vn-auto>
         <vn-empty style="width: 7em;">Enabled</vn-empty>
     </vn-horizontal>
-    <vn-horizontal ng-repeat="i in $ctrl.addresses" style="align-items: center;" class="pad-medium-top">
+    <vn-horizontal ng-repeat="i in $ctrl.addresses" class="pad-medium-top" style="align-items: center;">
         <vn-empty style="width: 7em; text-align: center;">
             <input type="radio" name="default"/>
         </vn-empty>
-        <vn-auto style="border: 1px solid black; border-radius: .5em;" class="pad-small">
+        <vn-auto style="border-radius: .5em;" class="pad-small border-solid">
             <button style="float: right;">
                 Edit
             </button>

@salix/crud/src/client/addresses/index.js

@@ -6,27 +6,20 @@ export const COMPONENT = {
     template: template,
 	controller: function ($http)
 	{
-		this.addresses = [{
+		this.addresses = [];
-			consignee: 'Consignee 1',
+		
+		for (var i = 1; i <= 4; i++)
+			this.addresses.push ({
+				consignee: 'Consignee '+ i,
 				street: 'Street',
 				city: 'City',
 				postcode: '46600',
 				province: 'Province',
 				country: 'Country',
-			phone: 'XX-XXX-XX-XX',
+				phone: '+XX XXX XX XX XX',
-			mobile: 'XX-6XX-XX-XX',
+				mobile: '+XX 6XX XX XX XX',
-			enabled: true
+				enabled: i % 2 == 0
-		},{
+			});
-			consignee: 'Consignee 2',
-			street: 'Street',
-			city: 'City',
-			postcode: '46600',
-			province: 'Province',
-			country: 'Country',
-			phone: 'XX-XXX-XX-XX',
-			mobile: 'XX-6XX-XX-XX',
-			enabled: false
-		}];
 	},
 };
 module.component(NAME, COMPONENT);

@salix/crud/src/client/basic-data/index.html

@@ -1,5 +1,5 @@
 <form ng-submit="$ctrl.submit()">
-<vn-vertical full-height pad-large style="box-sizing: border-box;">
+<vn-vertical  class="form">
     <vn-horizontal>
         <vn-one>
             <h3 style="margin-top: 0;">Datos básicos</h3>

dev.sh

@@ -13,7 +13,6 @@ case "$1" in
         $0 stop
         echo "################################ Starting services"
         forever start forever.json
-        forever list
         "$nginxBin" -c "$nginxConf" -p "$nginxPrefix"
         cd @salix && gulp
     ;;