@progress/kendo-themes-html 12.0.2-dev.1 → 12.1.0-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-themes-html",
|
|
3
3
|
"description": "A collection of HTML helpers used for developing Kendo UI themes",
|
|
4
|
-
"version": "12.0
|
|
4
|
+
"version": "12.1.0-dev.0",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"react-dom": "^19.0.0",
|
|
62
62
|
"ts-jest": "^29.2.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "b1609a5c919e4965dd210cd03499604f10582cf9"
|
|
65
65
|
}
|
|
@@ -1,580 +0,0 @@
|
|
|
1
|
-
import { Button } from '../../button';
|
|
2
|
-
import { ButtonGroup } from '../../button-group';
|
|
3
|
-
import { Combobox } from '../../combobox';
|
|
4
|
-
import { DropdownList } from '../../dropdownlist';
|
|
5
|
-
import { Icon } from '../../icon';
|
|
6
|
-
import { MenuButton } from '../../menu-button';
|
|
7
|
-
import { Toolbar, ToolbarSeparator } from '../../toolbar';
|
|
8
|
-
import { TooltipNormal } from "../../tooltip";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const style = `
|
|
12
|
-
.k-spreadsheet-view {
|
|
13
|
-
overflow: hidden;
|
|
14
|
-
}
|
|
15
|
-
.k-spreadsheet-fixed-container {
|
|
16
|
-
width: calc( 100% - var(--kendo-scrollbar-width, 0) );
|
|
17
|
-
height: calc( 100% - var(--kendo-scrollbar-width, 0) );
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
}
|
|
20
|
-
.k-spreadsheet-cell {
|
|
21
|
-
white-space: normal;
|
|
22
|
-
}
|
|
23
|
-
.k-spreadsheet-formula-input {
|
|
24
|
-
white-space: normal;
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
|
-
|
|
28
|
-
export default () =>(
|
|
29
|
-
<>
|
|
30
|
-
<style>{style}</style>
|
|
31
|
-
<div id="test-area">
|
|
32
|
-
<div className="k-widget k-spreadsheet k-spreadsheet-legacy">
|
|
33
|
-
<div className="k-tabstrip-wrapper">
|
|
34
|
-
<div className="k-spreadsheet-quick-access-toolbar">
|
|
35
|
-
<Button icon="undo"></Button>
|
|
36
|
-
<Button icon="redo"></Button>
|
|
37
|
-
</div>
|
|
38
|
-
<div className="k-widget k-header k-tabstrip k-tabstrip-top k-spreadsheet-tabstrip">
|
|
39
|
-
<div className="k-tabstrip-items-wrapper k-hstack">
|
|
40
|
-
<ul className="k-tabstrip-items k-reset" style={{ paddingLeft: "76px" }}>
|
|
41
|
-
<li className="k-item k-first k-active">
|
|
42
|
-
<span className="k-loading k-complete"></span>
|
|
43
|
-
<span className="k-link">Home</span>
|
|
44
|
-
</li>
|
|
45
|
-
<li className="k-item">
|
|
46
|
-
<span className="k-loading k-complete"></span>
|
|
47
|
-
<span className="k-link">Insert</span>
|
|
48
|
-
</li>
|
|
49
|
-
<li className="k-item k-last">
|
|
50
|
-
<span className="k-loading k-complete"></span>
|
|
51
|
-
<span className="k-link">Data</span>
|
|
52
|
-
</li>
|
|
53
|
-
</ul>
|
|
54
|
-
</div>
|
|
55
|
-
<div className="k-tabstrip-content k-active" style={{ display: "block" }}>
|
|
56
|
-
<Toolbar className="k-spreadsheet-toolbar" resizable>
|
|
57
|
-
<Button icon="folder-open" className="k-upload-button"></Button>
|
|
58
|
-
<Button icon="download"></Button>
|
|
59
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
60
|
-
<ButtonGroup>
|
|
61
|
-
<Button className="k-group-start" icon="cut"></Button>
|
|
62
|
-
<Button icon="copy"></Button>
|
|
63
|
-
<Button className="k-group-end" icon="clipboard"></Button>
|
|
64
|
-
</ButtonGroup>
|
|
65
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
66
|
-
<DropdownList value="Arial" />
|
|
67
|
-
<Combobox placeholder="12" />
|
|
68
|
-
<ButtonGroup>
|
|
69
|
-
<Button className="k-group-start" icon="bold"></Button>
|
|
70
|
-
<Button icon="italic"></Button>
|
|
71
|
-
<Button className="k-group-end" icon="underline"></Button>
|
|
72
|
-
</ButtonGroup>
|
|
73
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
74
|
-
<MenuButton icon="foreground-color" showArrow></MenuButton>
|
|
75
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
76
|
-
<MenuButton icon="droplet" showArrow></MenuButton>
|
|
77
|
-
<MenuButton icon="borders-all" showArrow></MenuButton>
|
|
78
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
79
|
-
<MenuButton icon="align-left" showArrow></MenuButton>
|
|
80
|
-
<Button icon="text-wrap"></Button>
|
|
81
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
82
|
-
<ButtonGroup>
|
|
83
|
-
<Button className="k-group-start" icon="decimal-decrease"></Button>
|
|
84
|
-
<Button className="k-group-end" icon="decimal-increase"></Button>
|
|
85
|
-
</ButtonGroup>
|
|
86
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
87
|
-
<Button icon="filter"></Button>
|
|
88
|
-
<DropdownList value="Custom format" showValue={false} valueIconName="custom-format" />
|
|
89
|
-
<Button icon="link"></Button>
|
|
90
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
91
|
-
<Button icon="image"></Button>
|
|
92
|
-
<Button icon="comment"></Button>
|
|
93
|
-
<ToolbarSeparator></ToolbarSeparator>
|
|
94
|
-
<MenuButton icon="pane-freeze" showArrow></MenuButton>
|
|
95
|
-
<MenuButton icon="cells-merge" showArrow></MenuButton>
|
|
96
|
-
<Button icon="borders-none"></Button>
|
|
97
|
-
</Toolbar>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
<div className="k-spreadsheet-action-bar">
|
|
102
|
-
<div className="k-spreadsheet-name-editor">
|
|
103
|
-
<Combobox placeholder="Combobox..." />
|
|
104
|
-
</div>
|
|
105
|
-
<div className="k-spreadsheet-formula-bar">
|
|
106
|
-
<Icon icon="formula-fx"></Icon>
|
|
107
|
-
<div className="k-spreadsheet-formula-input k-spreadsheet-array-formula">
|
|
108
|
-
<span className="k-syntax-startexp k-syntax-at-point">=</span>
|
|
109
|
-
<span className="k-syntax-func">Product</span>
|
|
110
|
-
<span className="k-syntax-punc">(</span>
|
|
111
|
-
<span className="k-syntax-ref k-series-a">C3:C11</span>
|
|
112
|
-
<span className="k-syntax-punc">)</span>
|
|
113
|
-
</div>
|
|
114
|
-
<TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
|
|
115
|
-
<div className="k-group-header" style={{ display: "none" }}></div>
|
|
116
|
-
<div className="k-list-scroller"></div>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
<div className="k-spreadsheet-view">
|
|
120
|
-
<div className="k-spreadsheet-fixed-container">
|
|
121
|
-
<div className="k-spreadsheet-pane k-top k-left" style={{ top: '0px', left: '0px', height: "100%", width: '100%' }}>
|
|
122
|
-
<div className="k-spreadsheet-data" style={{ position: "relative", left: "32px", top: "20px" }}>
|
|
123
|
-
<div className="k-spreadsheet-vaxis" style={{ left: '0px', height: "410px" }}></div>
|
|
124
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "100px", height: "410px" }}></div>
|
|
125
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "315px", height: "410px" }}></div>
|
|
126
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "430px", height: "410px" }}></div>
|
|
127
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "545px", height: "410px" }}></div>
|
|
128
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "660px", height: "410px" }}></div>
|
|
129
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "815px", height: "410px" }}></div>
|
|
130
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "879px", height: "410px" }}></div>
|
|
131
|
-
<div className="k-spreadsheet-vaxis" style={{ left: "943px", height: "410px" }}></div>
|
|
132
|
-
<div className="k-spreadsheet-haxis" style={{ top: '0px', width: "943px" }}></div>
|
|
133
|
-
<div className="k-spreadsheet-haxis" style={{ top: "70px", width: "943px" }}></div>
|
|
134
|
-
<div className="k-spreadsheet-haxis" style={{ top: "95px", width: "943px" }}></div>
|
|
135
|
-
<div className="k-spreadsheet-haxis" style={{ top: "115px", width: "943px" }}></div>
|
|
136
|
-
<div className="k-spreadsheet-haxis" style={{ top: "135px", width: "943px" }}></div>
|
|
137
|
-
<div className="k-spreadsheet-haxis" style={{ top: "155px", width: "943px" }}></div>
|
|
138
|
-
<div className="k-spreadsheet-haxis" style={{ top: "175px", width: "943px" }}></div>
|
|
139
|
-
<div className="k-spreadsheet-haxis" style={{ top: "195px", width: "943px" }}></div>
|
|
140
|
-
<div className="k-spreadsheet-haxis" style={{ top: "215px", width: "943px" }}></div>
|
|
141
|
-
<div className="k-spreadsheet-haxis" style={{ top: "235px", width: "943px" }}></div>
|
|
142
|
-
<div className="k-spreadsheet-haxis" style={{ top: "255px", width: "943px" }}></div>
|
|
143
|
-
<div className="k-spreadsheet-haxis" style={{ top: "275px", width: "943px" }}></div>
|
|
144
|
-
<div className="k-spreadsheet-haxis" style={{ top: "295px", width: "943px" }}></div>
|
|
145
|
-
<div className="k-spreadsheet-haxis" style={{ top: "315px", width: "943px" }}></div>
|
|
146
|
-
<div className="k-spreadsheet-haxis" style={{ top: "340px", width: "943px" }}></div>
|
|
147
|
-
<div className="k-spreadsheet-haxis" style={{ top: "390px", width: "943px" }}></div>
|
|
148
|
-
<div className="k-spreadsheet-haxis" style={{ top: "410px", width: "943px" }}></div>
|
|
149
|
-
<div className="k-spreadsheet-cell k-spreadsheet-merged-cell" style={{ outline: "rgb(86, 163, 230) solid 1px", backgroundColor: "rgb(96, 181, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "32px", left: "1px", top: "1px", width: "878px", height: "69px" }}>
|
|
150
|
-
<div className="k-vertical-align-bottom">Invoice #52 - 06/23/2015</div>
|
|
151
|
-
</div>
|
|
152
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(150, 193, 230) solid 1px", backgroundColor: "rgb(167, 214, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "71px", width: "99px", height: "24px" }}>
|
|
153
|
-
<div className="k-vertical-align-bottom">ID</div>
|
|
154
|
-
</div>
|
|
155
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(150, 193, 230) solid 1px", backgroundColor: "rgb(167, 214, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "101px", top: "71px", width: "214px", height: "24px" }}>
|
|
156
|
-
<div className="k-vertical-align-bottom">Product</div>
|
|
157
|
-
</div>
|
|
158
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(150, 193, 230) solid 1px", backgroundColor: "rgb(167, 214, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "71px", width: "114px", height: "24px" }}>
|
|
159
|
-
<div className="k-vertical-align-bottom">Quantity</div>
|
|
160
|
-
</div>
|
|
161
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(150, 193, 230) solid 1px", backgroundColor: "rgb(167, 214, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "431px", top: "71px", width: "114px", height: "24px" }}>
|
|
162
|
-
<div className="k-vertical-align-bottom">Price</div>
|
|
163
|
-
</div>
|
|
164
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(150, 193, 230) solid 1px", backgroundColor: "rgb(167, 214, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "546px", top: "71px", width: "114px", height: "24px" }}>
|
|
165
|
-
<div className="k-vertical-align-bottom">Tax</div>
|
|
166
|
-
</div>
|
|
167
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(150, 193, 230) solid 1px", backgroundColor: "rgb(167, 214, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "661px", top: "71px", width: "154px", height: "24px" }}>
|
|
168
|
-
<div className="k-vertical-align-bottom">Amount</div>
|
|
169
|
-
</div>
|
|
170
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(150, 193, 230) solid 1px", backgroundColor: "rgb(167, 214, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "71px", width: "63px", height: "24px" }}>
|
|
171
|
-
</div>
|
|
172
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "96px", width: "99px", height: "19px" }}>
|
|
173
|
-
<div className="k-vertical-align-bottom">216321</div>
|
|
174
|
-
</div>
|
|
175
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "96px", width: "214px", height: "19px" }}>
|
|
176
|
-
<div className="k-vertical-align-bottom">Calzone</div>
|
|
177
|
-
</div>
|
|
178
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "96px", width: "114px", height: "19px" }}>
|
|
179
|
-
<div className="k-vertical-align-bottom">1</div>
|
|
180
|
-
</div>
|
|
181
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "96px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
182
|
-
<div className="k-vertical-align-bottom"><span>$12.39</span></div>
|
|
183
|
-
</div>
|
|
184
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "96px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
185
|
-
<div className="k-vertical-align-bottom"><span>$2.48</span></div>
|
|
186
|
-
</div>
|
|
187
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "96px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
188
|
-
<div className="k-vertical-align-bottom"><span>$14.87</span></div>
|
|
189
|
-
</div>
|
|
190
|
-
<div className="k-spreadsheet-cell k-single k-spreadsheet-has-comment k-dirty-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "96px", width: "63px", height: "19px" }}>
|
|
191
|
-
<span className="k-dirty"></span>
|
|
192
|
-
</div>
|
|
193
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "116px", width: "99px", height: "19px" }}>
|
|
194
|
-
<div className="k-vertical-align-bottom">546897</div>
|
|
195
|
-
</div>
|
|
196
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "116px", width: "214px", height: "19px" }}>
|
|
197
|
-
<div className="k-vertical-align-bottom">Margarita</div>
|
|
198
|
-
</div>
|
|
199
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "116px", width: "114px", height: "19px" }}>
|
|
200
|
-
<div className="k-vertical-align-bottom">2</div>
|
|
201
|
-
</div>
|
|
202
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "116px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
203
|
-
<div className="k-vertical-align-bottom"><span>$8.79</span></div>
|
|
204
|
-
</div>
|
|
205
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "116px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
206
|
-
<div className="k-vertical-align-bottom"><span>$3.52</span></div>
|
|
207
|
-
</div>
|
|
208
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "116px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
209
|
-
<div className="k-vertical-align-bottom"><span>$21.10</span></div>
|
|
210
|
-
</div>
|
|
211
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "116px", width: "63px", height: "19px" }}>
|
|
212
|
-
</div>
|
|
213
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "136px", width: "99px", height: "19px" }}>
|
|
214
|
-
<div className="k-vertical-align-bottom">456231</div>
|
|
215
|
-
</div>
|
|
216
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "136px", width: "214px", height: "19px" }}>
|
|
217
|
-
<div className="k-vertical-align-bottom">Pollo Formaggio</div>
|
|
218
|
-
</div>
|
|
219
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "136px", width: "114px", height: "19px" }}>
|
|
220
|
-
<div className="k-vertical-align-bottom">1</div>
|
|
221
|
-
</div>
|
|
222
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "136px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
223
|
-
<div className="k-vertical-align-bottom"><span>$13.99</span></div>
|
|
224
|
-
</div>
|
|
225
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "136px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
226
|
-
<div className="k-vertical-align-bottom"><span>$2.80</span></div>
|
|
227
|
-
</div>
|
|
228
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "136px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
229
|
-
<div className="k-vertical-align-bottom"><span>$16.79</span></div>
|
|
230
|
-
</div>
|
|
231
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "136px", width: "63px", height: "19px" }}>
|
|
232
|
-
</div>
|
|
233
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "156px", width: "99px", height: "19px" }}>
|
|
234
|
-
<div className="k-vertical-align-bottom">455873</div>
|
|
235
|
-
</div>
|
|
236
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "156px", width: "214px", height: "19px" }}>
|
|
237
|
-
<div className="k-vertical-align-bottom">Greek Salad</div>
|
|
238
|
-
</div>
|
|
239
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "156px", width: "114px", height: "19px" }}>
|
|
240
|
-
<div className="k-vertical-align-bottom">1</div>
|
|
241
|
-
</div>
|
|
242
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "156px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
243
|
-
<div className="k-vertical-align-bottom"><span>$9.49</span></div>
|
|
244
|
-
</div>
|
|
245
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "156px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
246
|
-
<div className="k-vertical-align-bottom"><span>$1.90</span></div>
|
|
247
|
-
</div>
|
|
248
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "156px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
249
|
-
<div className="k-vertical-align-bottom"><span>$11.39</span></div>
|
|
250
|
-
</div>
|
|
251
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "156px", width: "63px", height: "19px" }}>
|
|
252
|
-
</div>
|
|
253
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "176px", width: "99px", height: "19px" }}>
|
|
254
|
-
<div className="k-vertical-align-bottom">456892</div>
|
|
255
|
-
</div>
|
|
256
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "176px", width: "214px", height: "19px" }}>
|
|
257
|
-
<div className="k-vertical-align-bottom">Spinach and Blue Cheese</div>
|
|
258
|
-
</div>
|
|
259
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "176px", width: "114px", height: "19px" }}>
|
|
260
|
-
<div className="k-vertical-align-bottom">3</div>
|
|
261
|
-
</div>
|
|
262
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "176px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
263
|
-
<div className="k-vertical-align-bottom"><span>$11.49</span></div>
|
|
264
|
-
</div>
|
|
265
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "176px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
266
|
-
<div className="k-vertical-align-bottom"><span>$6.89</span></div>
|
|
267
|
-
</div>
|
|
268
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "176px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
269
|
-
<div className="k-vertical-align-bottom"><span>$41.36</span></div>
|
|
270
|
-
</div>
|
|
271
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "176px", width: "63px", height: "19px" }}>
|
|
272
|
-
</div>
|
|
273
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "196px", width: "99px", height: "19px" }}>
|
|
274
|
-
<div className="k-vertical-align-bottom">546564</div>
|
|
275
|
-
</div>
|
|
276
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "196px", width: "214px", height: "19px" }}>
|
|
277
|
-
<div className="k-vertical-align-bottom">Rigoletto</div>
|
|
278
|
-
</div>
|
|
279
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "196px", width: "114px", height: "19px" }}>
|
|
280
|
-
<div className="k-vertical-align-bottom">1</div>
|
|
281
|
-
</div>
|
|
282
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "196px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
283
|
-
<div className="k-vertical-align-bottom"><span>$10.99</span></div>
|
|
284
|
-
</div>
|
|
285
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "196px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
286
|
-
<div className="k-vertical-align-bottom"><span>$2.20</span></div>
|
|
287
|
-
</div>
|
|
288
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "196px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
289
|
-
<div className="k-vertical-align-bottom"><span>$13.19</span></div>
|
|
290
|
-
</div>
|
|
291
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "196px", width: "63px", height: "19px" }}>
|
|
292
|
-
</div>
|
|
293
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "216px", width: "99px", height: "19px" }}>
|
|
294
|
-
<div className="k-vertical-align-bottom">789455</div>
|
|
295
|
-
</div>
|
|
296
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "216px", width: "214px", height: "19px" }}>
|
|
297
|
-
<div className="k-vertical-align-bottom">Creme Brulee</div>
|
|
298
|
-
</div>
|
|
299
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "216px", width: "114px", height: "19px" }}>
|
|
300
|
-
<div className="k-vertical-align-bottom">5</div>
|
|
301
|
-
</div>
|
|
302
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "216px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
303
|
-
<div className="k-vertical-align-bottom"><span>$6.99</span></div>
|
|
304
|
-
</div>
|
|
305
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "216px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
306
|
-
<div className="k-vertical-align-bottom"><span>$6.99</span></div>
|
|
307
|
-
</div>
|
|
308
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "216px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
309
|
-
<div className="k-vertical-align-bottom"><span>$41.94</span></div>
|
|
310
|
-
</div>
|
|
311
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "216px", width: "63px", height: "19px" }}>
|
|
312
|
-
</div>
|
|
313
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "236px", width: "99px", height: "19px" }}>
|
|
314
|
-
<div className="k-vertical-align-bottom">123002</div>
|
|
315
|
-
</div>
|
|
316
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "236px", width: "214px", height: "19px" }}>
|
|
317
|
-
<div className="k-vertical-align-bottom">Radeberger Beer</div>
|
|
318
|
-
</div>
|
|
319
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "236px", width: "114px", height: "19px" }}>
|
|
320
|
-
<div className="k-vertical-align-bottom">4</div>
|
|
321
|
-
</div>
|
|
322
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "236px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
323
|
-
<div className="k-vertical-align-bottom"><span>$4.99</span></div>
|
|
324
|
-
</div>
|
|
325
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "236px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
326
|
-
<div className="k-vertical-align-bottom"><span>$3.99</span></div>
|
|
327
|
-
</div>
|
|
328
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "236px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
329
|
-
<div className="k-vertical-align-bottom"><span>$23.95</span></div>
|
|
330
|
-
</div>
|
|
331
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "236px", width: "63px", height: "19px" }}>
|
|
332
|
-
</div>
|
|
333
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "1px", top: "256px", width: "99px", height: "19px" }}>
|
|
334
|
-
<div className="k-vertical-align-bottom">564896</div>
|
|
335
|
-
</div>
|
|
336
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "256px", width: "214px", height: "19px" }}>
|
|
337
|
-
<div className="k-vertical-align-bottom">Budweiser Beer</div>
|
|
338
|
-
</div>
|
|
339
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "12px", left: "316px", top: "256px", width: "114px", height: "19px" }}>
|
|
340
|
-
<div className="k-vertical-align-bottom">3</div>
|
|
341
|
-
</div>
|
|
342
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "256px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
343
|
-
<div className="k-vertical-align-bottom"><span>$4.49</span></div>
|
|
344
|
-
</div>
|
|
345
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "256px", width: "114px", height: "19px", textAlign: "right" }}>
|
|
346
|
-
<div className="k-vertical-align-bottom"><span>$2.69</span></div>
|
|
347
|
-
</div>
|
|
348
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "256px", width: "154px", height: "19px", textAlign: "right" }}>
|
|
349
|
-
<div className="k-vertical-align-bottom"><span>$16.16</span></div>
|
|
350
|
-
</div>
|
|
351
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "256px", width: "63px", height: "19px" }}>
|
|
352
|
-
</div>
|
|
353
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "1px", top: "276px", width: "99px", height: "19px" }}>
|
|
354
|
-
</div>
|
|
355
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "276px", width: "214px", height: "19px" }}>
|
|
356
|
-
</div>
|
|
357
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "316px", top: "276px", width: "114px", height: "19px" }}>
|
|
358
|
-
</div>
|
|
359
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "276px", width: "114px", height: "19px" }}>
|
|
360
|
-
</div>
|
|
361
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "276px", width: "114px", height: "19px" }}>
|
|
362
|
-
</div>
|
|
363
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "276px", width: "154px", height: "19px" }}>
|
|
364
|
-
</div>
|
|
365
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(206, 219, 230) solid 1px", backgroundColor: "rgb(229, 243, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "276px", width: "63px", height: "19px" }}>
|
|
366
|
-
</div>
|
|
367
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "1px", top: "296px", width: "99px", height: "19px" }}>
|
|
368
|
-
</div>
|
|
369
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "296px", width: "214px", height: "19px" }}>
|
|
370
|
-
</div>
|
|
371
|
-
<div className="k-spreadsheet-cell k-spreadsheet-drawing-anchor-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "316px", top: "296px", width: "114px", height: "19px" }}>
|
|
372
|
-
</div>
|
|
373
|
-
<div className="k-spreadsheet-drawing k-spreadsheet-active-drawing" style={{ width: "53px", height: "40px", top: "305px", left: "350px" }}>
|
|
374
|
-
<div className="k-spreadsheet-drawing-image" style={{ backgroundImage: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)", opacity: "1" }}>
|
|
375
|
-
</div>
|
|
376
|
-
<div className="k-spreadsheet-drawing-handle N"></div>
|
|
377
|
-
<div className="k-spreadsheet-drawing-handle NE"></div>
|
|
378
|
-
<div className="k-spreadsheet-drawing-handle E"></div>
|
|
379
|
-
<div className="k-spreadsheet-drawing-handle SE"></div>
|
|
380
|
-
<div className="k-spreadsheet-drawing-handle S"></div>
|
|
381
|
-
<div className="k-spreadsheet-drawing-handle SW"></div>
|
|
382
|
-
<div className="k-spreadsheet-drawing-handle W"></div>
|
|
383
|
-
<div className="k-spreadsheet-drawing-handle NW"></div>
|
|
384
|
-
</div>
|
|
385
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "296px", width: "114px", height: "19px" }}>
|
|
386
|
-
</div>
|
|
387
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "546px", top: "296px", width: "114px", height: "19px" }}>
|
|
388
|
-
</div>
|
|
389
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "661px", top: "296px", width: "154px", height: "19px" }}>
|
|
390
|
-
</div>
|
|
391
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(230, 230, 230) solid 1px", backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "296px", width: "63px", height: "19px" }}>
|
|
392
|
-
</div>
|
|
393
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "1px", top: "316px", width: "99px", height: "24px" }}>
|
|
394
|
-
</div>
|
|
395
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "316px", width: "214px", height: "24px" }}>
|
|
396
|
-
</div>
|
|
397
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "316px", top: "316px", width: "114px", height: "24px" }}>
|
|
398
|
-
</div>
|
|
399
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "431px", top: "316px", width: "114px", height: "24px" }}>
|
|
400
|
-
</div>
|
|
401
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "12px", left: "546px", top: "316px", width: "114px", height: "24px" }}>
|
|
402
|
-
<div className="k-vertical-align-bottom">Tip:</div>
|
|
403
|
-
</div>
|
|
404
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontWeight: "bold",fontSize: "12px", left: "661px", top: "316px", width: "154px", height: "24px", textAlign: "right" }}>
|
|
405
|
-
<div className="k-vertical-align-bottom"><span>$20.07</span></div>
|
|
406
|
-
</div>
|
|
407
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "316px", width: "63px", height: "24px" }}>
|
|
408
|
-
</div>
|
|
409
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "1px", top: "341px", width: "99px", height: "49px" }}>
|
|
410
|
-
</div>
|
|
411
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "101px", top: "341px", width: "214px", height: "49px" }}>
|
|
412
|
-
</div>
|
|
413
|
-
<div className="k-spreadsheet-cell k-spreadsheet-merged-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "right", fontSize: "20px", left: "316px", top: "341px", width: "344px", height: "49px" }}>
|
|
414
|
-
<div className="k-vertical-align-bottom">Total Amount:</div>
|
|
415
|
-
</div>
|
|
416
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontWeight: "bold", fontSize: "20px", left: "661px", top: "341px", width: "154px", height: "49px", textAlign: "right" }}>
|
|
417
|
-
<div className="k-vertical-align-bottom"><span>$220.82</span></div>
|
|
418
|
-
</div>
|
|
419
|
-
<div className="k-spreadsheet-cell" style={{ outline: "rgb(174, 203, 230) solid 1px", backgroundColor: "rgb(193, 226, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", fontSize: "12px", left: "816px", top: "341px", width: "63px", height: "49px" }}>
|
|
420
|
-
</div>
|
|
421
|
-
</div>
|
|
422
|
-
<div className="k-selection-wrapper">
|
|
423
|
-
<div className="k-spreadsheet-selection k-single-selection" style={{ width: "216px", height: "21px", top: "135px", left: "132px" }}></div>
|
|
424
|
-
<div className="k-button k-spreadsheet-editor-button" style={{ left: "347px", top: "135px", height: "20px" }}><Icon icon="calendar"></Icon></div>
|
|
425
|
-
<div className="k-spreadsheet-cell k-spreadsheet-active-cell k-top k-single" style={{ outline: "rgb(86, 163, 230) solid 1px", backgroundColor: "rgb(96, 181, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "32px", left: "33px", top: "21px", width: "878px", height: "69px" }}>
|
|
426
|
-
<div className="k-vertical-align-bottom">Invoice #52 - 06/23/2015</div>
|
|
427
|
-
</div>
|
|
428
|
-
</div>
|
|
429
|
-
<div className="k-auto-fill-wrapper"></div>
|
|
430
|
-
<div className="k-selection-wrapper"></div>
|
|
431
|
-
<div className="k-filter-wrapper">
|
|
432
|
-
<div className="k-filter-range" style={{ width: "816px", height: "206px", top: "90px", left: "32px" }}></div>
|
|
433
|
-
<span className="k-spreadsheet-filter" style={{ left: "113px", top: "93px" }}>
|
|
434
|
-
<Icon icon="caret-alt-down"></Icon>
|
|
435
|
-
</span>
|
|
436
|
-
<span className="k-spreadsheet-filter" style={{ left: "328px", top: "93px" }}>
|
|
437
|
-
<Icon icon="caret-alt-down"></Icon>
|
|
438
|
-
</span>
|
|
439
|
-
<span className="k-spreadsheet-filter" style={{ left: "443px", top: "93px" }}>
|
|
440
|
-
<Icon icon="caret-alt-down"></Icon>
|
|
441
|
-
</span>
|
|
442
|
-
<span className="k-spreadsheet-filter" style={{ left: "558px", top: "93px" }}>
|
|
443
|
-
<Icon icon="caret-alt-down"></Icon>
|
|
444
|
-
</span>
|
|
445
|
-
<span className="k-spreadsheet-filter" style={{ left: "673px", top: "93px" }}>
|
|
446
|
-
<Icon icon="caret-alt-down"></Icon>
|
|
447
|
-
</span>
|
|
448
|
-
<span className="k-spreadsheet-filter" style={{ left: "828px", top: "93px" }}>
|
|
449
|
-
<Icon icon="caret-alt-down"></Icon>
|
|
450
|
-
</span>
|
|
451
|
-
</div>
|
|
452
|
-
<div className="k-spreadsheet-row-header" style={{ width: "32px", top: "20px" }}>
|
|
453
|
-
<div className="k-selection-partial" style={{ width: "32px", height: "70px" }}>
|
|
454
|
-
<div className="k-vertical-align-center">1</div>
|
|
455
|
-
</div>
|
|
456
|
-
<div className="k-selection-none" style={{ width: "32px", height: "25px" }}>
|
|
457
|
-
<div className="k-vertical-align-center">2</div>
|
|
458
|
-
</div>
|
|
459
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
460
|
-
<div className="k-vertical-align-center">3</div>
|
|
461
|
-
</div>
|
|
462
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
463
|
-
<div className="k-vertical-align-center">4</div>
|
|
464
|
-
</div>
|
|
465
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
466
|
-
<div className="k-vertical-align-center">5</div>
|
|
467
|
-
</div>
|
|
468
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
469
|
-
<div className="k-vertical-align-center">6</div>
|
|
470
|
-
</div>
|
|
471
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
472
|
-
<div className="k-vertical-align-center">7</div>
|
|
473
|
-
</div>
|
|
474
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
475
|
-
<div className="k-vertical-align-center">8</div>
|
|
476
|
-
</div>
|
|
477
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
478
|
-
<div className="k-vertical-align-center">9</div>
|
|
479
|
-
</div>
|
|
480
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
481
|
-
<div className="k-vertical-align-center">10</div>
|
|
482
|
-
</div>
|
|
483
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
484
|
-
<div className="k-vertical-align-center">11</div>
|
|
485
|
-
</div>
|
|
486
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
487
|
-
<div className="k-vertical-align-center">12</div>
|
|
488
|
-
</div>
|
|
489
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
490
|
-
<div className="k-vertical-align-center">13</div>
|
|
491
|
-
</div>
|
|
492
|
-
<div className="k-selection-none" style={{ width: "32px", height: "25px" }}>
|
|
493
|
-
<div className="k-vertical-align-center">14</div>
|
|
494
|
-
</div>
|
|
495
|
-
<div className="k-selection-none" style={{ width: "32px", height: '50px' }}>
|
|
496
|
-
<div className="k-vertical-align-center">15</div>
|
|
497
|
-
</div>
|
|
498
|
-
<div className="k-selection-none" style={{ width: "32px", height: "20px" }}>
|
|
499
|
-
<div className="k-vertical-align-center">16</div>
|
|
500
|
-
</div>
|
|
501
|
-
</div>
|
|
502
|
-
<div className="k-spreadsheet-column-header" style={{ top: '0px', left: "32px", width: "943px", height: "20px" }}>
|
|
503
|
-
<div className="k-selection-partial" style={{ position: "absolute", left: '0px', width: "100px", height: "20px" }}>
|
|
504
|
-
<div className="k-vertical-align-center">A</div>
|
|
505
|
-
</div>
|
|
506
|
-
<div className="k-selection-partial" style={{ position: "absolute", left: "100px", width: "215px", height: "20px" }}>
|
|
507
|
-
<div className="k-vertical-align-center">B</div>
|
|
508
|
-
</div>
|
|
509
|
-
<div className="k-selection-partial" style={{ position: "absolute", left: "315px", width: "115px", height: "20px" }}>
|
|
510
|
-
<div className="k-vertical-align-center">C</div>
|
|
511
|
-
</div>
|
|
512
|
-
<div className="k-selection-partial" style={{ position: "absolute", left: "430px", width: "115px", height: "20px" }}>
|
|
513
|
-
<div className="k-vertical-align-center">D</div>
|
|
514
|
-
</div>
|
|
515
|
-
<div className="k-selection-partial" style={{ position: "absolute", left: "545px", width: "115px", height: "20px" }}>
|
|
516
|
-
<div className="k-vertical-align-center">E</div>
|
|
517
|
-
</div>
|
|
518
|
-
<div className="k-selection-partial" style={{ position: "absolute", left: "660px", width: "155px", height: "20px" }}>
|
|
519
|
-
<div className="k-vertical-align-center">F</div>
|
|
520
|
-
</div>
|
|
521
|
-
<div className="k-selection-partial" style={{ position: "absolute", left: "815px", width: "64px", height: "20px" }}>
|
|
522
|
-
<div className="k-vertical-align-center">G</div>
|
|
523
|
-
</div>
|
|
524
|
-
<div className="k-selection-none" style={{ position: "absolute", left: "879px", width: "64px", height: "20px" }}>
|
|
525
|
-
<div className="k-vertical-align-center">H</div>
|
|
526
|
-
</div>
|
|
527
|
-
</div>
|
|
528
|
-
</div>
|
|
529
|
-
<div className="k-spreadsheet-top-corner" style={{ width: "32px", height: "20px" }}></div>
|
|
530
|
-
</div>
|
|
531
|
-
<div className="k-spreadsheet-scroller">
|
|
532
|
-
<div className="k-spreadsheet-view-size" style={{ height: "200%", width: "200%" }}></div>
|
|
533
|
-
</div>
|
|
534
|
-
<div className="k-spreadsheet-clipboard">
|
|
535
|
-
<table className="kendo-clipboard-9e2af5b1-fb37-4868-83b5-033657aa47e5" style={{ left: '0px', top: '0px', height: "70px", width: "879px" }}>
|
|
536
|
-
<colgroup>
|
|
537
|
-
<col style={{ width: "100px" }} />
|
|
538
|
-
<col style={{ width: "215px" }} />
|
|
539
|
-
<col style={{ width: "115px" }} />
|
|
540
|
-
<col style={{ width: "115px" }} />
|
|
541
|
-
<col style={{ width: "115px" }} />
|
|
542
|
-
<col style={{ width: "155px" }} />
|
|
543
|
-
<col style={{ width: "64px" }} />
|
|
544
|
-
</colgroup>
|
|
545
|
-
<tbody>
|
|
546
|
-
<tr style={{ height: "70px" }}>
|
|
547
|
-
<td colSpan={7} rowSpan={1} style={{ backgroundColor: "rgb(96, 181, 255)", color: "white", fontFamily: "Arial", textAlign: "center", fontSize: "32px", borderColor: "rgb(96, 181, 255)" }}>
|
|
548
|
-
Invoice #52 - 06/23/2015</td>
|
|
549
|
-
</tr>
|
|
550
|
-
</tbody>
|
|
551
|
-
</table>
|
|
552
|
-
</div>
|
|
553
|
-
<div className="k-spreadsheet-cell-editor k-spreadsheet-formula-input" style={{ whiteSpace: "pre" }}>Invoice #52 - 06/23/2015</div>
|
|
554
|
-
<TooltipNormal content="A1" style={{ position: "absolute", display: "none" }} />
|
|
555
|
-
<div className="k-group-header" style={{ display: "none" }}></div>
|
|
556
|
-
<div className="k-list-scroller"></div>
|
|
557
|
-
</div>
|
|
558
|
-
<div className="k-spreadsheet-sheets-bar k-widget k-header">
|
|
559
|
-
<Button icon="plus" className="k-spreadsheet-sheets-bar-add"></Button>
|
|
560
|
-
<div className="k-spreadsheet-sheets-items k-tabstrip-scrollable k-tabstrip k-tabstrip-bottom">
|
|
561
|
-
<div className="k-tabstrip-items-wrapper k-hstack">
|
|
562
|
-
<Button fillMode="flat" rounded={null} size={null} icon="caret-alt-left" className="k-tabstrip-prev"></Button>
|
|
563
|
-
<ul className="k-reset k-tabstrip-items">
|
|
564
|
-
<li className="k-item k-active k-spreadsheet-sheets-bar-active">
|
|
565
|
-
<span className="k-link">Food Order</span>
|
|
566
|
-
<Button fillMode="flat" icon="x" className="k-spreadsheet-sheets-remove k-remove-tab"></Button>
|
|
567
|
-
</li>
|
|
568
|
-
<li className="k-item k-spreadsheet-sheets-bar-inactive">
|
|
569
|
-
<span className="k-link">Balance Sheet</span>
|
|
570
|
-
<Button fillMode="flat" icon="x" className="k-spreadsheet-sheets-remove k-remove-tab"></Button>
|
|
571
|
-
</li>
|
|
572
|
-
</ul>
|
|
573
|
-
<Button fillMode="flat" rounded={null} size={null} icon="caret-alt-right" className="k-tabstrip-next"></Button>
|
|
574
|
-
</div>
|
|
575
|
-
</div>
|
|
576
|
-
</div>
|
|
577
|
-
</div>
|
|
578
|
-
</div>
|
|
579
|
-
</>
|
|
580
|
-
);
|