Skip to content

Commit 90e3f3d

Browse files
committed
style tweaks
1 parent 918a7e7 commit 90e3f3d

File tree

2 files changed

+40
-215
lines changed

2 files changed

+40
-215
lines changed

demo/code-demo/style/layout.css

Lines changed: 39 additions & 213 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
body {
2+
min-width: 300px;
3+
}
14

25
header
36
{
@@ -68,13 +71,17 @@ header
6871
}
6972

7073
#steps-nav-bar {
71-
margin-top: 10px;
72-
float: left;
73-
height: 100%;
74-
border-right: 1px solid #E5E5E5;
75-
padding-right: 20px;
76-
margin-right: 20px;
77-
width: 170px;
74+
width: 100%;
75+
font-size: 90%;
76+
border-bottom: 1px solid #E5E5E5;
77+
margin-bottom: 20px;
78+
padding-right: 0;
79+
margin-right: 0;
80+
}
81+
82+
#steps-ul li {
83+
width: 32%;
84+
display: inline-block;
7885
}
7986

8087
@media screen and (max-width: 320px) {
@@ -118,10 +125,6 @@ header
118125
#embedArea {
119126
padding-left: 0px;
120127
}
121-
122-
#steps-nav-bar {
123-
width: 170px;
124-
}
125128
}
126129

127130
@media screen and (min-width: 321px) {
@@ -164,11 +167,7 @@ header
164167

165168
#embedArea {
166169
padding-left: 0px;
167-
}
168-
169-
#steps-nav-bar {
170-
width: 170px;
171-
}
170+
}
172171
}
173172

174173
@media screen and (min-width: 551px) {
@@ -212,52 +211,9 @@ header
212211
#embedArea {
213212
padding-left: 0px;
214213
}
215-
216-
#steps-nav-bar {
217-
width: 170px;
218-
}
219-
}
220-
221-
@media screen and (min-width: 551px) {
222-
header
223-
{
224-
padding: 20px 10px;
225-
}
226-
227-
.logo-text-span {
228-
font-size: 130%;
229-
line-height: 36px;
230-
}
231-
232-
#embedCodeDiv {
233-
width: 100%;
234-
margin-bottom: 30px;
235-
}
236-
237-
#logWindow {
238-
width: 100%;
239-
}
240-
241-
#settings {
242-
width: 410px;
243-
float: left;
244-
}
245-
246-
#reportContainer {
247-
width: 100%;
248-
height: 360px;
249-
}
250-
251-
#embedArea {
252-
padding-left: 0px;
253-
}
254-
255-
#steps-nav-bar {
256-
width: 170px;
257-
}
258214
}
259215

260-
@media screen and (min-width: 861px) {
216+
@media screen and (min-width: 861px) and (max-width: 1023px) {
261217
header
262218
{
263219
padding: 20px 40px;
@@ -290,13 +246,9 @@ header
290246
#embedArea {
291247
padding-left: 0px;
292248
}
293-
294-
#steps-nav-bar {
295-
width: 170px;
296-
}
297249
}
298250

299-
@media screen and (min-width: 1024px) and (max-width: 1279px) {
251+
@media screen and (min-width: 1024px) {
300252
header
301253
{
302254
padding: 20px 40px;
@@ -306,19 +258,24 @@ header
306258
font-size: 28px;
307259
}
308260

261+
#mainContent {
262+
width: 90%;
263+
margin-left: 0.8%;
264+
}
265+
309266
#embedCodeDiv {
310-
width: 36%;
267+
width: 34%;
311268
font-size: 90%;
312-
margin-right: 2%;
269+
margin-right: 1%;
313270
}
314271

315272
#logWindow {
316-
width: 36%;
273+
width: 34%;
317274
}
318275

319276
#settings {
320277
float: left;
321-
width: 25%;
278+
width: 30%;
322279
margin-right: 1%;
323280
}
324281

@@ -330,194 +287,63 @@ header
330287
width: 100%;
331288
height: 380px;
332289
}
333-
334-
#embedArea {
335-
padding-left: 0px;
336-
}
337-
290+
338291
.bottomPanel {
339292
margin-left: 0;
340293
width: 100%;
341294
}
342295

