API tools faq
paste
Guest User

Untitled

a guest
Oct 23rd, 2017
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.25 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid">
  2. <div class="content">
  3.  
  4. <nav class="main-menu">
  5. <ul>
  6. <li><a href="#">Nav link 1</a></li>
  7. <li><a href="#">Nav link 2</a></li>
  8. <li><a href="#">Nav link 3</a></li>
  9. </ul>
  10. </nav>
  11.  
  12. <div class="table-flex table-process-error">
  13.  
  14. <div class="table-thead ">
  15. <div class="table-row table-header">
  16. <div class="table-row-item">
  17. <h3 class="table-title"><a href="#" class="btn btn-default main-menu-toggle"><i class="icon fa fa-bars"></i></a> Error processes</h3>
  18. </div>
  19. </div>
  20. <!-- /.table-row -->
  21. <div class="table-row">
  22. <div class="table-row-item flex-grow-4">Context</div>
  23. <div class="table-row-item flex-grow-4">Process Session</div>
  24. <div class="table-row-item flex-grow-3">Execution</div>
  25. <div class="table-row-item flex-grow-1">Info</div>
  26. </div>
  27. <!-- /.table-row -->
  28. <div class="table-row">
  29. <div class="table-row-item">Process ID</div>
  30. <div class="table-row-item">Source</div>
  31. <div class="table-row-item">Schedule</div>
  32. <div class="table-row-item">Context</div>
  33. <div class="table-row-item">Session ID</div>
  34. <div class="table-row-item">Period From</div>
  35. <div class="table-row-item">Period To</div>
  36. <div class="table-row-item">Action</div>
  37. <div class="table-row-item">Start</div>
  38. <div class="table-row-item">End</div>
  39. <div class="table-row-item">Duration</div>
  40. <div class="table-row-item">Status message</div>
  41. </div>
  42. <!-- /.table-row -->
  43. </div>
  44. <!-- /.table-thead -->
  45.  
  46. <div class="table-tbody">
  47. <div class="table-row">
  48. <div class="table-row-item">PROCID123</div>
  49. <div class="table-row-item">N/A</div>
  50. <div class="table-row-item">DAY</div>
  51. <div class="table-row-item">N/A</div>
  52. <div class="table-row-item">6</div>
  53. <div class="table-row-item">27.9.2017</div>
  54. <div class="table-row-item">28.9.2017</div>
  55. <div class="table-row-item"><input type="checkbox"></div>
  56. <div class="table-row-item">13.10.2017 00:00</div>
  57. <div class="table-row-item">13.10.2017 01:58</div>
  58. <div class="table-row-item">00:01:58</div>
  59. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  60. </div>
  61. <!-- /.table-row -->
  62.  
  63. <div class="table-row">
  64. <div class="table-row-item">PROCID123</div>
  65. <div class="table-row-item">N/A</div>
  66. <div class="table-row-item">DAY</div>
  67. <div class="table-row-item">DEV</div>
  68. <div class="table-row-item">6</div>
  69. <div class="table-row-item">27.9.2017</div>
  70. <div class="table-row-item">28.9.2017</div>
  71. <div class="table-row-item"><input type="checkbox"></div>
  72. <div class="table-row-item">13.10.2017 00:00</div>
  73. <div class="table-row-item">13.10.2017 01:58</div>
  74. <div class="table-row-item">00:01:58</div>
  75. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  76. </div>
  77. <!-- /.table-row -->
  78. <div class="table-row">
  79. <div class="table-row-item">PROCID123</div>
  80. <div class="table-row-item">N/A</div>
  81. <div class="table-row-item">DAY</div>
  82. <div class="table-row-item">DEV</div>
  83. <div class="table-row-item">6</div>
  84. <div class="table-row-item">27.9.2017</div>
  85. <div class="table-row-item">28.9.2017</div>
  86. <div class="table-row-item"><input type="checkbox"></div>
  87. <div class="table-row-item">13.10.2017 00:00</div>
  88. <div class="table-row-item">13.10.2017 01:58</div>
  89. <div class="table-row-item">00:01:58</div>
  90. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  91. </div>
  92. <!-- /.table-row -->
  93. <div class="table-row">
  94. <div class="table-row-item">PROCID123</div>
  95. <div class="table-row-item">N/A</div>
  96. <div class="table-row-item">DAY</div>
  97. <div class="table-row-item">DEV</div>
  98. <div class="table-row-item">6</div>
  99. <div class="table-row-item">27.9.2017</div>
  100. <div class="table-row-item">28.9.2017</div>
  101. <div class="table-row-item"><input type="checkbox"></div>
  102. <div class="table-row-item">13.10.2017 00:00</div>
  103. <div class="table-row-item">13.10.2017 01:58</div>
  104. <div class="table-row-item">00:01:58</div>
  105. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  106. </div>
  107. <!-- /.table-row -->
  108. <div class="table-row">
  109. <div class="table-row-item">PROCID123</div>
  110. <div class="table-row-item">N/A</div>
  111. <div class="table-row-item">DAY</div>
  112. <div class="table-row-item">DEV</div>
  113. <div class="table-row-item">6</div>
  114. <div class="table-row-item">27.9.2017</div>
  115. <div class="table-row-item">28.9.2017</div>
  116. <div class="table-row-item"><input type="checkbox"></div>
  117. <div class="table-row-item">13.10.2017 00:00</div>
  118. <div class="table-row-item">13.10.2017 01:58</div>
  119. <div class="table-row-item">00:01:58</div>
  120. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  121. </div>
  122. <!-- /.table-row -->
  123. <div class="table-row">
  124. <div class="table-row-item">PROCID123</div>
  125. <div class="table-row-item">N/A</div>
  126. <div class="table-row-item">DAY</div>
  127. <div class="table-row-item">DEV</div>
  128. <div class="table-row-item">6</div>
  129. <div class="table-row-item">27.9.2017</div>
  130. <div class="table-row-item">28.9.2017</div>
  131. <div class="table-row-item"><input type="checkbox"></div>
  132. <div class="table-row-item">13.10.2017 00:00</div>
  133. <div class="table-row-item">13.10.2017 01:58</div>
  134. <div class="table-row-item">00:01:58</div>
  135. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  136. </div>
  137. <!-- /.table-row -->
  138. <div class="table-row">
  139. <div class="table-row-item">PROCID123</div>
  140. <div class="table-row-item">N/A</div>
  141. <div class="table-row-item">DAY</div>
  142. <div class="table-row-item">DEV</div>
  143. <div class="table-row-item">6</div>
  144. <div class="table-row-item">27.9.2017</div>
  145. <div class="table-row-item">28.9.2017</div>
  146. <div class="table-row-item"><input type="checkbox"></div>
  147. <div class="table-row-item">13.10.2017 00:00</div>
  148. <div class="table-row-item">13.10.2017 01:58</div>
  149. <div class="table-row-item">00:01:58</div>
  150. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  151. </div>
  152. <!-- /.table-row -->
  153.  
  154. </div>
  155. <!-- /.table-tbody -->
  156.  
  157. </div>
  158. <!-- /.table-flex -->
  159. <div class="table-flex table-process-warning">
  160.  
  161. <div class="table-thead ">
  162. <div class="table-row table-header">
  163. <div class="table-row-item">
  164. <h3 class="table-title"><a href="#" class="btn btn-default main-menu-toggle"><i class="icon fa fa-bars"></i></a> Warning processes</h3>
  165. </div>
  166. </div>
  167. <!-- /.table-row -->
  168. <div class="table-row">
  169. <div class="table-row-item flex-grow-4">Context</div>
  170. <div class="table-row-item flex-grow-4">Process Session</div>
  171. <div class="table-row-item flex-grow-3">Execution</div>
  172. <div class="table-row-item flex-grow-1">Info</div>
  173. </div>
  174. <!-- /.table-row -->
  175. <div class="table-row">
  176. <div class="table-row-item">Process ID</div>
  177. <div class="table-row-item">Source</div>
  178. <div class="table-row-item">Schedule</div>
  179. <div class="table-row-item">Context</div>
  180. <div class="table-row-item">Session ID</div>
  181. <div class="table-row-item">Period From</div>
  182. <div class="table-row-item">Period To</div>
  183. <div class="table-row-item">Action</div>
  184. <div class="table-row-item">Start</div>
  185. <div class="table-row-item">End</div>
  186. <div class="table-row-item">Duration</div>
  187. <div class="table-row-item">Status message</div>
  188. </div>
  189. <!-- /.table-row -->
  190. </div>
  191. <!-- /.table-thead -->
  192.  
  193. <div class="table-tbody">
  194.  
  195. <div class="table-row">
  196. <div class="table-row-item">PROCID123</div>
  197. <div class="table-row-item">N/A</div>
  198. <div class="table-row-item">DAY</div>
  199. <div class="table-row-item">DEV</div>
  200. <div class="table-row-item">6</div>
  201. <div class="table-row-item">27.9.2017</div>
  202. <div class="table-row-item">28.9.2017</div>
  203. <div class="table-row-item"><input type="checkbox"></div>
  204. <div class="table-row-item">13.10.2017 00:00</div>
  205. <div class="table-row-item">13.10.2017 01:58</div>
  206. <div class="table-row-item">00:01:58</div>
  207. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  208. </div>
  209. <!-- /.table-row -->
  210. <div class="table-row">
  211. <div class="table-row-item">PROCID123</div>
  212. <div class="table-row-item">N/A</div>
  213. <div class="table-row-item">DAY</div>
  214. <div class="table-row-item">DEV</div>
  215. <div class="table-row-item">6</div>
  216. <div class="table-row-item">27.9.2017</div>
  217. <div class="table-row-item">28.9.2017</div>
  218. <div class="table-row-item"><input type="checkbox"></div>
  219. <div class="table-row-item">13.10.2017 00:00</div>
  220. <div class="table-row-item">13.10.2017 01:58</div>
  221. <div class="table-row-item">00:01:58</div>
  222. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  223. </div>
  224. <!-- /.table-row -->
  225. <div class="table-row">
  226. <div class="table-row-item">PROCID123</div>
  227. <div class="table-row-item">N/A</div>
  228. <div class="table-row-item">DAY</div>
  229. <div class="table-row-item">DEV</div>
  230. <div class="table-row-item">6</div>
  231. <div class="table-row-item">27.9.2017</div>
  232. <div class="table-row-item">28.9.2017</div>
  233. <div class="table-row-item"><input type="checkbox"></div>
  234. <div class="table-row-item">13.10.2017 00:00</div>
  235. <div class="table-row-item">13.10.2017 01:58</div>
  236. <div class="table-row-item">00:01:58</div>
  237. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  238. </div>
  239. <!-- /.table-row -->
  240. <div class="table-row">
  241. <div class="table-row-item">PROCID123</div>
  242. <div class="table-row-item">N/A</div>
  243. <div class="table-row-item">DAY</div>
  244. <div class="table-row-item">DEV</div>
  245. <div class="table-row-item">6</div>
  246. <div class="table-row-item">27.9.2017</div>
  247. <div class="table-row-item">28.9.2017</div>
  248. <div class="table-row-item"><input type="checkbox"></div>
  249. <div class="table-row-item">13.10.2017 00:00</div>
  250. <div class="table-row-item">13.10.2017 01:58</div>
  251. <div class="table-row-item">00:01:58</div>
  252. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  253. </div>
  254. <!-- /.table-row -->
  255. <div class="table-row">
  256. <div class="table-row-item">PROCID123</div>
  257. <div class="table-row-item">N/A</div>
  258. <div class="table-row-item">DAY</div>
  259. <div class="table-row-item">DEV</div>
  260. <div class="table-row-item">6</div>
  261. <div class="table-row-item">27.9.2017</div>
  262. <div class="table-row-item">28.9.2017</div>
  263. <div class="table-row-item"><input type="checkbox"></div>
  264. <div class="table-row-item">13.10.2017 00:00</div>
  265. <div class="table-row-item">13.10.2017 01:58</div>
  266. <div class="table-row-item">00:01:58</div>
  267. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  268. </div>
  269. <!-- /.table-row -->
  270. <div class="table-row">
  271. <div class="table-row-item">PROCID123</div>
  272. <div class="table-row-item">N/A</div>
  273. <div class="table-row-item">DAY</div>
  274. <div class="table-row-item">DEV</div>
  275. <div class="table-row-item">6</div>
  276. <div class="table-row-item">27.9.2017</div>
  277. <div class="table-row-item">28.9.2017</div>
  278. <div class="table-row-item"><input type="checkbox"></div>
  279. <div class="table-row-item">13.10.2017 00:00</div>
  280. <div class="table-row-item">13.10.2017 01:58</div>
  281. <div class="table-row-item">00:01:58</div>
  282. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  283. </div>
  284. <!-- /.table-row -->
  285. <div class="table-row">
  286. <div class="table-row-item">PROCID123</div>
  287. <div class="table-row-item">N/A</div>
  288. <div class="table-row-item">DAY</div>
  289. <div class="table-row-item">DEV</div>
  290. <div class="table-row-item">6</div>
  291. <div class="table-row-item">27.9.2017</div>
  292. <div class="table-row-item">28.9.2017</div>
  293. <div class="table-row-item"><input type="checkbox"></div>
  294. <div class="table-row-item">13.10.2017 00:00</div>
  295. <div class="table-row-item">13.10.2017 01:58</div>
  296. <div class="table-row-item">00:01:58</div>
  297. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  298. </div>
  299. <!-- /.table-row -->
  300. <div class="table-row">
  301. <div class="table-row-item">PROCID123</div>
  302. <div class="table-row-item">N/A</div>
  303. <div class="table-row-item">DAY</div>
  304. <div class="table-row-item">DEV</div>
  305. <div class="table-row-item">6</div>
  306. <div class="table-row-item">27.9.2017</div>
  307. <div class="table-row-item">28.9.2017</div>
  308. <div class="table-row-item"><input type="checkbox"></div>
  309. <div class="table-row-item">13.10.2017 00:00</div>
  310. <div class="table-row-item">13.10.2017 01:58</div>
  311. <div class="table-row-item">00:01:58</div>
  312. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  313. </div>
  314. <!-- /.table-row -->
  315. <div class="table-row">
  316. <div class="table-row-item">PROCID123</div>
  317. <div class="table-row-item">N/A</div>
  318. <div class="table-row-item">DAY</div>
  319. <div class="table-row-item">DEV</div>
  320. <div class="table-row-item">6</div>
  321. <div class="table-row-item">27.9.2017</div>
  322. <div class="table-row-item">28.9.2017</div>
  323. <div class="table-row-item"><input type="checkbox"></div>
  324. <div class="table-row-item">13.10.2017 00:00</div>
  325. <div class="table-row-item">13.10.2017 01:58</div>
  326. <div class="table-row-item">00:01:58</div>
  327. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  328. </div>
  329. <!-- /.table-row -->
  330. <div class="table-row">
  331. <div class="table-row-item">PROCID123</div>
  332. <div class="table-row-item">N/A</div>
  333. <div class="table-row-item">DAY</div>
  334. <div class="table-row-item">DEV</div>
  335. <div class="table-row-item">6</div>
  336. <div class="table-row-item">27.9.2017</div>
  337. <div class="table-row-item">28.9.2017</div>
  338. <div class="table-row-item"><input type="checkbox"></div>
  339. <div class="table-row-item">13.10.2017 00:00</div>
  340. <div class="table-row-item">13.10.2017 01:58</div>
  341. <div class="table-row-item">00:01:58</div>
  342. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  343. </div>
  344. <!-- /.table-row -->
  345.  
  346. </div>
  347. <!-- /.table-tbody -->
  348.  
  349. </div>
  350. <!-- /.table-flex -->
  351. <div class="table-flex table-process-running">
  352.  
  353. <div class="table-thead ">
  354. <div class="table-row table-header">
  355. <div class="table-row-item">
  356. <h3 class="table-title"><a href="#" class="btn btn-default main-menu-toggle"><i class="icon fa fa-bars"></i></a> Running processes</h3>
  357. </div>
  358. </div>
  359. <!-- /.table-row -->
  360. <div class="table-row">
  361. <div class="table-row-item flex-grow-4">Context</div>
  362. <div class="table-row-item flex-grow-4">Process Session</div>
  363. <div class="table-row-item flex-grow-3">Execution</div>
  364. <div class="table-row-item flex-grow-1">Info</div>
  365. </div>
  366. <!-- /.table-row -->
  367. <div class="table-row">
  368. <div class="table-row-item">Process ID</div>
  369. <div class="table-row-item">Source</div>
  370. <div class="table-row-item">Schedule</div>
  371. <div class="table-row-item">Context</div>
  372. <div class="table-row-item">Session ID</div>
  373. <div class="table-row-item">Period From</div>
  374. <div class="table-row-item">Period To</div>
  375. <div class="table-row-item">Action</div>
  376. <div class="table-row-item">Start</div>
  377. <div class="table-row-item">End</div>
  378. <div class="table-row-item">Duration</div>
  379. <div class="table-row-item">Status message</div>
  380. </div>
  381. <!-- /.table-row -->
  382. </div>
  383. <!-- /.table-thead -->
  384.  
  385. <div class="table-tbody">
  386.  
  387. <div class="table-row">
  388. <div class="table-row-item">PROCID123</div>
  389. <div class="table-row-item">N/A</div>
  390. <div class="table-row-item">DAY</div>
  391. <div class="table-row-item">DEV</div>
  392. <div class="table-row-item">6</div>
  393. <div class="table-row-item">27.9.2017</div>
  394. <div class="table-row-item">28.9.2017</div>
  395. <div class="table-row-item"><input type="checkbox"></div>
  396. <div class="table-row-item">13.10.2017 00:00</div>
  397. <div class="table-row-item">13.10.2017 01:58</div>
  398. <div class="table-row-item">00:01:58</div>
  399. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  400. </div>
  401. <!-- /.table-row -->
  402. <div class="table-row">
  403. <div class="table-row-item">PROCID123</div>
  404. <div class="table-row-item">N/A</div>
  405. <div class="table-row-item">DAY</div>
  406. <div class="table-row-item">DEV</div>
  407. <div class="table-row-item">6</div>
  408. <div class="table-row-item">27.9.2017</div>
  409. <div class="table-row-item">28.9.2017</div>
  410. <div class="table-row-item"><input type="checkbox"></div>
  411. <div class="table-row-item">13.10.2017 00:00</div>
  412. <div class="table-row-item">13.10.2017 01:58</div>
  413. <div class="table-row-item">00:01:58</div>
  414. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  415. </div>
  416. <!-- /.table-row -->
  417. <div class="table-row">
  418. <div class="table-row-item">PROCID123</div>
  419. <div class="table-row-item">N/A</div>
  420. <div class="table-row-item">DAY</div>
  421. <div class="table-row-item">DEV</div>
  422. <div class="table-row-item">6</div>
  423. <div class="table-row-item">27.9.2017</div>
  424. <div class="table-row-item">28.9.2017</div>
  425. <div class="table-row-item"><input type="checkbox"></div>
  426. <div class="table-row-item">13.10.2017 00:00</div>
  427. <div class="table-row-item">13.10.2017 01:58</div>
  428. <div class="table-row-item">00:01:58</div>
  429. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  430. </div>
  431. <!-- /.table-row -->
  432. <div class="table-row">
  433. <div class="table-row-item">PROCID123</div>
  434. <div class="table-row-item">N/A</div>
  435. <div class="table-row-item">DAY</div>
  436. <div class="table-row-item">DEV</div>
  437. <div class="table-row-item">6</div>
  438. <div class="table-row-item">27.9.2017</div>
  439. <div class="table-row-item">28.9.2017</div>
  440. <div class="table-row-item"><input type="checkbox"></div>
  441. <div class="table-row-item">13.10.2017 00:00</div>
  442. <div class="table-row-item">13.10.2017 01:58</div>
  443. <div class="table-row-item">00:01:58</div>
  444. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  445. </div>
  446. <!-- /.table-row -->
  447. <div class="table-row">
  448. <div class="table-row-item">PROCID123</div>
  449. <div class="table-row-item">N/A</div>
  450. <div class="table-row-item">DAY</div>
  451. <div class="table-row-item">DEV</div>
  452. <div class="table-row-item">6</div>
  453. <div class="table-row-item">27.9.2017</div>
  454. <div class="table-row-item">28.9.2017</div>
  455. <div class="table-row-item"><input type="checkbox"></div>
  456. <div class="table-row-item">13.10.2017 00:00</div>
  457. <div class="table-row-item">13.10.2017 01:58</div>
  458. <div class="table-row-item">00:01:58</div>
  459. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  460. </div>
  461. <!-- /.table-row -->
  462. <div class="table-row">
  463. <div class="table-row-item">PROCID123</div>
  464. <div class="table-row-item">N/A</div>
  465. <div class="table-row-item">DAY</div>
  466. <div class="table-row-item">DEV</div>
  467. <div class="table-row-item">6</div>
  468. <div class="table-row-item">27.9.2017</div>
  469. <div class="table-row-item">28.9.2017</div>
  470. <div class="table-row-item"><input type="checkbox"></div>
  471. <div class="table-row-item">13.10.2017 00:00</div>
  472. <div class="table-row-item">13.10.2017 01:58</div>
  473. <div class="table-row-item">00:01:58</div>
  474. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  475. </div>
  476. <!-- /.table-row -->
  477. <div class="table-row">
  478. <div class="table-row-item">PROCID123</div>
  479. <div class="table-row-item">N/A</div>
  480. <div class="table-row-item">DAY</div>
  481. <div class="table-row-item">DEV</div>
  482. <div class="table-row-item">6</div>
  483. <div class="table-row-item">27.9.2017</div>
  484. <div class="table-row-item">28.9.2017</div>
  485. <div class="table-row-item"><input type="checkbox"></div>
  486. <div class="table-row-item">13.10.2017 00:00</div>
  487. <div class="table-row-item">13.10.2017 01:58</div>
  488. <div class="table-row-item">00:01:58</div>
  489. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  490. </div>
  491. <!-- /.table-row -->
  492. <div class="table-row">
  493. <div class="table-row-item">PROCID123</div>
  494. <div class="table-row-item">N/A</div>
  495. <div class="table-row-item">DAY</div>
  496. <div class="table-row-item">DEV</div>
  497. <div class="table-row-item">6</div>
  498. <div class="table-row-item">27.9.2017</div>
  499. <div class="table-row-item">28.9.2017</div>
  500. <div class="table-row-item"><input type="checkbox"></div>
  501. <div class="table-row-item">13.10.2017 00:00</div>
  502. <div class="table-row-item">13.10.2017 01:58</div>
  503. <div class="table-row-item">00:01:58</div>
  504. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  505. </div>
  506. <!-- /.table-row -->
  507. <div class="table-row">
  508. <div class="table-row-item">PROCID123</div>
  509. <div class="table-row-item">N/A</div>
  510. <div class="table-row-item">DAY</div>
  511. <div class="table-row-item">DEV</div>
  512. <div class="table-row-item">6</div>
  513. <div class="table-row-item">27.9.2017</div>
  514. <div class="table-row-item">28.9.2017</div>
  515. <div class="table-row-item"><input type="checkbox"></div>
  516. <div class="table-row-item">13.10.2017 00:00</div>
  517. <div class="table-row-item">13.10.2017 01:58</div>
  518. <div class="table-row-item">00:01:58</div>
  519. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  520. </div>
  521. <!-- /.table-row -->
  522. <div class="table-row">
  523. <div class="table-row-item">PROCID123</div>
  524. <div class="table-row-item">N/A</div>
  525. <div class="table-row-item">DAY</div>
  526. <div class="table-row-item">DEV</div>
  527. <div class="table-row-item">6</div>
  528. <div class="table-row-item">27.9.2017</div>
  529. <div class="table-row-item">28.9.2017</div>
  530. <div class="table-row-item"><input type="checkbox"></div>
  531. <div class="table-row-item">13.10.2017 00:00</div>
  532. <div class="table-row-item">13.10.2017 01:58</div>
  533. <div class="table-row-item">00:01:58</div>
  534. <div class="table-row-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, dolor!</div>
  535. </div>
  536. <!-- /.table-row -->
  537.  
  538. </div>
  539. <!-- /.table-tbody -->
  540.  
  541. </div>
  542. <!-- /.table-flex -->
  543.  
  544. </div>
  545. <!-- /.content -->
  546. </div>
  547. <!-- /.container-fluid -->
  548.  
  549. // Functions
  550. @function grey($shade) {
  551. @if not map-has-key($grey, $shade) {
  552. @warn "Color #{$shade} not found in $grey map.";
  553. }
  554. @return map-get($grey, $shade);
  555. }
  556.  
  557. // Colors
  558. $grey: (
  559. lightest: #f6f6f6,
  560. light: #dedede,
  561. dark: #afafaf,
  562. darkest: #777777
  563. );
  564. $white: #ffffff;
  565.  
  566. // Animations
  567. @mixin transition {
  568. transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  569. box-sizing: border-box;
  570. }
  571.  
  572. // Text overflow
  573. %text-overflow {
  574. display: inline-block;
  575. overflow: hidden;
  576. text-overflow: ellipsis;
  577. white-space: nowrap;
  578. // vertical-align: top;
  579. }
  580.  
  581. // Main menu
  582. .main-menu {
  583. position: fixed;
  584. overflow-y: auto;
  585. left: 0;
  586. }
  587.  
  588. // Container
  589. .content {
  590. @include transition;
  591. margin-left: 0;
  592. .main-menu-open & {
  593. margin-left: 300px;
  594. }
  595. }
  596.  
  597. // Tables
  598. .table-flex {
  599. display: flex;
  600. flex-flow: column nowrap;
  601. justify-content: space-between;
  602. border: 1px solid grey(dark);
  603. }
  604. .table-thead {
  605. position: sticky;
  606. top: 0;
  607. .table-row-item {
  608. background-color: grey(light);
  609. }
  610. }
  611. .table-row {
  612. width: 100%;
  613. display: flex;
  614. flex-flow: row nowrap;
  615. }
  616. .table-row-item {
  617. @extend %text-overflow;
  618. display: flex;
  619. flex-flow: row nowrap;
  620. flex-grow: 1;
  621. flex-basis: 0;
  622. background-color: grey(lightest);
  623. border-right: 2px solid $white;
  624. border-bottom: 2px solid $white;
  625. padding: 8px;
  626.  
  627. // Flex grow
  628. @for $i from 1 through 6 {
  629. $grow: $i * 1;
  630. &.flex-grow-#{$i} {
  631. flex: $grow calc(100% / (12/#{$i}));
  632. }
  633. }
  634. }
  635.  
  636. $('.main-menu-toggle').click(function(e) {
  637. $('body').toggleClass('main-menu-open');
  638. e.preventDefault();
  639. })
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!