añadidas las fuentes

modificado el title para incluir las fuentes
añadido el componente card
modificado parte del diseño para incluir el componente card

@salix/app/src/app.js

@@ -14,5 +14,6 @@ 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'
+import display from './styles/display.css'
 
 bootstrap();

@salix/app/src/components/app/app.html

@@ -1,4 +1,4 @@
-<vn-vertical full-height>
+<vn-vertical full-height class="bg-content">
     <vn-main-menu></vn-main-menu>	
     <vn-vertical ui-view scrollable class="main-view"></vn-vertical>
 </vn-vertical>

@salix/app/src/components/left-menu/left-menu.html

@@ -1,3 +1,5 @@
-<vn-vertical>
+<vn-card >
+    <vn-vertical pad-medium-top pad-medium-bottom>
         <vn-actions items = "menu.items"></vn-actions>
-</vn-vertical>
+    </vn-vertical>
+</vn-card>

@salix/app/src/styles/display.css

@@ -0,0 +1,3 @@
+.display-block{
+    display: block;
+}

@salix/app/src/styles/font-family.css

@@ -1,24 +1,21 @@
 @font-face {
-    font-family: roboto-italic;
+    font-family: raleway-italic;
-    src: url(./fonts/Roboto-Italic.ttf);
+    src: url(./fonts/Raleway-Italic.ttf);
 }
 @font-face {
-    font-family: roboto-thin;
+    font-family: raleway-thin;
-    src: url(./fonts/Roboto-Thin.ttf);
+    src: url(./fonts/Raleway-Thin.ttf);
 }
 @font-face {
-    font-family: roboto-regular;
+    font-family: raleway-regular;
-    src: url(./fonts/Roboto-Regular.ttf);
+    src: url(./fonts/Raleway-Regular.ttf);
 }
 @font-face {
-    font-family: roboto-condensed-italic;
+    font-family: raleway-bold;
-    src: url(./fonts/Roboto-CondensedItalic.ttf);
+    src: url(./fonts/Raleway-Bold.ttf);
 }
 @font-face {
-    font-family: roboto-bold;
+    font-family: raleway-semi-bold;
-    src: url(./fonts/Roboto-Bold.ttf);
+    src: url(./fonts/Raleway-SemiBold.ttf);
-}
-@font-face {
-    font-family: roboto-bold-condensed;
-    src: url(./fonts/Roboto-BoldCondensed.ttf);
 }
+

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

@@ -1,9 +1,11 @@
 @import "colors";
