Style fixes

This commit is contained in:
Juan 2018-05-31 13:34:48 +02:00
parent 3c9d8f32bb
commit e78d2e5ede
16 changed files with 150 additions and 113 deletions

View File

@ -10,17 +10,19 @@
<vn-title>Basic data</vn-title> <vn-title>Basic data</vn-title>
<vn-horizontal> <vn-horizontal>
<vn-textfield vn-one label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield> <vn-textfield vn-one label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
<vn-textfield vn-one label="Contact" field="$ctrl.client.contact"></vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield vn-one label="Phone" field="$ctrl.client.phone"></vn-textfield> <vn-textfield vn-one label="Contact" field="$ctrl.client.contact"></vn-textfield>
<vn-textfield vn-one label="Mobile" field="$ctrl.client.mobile"></vn-textfield>
<vn-textfield vn-one <vn-textfield vn-one
label="Email" label="Email"
field="$ctrl.client.email" field="$ctrl.client.email"
info="You can save multiple emails"> info="You can save multiple emails">
</vn-textfield> </vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal>
<vn-textfield vn-one label="Phone" field="$ctrl.client.phone"></vn-textfield>
<vn-textfield vn-one label="Mobile" field="$ctrl.client.mobile"></vn-textfield>
</vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-autocomplete vn-one <vn-autocomplete vn-one
initial-data="$ctrl.client.salesPerson" initial-data="$ctrl.client.salesPerson"

View File

@ -9,21 +9,24 @@
<vn-card pad-large> <vn-card pad-large>
<vn-title>Pay method</vn-title> <vn-title>Pay method</vn-title>
<vn-horizontal> <vn-horizontal>
<vn-autocomplete vn-two <vn-autocomplete
vn-one
label="Pay method"
vn-acl="administrative, salesAssistant" vn-acl="administrative, salesAssistant"
field="$ctrl.client.payMethodFk" field="$ctrl.client.payMethodFk"
url="/client/api/PayMethods" url="/client/api/PayMethods"
select-fields="ibanRequired" select-fields="ibanRequired"
initial-data="$ctrl.client.payMethod" initial-data="$ctrl.client.payMethod">
label="Pay method">
</vn-autocomplete> </vn-autocomplete>
<vn-textfield <vn-textfield
vn-two label="IBAN" vn-one
label="IBAN"
field="$ctrl.client.iban" field="$ctrl.client.iban"
vn-acl="administrative, salesAssistant"> vn-acl="administrative, salesAssistant">
</vn-textfield> </vn-textfield>
<vn-textfield <vn-textfield
vn-one label="Due day" vn-one
label="Due day"
field="$ctrl.client.dueDay" field="$ctrl.client.dueDay"
vn-acl="administrative, salesAssistant"> vn-acl="administrative, salesAssistant">
</vn-textfield> </vn-textfield>

View File

