data/styles/Invoice.css

   1 .invoice {
   2   margin:4em 4em;
   3 }
   4 .invoice-from-to {
   5   display:grid;
   6   gap:5ex;
   7   grid-template-columns:1fr 1fr;
   8 }
   9 .invoice-details {
  10   font-size:80%;
  11 }
  12 .invoice-issuer {
  13   display:grid;
  14 }
  15 .invoice-recipient {
  16   display:grid;
  17 }
  18 .entity {
  19   border:1px solid black;
  20   padding:0.5ex 1ex;
  21   gap:1px;
  22   display:flex;
  23   flex-direction:column;
  24   justify-spacing:begin;
  25 }
  26 .entity > div {
  27   padding:0.5ex 0;
  28 }
  29 .entity-name {
  30 }
  31 .entity-address {
  32   border-top:1px solid black;
  33 }
  34 .entity .key-value:first-child {
  35   border-top:0;
  36 }
  37 .entity .key-value {
  38   border-top:1px solid black;
  39 }
  40
  41 .address {
  42   //display:grid;
  43   display:grid;
  44   grid-template-columns:1fr;
  45   //grid-template-rows:1fr 5fr;
  46   //grid-template-columns:subgrid;
  47   //grid-template-rows:subgrid;
  48   align-items:end;
  49   justify-items:end;
  50 }
  51 .address > div {
  52   //grid-column:1 / span 3;
  53   //align-items:center;
  54   //justify-items:center;
  55 }
  56 .address .address-bottom {
  57   display:flex;
  58   flex-direction:row;
  59   //grid-template-columns:1fr 1fr 1fr;
  60   justify-items:spacing-around;
  61   align-items:center;
  62   //grid-template-columns:subgrid;
  63   //grid-template-rows:subgrid;
  64   gap:1ex;
  65   //grid-column-start:1;
  66   //grid-column-end:4;
  67 }
  68
  69
  70
  71 .invoice-items {
  72   display:grid;
  73   grid-template-columns:max-content 5fr 1fr 1fr 1fr;
  74   margin-top:2ex;
  75   background:black;
  76   gap:2px 2px;
  77 }
  78 .invoice-items-head {
  79   display:grid;
  80   font-weight:bold;
  81   grid-template-columns:subgrid;
  82   grid-template-rows:subgrid;
  83   grid-column-start:1;
  84   grid-column-end:-1;
  85   //background-color:white;
  86   //gap:0;
  87 }
  88 .invoice-items-head .invoice-items-item {
  89   //background:#ccc;
  90   //background-color:#eeee00;
  91   background-color:#F6CD93;
  92   //background-color:#57ADC3;
  93   //background-clip:text;
  94   //border-top:1px solid black;
  95   //border-left:1px solid black;
  96   //border-right:1px solid black;
  97   //border-top-left-radius:2ex;
  98   //border-top-right-radius:2ex;
  99
 100   padding-left:2ex;
 101   padding-right:2ex;
 102   padding-top:1ex;
 103   padding-bottom:0.5ex;
 104 }
 105 //.invoice-items-head .invoice-items-item:after {
 106 //  position:absolute;
 107 //  display:block;
 108 //  content:'';
 109 //  right:0;
 110 //  bottom:0;
 111 //  height:50%;
 112 //  box-sizing:border-box;
 113 //  width:100%;
 114 //  border-bottom:1px solid black;
 115 //}
 116
 117 .invoice-items-body {
 118   display:grid;
 119   grid-template-columns:subgrid;
 120   grid-template-rows:subgrid;
 121   grid-column-start:1;
 122   grid-column-end:-1;
 123 }
 124 .invoice-items-body.odd .invoice-items-item {
 125   //background:#DBE7D4;
 126 }
 127 .invoice-items-body.even .invoice-items-item {
 128   background:#E9F1E7;
 129 }
 130 .invoice-items-tail {
 131   display:grid;
 132   grid-template-columns:subgrid;
 133   grid-template-rows:subgrid;
 134   grid-column-start:1;
 135   grid-column-end:-1;
 136   background-color:white;
 137   gap:0;
 138 }
 139 .invoice-items-item {
 140   justify-self:stretch;
 141   align-self:stretch;
 142   background:white;
 143   padding:1ex 1ex;
 144 }
 145 .invoice-items-head .invoice-items-item {
 146   //align-self:end;
 147   text-align:center;
 148   display:grid;
 149 }
 150 .invoice-items-head .invoice-items-item > div {
 151   align-self:center;
 152 }
 153 .invoice-items-body .invoice-items-item {
 154   display:grid;
 155 }
 156 .invoice-items-body .invoice-items-item.invoice-items-item-Name > div {
 157   justify-self:stretch;
 158 }
 159 .invoice-items-body .invoice-items-item > div {
 160   align-self:center;
 161   justify-self:end;
 162 }
 163 .invoice-items-body .invoice-items-item-Name {
 164   text-align:left;
 165 }
 166 .invoice-items-tail .invoice-items-item {
 167   text-align:right;
 168   background-color:#ccc;
 169   border-bottom-left-radius:2ex;
 170   border-bottom-right-radius:2ex;
 171 }
 172 .invoice-items-item-Name {
 173   text-align:justify;
 174 }
 175 .invoice-items-tail .invoice-items-item-Totals {
 176   font-weight:bold;
 177   grid-column:span 3;
 178   background-color:white;
 179 }
 180
 181 .invoice-items-item {
 182 }
 183 .invoice-items-tail .invoice-items-item-Sum {
 184   background-color:black;
 185   color:white;
 186   font-weight:bold;
 187   //border:1ex solid white;
 188   //border-radius:1ex;
 189   //margin:0.5ex 0.4ex 0.7ex;
 190   //padding:0.5ex 0.6ex 0.3ex;
 191 }
 192
 193