pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 21:05:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

[SSE] Skeleton formula bar for internal

Browse Source
This commit is contained in:
Alexey Koshelev
2025-05-27 12:47:20 +03:00
parent fd5db55fb6
commit 1c87d754c8
2 changed files with 87 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/spreadsheeteditor/main/index_internal.html
View File

@ -17,6 +17,14 @@
--canvas-page-border: #555;
}
.loadmask {
--sk-height-formula: 32px;
--sk-padding-formula: 4px 10px;
--sk-border-style-formula: none;
--sk-gap-formula-field: 28px;
--sk-border-radius-formula-field: 3px;
}
.loadmask {
left: 0;
top: 0;
@ -38,9 +46,13 @@
}
.loadmask > .skformula {
padding: 0 0 4px 0;
padding: var(--sk-padding-formula);
height: 24px;
height: var(--sk-height-formula);
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
background-color: var(--sk-background-toolbar, #f7f7f7);
box-sizing: border-box;
}
.loadmask > .skformula ul {
@ -48,30 +60,51 @@
font-size: 0;
box-sizing: border-box;
border-style: solid;
border-style: var(--sk-border-style-formula);
border-width: 1px;
border-width: var(--scaled-one-px-value, 1px);
border-color: #cbcbcb transparent;
border-color: var(--border-toolbar, #cbcbcb) transparent;
border-top: 0 none;
display: flex;
height: 100%;
}
.loadmask > .skformula li {
display: inline-block;
box-sizing: border-box;
height: 19px;
width: 100%;
margin-left: 20px;
background: #fff;
background: var(--background-normal, #fff);
border-style: solid;
border-width: 1px;
border-width: var(--scaled-one-px-value, 1px);
border-color: transparent #cbcbcb;
border-color: transparent var(--border-toolbar, #cbcbcb);
border-left: 1px solid #cbcbcb;
border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
border-radius: 0px;
border-radius: var(--sk-border-radius-formula-field, 0px);
flex-grow: 1;
}
.loadmask > .skformula li:first-child {
width: 100px;
margin-left: 0;
flex-grow: 0;
margin-right: 20px;
margin-right: var(--sk-gap-formula-field);
border-left: 0 none;
border-right: 1px solid #cbcbcb;
border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
}
.rtl .loadmask > .skformula li {
border-left: 0 none;
border-right: 1px solid #cbcbcb;
border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
}
.rtl .loadmask > .skformula li:first-child {
margin-right: 0;
margin-left: 20px;
margin-left: var(--sk-gap-formula-field);
border-right: 0 none;
border-left: 1px solid #cbcbcb;
border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
}
.loadmask > .placeholder {

55
apps/spreadsheeteditor/main/index_internal.html.deploy
View File

@ -11,6 +11,14 @@
<!-- splash -->
<style type="text/css">
.loadmask {
--sk-height-formula: 32px;
--sk-padding-formula: 4px 10px;
--sk-border-style-formula: none;
--sk-gap-formula-field: 28px;
--sk-border-radius-formula-field: 3px;
}
.loadmask {
left: 0;
top: 0;
@ -32,9 +40,13 @@
}
.loadmask>.skformula {
padding: 0 0 4px 0;
padding: var(--sk-padding-formula);
height: 24px;
height: var(--sk-height-formula);
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
background-color: var(--sk-background-toolbar, #f7f7f7);
box-sizing: border-box;
}
.loadmask>.skformula ul {
@ -42,30 +54,51 @@
font-size: 0;
box-sizing: border-box;
border-style: solid;
border-style: var(--sk-border-style-formula);
border-width: 1px;
border-width: var(--scaled-one-px-value, 1px);
border-color: #cbcbcb transparent;
border-color: var(--border-toolbar, #cbcbcb) transparent;
border-top: 0 none;
display: flex;
height: 100%;
}
.loadmask>.skformula li {
display: inline-block;
box-sizing: border-box;
height: 19px;
width: 100%;
margin-left: 20px;
background: #fff;
background: var(--background-normal, #fff);
border-style: solid;
border-width: 1px;
border-width: var(--scaled-one-px-value, 1px);
border-color: #cbcbcb;
border-color: transparent var(--border-toolbar, #cbcbcb);
border-left: 1px solid #cbcbcb;
border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
border-radius: 0px;
border-radius: var(--sk-border-radius-formula-field, 0px);
flex-grow: 1;
}
.loadmask>.skformula li:first-child {
.loadmask > .skformula li:first-child {
width: 100px;
margin-left: 0;
flex-grow: 0;
margin-right: 20px;
margin-right: var(--sk-gap-formula-field);
border-left: 0 none;
border-right: 1px solid #cbcbcb;
border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
}
.rtl .loadmask > .skformula li {
border-left: 0 none;
border-right: 1px solid #cbcbcb;
border-right: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
}
.rtl .loadmask > .skformula li:first-child {
margin-right: 0;
margin-left: 20px;
margin-left: var(--sk-gap-formula-field);
border-right: 0 none;
border-left: 1px solid #cbcbcb;
border-left: var(--scaled-one-px-value, 1px) var(--sk-border-style-formula) var(--border-toolbar, #cbcbcb);
}
.loadmask > .placeholder {