@ -6,22 +6,11 @@
save="post"> save="post">
</vn-watcher> </vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium> <form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
<div style="max-width: 70em; margin: 0 auto;"> <div style="max-width: 50em; margin: 0 auto;">
<vn-card pad-large> <vn-card pad-large>
<vn-title>Create client</vn-title> <vn-title>Create client</vn-title>
<vn-horizontal>
<vn-textfield vn-two label="Business name" field="$ctrl.client.socialName"></vn-textfield>
<vn-textfield vn-one label="Tax number" field="$ctrl.client.fi"></vn-textfield>
<vn-check
vn-one
label="Is equalizated"
field="$ctrl.client.isEqualizated">
</vn-check>
</vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield vn-two label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield> <vn-textfield vn-two label="Comercial Name" field="$ctrl.client.name" vn-focus></vn-textfield>
<vn-textfield vn-one label="Web user" field="$ctrl.client.userName"></vn-textfield>
<vn-textfield vn-two label="Email" field="$ctrl.client.email" info="You can save multiple emails"></vn-textfield>
<vn-autocomplete vn-one <vn-autocomplete vn-one
field="$ctrl.client.salesPersonFk" field="$ctrl.client.salesPersonFk"
url="/client/api/Clients/activeSalesPerson" url="/client/api/Clients/activeSalesPerson"
@ -31,6 +20,17 @@
<tpl-item>{{firstName}} {{name}}</tpl-item> <tpl-item>{{firstName}} {{name}}</tpl-item>
</vn-autocomplete> </vn-autocomplete>
</vn-horizontal> </vn-horizontal>
<vn-horizontal>
<vn-textfield vn-two label="Business name" field="$ctrl.client.socialName"></vn-textfield>
<vn-textfield vn-one label="Tax number" field="$ctrl.client.fi"></vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-textfield
vn-two
label="Street"
field="$ctrl.client.street">
</vn-textfield>
</vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one vn-one
@ -38,18 +38,22 @@
field="$ctrl.client.postcode"> field="$ctrl.client.postcode">
</vn-textfield> </vn-textfield>
<vn-textfield <vn-textfield
vn-two vn-one
label="Street"
field="$ctrl.client.street">
</vn-textfield>
<vn-textfield
vn-two
label="City" label="City"
field="$ctrl.client.city"> field="$ctrl.client.city">
</vn-textfield> </vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-autocomplete
vn-one
field="$ctrl.client.countryFk"
url="/client/api/Countries"
show-field="country"
value-field="id"
label="Country">
</vn-autocomplete>
<vn-autocomplete <vn-autocomplete
vn-one vn-one
initial-data="$ctrl.client.province"
field="$ctrl.client.provinceFk" field="$ctrl.client.provinceFk"
url="/client/api/Provinces" url="/client/api/Provinces"
show-field="name" show-field="name"
@ -57,6 +61,26 @@
label="Province"> label="Province">
</vn-autocomplete> </vn-autocomplete>
</vn-horizontal> </vn-horizontal>
<vn-horizontal>
<vn-textfield
vn-one
label="Web user"
field="$ctrl.client.userName">
</vn-textfield>
<vn-textfield
vn-one
label="Email"
field="$ctrl.client.email"
info="You can save multiple emails">
</vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-check
vn-one
label="Is equalizated"
field="$ctrl.client.isEqualizated">
</vn-check>
</vn-horizontal>
</vn-card> </vn-card>
<vn-button-bar> <vn-button-bar>
<vn-submit label="Create"></vn-submit> <vn-submit label="Create"></vn-submit>

View File

@ -4,7 +4,6 @@
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
vn-one vn-one
margin-medium-right
label="Credit" label="Credit"
model="$ctrl.creditClassification.credit", model="$ctrl.creditClassification.credit",
rule="CreditInsurance.credit" rule="CreditInsurance.credit"
@ -12,8 +11,7 @@
vn-focus> vn-focus>
</vn-textfield> </vn-textfield>
<vn-textfield <vn-textfield
vn-one vn-one
argin-medium-right
label="Grade" label="Grade"
model="$ctrl.creditClassification.grade" model="$ctrl.creditClassification.grade"
rule="CreditInsurance.grade"> rule="CreditInsurance.grade">

View File

