Skip to content

Commit da56a86

Browse files
Demos: re-ordered CSS a bit, just so you might find what you are looking for.
1 parent 2ede2ec commit da56a86

File tree

1 file changed

+151
-151
lines changed

1 file changed

+151
-151
lines changed

demos/_assets/css/jqm-demos.css

Lines changed: 151 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -158,113 +158,6 @@ body, .jqm-demos {
158158
margin-left:1.1em;
159159
}
160160

161-
/* Responsive - header & footer */
162-
@media all and (min-width:46em) {
163-
/* Logo */
164-
.jqm-header h1.jqm-logo {
165-
text-align: left;
166-
margin: .8em 0 .8em 15%;
167-
}
168-
.jqm-header .jqm-logo a {
169-
min-height: 57px;
170-
}
171-
.jqm-header .jqm-logo img {
172-
display: block;
173-
width: 200px;
174-
height: auto;
175-
}
176-
.jqm-demos-home .jqm-header .jqm-logo img {
177-
display: block;
178-
width: 240px;
179-
height: auto;
180-
padding-left:.7em;
181-
margin-top:.5em;
182-
margin-bottom:.6em;
183-
}
184-
/* Header buttons */
185-
.jqm-header > .ui-btn,
186-
.jqm-header.ui-header-fixed.ui-fixed-hidden > .ui-btn-icon-notext {
187-
top: 1.4em;
188-
}
189-
.jqm-header .jqm-navmenu-link {
190-
left: 15%;
191-
margin-left: 215px;
192-
}
193-
.jqm-header .jqm-search-link {
194-
display: none;
195-
}
196-
/* Global nav panel close button (instead of toggle menu bars / close icon on small screens) */
197-
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.jqm-header::after,
198-
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open .jqm-header::after {
199-
content: "";
200-
display: block;
201-
position: absolute;
202-
top: 8px;
203-
left: 8px;
204-
width: 20px;
205-
height: 20px;
206-
cursor: pointer;
207-
background-image: url(jqm_demo-icons-sd.png);
208-
background-position: -33px 50%;
209-
-webkit-background-size: 85px 20px;
210-
-moz-background-size: 85px 20px;
211-
-o-background-size: 85px 20px;
212-
background-size: 85px 20px;
213-
}
214-
215-
/* Global search */
216-
.ui-panel-animate.ui-panel-content-wrap > .ui-header.jqm-header {
217-
position: relative;
218-
}
219-
.jqm-search,
220-
.jqm-search-toggle .jqm-search {
221-
display: block;
222-
position: absolute;
223-
top: 1.58125em;
224-
right: 15%;
225-
background: none;
226-
border: none;
227-
}
228-
.jqm-demos .jqm-search > .ui-listview-filter .ui-input-search {
229-
margin: 0;
230-
}
231-
.jqm-search > .jqm-list {
232-
right: .3875em;
233-
left: auto;
234-
width: 28em;
235-
}
236-
237-
/* Footer */
238-
.jqm-footer {
239-
overflow: hidden;
240-
position: absolute;
241-
bottom: 0;
242-
width: 100%;
243-
}
244-
.jqm-footer p {
245-
margin: 1.5em 0 1.5em 15%;
246-
float: left;
247-
}
248-
.jqm-footer .jqm-version {
249-
margin: 1.5em 15% 1.5em 0;
250-
float: right;
251-
font-weight: 700;
252-
}
253-
.jqm-demos-home .jqm-footer p.jqm-version {
254-
display: none;
255-
}
256-
}
257-
/* Global nav panel close button HD/Retina icon */
258-
@media only screen and (min-width:46em) and (-webkit-min-device-pixel-ratio: 1.3),
259-
only screen and (min-width:46em) and (min--moz-device-pixel-ratio: 1.3),
260-
only screen and (min-width:46em) and (min-resolution: 200dpi) {
261-
/* global nav panel close button */
262-
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.jqm-header::after,
263-
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open .jqm-header::after {
264-
background-image: url(jqm_demo-icons-hd.png);
265-
}
266-
}
267-
268161
/* Content */
269162

270163
/* Headings */
@@ -365,50 +258,6 @@ h2.jqm-home-widget {
365258
padding-left: 1.3em;
366259
}
367260

