1 | body {
|
2 |
|
3 | }
|
4 | ::-webkit-scrollbar {
|
5 | display: none;
|
6 | }
|
7 |
|
8 | .filter {
|
9 | padding: 15px;
|
10 | }
|
11 | .demo-thumbnails {
|
12 | padding: 15px;
|
13 | }
|
14 | .demo-thumbnail {
|
15 | margin-bottom: 30px;
|
16 | }
|
17 | .thumbnail-container {
|
18 | overflow: hidden;
|
19 | max-height: 202px;
|
20 | }
|
21 | .thumbnail-container img {
|
22 | width: 100%;
|
23 | }
|
24 | .card-body {
|
25 | padding: 8px;
|
26 | }
|
27 | iframe {
|
28 | border: none;
|
29 | }
|
30 | .scaled-frame {
|
31 | margin: 0 auto;
|
32 | width: 800px;
|
33 | height: 450px;
|
34 | -webkit-transform: scale(0.45);
|
35 | -webkit-transform-origin: 0 0;
|
36 | }
|
37 | #doc-container {
|
38 | display: -webkit-box;
|
39 | display: -webkit-flex;
|
40 | display: -ms-flexbox;
|
41 | display: flex;
|
42 | -webkit-box-flex: 1;
|
43 | -webkit-flex: 1 1 auto;
|
44 | -ms-flex: 1 1 auto;
|
45 | flex: 1 1 auto;
|
46 | position: fixed;
|
47 | top: 0;
|
48 | left: 0;
|
49 | height: 100%;
|
50 | width: 100%;
|
51 | background: white;
|
52 | }
|
53 | .code-panel {
|
54 | -webkit-overflow-scrolling: touch;
|
55 | -webkit-transform: translateZ(0);
|
56 | background-color: #fff;
|
57 | display: block;
|
58 | width: 400px;
|
59 | height: 100%;
|
60 | overflow: hidden;
|
61 | padding: 0 1rem 0 0;
|
62 | position: relative;
|
63 | right: 0;
|
64 | top: 0;
|
65 | border-right: 0.1rem solid #e8e8e8;
|
66 | transform: translateZ(0);
|
67 | white-space: nowrap;
|
68 | will-change: scroll-position;
|
69 | z-index: 1;
|
70 | }
|
71 |
|
72 | .code-banner {
|
73 | padding: .5rem 0;
|
74 | }
|
75 |
|
76 | .code-panel, .code-editor .CodeMirror {
|
77 | height: 100%;
|
78 | }
|
79 |
|
80 | .code-editor {
|
81 | height: calc(100% - 3.375rem);
|
82 | }
|
83 |
|
84 |
|
85 | #chart-panel {
|
86 | flex: 1;
|
87 | overflow: hidden;
|
88 | padding: 1rem;
|
89 | -webkit-transform: translateZ(0);
|
90 | transform: translateZ(0);
|
91 | will-change: scroll-position;
|
92 | -webkit-overflow-scrolling: touch;
|
93 | }
|
94 | #resize-handler {
|
95 | //background: #DEDEEB;
|
96 | border-right: 2px solid #DEDEEB;
|
97 | cursor: col-resize;
|
98 | }
|
99 | .chart-frame {
|
100 | height: 100%;
|
101 | width: 100%;
|
102 | }
|
103 |
|
104 | .btn {
|
105 | cursor: pointer;
|
106 | }
|