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