/* simple grid */ /** *** SIMPLE GRID *** (C) ZACH COLE 2016 **/ @import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic); /* UNIVERSAL */ html, body { height: 100%; width: 100%; margin: 0; padding: 0; left: 0; top: 0; font-size: 100%; } /* ROOT FONT STYLES */ body { font-family: 'Lato', Helvetica, sans-serif; color: #333447; line-height: 1.5; } /* TYPOGRAPHY */ h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 0.875rem; } p { font-size: 1.125rem; font-weight: 200; line-height: 1.8; } .font-light { font-weight: 300; } .font-regular { font-weight: 400; } .font-heavy { font-weight: 700; } /* POSITIONING */ .left { text-align: left; } .right { text-align: right; } .center { text-align: center; margin-left: auto; margin-right: auto; } .justify { text-align: justify; } /* ==== GRID SYSTEM ==== */ .container { width: 90%; margin-left: auto; margin-right: auto; } .row { position: relative; width: 100%; } .row [class^="col"] { float: left; margin: 0.5rem 2%; min-height: 0.125rem; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 96%; } .col-1-sm { width: 4.33%; } .col-2-sm { width: 12.66%; } .col-3-sm { width: 21%; } .col-4-sm { width: 29.33%; } .col-5-sm { width: 37.66%; } .col-6-sm { width: 46%; } .col-7-sm { width: 54.33%; } .col-8-sm { width: 62.66%; } .col-9-sm { width: 71%; } .col-10-sm { width: 79.33%; } .col-11-sm { width: 87.66%; } .col-12-sm { width: 96%; } .row::after { content: ""; display: table; clear: both; } .hidden-sm { display: none; } /* PDF CSS */ @page { size: a4 portrait; margin: 10mm 10mm 20mm 10mm; } html { padding: 0px; margin: 0px; font-size: 13px; } .logo-color { color: {{ colors.darker }}; } .brand-text-color { color: {{ colors.normal }}; } .text-muted, .text-muted * { color: #aaa; } .text-light, .text-light * { color: #666; } .text-bold { font-weight: bold; } .border-left { box-sizing: border-box; border-left: 2px solid #efefef; } .border-right { box-sizing: border-box; border-right: 2px solid #efefef; } .border-bottom { box-sizing: border-box; border-bottom: 2px solid #efefef; } .border-top { box-sizing: border-box; border-top: 2px solid #efefef; } .hr-blue { border: none; border-bottom: 3px solid {{ colors.normal }}; } hr { border: none; border-bottom: 1px solid #eee; } h1, h2, h3, h4, h5, h6 { margin: 10px 0; } /* header */ .header { width: 100%; border-spacing: 0; } .header-first { width: 55%; } .header td { padding: 20px; } .header h1, .header h6 { margin-top: 0; } .invoice-info { padding: 0 20px; } .send-date { float: right; } .info-table td { padding: 0 20px; } .info-table thead td { text-align: center; } .address span { display: block; line-height: 1.3; } /* Items */ .items { width: 100%; margin-top: 20px; border-spacing: 0; } .items thead { background-color: {{ colors.normal }}; } .items thead th { background-color: {{ colors.normal }}; padding: 5px 20px; color: #fff; text-align: left; } .items tbody td { padding: 5px 20px; border-bottom: 2px solid #efefef; } /* totals */ .totals { width: 100%; margin-top: 60px; border-spacing: 0; } .totals td { padding: 5px 20px; } .totals-border { border-bottom: 3px solid {{ colors.darker }}; } .due-amount-border { border-bottom: 3px solid {{ colors.normal }}; } /* footer */ footer { position: fixed; bottom: -40px; left: 0; right: 0; font-size: 12px; display: block; text-align: center; color: #aaa; }