lion/nn.word
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement flex

Browse source
This commit is contained in:
Alexander Mahr 2023-06-22 07:00:56 +02:00
parent ec7bbee3e2
commit d61b125a98
1 changed files with 46 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
word.html
View file

@ -16,9 +16,6 @@
html{ html{
padding-top:50px; padding-top:50px;
} }
head{
display: block;
}
#header{ #header{
top:0; top:0;
z-index:1; z-index:1;
@ -41,6 +38,19 @@
border: 1px solid black; border: 1px solid black;
padding:4px; padding:4px;
} }
.nsheet {
margin: 0;
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
height: 307mm;
width: 100%;
background-color:#fff;
position:relative;
border:0;
display:block;
}
.sheet { .sheet {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@ -71,31 +81,51 @@
</style> </style>
</head> </head>
<body> <body>
<iframe class='sheet' src='data:text/html;charset=utf-8, <iframe class='nsheet' src='data:text/html;charset=utf-8,
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
</head> </head>
<body> <body>
<style> <style>
body{background-color:blue;
</style>
</body>
</html>
'></iframe>
<iframe class='sheet' src='data:text/html;charset=utf-8,
<!DOCTYPE html>
<html>
<head>
</head>
<body style="display:flex;justify-content:space-between">
<style>
* { box-sizing:border-box; font-family:sans; } * { box-sizing:border-box; font-family:sans; }
.style { .style {
display:block ; display:block ;
background-color:rgb(255,255,200); background-color:rgb(255,255,200);
position:absolute; flex: 1 1 fit-content;
top:0; top:0;
left:0; left:0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
width:50%; width:20%;
transform: scale(0.2) translate(-200%,0); max-width:100px;
transition: transform .2s ease; min-width:100px;
/* transform: scale(0.2) translate(-200%,0);
transition: transform .2s ease;*/
transition: max-width .2s ease;
z-index:1; z-index:1;
height:fit-content;
max-height:90%;
} }
.styleCss { .styleCss {
color:green; color:green;
width:100%; width:100%;
min-width:500px;
display:inline-block; display:inline-block;
max-height:90vh; max-height:90vh;
min-height:20vh; min-height:20vh;
@ -105,7 +135,8 @@
} }
.style:focus-within { .style:focus-within {
transform: translate(0,0) scale(1); /* transform: translate(0,0) scale(1);*/
max-width:50%;
color:blue; color:blue;
} }
.style:focus-within + .sheet { .style:focus-within + .sheet {
@ -118,14 +149,14 @@ body { width: 100%; overflow:auto; margin:0;}
body { color:green; width: var(--page-width); height:var(--page-height)} body { color:green; width: var(--page-width); height:var(--page-height)}
.sheet { .sheet {
overflow: hidden; overflow: hidden;
margin:auto; margin:0cm 1cm;
box-sizing: border-box; box-sizing: border-box;
page-break-after: always; page-break-after: always;
height: 297mm; height: 297mm;
height: var(--page-height); height: var(--page-height);
width: 210mm; width: 210mm;
width: var(--page-width); width: var(--page-width);
position:relative; flex:0 0 var(--page-width);
display:block; display:block;
padding: 2cm; padding: 2cm;
transition: transform .2s ease; transition: transform .2s ease;
@ -157,8 +188,12 @@ body { color:green; width: var(--page-width); height:var(--page-height)}
} }
</style></div> </style></div>
<div class="sheet" contenteditable="true">sheet</div> <div class="sheet" contenteditable="true">sheet</div>
<div style="flex:0 0 0;width:0px;height:0px"></div>
</body> </body>
</html> </html>
'></iframe>
<iframe class='newsheet' src='data:text/html;charset=utf-8,
'></iframe> '></iframe>
<iframe class='sheet' src='data:text/html;charset=utf-8, <iframe class='sheet' src='data:text/html;charset=utf-8,
<!DOCTYPE html> <!DOCTYPE html>