Commit 126176c6 authored by Matthieu Fesselier's avatar Matthieu Fesselier

ui: various design fixes

parent cd39c49d
Pipeline #4719 passed with stage
in 27 seconds
......@@ -3,27 +3,31 @@
--default-padding: 1rem;
--border-color: #dae2f3;
}
*{
.sib-invoicing *{
box-sizing: border-box;
}
html {
font-family: 'Open Sans', sans-serif;
}
strong{
.sib-invoicing strong{
font-weight: var(--bold);
}
#sib-invoicing{
.sib-invoicing{
max-width: 800px;
margin: 0 auto;
font-family: sans-serif;
}
#sib-invoicing sib-display-value{
.sib-invoicing sib-display-value{
display: block;
}
/* Titles ============ */
.sib-invoicing h2{
text-transform: uppercase;
font-size: 1.1rem;
font-weight: 600;
}
/* Buttons ============ */
#sib-invoicing .button{
padding: 0.6em 1.3em;
.sib-invoicing .button{
padding: 0.8em 1.3em;
background-color: var(--sib-invoicing-secondary, gray);
color: white;
border-radius: 3rem;
......@@ -32,11 +36,11 @@ strong{
text-transform: uppercase;
font-size: 0.8rem;
}
#sib-invoicing button{
.sib-invoicing button{
cursor: pointer;
}
#sib-invoicing .close-button{
.sib-invoicing .close-button{
width: 30px;
height: 30px;
display: flex;
......@@ -50,16 +54,16 @@ strong{
padding: 0;
}
#sib-invoicing .close-button:hover{
.sib-invoicing .close-button:hover{
opacity: .5;
}
#sib-invoicing .close-button:active,
#sib-invoicing .close-button:focus{
.sib-invoicing .close-button:active,
.sib-invoicing .close-button:focus{
outline: none;
}
/* Dialog ============ */
#sib-invoicing dialog{
.sib-invoicing dialog{
width: 80%;
top: 50px;
margin-bottom: 50px;
......@@ -68,24 +72,24 @@ strong{
box-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
#sib-invoicing dialog::backdrop{
.sib-invoicing dialog::backdrop{
background: #3c3f57CC;
}
/* Forms ============ */
#sib-invoicing sib-form-label-text,
#sib-invoicing sib-form-number,
#sib-invoicing sib-form-date,
#sib-invoicing widget-status{
.sib-invoicing sib-form-label-text,
.sib-invoicing sib-form-number,
.sib-invoicing sib-form-date,
.sib-invoicing widget-status{
display: block;
width: 100%;
padding: 0.5rem;
}
#sib-invoicing select,
#sib-invoicing input[type="text"],
#sib-invoicing input[type="date"],
#sib-invoicing input[type="number"]{
.sib-invoicing select,
.sib-invoicing input[type="text"],
.sib-invoicing input[type="date"],
.sib-invoicing input[type="number"]{
-webkit-appearance: none;
appearance: none;
border: 0;
......@@ -98,10 +102,10 @@ strong{
outline: none;
}
#sib-invoicing .custom-select{
.sib-invoicing .custom-select{
position: relative;
}
#sib-invoicing .custom-select::after{
.sib-invoicing .custom-select::after{
content: "";
position: absolute;
right: 10px;
......@@ -112,21 +116,21 @@ strong{
border-color: black transparent transparent transparent;
}
#sib-invoicing input[type="text"]:focus,
#sib-invoicing input[type="date"]:focus,
#sib-invoicing input[type="number"]:focus{
.sib-invoicing input[type="text"]:focus,
.sib-invoicing input[type="date"]:focus,
.sib-invoicing input[type="number"]:focus{
background: transparent;
border-color: var(--sib-invoicing-primary, gray);
}
#sib-invoicing label > div{
.sib-invoicing label > div{
color: #999;
text-transform: uppercase;
font-size: 0.8rem;
margin-bottom: 0.3rem;
}
#sib-invoicing [type="submit"]{
.sib-invoicing [type="submit"]{
display: block;
float: right;
border-radius: 10rem;
......@@ -148,9 +152,9 @@ strong{
.invoices-list header {
display: flex;
justify-content: space-between;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
padding: 0 var(--default-padding);
border-radius: 0.2rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1);
padding: 0.5rem var(--default-padding);
border-radius: 0.1rem;
}
.invoices-list header sib-router{
......@@ -196,11 +200,7 @@ strong{
.invoices-list [name="invoice-footer"] {
margin-top: 0.2rem;
opacity: .4;
}
.invoices-list [name="invoice-header"] {
font-weight: var(--bold);
opacity: .35;
}
.invoices-list [name="invoice-aside"] {
......@@ -368,7 +368,7 @@ strong{
}
/* Invoice forms ============ */
.invoice-form h2{
.invoice-form h3{
text-align: center;
margin: 1.7rem 0;
font-size: 1.3rem;
......@@ -474,7 +474,7 @@ strong{
margin-top: 2rem;
}
.invoice-form [name="batch-header"] [name="title"] input[type="text"]{
background: var(--sib-invoicing-secondary, gray);
background: transparent;
color: white;
font-weight: var(--bold);
border-color: transparent;
......
......@@ -22,7 +22,7 @@
<body>
<sib-invoicing
data-src="http://127.0.0.1:8000/"
data-src="http://localhost:8000/"
></sib-invoicing>
</body>
......
......@@ -40,7 +40,7 @@ export class SIBInvoicing extends SIBTemplateElement {
let prefix = routerPrefix ? `route-prefix="${routerPrefix}"`: ''
return `
<div id="sib-invoicing">
<div id="sib-invoicing" class="sib-invoicing">
<!-- widgets ==================================== -->
<sib-widget name="widget-money">
<template>
......@@ -203,7 +203,7 @@ export class SIBInvoicing extends SIBTemplateElement {
<dialog id="add-invoice" class="invoice-form">
<close-button></close-button>
<h2>Créer une nouvelle facture</h2>
<h3>Créer une nouvelle facture</h3>
<sib-form
data-src="${sourceUrl}customer-invoices/"
......@@ -226,7 +226,7 @@ export class SIBInvoicing extends SIBTemplateElement {
<dialog id="edit-invoice" class="invoice-form">
<close-button></close-button>
<h2>Modifier la facture</h2>
<h3>Modifier la facture</h3>
<sib-form
bind-resources
fields="first-line(title, identifier), second-line(state, invoicingDate), batches, last-line(tvaRate, additionalText)"
......@@ -249,7 +249,7 @@ export class SIBInvoicing extends SIBTemplateElement {
<sib-display id="invoice-list"
class="invoices-list__item"
data-src="${sourceUrl}customer-invoices/"
fields="invoice-title(invoice-main(invoice-header(title, identifier), invoice-footer(invoicingDate, htAmount)), invoice-aside(state)), invoice-hidden(actions(edit, show, download, duplicate), batches, invoice-totals(totals-header, ht-total(ht-label, htAmount), tva-total(tvaRate, tvaAmount), ttc-total(ttc-label, ttcAmount)))"
fields="invoice-title(invoice-main(invoice-header(title, identifier), invoice-footer(invoicingDate, htAmount)), invoice-aside(state)), invoice-hidden(actions(duplicate, edit, show, download), batches, invoice-totals(totals-header, ht-total(ht-label, htAmount), tva-total(tvaRate, tvaAmount), ttc-total(ttc-label, ttcAmount)))"
value-totals-header="TOTAL DE LA FACTURE"
value-ht-label="Total HT"
......@@ -274,7 +274,7 @@ export class SIBInvoicing extends SIBTemplateElement {
<dialog id="download-invoice">
<close-button></close-button>
<h2>Téléchargement...</h2>
<h3>Téléchargement...</h3>
<p>Disponible bientôt !</p>
<!-- <sib-pdf-generator source="#print" buttonText="Télécharger la facture"></sib-pdf-generator> -->
</dialog>
......@@ -341,7 +341,7 @@ export class SIBInvoicing extends SIBTemplateElement {
<dialog id="add-freelance-invoice" class="invoice-form">
<close-button></close-button>
<h2>Importer une facture</h2>
<h3>Importer une facture</h3>
<sib-form
data-src="${sourceUrl}freelance-invoices/"
fields="first-line(freelanceFullname, identifier), second-line(invoicingDate, htAmount), uploadUrl"
......@@ -358,7 +358,7 @@ export class SIBInvoicing extends SIBTemplateElement {
<dialog id="edit-freelance-invoice" class="invoice-form">
<close-button></close-button>
<h2>Modifier une facture</h2>
<h3>Modifier une facture</h3>
<sib-form
bind-resources
fields="first-line(freelanceFullname, identifier), second-line(invoicingDate, htAmount), uploadUrl"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment