@salaxy/ng1
Version:
AngularJS libraries for Salaxy platform (Palkkaus.fi)
440 lines (387 loc) • 11.8 kB
text/less
// TODO: move to reports project
// Styles for report layouts resempling the printable pdf
//== Logo
//
//## Use this to change the logo in printable document. We recommend SVG for best print quality and size, but png etc. are also possible
//** Brand logo url in Header (.svg .png .jpg etc) */
@rpt-brand-logo-url: 'https://cdn.salaxy.com/img/palkkaus/logo/palkkaus_logo.svg';
//** Brand logo's height (max-height is 50px). Width auto adjusts up to 40% of content area width. */
@rpt-brand-logo-height: 80px;
//
@rpt-text-color: #000;
@rpt-font-size-base: 13px;
@rpt-line-height: 1.42857143;
//** Padding for `<th>`s and `<td>`s.
@rpt-table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@rpt-table-condensed-cell-padding: 5px;
//** Background color used for `.table-striped`.
@rpt-table-bg-accent: #f9f9f9;
//** Border color for table and cell borders.
@rpt-table-border-color: #ddd;
/* Actual report specific stuff */
body{
.salaxy-rpt {
font-family: @font-family-sans-serif;
color: @rpt-text-color;
line-height: @rpt-line-height;
font-size:@rpt-font-size-base;
background-color: transparent;
// Table defaults
table{
width:100%;
color: @rpt-text-color;
line-height: @rpt-line-height;
font-size:@rpt-font-size-base;
}
/* Preview layout - the document is inside .document-preview */
.document-preview {
background-color: Gray;
width: 100%;
padding: 10mm;
//min-height: 303mm; // Remove or add landscape support
box-sizing: border-box;
overflow-x: auto;
display: inline-grid;
&.document-preview-no-height {
// Mini-preview in Admin and in share calc view
padding: 2mm;
min-height:unset;
}
.document {
background-color:#fff;
margin-bottom: 2mm;
.document-body{
position: relative;
//margin-bottom:30mm; // padding from hbs template
//margin-left:10mm;
//margin-right:10mm;
//margin-top: 30mm;
}
.header {
border-bottom: 0.5mm solid @brand-primary;
margin-bottom: 2mm;
padding-bottom: 3mm;
height: 20mm;
.reportbrandlogo{
width: auto;
height: @rpt-brand-logo-height;
max-height: 50px;
background: url(@rpt-brand-logo-url);
background-size: contain;
background-repeat: no-repeat;
}
}
.footer {
width: calc(~"100% - 20mm");
position: absolute;
bottom: 10mm;
left: 10mm;
height: 20mm;
border-top: 0.5mm solid @brand-primary;
padding: 2mm 0;
font-size: 12px;
line-height: @rpt-line-height;
background-color: transparent;
color: @rpt-text-color;
p, td {
font-size: 12px;
line-height: @rpt-line-height;
}
}
}
.a4Portrait, .a4portrait, .A4Portrait {
height: auto;
/*no width hardcoded*/
}
.a4Portrait-no-height, .a4portrait-no-height, .A4Portrait-no-height {
// Mini-preview in Admin
padding: 10mm;
width: 190mm;
/* 210 - 2 * 10 = 190 */
}
.a4Landscape, .a4landscape, .A4Landscape {
//padding-bottom: 30mm;
//padding: 10mm;
height: auto;
/* 210 - 2 * 10 = 190 */
width: 297mm;
/* 297 - 2 * 10 = 277 */
}
.a4Landscape-no-height, .a4landscape-no-height, .A4Landscape-no-height {
padding: 10mm;
width: 277mm;
/* 297 - 2 * 10 = 277 */
}
.document.a4Landscape{
.table-condensed {
thead, tbody, tfoot {
tr {
th, td {
padding: 1px;
font-size: 10px;
line-height: normal;
}
}
}
}
}
}
.document {
position: relative; // If absolute positioning is used, it is in relation to document.
background-color: transparent;
margin: 0px auto;
font-size:@rpt-font-size-base;
.report-table{
border-spacing:0;
margin-bottom: 20px;
margin-top: 20px;
}
.salaxy-report-table, .salaxy-accounting-report-table {
margin-top: 20px;
th, td {
text-align: right;
&:first-child {
text-align: left;
}
}
&.columns-three {
th, td {
width: 25%;
&:first-child {
width: 50%;
}
}
}
&.columns-three.columns-first-narrow {
th, td {
width: 40%;
&:first-child {
width: 20%;
}
}
}
&.columns-four {
th, td {
width: 20%;
&:first-child {
width: 40%;
}
}
}
&.columns-five {
th, td {
width: 17.5%;
&:first-child {
width: 30%;
}
&:nth-child(2) {
// Assuming 2th column with text content
text-align: left;
}
}
}
&.columns-six {
th, td {
width: 15%;
&:first-child {
width: 25%;
}
&:nth-child(2) {
// Assuming 2th column with text content
text-align: left;
}
}
}
&.columns-first-two-text {
th:nth-child(1), th:nth-child(2), td:nth-child(1), td:nth-child(2) {
text-align: left ;
}
}
.salaxy-accounting-report-group-header td {
padding-top: 6px;
padding-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.salaxy-accounting-report-row {
font-weight: bold;
&.salaxy-accounting-report-child-row {
font-weight: normal;
}
}
tfoot tr.total {
th {
padding-top: 10px;
font-weight: bold;
&:first-child {
text-transform: uppercase;
}
}
}
}
h1, h2, h3{
margin: 0;
font-weight: bold;
}
h1 { font-size: 1.3em }
h2 {font-size: 1.2em;}
h3 { font-size: 1.1em }
p{font-size:@rpt-font-size-base;}
.table {
width: 100%;
max-width: 100%;
// Cells
thead, tbody, tfoot {
tr {
th, td {
padding: @rpt-table-cell-padding;
line-height:@rpt-line-height;
vertical-align: top;
border-top: 1px solid @rpt-table-border-color;
}
}
}
// Bottom align for column headings
thead tr th {
vertical-align: bottom;
border-bottom: 2px solid @rpt-table-border-color;
border-top: 0px none;
}
// Nesting
.table {
background-color: transparent;
}
}
.table-condensed {
thead, tbody, tfoot {
tr {
th, td {
padding: 1px;
font-size: @rpt-font-size-base;
line-height: normal;
}
}
}
}
.small {
thead, tbody, tfoot {
tr {
th, td {
font-size: 11px;
}
}
}
}
.table-bordered {
border: 1px solid @rpt-table-border-color;
thead, tbody, tfoot {
tr {
th, td {
border: 1px solid @rpt-table-border-color;
}
}
}
thead tr {
th, td {
border-bottom-width: 2px;
}
}
}
.table-striped {
tbody tr:nth-of-type(odd) {
background-color: @rpt-table-bg-accent;
}
}
}
.watermark {
position: absolute;
left: 0;
top: 40%;
font-weight: bold;
font-size: 20mm;
opacity: 0.3;
color: @brand-danger;
text-align: center;
width: 100%;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/* IE 9 */
-webkit-transform: rotate(-45deg);
/* Opera, Chrome, and Safari */
}
// From functional.less
a[ng-click],
.clickable {
cursor: pointer;
}
// Text special styles
.uppercase {
text-transform: uppercase;
}
.text-disabled {
text-decoration: line-through;
color: #777777;
}
.text-small, .text-small td, .text-small th {
font-size: 0.9em;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td, th {
vertical-align: top;
text-align: left;
padding-left: 2px;
padding-right: 2px;
}
td.text-right, th.text-right,
td.right, th.right {
text-align: right;
}
td.middle, td.middle-align, th.middle, th.middle-align {
vertical-align: middle;
}
td.bottom, td.bottom-align, th.bottom, th.bottom-align{
vertical-align: bottom;
}
tr.total td, tr.total th {
border-top: 1px solid @rpt-text-color;
border-bottom: 3px double @rpt-text-color;
}
.table tr.no-border > th,
.table tr.no-border > td,
.table.no-border tr > th,
.table.no-border tr > td {
border-top: 0px none,
}
.valign-middle {
vertical-align: middle ;
}
.spacer-bottom {
margin-bottom: 10px
}
.spacer-top {
margin-top: 10px
}
.pre-wrap{
white-space: pre-wrap;
}
.pre-line{
white-space: pre-line;
}
@media screen and (max-width:767px){
table, .table{
>tbody, >thead{
>tr{
>td, >th{
padding:2px;
}
}
}
}
}
}
}