+@import "font-family";
 
 $font-color: $color-dark-grey;
 
 body {
     color: $font-color;
+    font-family: raleway-regular;
 }
 html [uppercase], .uppercase {
     text-transform: uppercase;

@salix/app/src/styles/title.css

@@ -1,21 +1,27 @@
 
 h1 {
     font-size: 32pt;
+    font-family: raleway-semi-bold;
 }
 h2 {
     font-size: 28pt;
+    font-family: raleway-semi-bold;
 }
 h3 {
     font-size: 24pt;
+    font-family: raleway-semi-bold;
 }
 h4 {
     font-size: 20pt;
+    font-family: raleway-semi-bold;
 }
 h5 {
     font-size: 16pt;
+    font-family: raleway-semi-bold;
 }
 h6 {
     font-size: 12pt;
+    font-family: raleway-semi-bold;
 }
 
 h1, h2, h3, h4, h5, h6 {

@salix/core/src/card/card.js

@@ -0,0 +1,20 @@
+import {module as _module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'card';
+export const NAME = util.getName(_NAME);
+
+directive.$inject = [resolveFactory.NAME];
+export function directive(resolve) {
+    return {
+        require: 'E',
+        transclude: true,
+        template: function(_, attr) {
+            return resolve.getTemplate(_NAME, attr);
+        }
+    };
+}
+
+_module.directive(NAME, directive);
+

@salix/core/src/card/card.mdl.html

@@ -0,0 +1 @@
+<div class="display-block demo-card-wide mdl-shadow--2dp bg-panel" *[foo]* ng-transclude></div>

@salix/core/src/card/card.mdl.js

@@ -0,0 +1,16 @@
+import {module as _module} from '../module';
+import * as util from '../util';
+import * as constant from '../constants';
+import template from './card.mdl.html';
+
+const _NAME = 'card';
+
+export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
+
+export function factory() {
+    return {
+        template: template
+    }
+}
+
+_module.factory(NAME, factory);

@salix/core/src/core.js

@@ -40,6 +40,8 @@ export {NAME as COMBO, directive as ComboDirective} from './combo/combo';
 export {NAME as COMBO_MDL, factory as comboMdl} from './combo/combo.mdl';
 export {NAME as DATE_PICKER, directive as DatePickerDirective} from './date-picker/date-picker';
 export {NAME as DATE_PICKER_MDL, factory as datePickerMdl} from './date-picker/date-picker.mdl';
+export {NAME as CARD, directive as CardDirective} from './card/card';
+export {NAME as CARD_MDL, factory as cardMdl} from './card/card.mdl';
 
 export {directive as Popover} from './popover/popover';
 export {factory as PopoverMdl} from './popover/popover.mdl';

@salix/core/src/title/title.html

@@ -1,2 +1,2 @@
-<h3 style="margin-top: 0;" class="border-solid-bottom margin-medium-bottom" level="*[level]*" ng-transclude>
+<h3 style="margin-top: 0;" class="margin-medium-bottom" level="*[level]*" ng-transclude>
 </h3>

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

@@ -1,4 +1,6 @@
-<form name="form" ng-submit="form.$valid && basicData.submit()" pad-large>
+<form name="form" ng-submit="form.$valid && basicData.submit()" pad-medium>
+    <vn-card >
+        <vn-vertical pad-large>
             <vn-title>Datos básicos</vn-title>
             <vn-horizontal>
                 <vn-textfield vn-one label="Nombre" field="basicData.client.name" focus></vn-textfield>
@@ -23,4 +25,6 @@
                     <vn-submit label="Guardar" id="save"></vn-submit>
                 </vn-one>
             </vn-horizontal>
+            </vn-vertical>
+    </vn-card>
 </form>

@salix/crud/src/client/card/card.html

@@ -1,8 +1,8 @@
 <vn-vertical class="full-height">
     <vn-topbar></vn-topbar>
     <vn-horizontal class="full-height">
-        <vn-empty class="bg-content" style="width: 18em">
+        <vn-empty  style="width: 18em" pad-medium-left >
-            <vn-descriptor descriptor="card.descriptor"></vn-descriptor>
+            <vn-descriptor descriptor="card.descriptor" class="display-block" ></vn-descriptor>
             <vn-left-menu items="card.items"></vn-left-menu>
         </vn-empty>
         <vn-auto > 

@salix/crud/src/client/descriptor/descriptor.html

@@ -1,10 +1,12 @@
-<vn-horizontal class="margin-large">
+<vn-card>
+    <vn-horizontal class="margin-medium" pad-medium-top pad-medium-bottom>
         <vn-one>
             <i class="material-icons" style="font-size:60px;">person</i>
         </vn-one>
-    <vn-vertical>
+        <vn-vertical vn-two>
-        <vn-one class="margin-right: .4em;" class="margin-none">{{descriptor.descriptor.clientId}}</vn-one>
+            <div class="margin-right: .4em;" class="margin-none">{{descriptor.descriptor.clientId}}</div>
-        <vn-one class="margin-none">{{descriptor.descriptor.name}}</vn-one>
+            <div class="margin-none">{{descriptor.descriptor.name}}</div>
-        <vn-one class="margin-none">{{descriptor.descriptor.phone}}</vn-one>
+            <div class="margin-none">{{descriptor.descriptor.phone}}</div>
         </vn-vertical>
-</vn-horizontal>
+    </vn-horizontal>
+</vn-card>

@salix/crud/src/client/web-access/index.html

@@ -1,6 +1,10 @@
-<form name="form" ng-submit="form.$valid && web.submit()" pad-large>
+<form name="form" ng-submit="form.$valid && web.submit()" pad-medium >
+    <vn-card>
+        <vn-vertical pad-large>
             <vn-title>Acceso Web</vn-title>
             <vn-check label="Acceso web activo" field="web.client.active"></vn-check>
-    <vn-textfield label="Usuario" class="padd-medium-top" field="web.client.user" focus></vn-textfield>
+            <vn-textfield label="Usuario" class="padd-medium-top margin-medium-top margin-medium-bottom" field="web.client.user" focus></vn-textfield>
             <vn-submit label="Guardar"></vn-submit>
+        </vn-vertical>
+    </vn-card>
 </form>

@salix/webpack.config.js

@@ -37,7 +37,7 @@ var config = {
                 test: /\.scss$/,
                 loader: 'style!css!sass'
             },{
-                test: /\.(svg|png)$/,
+                test: /\.(svg|png|ttf)$/,
                 loader: 'file'
             }
         ]