343296
#steps-nav-bar {
344-
width: 170px;
345-
}
346-
}
347-
348-
@media screen and (min-width: 1280px) and (max-width: 1419px) {
349-
header
350-
{
351-
padding: 20px 40px;
352-
}
353-
354-
.logo-text-span {
355-
font-size: 28px;
356-
}
357-
358-
#embedCodeDiv {
359-
width: 390px;
360-
margin-right: 20px;
361-
}
362-
363-
#logWindow {
364-
width: 390px;
365-
}
366-
367-
.content {
368-
margin: 15px 20px;
369-
}
370-
371-
#mainContent {
372-
}
373-
374-
#embedArea {
375-
padding-left: 0px;
376-
width: 1220px;
377-
}
378-
379-
.bottomPanel {
380-
max-width: 100%;
381-
margin-left: 0px;
382-
}
383-
384-
#settings {
385-
float: left;
386-
width: 400px;
387-
margin-right: 20px;
297+
width: 9%;
298+
font-size: 90%;
299+
padding-right: 0.8%;
300+
border-right: 1px solid #E5E5E5;
301+
border-bottom: none;
302+
margin-bottom: 0px;
388303
}
389304

390-
#steps-nav-bar {
391-
width: 170px;
305+
#steps-ul li {
306+
width: 100%;
307+
display: block;
392308
}
393309
}
394310

395-
@media screen and (min-width: 1420px) {
396-
header
397-
{
398-
padding: 20px 40px;
399-
}
400-
311+
@media screen and (min-width: 1280px) {
401312
.logo-text-span {
402313
font-size: 28px;
403314
}
404315

405-
#embedCodeDiv {
406-
width: 450px;
407-
margin-right: 20px;
408-
}
409-
410-
#logWindow {
411-
width: 450px;
412-
}
413-
414316
.content {
415317
margin: 15px 20px;
416318
}
417319

418-
#mainContent {
419-
}
420-
421-
#embedArea {
422-
padding-left: 0px;
423-
width: 1340px;
424-
}
425-
426320
.bottomPanel {
427321
max-width: 100%;
428322
margin-left: 0px;
429323
}
430324

431-
#settings {
432-
float: left;
433-
width: 400px;
434-
margin-right: 20px;
435-
}
436-
437-
#steps-nav-bar {
438-
width: 170px;
325+
.steps-ul li {
326+
font-size: 17px;
439327
}
440328
}
441329

442-
@media screen and (max-width: 1599px) {
443-
#steps-nav-bar {
444-
background-color: #E5E5E5;
445-
margin-bottom: 10px;
446-
}
447-
}
448330

449331
@media screen and (min-width: 1600px) {
450-
header
451-
{
452-
padding: 20px 40px;
453-
}
454-
455332
.logo-text-span {
456333
font-size: 28px;
457334
}
458335

459-
#embedCodeDiv {
460-
width: 440px;
461-
}
462-
463-
#logWindow {
464-
width: 440px;
465-
}
466-
467336
.content {
468337
margin: 15px 40px;
469338
}
470-
471-
#mainContent {
472-
width: 1350px;
473-
}
474-
475-
#embedArea {
476-
padding-left: 0px;
477-
width: 1320px;
478-
}
479-
480-
#steps-nav-bar {
481-
width: 150px;
482-
}
483339
}
484340

485341
@media screen and (min-width: 1800px) {
486-
header
487-
{
488-
padding: 20px 40px;
489-
}
490-
491342
.logo-text-span {
492343
font-size: 28px;
493344
}
494345

495-
#embedCodeDiv {
496-
width: 540px;
497-
}
498-
499-
#logWindow {
500-
width: 540px;
501-
}
502-
503-
.content {
504-
margin: 15px 40px;
505-
}
506-
507-
#mainContent {
508-
width: 1520px;
509-
}
510-
511-
#embedArea {
512-
padding-left: 0px;
513-
width: 1520px;
514-
}
515-
516346
#reportContainer {
517347
height: 450px;
518348
}
519-
520-
#steps-nav-bar {
521-
width: 170px;
522-
}
523349
}

demo/code-demo/style/style.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ a:hover, a:visited, a:link, a:active
7070
}
7171

7272
#report-embed-table input[type="text"] {
73-
width: 74%;
73+
width: 73%;
7474
border: none;
7575
margin-bottom: 5px;
7676
}
@@ -281,7 +281,6 @@ a {
281281
float: none;
282282
text-align: left;
283283
line-height: 22px;
284-
font-size: 17px;
285284
font-weight: 400;
286285
height: 40px;
287286
width: 100%;

0 commit comments

Comments
 (0)