368-
/* Links */
369-
.jqm-content > p a.ui-link,
370-
.jqm-content p.jqm-intro a.ui-link {
371-
font-weight: 400;
372-
text-decoration: none;
373-
}
374-
.jqm-content > p a.ui-link:hover,
375-
.jqm-content p.jqm-intro a.ui-link:hover {
376-
text-decoration: underline;
377-
}
378-
379-
/* Responsive - content */
380-
@media all and (min-width:46em) {
381-
.jqm-demos .jqm-content {
382-
padding: 15px 15% 4.5em; /* padding bottom is because of footer position absolute */
383-
}
384-
.jqm-demos .jqm-content.jqm-fullwidth {
385-
padding: 15px;
386-
}
387-
388-
.jqm-content > p {
389-
line-height: 1.5;
390-
}
391-
.jqm-demos-home .jqm-content p.jqm-intro {
392-
font-size: 1.1em;
393-
}
394-
395-
/* Homepage */
396-
.jqm-demos-home .jqm-home-welcome {
397-
float: left;
398-
width: 48%;
399-
padding-right:6%;
400-
margin-top:.4em;
401-
}
402-
.jqm-demos-home .jqm-home-list {
403-
float: left;
404-
width: 45%;
405-
}
406-
.jqm-demos-home h2.jqm-home-widget {
407-
clear:left;
408-
padding-top:2em;
409-
}
410-
}
411-
412261
/* Code */
413262
.jqm-content pre,
414263
.jqm-content code {
@@ -427,6 +276,17 @@ h2.jqm-home-widget {
427276
font-size:.8em;
428277
}
429278

279+
/* Links */
280+
.jqm-content > p a.ui-link,
281+
.jqm-content p.jqm-intro a.ui-link {
282+
font-weight: 400;
283+
text-decoration: none;
284+
}
285+
.jqm-content > p a.ui-link:hover,
286+
.jqm-content p.jqm-intro a.ui-link:hover {
287+
text-decoration: underline;
288+
}
289+
430290
/* Buttons */
431291
.jqm-content .jqm-api-link,
432292
.jqm-content .jqm-button,
@@ -689,6 +549,146 @@ h2.jqm-home-widget {
689549
box-shadow: -5px 0 5px rgba(0,0,0,.10);
690550
}
691551

552+
/* Responsive */
553+
@media all and (min-width:46em) {
554+
/* Logo */
555+
.jqm-header h1.jqm-logo {
556+
text-align: left;
557+
margin: .8em 0 .8em 15%;
558+
}
559+
.jqm-header .jqm-logo a {
560+
min-height: 57px;
561+
}
562+
.jqm-header .jqm-logo img {
563+
display: block;
564+
width: 200px;
565+
height: auto;
566+
}
567+
.jqm-demos-home .jqm-header .jqm-logo img {
568+
display: block;
569+
width: 240px;
570+
height: auto;
571+
padding-left:.7em;
572+
margin-top:.5em;
573+
margin-bottom:.6em;
574+
}
575+
/* Header buttons */
576+
.jqm-header > .ui-btn,
577+
.jqm-header.ui-header-fixed.ui-fixed-hidden > .ui-btn-icon-notext {
578+
top: 1.4em;
579+
}
580+
.jqm-header .jqm-navmenu-link {
581+
left: 15%;
582+
margin-left: 215px;
583+
}
584+
.jqm-header .jqm-search-link {
585+
display: none;
586+
}
587+
/* Global nav panel close button (instead of toggle menu bars / close icon on small screens) */
588+
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.jqm-header::after,
589+
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open .jqm-header::after {
590+
content: "";
591+
display: block;
592+
position: absolute;
593+
top: 8px;
594+
left: 8px;
595+
width: 20px;
596+
height: 20px;
597+
cursor: pointer;
598+
background-image: url(jqm_demo-icons-sd.png);
599+
background-position: -33px 50%;
600+
-webkit-background-size: 85px 20px;
601+
-moz-background-size: 85px 20px;
602+
-o-background-size: 85px 20px;
603+
background-size: 85px 20px;
604+
}
605+
606+
/* Global search */
607+
.ui-panel-animate.ui-panel-content-wrap > .ui-header.jqm-header {
608+
position: relative;
609+
}
610+
.jqm-search,
611+
.jqm-search-toggle .jqm-search {
612+
display: block;
613+
position: absolute;
614+
top: 1.58125em;
615+
right: 15%;
616+
background: none;
617+
border: none;
618+
}
619+
.jqm-demos .jqm-search > .ui-listview-filter .ui-input-search {
620+
margin: 0;
621+
}
622+
.jqm-search > .jqm-list {
623+
right: .3875em;
624+
left: auto;
625+
width: 28em;
626+
}
627+
628+
/* Footer */
629+
.jqm-footer {
630+
overflow: hidden;
631+
position: absolute;
632+
bottom: 0;
633+
width: 100%;
634+
}
635+
.jqm-footer p {
636+
margin: 1.5em 0 1.5em 15%;
637+
float: left;
638+
}
639+
.jqm-footer .jqm-version {
640+
margin: 1.5em 15% 1.5em 0;
641+
float: right;
642+
font-weight: 700;
643+
}
644+
.jqm-demos-home .jqm-footer p.jqm-version {
645+
display: none;
646+
}
647+
648+
/* Content */
649+
.jqm-demos .jqm-content {
650+
padding: 15px 15% 4.5em; /* padding bottom is because of footer position absolute */
651+
}
652+
.jqm-demos .jqm-content.jqm-fullwidth {
653+
padding: 15px;
654+
}
655+
656+
.jqm-content > p {
657+
line-height: 1.5;
658+
}
659+
.jqm-demos-home .jqm-content p.jqm-intro {
660+
font-size: 1.1em;
661+
}
662+
663+
/* Homepage */
664+
.jqm-demos-home .jqm-home-welcome {
665+
float: left;
666+
width: 48%;
667+
padding-right:6%;
668+
margin-top:.4em;
669+
}
670+
.jqm-demos-home .jqm-home-list {
671+
float: left;
672+
width: 45%;
673+
}
674+
.jqm-demos-home h2.jqm-home-widget {
675+
clear:left;
676+
padding-top:2em;
677+
}
678+
}
679+
680+
/* Global nav panel close button HD/Retina icon */
681+
@media only screen and (min-width:46em) and (-webkit-min-device-pixel-ratio: 1.3),
682+
only screen and (min-width:46em) and (min--moz-device-pixel-ratio: 1.3),
683+
only screen and (min-width:46em) and (min-resolution: 200dpi) {
684+
/* global nav panel close button */
685+
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.jqm-header::after,
686+
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open .jqm-header::after {
687+
background-image: url(jqm_demo-icons-hd.png);
688+
}
689+
}
690+
691+
692692
/* View source */
693693
.jqm-content div[data-demo-html="true"] {
694694
border-top: 1px solid rgba(0,0,0,.08);

0 commit comments

Comments
 (0)