Mainly experimental stuff for print
This commit is contained in:
Stephan
parent
ed66b9f6ee
commit
d91c029d4d
7 changed files with 245 additions and 69 deletions
|
|
@ -6,6 +6,10 @@
|
|||
|
||||
$default_font_size: 15px !default;
|
||||
$basic_size: $default_font_size;
|
||||
|
||||
$default_print_font_size: 10pt !default;
|
||||
$basic_print_size: $default_print_font_size;
|
||||
|
||||
$size_1: $basic_size * 4;
|
||||
|
||||
$basic_line: 1;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
// Simulate new body element
|
||||
.div_body {
|
||||
.screen_body {
|
||||
width: $basic_width;
|
||||
@media screen and (orientation: landscape) {
|
||||
@media (min-width: $screen_small) {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,109 @@
|
|||
// Print elements
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.div_print {
|
||||
margin: $space_3 auto;
|
||||
%paper {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.dina4 {
|
||||
width: 21.0cm;
|
||||
height: 29.7cm;
|
||||
padding: 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||
$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
|
||||
$a5: ".dina5" 0 0 0 1.2cm;
|
||||
$a6: ".dina6" 0 0 0 1.2cm;
|
||||
|
||||
$din: $a4, $a5, $a6;
|
||||
|
||||
.print_body {
|
||||
font-size: $basic_print_size;
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 4cm;
|
||||
}
|
||||
@page:first {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dina5 {
|
||||
width: 14.8cm;
|
||||
height: 21.0cm;
|
||||
padding: 1.2cm 0.6cm 0.6cm 2.4cm;
|
||||
@each $space in $din {
|
||||
#{nth($space, 1)} {
|
||||
padding-top: nth($space, 2);
|
||||
padding-right: nth($space, 3);
|
||||
padding-bottom: nth($space, 4);
|
||||
padding-left: nth($space, 5);
|
||||
|
||||
.page_head, .page_foot {
|
||||
right: nth($space, 3);
|
||||
left: nth($space, 5);
|
||||
}
|
||||
.page_head {
|
||||
top: nth($space, 2);
|
||||
}
|
||||
.page_foot {
|
||||
bottom: nth($space, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*[class^="din"] {
|
||||
@extend %paper;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
.page_head, .page_foot {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.page_head {
|
||||
page: cover;
|
||||
}
|
||||
|
||||
.page_foot {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
flex: 1 0 auto;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
.page_no {
|
||||
flex: 1 0 auto;
|
||||
font-size: 20pt;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.page_content {
|
||||
margin-top: 10cm;
|
||||
}
|
||||
margin: $space_3 auto;
|
||||
}
|
||||
|
||||
.page_title, .page_date {
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.page_title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page_date, .page_no {
|
||||
@extend %head_1;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.page_author {
|
||||
position: absolute;
|
||||
top: 5cm;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.page_recipient {
|
||||
position: absolute;
|
||||
top: 5cm;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -117,9 +117,11 @@ mark {
|
|||
background-color: $black;
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
}
|
||||
.span_solo {
|
||||
@extend %basic;
|
||||
color: $basic_font_color;
|
||||
@extend %solo;
|
||||
}
|
||||
|
||||
br {
|
||||
|
|
|
|||
|
|
@ -45,12 +45,19 @@
|
|||
line-height: $head_line_4;
|
||||
}
|
||||
|
||||
%solo {
|
||||
@extend %basic;
|
||||
color: $basic_font_color;
|
||||
}
|
||||
|
||||
%short {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis; // vendor
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Specific styles
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
|
|
|
|||
115
example.css
115
example.css
|
|
@ -151,7 +151,7 @@
|
|||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.div_body {
|
||||
.screen_body {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
border-top-width: 8px;
|
||||
|
|
@ -159,17 +159,17 @@
|
|||
border-color: black;
|
||||
padding-top: 32px; }
|
||||
@media screen and (orientation: landscape) and (min-width: 1024px) {
|
||||
.div_body {
|
||||
.screen_body {
|
||||
width: 80%; } }
|
||||
@media screen and (orientation: landscape) and (min-width: 1280px) {
|
||||
.div_body {
|
||||
.screen_body {
|
||||
width: 60%; } }
|
||||
@media screen and (orientation: landscape) and (min-width: 1920px) {
|
||||
.div_body {
|
||||
.screen_body {
|
||||
width: 48%; } }
|
||||
|
||||
@media screen and (orientation: portrait) and (min-width: 1024px) {
|
||||
.div_body {
|
||||
.screen_body {
|
||||
width: 80%; } }
|
||||
|
||||
.relative {
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
border-right: 8px solid rgba(82, 190, 209, 0.6);
|
||||
background-color: rgba(82, 190, 209, 0.1) !important; }
|
||||
|
||||
h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, .span_solo, th, td, legend, label {
|
||||
.span_solo, h6, p, .p_col_2, .p_col_3, caption, li, dt, dd, figcaption, th, td, legend, label {
|
||||
font-family: Trebuchet MS, Helvetica, Arial, sans-serif, sans;
|
||||
font-size: 1em;
|
||||
line-height: 1.5; }
|
||||
|
|
@ -225,7 +225,7 @@ pre, code, .code_solo {
|
|||
font-size: 1em;
|
||||
line-height: 1.5; }
|
||||
|
||||
h1, .exp_help_btn .span_solo {
|
||||
h1, .exp_help_btn .span_solo, .print_body .page_date, .print_body .page_no {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 3.1em;
|
||||
font-weight: 300;
|
||||
|
|
@ -249,6 +249,9 @@ h5 {
|
|||
font-weight: 300;
|
||||
line-height: 1.5; }
|
||||
|
||||
.span_solo {
|
||||
color: black; }
|
||||
|
||||
.table_link .cell_text .shorten {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -437,9 +440,6 @@ mark {
|
|||
color: white;
|
||||
background-color: black; }
|
||||
|
||||
.span_solo {
|
||||
color: black; }
|
||||
|
||||
img {
|
||||
vertical-align: top; }
|
||||
|
||||
|
|
@ -728,19 +728,92 @@ label {
|
|||
-o-transition: height 0.5s ease;
|
||||
transition: height 0.5s ease; }
|
||||
|
||||
.div_print {
|
||||
margin: 32px auto;
|
||||
.print_body *[class^="din"] {
|
||||
background-color: white; }
|
||||
|
||||
.dina4 {
|
||||
width: 21.0cm;
|
||||
height: 29.7cm;
|
||||
padding: 1.2cm 1.2cm 1.2cm 2.4cm; }
|
||||
|
||||
.dina5 {
|
||||
width: 14.8cm;
|
||||
height: 21.0cm;
|
||||
padding: 1.2cm 0.6cm 0.6cm 2.4cm; }
|
||||
.print_body {
|
||||
font-size: 10pt; }
|
||||
@page {
|
||||
.print_body {
|
||||
size: A4;
|
||||
margin: 4cm; } }
|
||||
@page :first {
|
||||
.print_body {
|
||||
size: A4;
|
||||
margin: 0; } }
|
||||
.print_body .dina4 {
|
||||
padding-top: 1.2cm;
|
||||
padding-right: 1.2cm;
|
||||
padding-bottom: 1.2cm;
|
||||
padding-left: 2.4cm; }
|
||||
.print_body .dina4 .page_head, .print_body .dina4 .page_foot {
|
||||
right: 1.2cm;
|
||||
left: 2.4cm; }
|
||||
.print_body .dina4 .page_head {
|
||||
top: 1.2cm; }
|
||||
.print_body .dina4 .page_foot {
|
||||
bottom: 1.2cm; }
|
||||
.print_body .dina5 {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1.2cm; }
|
||||
.print_body .dina5 .page_head, .print_body .dina5 .page_foot {
|
||||
right: 0;
|
||||
left: 1.2cm; }
|
||||
.print_body .dina5 .page_head {
|
||||
top: 0; }
|
||||
.print_body .dina5 .page_foot {
|
||||
bottom: 0; }
|
||||
.print_body .dina6 {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1.2cm; }
|
||||
.print_body .dina6 .page_head, .print_body .dina6 .page_foot {
|
||||
right: 0;
|
||||
left: 1.2cm; }
|
||||
.print_body .dina6 .page_head {
|
||||
top: 0; }
|
||||
.print_body .dina6 .page_foot {
|
||||
bottom: 0; }
|
||||
.print_body *[class^="din"] {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
margin: 32px auto; }
|
||||
.print_body *[class^="din"] .page_head, .print_body *[class^="din"] .page_foot {
|
||||
position: absolute; }
|
||||
.print_body *[class^="din"] .page_head {
|
||||
page: cover; }
|
||||
.print_body *[class^="din"] .page_foot {
|
||||
display: flex;
|
||||
flex-direction: row; }
|
||||
.print_body *[class^="din"] .page_foot *:last-child {
|
||||
margin-bottom: 0; }
|
||||
.print_body *[class^="din"] .page_foot p, .print_body *[class^="din"] .page_foot .p_col_2, .print_body *[class^="din"] .page_foot .p_col_3, .print_body *[class^="din"] .page_foot caption {
|
||||
flex: 1 0 auto;
|
||||
font-size: 8pt; }
|
||||
.print_body *[class^="din"] .page_foot .page_no {
|
||||
flex: 1 0 auto;
|
||||
font-size: 20pt;
|
||||
text-align: right; }
|
||||
.print_body *[class^="din"] .page_content {
|
||||
margin-top: 10cm; }
|
||||
.print_body .page_title, .print_body .page_date {
|
||||
font-size: 14pt; }
|
||||
.print_body .page_title {
|
||||
margin: 0; }
|
||||
.print_body .page_date, .print_body .page_no {
|
||||
float: right; }
|
||||
.print_body .page_author {
|
||||
position: absolute;
|
||||
top: 5cm;
|
||||
right: 0;
|
||||
text-align: right; }
|
||||
.print_body .page_recipient {
|
||||
position: absolute;
|
||||
top: 5cm;
|
||||
left: 0; }
|
||||
|
||||
.test li:after {
|
||||
content: "";
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<div class="exp_overlay_btn exp_help_btn"><span class="span_solo">?</span></div>
|
||||
</div>
|
||||
|
||||
<div class="div_body">
|
||||
<div class="screen_body">
|
||||
Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
|
||||
<p>Es wirken nur die Eigenschaften des <code><body></code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
|
||||
<h1>Bereiche</h1>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue