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