1 | <!DOCTYPE html>
|
2 | <html lang="en-gb" dir="ltr">
|
3 |
|
4 | <head>
|
5 | <meta charset="utf-8">
|
6 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
7 | <title>Visibility - UIkit tests</title>
|
8 | <script src="js/test.js"></script>
|
9 | </head>
|
10 |
|
11 | <body>
|
12 |
|
13 | <div class="uk-container">
|
14 |
|
15 | <h1>Visibility</h1>
|
16 |
|
17 | <h2>Hidden</h2>
|
18 |
|
19 | <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
|
20 | <div>
|
21 | <div class="uk-panel">
|
22 | <div class="uk-alert uk-margin-remove uk-alert-success">✔ Small<br>(Phone Landscape)</div>
|
23 | <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@s">Small<br>(Phone Landscape)</div>
|
24 | </div>
|
25 | </div>
|
26 | <div>
|
27 | <div class="uk-panel">
|
28 | <div class="uk-alert uk-margin-remove uk-alert-success">✔ Medium<br>(Tablet Landscape)</div>
|
29 | <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@m">Medium<br>(Tablet Landscape)</div>
|
30 | </div>
|
31 | </div>
|
32 | <div>
|
33 | <div class="uk-panel">
|
34 | <div class="uk-alert uk-margin-remove uk-alert-success">✔ Large<br>(Desktop)</div>
|
35 | <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@l">Large<br>(Desktop)</div>
|
36 | </div>
|
37 | </div>
|
38 | <div>
|
39 | <div class="uk-panel">
|
40 | <div class="uk-alert uk-margin-remove uk-alert-success">✔ X-Large<br>(Large Screens)</div>
|
41 | <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@xl">X-Large<br>(Large Screens)</div>
|
42 | </div>
|
43 | </div>
|
44 | </div>
|
45 |
|
46 | <h2>Visible</h2>
|
47 |
|
48 | <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
|
49 | <div>
|
50 | <div class="uk-panel">
|
51 | <div class="uk-alert uk-margin-remove">Small<br>(Phone Landscape)</div>
|
52 | <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@s">✔ Small<br>(Phone Landscape)</div>
|
53 | </div>
|
54 | </div>
|
55 | <div>
|
56 | <div class="uk-panel">
|
57 | <div class="uk-alert uk-margin-remove">Medium<br>(Tablet Landscape)</div>
|
58 | <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@m">✔ Medium<br>(Tablet Landscape)</div>
|
59 | </div>
|
60 | </div>
|
61 | <div>
|
62 | <div class="uk-panel">
|
63 | <div class="uk-alert uk-margin-remove">Large<br>(Desktop)</div>
|
64 | <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@l">✔ Large<br>(Desktop)</div>
|
65 | </div>
|
66 | </div>
|
67 | <div>
|
68 | <div class="uk-panel">
|
69 | <div class="uk-alert uk-margin-remove">X-Large<br>(Large Screens)</div>
|
70 | <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@xl">✔ X-Large<br>(Large Screens)</div>
|
71 | </div>
|
72 | </div>
|
73 | </div>
|
74 |
|
75 | <h2>Toggle (Hover + Focus)</h2>
|
76 |
|
77 | <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
|
78 | <div>
|
79 | <div class="uk-panel uk-visible-toggle" tabindex="0">
|
80 | <div class="uk-alert uk-margin-remove">Hidden Hover<br><br></div>
|
81 | <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-hidden-hover">✔ Hidden Hover<br><a href>Focus Test</a></div>
|
82 | </div>
|
83 | </div>
|
84 | <div>
|
85 | <div class="uk-panel uk-visible-toggle" tabindex="0">
|
86 | <div class="uk-alert uk-margin-remove">Invisible Hover<br><br></div>
|
87 | <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-invisible-hover">✔ Invisible Hover<br><a href>Focus Test</a></div>
|
88 | </div>
|
89 | </div>
|
90 | </div>
|
91 |
|
92 | <h2>Touch</h2>
|
93 |
|
94 | <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
|
95 | <div>
|
96 | <div class="uk-panel">
|
97 | <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden Touch</div>
|
98 | <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-touch">Hidden Touch</div>
|
99 | </div>
|
100 | </div>
|
101 | <div>
|
102 | <div class="uk-panel">
|
103 | <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden No-Touch</div>
|
104 | <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-notouch">Hidden No-Touch</div>
|
105 | </div>
|
106 | </div>
|
107 | </div>
|
108 |
|
109 | </div>
|
110 |
|
111 | </body>
|
112 | </html>
|