@ -24,13 +24,6 @@
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-textfield> </vn-textfield>
<vn-check
vn-one
label="Is equalizated"
field="$ctrl.client.isEqualizated"
vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-check>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
@ -40,13 +33,6 @@
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-textfield> </vn-textfield>
<vn-textfield
vn-one
label="City"
field="$ctrl.client.city"
vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-textfield <vn-textfield
@ -56,17 +42,15 @@
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-textfield> </vn-textfield>
<vn-autocomplete <vn-textfield
vn-one vn-one
initial-data="$ctrl.client.province" label="City"
field="$ctrl.client.provinceFk" field="$ctrl.client.city"
url="/client/api/Provinces"
show-field="name"
value-field="id"
label="Province"
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-autocomplete> </vn-textfield>
</vn-horizontal>
<vn-horizontal>
<vn-autocomplete <vn-autocomplete
vn-one vn-one
initial-data="$ctrl.client.country" initial-data="$ctrl.client.country"
@ -78,6 +62,17 @@
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-autocomplete> </vn-autocomplete>
<vn-autocomplete
vn-one
initial-data="$ctrl.client.province"
field="$ctrl.client.provinceFk"
url="/client/api/Provinces"
show-field="name"
value-field="id"
label="Province"
vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-autocomplete>
</vn-horizontal> </vn-horizontal>
<vn-horizontal margin-small-bottom> <vn-horizontal margin-small-bottom>
<vn-check <vn-check
@ -94,21 +89,8 @@
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-check> </vn-check>
<vn-check
vn-two
label="Invoice by address"
field="$ctrl.client.hasToInvoiceByAddress"
vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-check>
<vn-check
vn-two
label="Verified data"
field="$ctrl.client.isTaxDataChecked"
vn-acl="administrative, salesAssistant, salesAssistant">
</vn-check>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal margin-small-bottom>
<vn-check <vn-check
vn-one vn-one
label="Has to invoice" label="Has to invoice"
@ -116,6 +98,15 @@
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-check> </vn-check>
<vn-check
vn-one
label="Vies"
field="$ctrl.client.isVies"
vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-check>
</vn-horizontal>
<vn-horizontal margin-small-bottom>
<vn-check <vn-check
vn-one vn-one
label="Invoice by mail" label="Invoice by mail"
@ -125,12 +116,27 @@
</vn-check> </vn-check>
<vn-check <vn-check
vn-one vn-one
label="Vies" label="Invoice by address"
field="$ctrl.client.isVies" field="$ctrl.client.hasToInvoiceByAddress"
vn-acl="administrative, salesAssistant, salesPerson" vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-check> </vn-check>
</vn-horizontal> </vn-horizontal>
<vn-horizontal>
<vn-check
vn-one
label="Is equalizated"
field="$ctrl.client.isEqualizated"
vn-acl="administrative, salesAssistant, salesPerson"
acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}">
</vn-check>
<vn-check
vn-one
label="Verified data"
field="$ctrl.client.isTaxDataChecked"
vn-acl="administrative, salesAssistant, salesAssistant">
</vn-check>
</vn-horizontal>
</vn-card> </vn-card>
<vn-button-bar> <vn-button-bar>
<vn-submit <vn-submit

View File

@ -1,4 +1,4 @@
@import "colors"; @import "effects";
vn-autocomplete > div > .mdl-textfield { vn-autocomplete > div > .mdl-textfield {
position: relative; position: relative;
@ -44,13 +44,12 @@ ul.vn-autocomplete {
max-height: 300px; max-height: 300px;
li { li {
@extend %clickable;
display: block; display: block;
padding: .8em; padding: .8em;
margin: 0; margin: 0;
cursor: pointer;
&.active, &.active {
&:hover {
background-color: $hover; background-color: $hover;
} }
&.load-more { &.load-more {

View File

@ -1,4 +1,4 @@
@import "colors"; @import "effects";
.vn-grid { .vn-grid {
border-collapse: collapse; border-collapse: collapse;
@ -26,13 +26,8 @@
transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out;
&.clickable { &.clickable {
cursor: pointer; @extend %clickable;
&:hover {
background-color: $hover;
}
} }
&.success { &.success {
background-color: rgba(163, 209, 49, 0.3); background-color: rgba(163, 209, 49, 0.3);

View File

@ -6,7 +6,7 @@
save="post"> save="post">
</vn-watcher> </vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" margin-medium> <form name="form" ng-submit="$ctrl.onSubmit()" margin-medium>
<div style="max-width: 70em; margin: 0 auto;"> <div style="max-width: 50em; margin: 0 auto;">
<vn-card pad-large> <vn-card pad-large>
<vn-title>New item</vn-title> <vn-title>New item</vn-title>
<vn-horizontal> <vn-horizontal>

View File

@ -1,4 +1,4 @@
@import "colors"; @import "effects";
vn-home { vn-home {
padding: 2em; padding: 2em;
@ -17,6 +17,7 @@ vn-home {
flex-wrap: wrap; flex-wrap: wrap;
& > a { & > a {
@extend %clickable-light;
overflow:hidden; overflow:hidden;
border-radius: 6px; border-radius: 6px;
background-color: $main-01; background-color: $main-01;
@ -29,11 +30,6 @@ vn-home {
padding: 1em; padding: 1em;
justify-content: center; justify-content: center;
transition: opacity 250ms ease-out;
&:hover {
background-color: $hover;
}
& > vn-icon { & > vn-icon {
font-size: 4em; font-size: 4em;
} }

View File

@ -1,8 +1,12 @@
@import "colors"; @import "effects";
vn-menu-item { vn-menu-item {
& > li.active { & > li {
background-color: $main-header; @extend %clickable;
color: white;
&.active {
background-color: $main-header;
color: white;
}
} }
} }

View File

@ -1,4 +1,4 @@
@import "colors"; @import "effects";
vn-main-menu { vn-main-menu {
#user { #user {
@ -25,9 +25,9 @@ vn-main-menu {
color: white; color: white;
li { li {
@extend %clickable-light;
background-color: $main-01; background-color: $main-01;
margin-bottom: .6em; margin-bottom: .6em;
cursor: pointer;
padding: .8em; padding: .8em;
border-radius: .1em; border-radius: .1em;
min-width: 8em; min-width: 8em;
@ -36,9 +36,6 @@ vn-main-menu {
padding-right: .3em; padding-right: .3em;
vertical-align: middle; vertical-align: middle;
} }
&:hover {
background-color: $hover;
}
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }

View File

@ -1,7 +1,8 @@
$main-font-color :#222222; $main-font-color :#222222;
$secondary-font-color: #9b9b9b; $secondary-font-color: #9b9b9b;
$main-header: #3d3d3d; $main-header: #3d3d3d;
$hover: #c4c4c4; $hover: rgba(0, 0, 0, 0.1);
$hover-opacity: .7;
$main-bg: #e5e5e5; $main-bg: #e5e5e5;
$main-01: #f7931e; $main-01: #f7931e;
$main-01-05: rgba($main-01, 0.5); $main-01-05: rgba($main-01, 0.5);

View File

@ -0,0 +1,20 @@
@import "./colors";
%clickable {
cursor: pointer;
transition: background-color 250ms ease-out;
&:hover {
background-color: $hover;
}
}
%clickable-light {
cursor: pointer;
transition: opacity 250ms ease-out;
&:hover {
opacity: $hover-opacity;
}
}

View File

@ -1,7 +1,6 @@
@import "colors"; @import "colors";
@import "font-family"; @import "font-family";
body { body {
color: $main-font-color; color: $main-font-color;
font-family: vn-font; font-family: vn-font;

View File

@ -9,3 +9,4 @@ import './font-style.scss';
import './misc.scss'; import './misc.scss';
import './summary.scss'; import './summary.scss';
import './colors.scss'; import './colors.scss';
import './effects.scss';

View File

@ -1,7 +1,8 @@
@import "padding"; @import "./padding";
@import "margin"; @import "./margin";
@import "colors"; @import "./colors";
@import "border"; @import "./border";
@import "./effects";
a:focus, a:focus,
@ -116,17 +117,8 @@ a {
} }
} }
.vn-clickable {
cursor: pointer;
transition: background-color 250ms ease-out;
&:hover {
background-color: $hover;
}
}
button { button {
@extend .vn-clickable; @extend %clickable;
} }
vn-button-bar { vn-button-bar {
@ -168,7 +160,7 @@ vn-main-block {
font-size: 2.5em; font-size: 2.5em;
} }
& > a { & > a {
@extend .vn-clickable; @extend %clickable;
display: flex; display: flex;
align-items: center; align-items: center;
@ -205,7 +197,7 @@ vn-main-block {
.vn-list-item { .vn-list-item {
@extend .pad-medium; @extend .pad-medium;
@extend .border-solid-bottom; @extend .border-solid-bottom;
@extend .vn-clickable; @extend %clickable;
display: block; display: block;
text-decoration: none; text-decoration: none;