1
=== modified file 'test/index.html'
2
--- test/index.html	2013-11-30 13:03:01 +0000
3
+++ test/index.html	2013-12-02 12:38:43 +0000
4
@@ -11,513 +11,456 @@
5
11
<link rel="stylesheet" href="/css/normalize.css">
11
<link rel="stylesheet" href="/css/normalize.css">
6
12
<link rel="stylesheet" href="/css/base.css">
12
<link rel="stylesheet" href="/css/base.css">
7
13
<link rel="stylesheet" href="/css/buttons.css">
13
<link rel="stylesheet" href="/css/buttons.css">
8
14
<link rel="stylesheet" href="/css/dropdowns.css">
9
15
<link rel="stylesheet" href="/css/feedback.css">
10
14
<link rel="stylesheet" href="/css/forms.css">
16
<link rel="stylesheet" href="/css/forms.css">
11
15
<link rel="stylesheet" href="/css/layout.css">
17
<link rel="stylesheet" href="/css/layout.css">
12
16
<link rel="stylesheet" href="/css/navigation.css">
18
<link rel="stylesheet" href="/css/navigation.css">
14
17
<link rel="stylesheet" href="/css/feedback.css">
19
<link rel="stylesheet" href="/css/pagination.css">
15
20
16
21
<!--
17
22
18
23
This page is for testing.
19
24
20
25
THIS IS NOT A STYLEGUIDE
21
26
22
27
Do not add inline styles.
23
28
Do not add a style block to the head.
24
29
Use only styles linked from the CSS framework.
25
30
Do not add JavaScript.
26
31
27
32
Have a nice day :)
28
33
29
34
-->
30
18
35
31
19
</head>
36
</head>
32
20
<body>
37
<body>
33
21
38
34
22
<div class="ues-container">
39
<div class="ues-container">
75
23
  <div class="section" id="typography">
40
  <section>
76
24
    <h1>Typography</h1>
41
  <h1>Typography</h1>
77
25
42
78
26
    <h2>Headline Styles</h2>
43
  <h2>Headline Styles</h2>
79
27
44
80
28
    <h1 class="ues-hdisplay">Display Headline</h1>
45
  <h1 class="ues-hdisplay">Display Headline</h1>
81
29
    <h1 class="ues-hmain">Main Headline</h1>
46
  <h1 class="ues-hmain">Main Headline</h1>
82
30
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
47
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
83
31
    <h1 class="ues-hmedium">Medium Headline</h1>
48
  <h1 class="ues-hmedium">Medium Headline</h1>
84
32
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
49
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
85
33
    <h1 class="ues-hlight">Light Headline</h1>
50
  <h1 class="ues-hlight">Light Headline</h1>
86
34
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
51
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
87
35
52
88
36
    <h2>Multiline Headlines</h2>
53
  <h2>Multiline Headlines</h2>
89
37
    <div style="width:320px">
54
  <div style="width:320px">
90
38
      <h1 class="ues-hdisplay">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
55
    <h1 class="ues-hdisplay">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
91
39
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
56
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
92
40
      <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
57
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
93
41
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
58
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
94
42
    </div>
59
  </div>
95
43
60
96
44
    <h2>Block Content</h2>
61
  <h2>Block Content</h2>
97
45
62
98
46
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
63
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
99
47
    <p>Reiciendis soluta ab, soluta molestiae nesciunt ipsum est quis debitis voluptas qui at sed quo? Praesentium voluptate voluptatum placeat ea molestiae doloribus deserunt?</p>
64
  <p>Reiciendis soluta ab, soluta molestiae nesciunt ipsum est quis debitis voluptas qui at sed quo? Praesentium voluptate voluptatum placeat ea molestiae doloribus deserunt?</p>
100
48
    <p>Exercitationem eum esse quos minus, maiores suscipit cupiditate delectus reprehenderit illo quidem distinctio esse nam aliquam fugit, reiciendis veritatis a expedita nisi deserunt rem repellat quos placeat illum, minima est iusto itaque iure? Odit facere possimus architecto sunt facilis voluptatibus eaque maiores necessitatibus, dolor deserunt est.</p>
65
  <p>Exercitationem eum esse quos minus, maiores suscipit cupiditate delectus reprehenderit illo quidem distinctio esse nam aliquam fugit, reiciendis veritatis a expedita nisi deserunt rem repellat quos placeat illum, minima est iusto itaque iure? Odit facere possimus architecto sunt facilis voluptatibus eaque maiores necessitatibus, dolor deserunt est.</p>
101
49
66
102
50
67
103
51
    <h3>Lead body copy</h3>
68
  <h3>Lead body copy</h3>
104
52
    <p class=ues-lead>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
69
  <p class=ues-lead>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
105
53
    <p>architecto ab dolor explicabo inventore fugit quis doloribus minus nesciunt cumque sint</p>
70
  <p>architecto ab dolor explicabo inventore fugit quis doloribus minus nesciunt cumque sint</p>
106
54
71
107
55
    <h3>Text Alignment</h3>
72
  <h3>Text Alignment</h3>
108
56
    <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
73
  <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
109
57
    <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
74
  <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
110
58
    <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
75
  <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
111
59
76
112
60
    <h3>Lists</h3>
77
  <h3>Lists</h3>
113
61
78
114
62
    <h4>Ordered &amp; Unordered</h4>
79
  <h4>Ordered &amp; Unordered</h4>
115
80
  <ul class=ues-list>
116
81
    <li>Apples</li>
117
82
    <li>Oranges</li>
118
83
    <li>Pears</li>
119
84
  </ul>
120
85
121
86
  <ol class=ues-list>
122
87
    <li>Apples</li>
123
63
    <ul class=ues-list>
88
    <ul class=ues-list>
579
64
      <li>Apples</li>
89
      <li>Cox</li>
580
65
      <li>Oranges</li>
90
      <li>Gala</li>
581
66
      <li>Pears</li>
91
      <li>Bræburn</li>
582
67
    </ul>
92
    </ul>
583
68
93
    <li>Oranges</li>
584
69
    <ol class=ues-list>
94
    <li>Pears</li>
585
70
      <li>Apples</li>
95
  </ol>
586
71
      <ul class=ues-list>
96
587
72
        <li>Cox</li>
97
  <h4>Bordered</h4>
588
73
        <li>Gala</li>
98
  <ul class="ues-list ues-list-bordered">
589
74
        <li>Bræburn</li>
99
    <li>excepturi dolore quo et quisquam atque neque at labore molestias quia nemo</li>
590
75
      </ul>
100
    <li>architecto nam sapiente voluptate molestiae ducimus fugiat iure natus nihil quod officia</li>
591
76
      <li>Oranges</li>
101
    <li>debitis nemo quos enim illo mollitia quidem numquam incidunt corrupti blanditiis consequuntur</li>
592
77
      <li>Pears</li>
102
    <li>impedit ipsa dignissimos quasi quaerat doloribus maxime libero voluptatum itaque molestias ab</li>
593
78
    </ol>
103
    <li>quidem perspiciatis asperiores exercitationem facilis tenetur sapiente vero nemo consequatur odit nulla</li>
594
79
104
  </ul>
595
80
    <h4>Bordered</h4>
105
596
81
    <ul class="ues-list ues-list-bordered">
106
  <h4>Inline Lists</h4>
597
82
      <li>excepturi dolore quo et quisquam atque neque at labore molestias quia nemo</li>
107
  <ul class="ues-list ues-list-inline">
598
83
      <li>architecto nam sapiente voluptate molestiae ducimus fugiat iure natus nihil quod officia</li>
108
    <li>Apple</li>
599
84
      <li>debitis nemo quos enim illo mollitia quidem numquam incidunt corrupti blanditiis consequuntur</li>
109
    <li>Orange</li>
600
85
      <li>impedit ipsa dignissimos quasi quaerat doloribus maxime libero voluptatum itaque molestias ab</li>
110
    <li>Pear</li>
601
86
      <li>quidem perspiciatis asperiores exercitationem facilis tenetur sapiente vero nemo consequatur odit nulla</li>
111
  </ul>
602
87
    </ul>
112
603
88
113
  <h4>Definition Lists</h4>
604
89
    <h4>Inline Lists</h4>
114
  <dl class="ues-list">
605
90
    <ul class="ues-list ues-list-inline">
115
    <dt>Apple</dt>
606
91
      <li>Apple</li>
116
    <dd>dicta possimus iusto voluptatibus blanditiis totam incidunt excepturi mollitia quia aliquid eius</dd>
607
92
      <li>Orange</li>
117
    <dd>enim architecto velit corporis doloremque soluta sapiente eum ad optio dolorem sit</dd>
608
93
      <li>Pear</li>
118
    <dt>Orange</dt>
609
94
    </ul>
119
    <dd>accusantium mollitia facilis nostrum iusto et iure unde dolorum alias corporis ullam</dd>
610
95
120
    <dt>Pear</dt>
611
96
    <h4>Definition Lists</h4>
121
    <dd>sint ullam exercitationem aliquid saepe ratione labore neque quis molestias dolorem inventore</dd>
612
97
    <dl class="ues-list">
122
  </dl>
613
98
      <dt>Apple</dt>
123
</section>
614
99
      <dd>dicta possimus iusto voluptatibus blanditiis totam incidunt excepturi mollitia quia aliquid eius</dd>
124
615
100
      <dd>enim architecto velit corporis doloremque soluta sapiente eum ad optio dolorem sit</dd>
125
616
101
      <dt>Orange</dt>
126
<section>
617
102
      <dd>accusantium mollitia facilis nostrum iusto et iure unde dolorum alias corporis ullam</dd>
127
  <h1>Buttons</h1>
618
103
      <dt>Pear</dt>
128
  <p>
619
104
      <dd>sint ullam exercitationem aliquid saepe ratione labore neque quis molestias dolorem inventore</dd>
129
  <button>No class</button>
620
105
    </dl>
130
  <button class=ues-button>Default button</button>
621
106
131
  <button class="ues-button ues-button-primary">Primary button</button>
622
107
  </div>
132
  <button class="ues-button ues-button-tertiary">Tertiary button</button>
623
108
133
  </p>
624
109
  <div class="section" id="buttons">
134
625
110
    <p>
135
  <p>
626
111
    <button>No class</button>
136
  <button class="ues-button">&#9731; <span>Change Payment Method</span></button>
627
112
    <button class=ues-button>Default button</button>
137
  <button class="ues-button ues-button-primary">&#9731; <span>Checkout</span></button>
628
113
    <button class="ues-button ues-button-primary">Primary button</button>
138
  </p>
629
114
    <button class="ues-button ues-button-tertiary">Tertiary button</button>
139
630
115
    </p>
140
  <p>
631
116
141
  <a class="ues-button" href="#">Link</a>
632
117
    <p>
142
  <button class=ues-button type=button>Button</button>
633
118
    <button class="ues-button"><i class="fa fa-credit-card"></i> <span>Change Payment Method</span></button>
143
  <input class=ues-button type=button value=Input>
634
119
    <button class="ues-button ues-button-primary"><i class="fa fa-shopping-cart"></i> <span>Checkout</span></button>
144
  <input class=ues-button type=submit value=Submit>
635
120
    </p>
145
  </p>
636
121
146
637
122
    <p>
147
  <p>
638
123
    <a class="ues-button" href="#">Link</a>
148
  <button class=ues-button-large>Large Button</button>
639
124
    <button class=ues-button type=button>Button</button>
149
  <button class=ues-button>Default Button</button>
640
125
    <input class=ues-button type=button value=Input>
150
  <button class=ues-button-small>Small Button</button>
641
126
    <input class=ues-button type=submit value=Submit>
151
  </p>
642
127
    </p>
152
643
128
153
  <p><button class=ues-button-block>Default Block Button</button></p>
644
129
    <p>
154
  <p><button class="ues-button-block ues-button-primary">Primary Block Button</button></p>
645
130
      <button class=ues-button-large>Large Button</button>
155
646
131
      <button class=ues-button>Default Button</button>
156
  <p>
647
132
      <button class=ues-button-small>Small Button</button>
157
  <div class="ues-button-group">
648
133
    </p>
158
    <button>Left</button>
649
134
159
    <button>Middle</button>
650
135
    <p><button class=ues-button-block>Default Block Button</button></p>
160
    <button>Right</button>
651
136
    <p><button class="ues-button-block ues-button-primary">Primary Block Button</button></p>
161
  </div>
652
137
162
  </p>
653
138
    <p>
163
654
139
    <div class="ues-button-group">
164
  <p>
655
140
      <button>Left</button>
165
  <div class="ues-button-toolbar">
656
141
      <button>Middle</button>
166
    <div class="ues-button-group">
657
142
      <button>Right</button>
167
      <button>A</button>
658
143
    </div>
168
      <button>B</button>
659
144
    </p>
169
      <button>C</button>
660
145
170
    </div>
661
146
    <p>
171
    <div class="ues-button-group">
662
147
    <div class="ues-button-toolbar">
172
      <button>D</button>
663
148
      <div class="ues-button-group">
173
      <button>E</button>
664
149
        <button>A</button>
174
    </div>
665
150
        <button>B</button>
175
    <div class="ues-button-group">
666
151
        <button>C</button>
176
      <button>F</button>
667
152
      </div>
177
    </div>
668
153
      <div class="ues-button-group">
178
  </div>
669
154
        <button>D</button>
179
  </p>
670
155
        <button>E</button>
180
671
156
      </div>
181
  <h1>Dropdowns</h1>
672
157
      <div class="ues-button-group">
182
673
158
        <button>F</button>
183
  <!-- Link or button to toggle dropdown -->
674
159
      </div>
184
  <div class="ues-dropdown clear">
675
160
    </div>
185
    <ul class="ues-dropdown-menu">
676
161
    </p>
186
      <li><a tabindex="-1" href="#">Action</a></li>
677
162
  </div>
187
      <li><a tabindex="-1" href="#">Another action</a></li>
678
163
188
      <li><a tabindex="-1" href="#">Something else here</a></li>
679
164
  <div class="section" id="dropdowns">
189
      <li class="ues-dropdown-divider"></li>
680
165
    <h1>Dropdowns</h1>
190
      <li><a tabindex="-1" href="#">Separated link</a></li>
681
166
191
    </ul>
682
167
    <div class="ues-box example">
192
  </div>
683
168
      <!-- Link or button to toggle dropdown -->
193
  <div class="ues-dropdown clear">
684
169
      <div class="ues-dropdown clear">
194
    <!-- Link or button to toggle dropdown -->
685
170
        <ul class="ues-dropdown-menu">
195
    <ul class="ues-dropdown-menu">
686
171
          <li><a tabindex="-1" href="#">Action</a></li>
196
      <li class="ues-dropdown-header">Dropdown header</li>
687
172
          <li><a tabindex="-1" href="#">Another action</a></li>
197
      <li><a tabindex="-1" href="#">Action</a></li>
688
173
          <li><a tabindex="-1" href="#">Something else here</a></li>
198
      <li><a tabindex="-1" href="#">Another action</a></li>
689
174
          <li class="ues-dropdown-divider"></li>
199
      <li><a tabindex="-1" href="#">Something else here</a></li>
690
175
          <li><a tabindex="-1" href="#">Separated link</a></li>
200
      <li class="ues-dropdown-divider"></li>
691
176
        </ul>
201
      <li class="ues-dropdown-header">Dropdown header</li>
692
177
      </div>
202
      <li><a tabindex="-1" href="#">Separated link</a></li>
693
178
      <div class="ues-dropdown clear">
203
    </ul>
694
179
        <!-- Link or button to toggle dropdown -->
204
  </div>
695
180
        <ul class="ues-dropdown-menu">
205
  <h2>Button Dropdowns</h2>
696
181
          <li class="ues-dropdown-header">Dropdown header</li>
206
  <div class="ues-button-group">
697
182
          <li><a tabindex="-1" href="#">Action</a></li>
207
    <button type="button" class="ues-button ues-dropdown-toggle">
698
183
          <li><a tabindex="-1" href="#">Another action</a></li>
208
      Do Something &#x25BC;
699
184
          <li><a tabindex="-1" href="#">Something else here</a></li>
209
    </button>
700
185
          <li class="ues-dropdown-divider"></li>
210
    <ul class="ues-dropdown-menu">
701
186
          <li class="ues-dropdown-header">Dropdown header</li>
211
      <li><a tabindex="-1" href="#">Action</a></li>
702
187
          <li><a tabindex="-1" href="#">Separated link</a></li>
212
      <li><a tabindex="-1" href="#">Another action</a></li>
703
188
        </ul>
213
      <li><a tabindex="-1" href="#">Something else here</a></li>
704
189
      </div>
214
      <li class="ues-dropdown-divider"></li>
705
190
    </div>
215
      <li><a tabindex="-1" href="#">Separated link</a></li>
706
191
    <h2>Button Dropdowns</h2>
216
    </ul>
707
192
    <div class="ues-box example">
217
  </div>
708
193
      <div class="ues-button-group">
218
  <div class="ues-button-group">
709
194
        <button type="button" class="ues-button ues-dropdown-toggle">
219
    <button type="button" class="ues-button">
710
195
          Do Something &#x25BC;
220
      Action
711
196
        </button>
221
    </button>
712
197
        <ul class="ues-dropdown-menu">
222
    <button type="button" class="ues-button ues-dropdown-toggle">
713
198
          <li><a tabindex="-1" href="#">Action</a></li>
223
      &#x25BC;
714
199
          <li><a tabindex="-1" href="#">Another action</a></li>
224
    </button>
715
200
          <li><a tabindex="-1" href="#">Something else here</a></li>
225
    <ul class="ues-dropdown-menu">
716
201
          <li class="ues-dropdown-divider"></li>
226
      <li><a tabindex="-1" href="#">Action</a></li>
717
202
          <li><a tabindex="-1" href="#">Separated link</a></li>
227
      <li><a tabindex="-1" href="#">Another action</a></li>
718
203
        </ul>
228
      <li><a tabindex="-1" href="#">Something else here</a></li>
719
204
      </div>
229
      <li class="ues-dropdown-divider"></li>
720
205
    </div>
230
      <li><a tabindex="-1" href="#">Separated link</a></li>
721
206
    <div class="ues-box example">
231
    </ul>
722
207
      <div class="ues-button-group">
232
  </div>
723
208
        <button type="button" class="ues-button">
233
</section>
724
209
          Action
234
725
210
        </button>
235
726
211
        <button type="button" class="ues-button ues-dropdown-toggle">
236
<section>
727
212
          &#x25BC;
237
  <h1>Navigation</h1>
728
213
        </button>
238
729
214
        <ul class="ues-dropdown-menu">
239
  <h2>Horizontal Menu</h2>
730
215
          <li><a tabindex="-1" href="#">Action</a></li>
240
  <ul class="ues-menu ues-menu-horizontal">
731
216
          <li><a tabindex="-1" href="#">Another action</a></li>
241
    <li><a href="">Dashboard</a></li>
732
217
          <li><a tabindex="-1" href="#">Something else here</a></li>
242
    <li><a href="">Files</a></li>
733
218
          <li class="ues-dropdown-divider"></li>
243
    <li><a href="">Photos</a></li>
734
219
          <li><a tabindex="-1" href="#">Separated link</a></li>
244
    <li><a href="">Music</a></li>
735
220
        </ul>
245
  </ul>
736
221
      </div>
246
737
222
    </div>
247
  <h2>Vertical Menu</h2>
738
223
248
  <ul class="ues-menu">
739
224
  </div>
249
    <li><a href="">Dashboard</a></li>
740
225
250
    <li class="ues-menu-selected"><a href="">Files</a></li>
741
226
  <div class="section" id="navigation">
251
    <li><a href="">Photos</a></li>
742
227
    <h1>Navigation</h1>
252
    <li><a href="">Music</a></li>
743
228
253
  </ul>
744
229
    <h2>Horizontal Menu</h2>
254
745
230
    <div class="ues-box example">
255
  <h2>Navbar</h2>
746
231
      <ul class="ues-menu ues-menu-horizontal">
256
  <div class="ues-navbar">
747
232
        <li><a href="">Dashboard</a></li>
257
    <ul class="ues-menu ues-menu-horizontal">
748
233
        <li><a href="">Files</a></li>
258
      <li><a href="">Dashboard</a></li>
749
234
        <li><a href="">Photos</a></li>
259
      <li><a href="">Files</a></li>
750
235
        <li><a href="">Music</a></li>
260
      <li><a href="">Photos</a></li>
751
236
      </ul>
261
      <li><a href="">Music</a></li>
752
237
    </div>
262
    </ul>
753
238
263
  </div>
754
239
    <h2>Vertical Menu</h2>
264
755
240
    <div class="ues-box example">
265
  <h2>Navbar with Title/Graphic and right text</h2>
756
241
      <ul class="ues-menu">
266
  <div class="ues-navbar">
757
242
        <li><a href="">Dashboard</a></li>
267
    <div class="ues-navbar-brand">
758
243
        <li class="ues-menu-selected"><a href="">Files</a></li>
268
      <a href="/">[BRAND]</a>
759
244
        <li><a href="">Photos</a></li>
269
    </div>
760
245
        <li><a href="">Music</a></li>
270
    <ul class="ues-menu ues-menu-horizontal">
761
246
      </ul>
271
      <li><a href="">Dashboard</a></li>
762
247
    </div>
272
      <li><a href="">Files</a></li>
763
248
273
      <li><a href="">Photos</a></li>
764
249
    <h2>Navbar</h2>
274
      <li><a href="">Music</a></li>
765
250
    <div class="ues-box example">
275
    </ul>
766
251
      <div class="ues-navbar">
276
    <p class="ues-navbar-text">Signed in as Lobo.</p>
767
252
        <ul class="ues-menu ues-menu-horizontal">
277
  </div>
768
253
          <li><a href="">Dashboard</a></li>
278
769
254
          <li><a href="">Files</a></li>
279
  <h2>Default Pagination</h2>
770
255
          <li><a href="">Photos</a></li>
280
  <ul class="ues-pagination">
771
256
          <li><a href="">Music</a></li>
281
    <li class="-disabled"><span>&#x2190;</span></li>
772
257
        </ul>
282
    <li class="-active"><a href="#">1</a></li>
773
258
      </div>
283
    <li><a href="#">2</a></li>
774
259
    </div>
284
    <li><a href="#">3</a></li>
775
260
285
    <li><a href="#">4</a></li>
776
261
    <h2>Navbar with Title/Graphic and right text</h2>
286
    <li><a href="#">5</a></li>
777
262
    <div class="ues-box example">
287
    <li><a href="#">&#x2192;</a></li>
778
263
      <div class="ues-navbar">
288
  </ul>
779
264
        <div class="ues-navbar-brand">
289
  <h2>Pagination with break</h2>
780
265
          <a href="/">[BRAND]</a>
290
  <ul class="ues-pagination">
781
266
        </div>
291
    <li class="-disabled"><span>&#x2190;</span></li>
782
267
        <ul class="ues-menu ues-menu-horizontal">
292
    <li class="-active"><a href="#">1</a></li>
783
268
          <li><a href="">Dashboard</a></li>
293
    <li><a href="#">2</a></li>
784
269
          <li><a href="">Files</a></li>
294
    <li><a href="#">3</a></li>
785
270
          <li><a href="">Photos</a></li>
295
    <li class="ues-pagination-break"><span>…</span></li>
786
271
          <li><a href="">Music</a></li>
296
    <li><a href="#">8</a></li>
787
272
        </ul>
297
    <li><a href="#">9</a></li>
788
273
        <p class="ues-navbar-text">Signed in as Lobo.</p>
298
    <li><a href="#">10</a></li>
789
274
      </div>
299
    <li><a href="#">&#x2192;</a></li>
790
275
    </div>
300
  </ul>
791
276
301
</section>
792
277
  </div>
302
793
278
303
794
279
  <div class="section" id="pagination">
304
<section>
795
280
    <h1>Pagination</h1>
305
  <h1>Forms</h1>
796
281
306
797
282
    <h2>Pagination</h2>
307
  <article>
798
283
    <div class="ues-box example">
308
    <h2>Default Forms</h2>
799
284
      <ul class="ues-pagination">
309
    <p>By default individual form controls receive styling, with minimal classing and
800
285
        <li class="-disabled"><span><i class="fa fa-angle-double-left"></i></span></li>
310
    without any required base class on the <code class=tag>form</code> or large
801
286
        <li class="-active"><a href="#">1</a></li>
311
    changes in markup.</p>
802
287
        <li><a href="#">2</a></li>
312
803
288
        <li><a href="#">3</a></li>
313
    <p>Results in stacked, left-aligned labels on top of form controls.</p>
804
289
        <li><a href="#">4</a></li>
314
805
290
        <li><a href="#">5</a></li>
315
    <form action>
806
291
        <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
316
      <fieldset>
807
292
      </ul>
317
        <label>Username:</label>
808
293
    </div>
318
        <input type=text>
809
294
    <h2>Pagination with break</h2>
319
810
295
    <div class="ues-box example">
320
        <label>Password:</label>
811
296
      <ul class="ues-pagination">
321
        <input type=text>
812
297
        <li class="-disabled"><span><i class="fa fa-angle-double-left"></i></span></li>
322
        <label><input type=checkbox>Keep me signed in</label>
813
298
        <li class="-active"><a href="#">1</a></li>
323
        <div class=ues-form-help>Form help text</div>
814
299
        <li><a href="#">2</a></li>
324
      </fieldset>
815
300
        <li><a href="#">3</a></li>
325
    </form>
816
301
        <li class="ues-pagination-break"><span>…</span></li>
326
817
302
        <li><a href="#">8</a></li>
327
    <fieldset>
818
303
        <li><a href="#">9</a></li>
328
      <legend>Payment Details</legend>
819
304
        <li><a href="#">10</a></li>
329
820
305
        <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
330
      <label><input checked type=radio name=foo>Credit Card</label>
821
306
      </ul>
331
      <label><input type=radio name=foo>Paypal</label>
822
307
    </div>
332
823
308
333
      <label>Name/username:</label>
824
309
  </div>
334
      <input type=text placeholder="Type something…">
825
310
335
826
311
  <div class="section" id="forms">
336
      <label class=ues-inline><input type=radio name=bar>Foo</label>
827
312
    <h1>Forms</h1>
337
      <label class=ues-inline><input checked type=radio name=bar>Bar</label>
828
313
338
829
314
    <article>
339
      <label>Card Number:</label>
830
315
      <h2>Default Forms</h2>
340
      <input type=text>
831
316
      <p>By default individual form controls receive styling, with minimal classing and
341
832
317
      without any required base class on the <code class=tag>form</code> or large
342
      <label>CCV:</label>
833
318
      changes in markup.</p>
343
      <input type=text>
834
319
344
      <div class=ues-form-help>Form help text</div>
835
320
      <p>Results in stacked, left-aligned labels on top of form controls.</p>
345
836
321
346
      <label>Select:</label>
837
322
      <div class="ues-box example" title="Default Form">
347
      <select>
838
323
        <form action>
348
        <option value>Select One</option>
839
324
          <fieldset>
349
        <option value=1>Select One</option>
840
325
            <label>Username:</label>
350
        <option value=2>Foo</option>
841
326
            <input type=text>
351
        <option value=3>Bar</option>
842
327
352
        <option value=4>Baz</option>
843
328
            <label>Password:</label>
353
      </select>
844
329
            <input type=text>
354
      <label>Select:</label>
845
330
            <label><input type=checkbox>Keep me signed in</label>
355
      <select class=ues-inline>
846
331
            <div class=ues-form-help>Form help text</div>
356
        <option value=2>Foo</option>
847
332
          </fieldset>
357
        <option value=3 selected>Bar</option>
848
333
        </form>
358
        <option value=4>Baz</option>
849
334
      </div>
359
      </select>
850
335
360
      <span class=ues-form-help>Inline form help text</span>
851
336
      <div class="ues-box example">
361
852
337
        <fieldset>
362
    </fieldset>
853
338
          <legend>Payment Details</legend>
363
    <fieldset>
854
339
364
      <label><input type=checkbox>Agree to ToS</label>
855
340
          <label><input checked type=radio name=foo>Credit Card</label>
365
    </fieldset>
856
341
          <label><input type=radio name=foo>Paypal</label>
366
    <button type=submit class=ues-button>Submit</button>
857
342
367
  </form>
858
343
          <label>Name/username:</label>
368
</article>
859
344
          <input type=text placeholder="Type something…">
369
<article>
860
345
370
  <h2>Inline Form</h2>
861
346
          <label class=ues-inline><input type=radio name=bar>Foo</label>
371
  <p>Simple inline form</p>
862
347
          <label class=ues-inline><input checked type=radio name=bar>Bar</label>
372
  <form action class=ues-form-inline>
863
348
373
    <fieldset>
864
349
          <label>Card Number:</label>
374
      <input type=text placeholder="Type something…">
865
350
          <input type=text>
375
      <input type=text placeholder="Type something…">
866
351
376
      <label><input type=checkbox>Remember me?</label>
867
352
          <label>CCV:</label>
377
      <button type=submit class=ues-button>Submit</button>
868
353
          <input type=text>
378
    </fieldset>
869
354
          <div class=ues-form-help>Form help text</div>
379
  </form>
870
355
380
</article>
871
356
          <label>Select:</label>
381
<article>
872
357
          <select>
382
  <h2>Required Inputs</h2>
873
358
            <option value>Select One</option>
383
  <p>To mark a form control as required, add the <code>required</code> attribute. </p>
874
359
            <option value=1>Select One</option>
384
  <form action class=ues-form-inline>
875
360
            <option value=2>Foo</option>
385
    <input type=text placeholder="Type something…" required="true">
876
361
            <option value=3>Bar</option>
386
  </form>
877
362
            <option value=4>Baz</option>
387
</article>
878
363
          </select>
388
<article>
879
364
          <label>Select:</label>
389
  <h2>Disabled Inputs</h2>
880
365
          <select class=ues-inline>
390
  <p>To mark a form control as disabled, add the <code>disabled</code> attribute. </p>
881
366
            <option value=2>Foo</option>
391
  <form action class=ues-form-inline>
882
367
            <option value=3 selected>Bar</option>
392
    <input type=text placeholder="Type something…" disabled="true">
883
368
            <option value=4>Baz</option>
393
  </form>
884
369
          </select>
394
</article>
885
370
          <span class=ues-form-help>Inline form help text</span>
395
<article>
886
371
396
  <h2>Readonly Inputs</h2>
887
372
        </fieldset>
397
  <form action class=ues-form-inline>
888
373
        <fieldset>
398
    <input type=text readonly="true" value="http://ubuntuone.com/abcdef1234">
889
374
          <label><input type=checkbox>Agree to ToS</label>
399
  </form>
890
375
        </fieldset>
400
</article>
891
376
        <button type=submit class=ues-button>Submit</button>
401
<article>
892
377
      </form>
402
  <h2>Checkboxes &amp; Radios</h2>
893
378
    </div>
403
  <form action>
894
379
  </article>
404
    <fieldset>
895
380
  <article>
405
      <legend>Radio inputs default, stacked</legend>
896
381
    <h2>Inline Form</h2>
406
      <label><input checked type=radio name=foo>Credit Card</label>
897
382
    <p>Simple inline form</p>
407
      <label><input type=radio name=foo>Paypal</label>
898
383
    <div class="ues-box example" title="Inline Form">
408
    </fieldset>
899
384
      <form action class=ues-form-inline>
409
    <fieldset>
900
385
        <fieldset>
410
      <legend>Radio inputs inline, stacked</legend>
901
386
          <input type=text placeholder="Type something…">
411
      <label class=ues-inline><input type=radio name=bar>Foo</label>
902
387
          <input type=text placeholder="Type something…">
412
      <label class=ues-inline><input checked type=radio name=bar>Bar</label>
903
388
          <label><input type=checkbox>Remember me?</label>
413
    </fieldset>
904
389
          <button type=submit class=ues-button>Submit</button>
414
    <fieldset>
905
390
        </fieldset>
415
      <legend>Checkbox default, stacked</legend>
906
391
      </form>
416
      <label><input checked type=checkbox name=foo1>Credit Card</label>
907
392
    </div>
417
      <label><input type=checkbox name=foo2>Paypal</label>
908
393
  </article>
418
    </fieldset>
909
394
  <article>
419
    <fieldset>
910
395
    <h2>Required Inputs</h2>
420
      <legend>Checkbox inline, stacked</legend>
911
396
    <p>To mark a form control as required, add the <code>required</code> attribute. </p>
421
      <label class=ues-inline><input type=checkbox name=bar1>Foo</label>
912
397
    <div class="ues-box example" title="Required Inputs">
422
      <label class=ues-inline><input checked type=checkbox name=bar2>Bar</label>
913
398
      <form action class=ues-form-inline>
423
    </fieldset>
914
399
        <input type=text placeholder="Type something…" required="true">
424
  </form>
915
400
      </form>
425
</article>
916
401
    </div>
426
</section>
917
402
  </article>
427
918
403
  <article>
428
919
404
    <h2>Disabled Inputs</h2>
429
<section>
920
405
    <p>To mark a form control as disabled, add the <code>disabled</code> attribute. </p>
430
<h1>Layout</h1>
921
406
    <div class="ues-box example" title="Disabled Inputs">
431
922
407
      <form action class=ues-form-inline>
432
<div class="ues-box ues-box-solid" style="width:320px">
923
408
        <input type=text placeholder="Type something…" disabled="true">
433
  <h3>A Headline</h3>
924
409
      </form>
434
  <p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
925
410
    </div>
435
  <h3>A Headline</h3>
926
411
  </article>
436
  <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
472
412
  <article>
473
413
    <h2>Readonly Inputs</h2>
474
414
    <p>To make a form input read-only, add the <code>readonly</code> attribute. The
475
415
    difference between <code>disabled</code> and <code>readonly</code> is read-only inputs are still
476
416
    focusable. This allows people to interact with the input and select its
477
417
    text, whereas disabled controls are not interactive.</p>
478
418
    <div class="ues-box example" title="Readonly Inputs">
479
419
      <form action class=ues-form-inline>
480
420
        <input type=text readonly="true" value="http://ubuntuone.com/abcdef1234">
481
421
      </form>
482
422
    </div>
483
423
  </article>
484
424
  <article>
485
425
    <h2>Checkboxes &amp; Radios</h2>
486
426
    <div class="ues-box example">
487
427
      <form action>
488
428
        <fieldset>
489
429
          <legend>Radio inputs default, stacked</legend>
490
430
          <label><input checked type=radio name=foo>Credit Card</label>
491
431
          <label><input type=radio name=foo>Paypal</label>
492
432
        </fieldset>
493
433
        <fieldset>
494
434
          <legend>Radio inputs inline, stacked</legend>
495
435
          <label class=ues-inline><input type=radio name=bar>Foo</label>
496
436
          <label class=ues-inline><input checked type=radio name=bar>Bar</label>
497
437
        </fieldset>
498
438
        <fieldset>
499
439
          <legend>Checkbox default, stacked</legend>
500
440
          <label><input checked type=checkbox name=foo1>Credit Card</label>
501
441
          <label><input type=checkbox name=foo2>Paypal</label>
502
442
        </fieldset>
503
443
        <fieldset>
504
444
          <legend>Checkbox inline, stacked</legend>
505
445
          <label class=ues-inline><input type=checkbox name=bar1>Foo</label>
506
446
          <label class=ues-inline><input checked type=checkbox name=bar2>Bar</label>
507
447
        </fieldset>
508
448
      </form>
509
449
    </div>
510
450
  </article>
511
451
512
452
  </div>
513
453
514
454
  <div class="section" id="layout">
515
455
    <h1>Layout</h1>
516
456
517
457
    <h2>AKA Panels and Wells… TODO</h2>
518
458
    <p>Rename these classes!</p>
519
459
    <div class=doc-example>
520
460
      <div class=ues-box-solid style="width:320px">
521
461
        <h2 class=ues-box-solid-h>Callout Headline</h2>
522
462
        <p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
523
463
        <h3>A Headline</h3>
524
464
        <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
525
465
        <h2 class=ues-box-solid-h>Callout Headline</h2>
526
466
        <p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
527
467
        <h3>A Headline</h3>
528
468
        <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
529
469
      </div>
530
470
    </div>
531
471
532
472
  </div>
533
473
534
474
  <div class="section" id="testing">
535
475
    <h1>Testing</h1>
536
476
537
477
    <h2>Common Page Objects</h2>
538
478
539
479
    <h3>Page Heading</h3>
540
480
541
481
    <div class="ues-box example">
542
482
      <h1 data-qa-id="page-heading">My Page Heading</h1>
543
483
    </div>
544
484
545
485
546
486
  </div>
547
487
548
488
  <div class="section" id="feedback" style="margin-bottom: 2em">
549
489
    <h1>Feedback</h1>
550
490
551
491
552
492
    <h2>Static messages, warnings, errors, notices</h2>
553
493
554
494
    <div class="doc-example">
555
495
556
496
      <p class="ues-message ues-message-inline">Message</p>
557
497
558
498
      <p class="ues-message ues-message-inline ues-disabled">Disabled</p>
559
499
560
500
      <p class="ues-message ues-message-inline ues-success">Success</p>
561
501
562
502
      <p class="ues-message ues-message-inline ues-warning">Warning</p>
563
503
564
504
      <p class="ues-message ues-message-inline ues-error">Error</p>
565
505
566
506
      <p class="ues-message ues-message-inline ues-error ues-error-pulsating">Pulsating error</p>
567
507
568
508
      <p class="ues-message ues-message-inline ues-information">Information</p>
569
509
570
510
      <p id="msg-closeable" class="ues-message ues-message-closeable">Closable</p>
571
511
572
512
      <p class="ues-message ues-message-bordered ues-information">Block element with border</p>
573
513
574
514
      <p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
575
515
576
516
577
517
    </div>
578
518
927
519
</div>
437
</div>
928
520
438
929
439
<h1>Feedback</h1>
930
440
931
441
932
442
<h2>Static messages, warnings, errors, notices</h2>
933
443
934
444
<p class="ues-message ues-message-inline">Message</p>
935
445
936
446
<p class="ues-message ues-message-inline ues-disabled">Disabled</p>
937
447
938
448
<p class="ues-message ues-message-inline ues-success">Success</p>
939
449
940
450
<p class="ues-message ues-message-inline ues-warning">Warning</p>
941
451
942
452
<p class="ues-message ues-message-inline ues-error">Error</p>
943
453
944
454
<p class="ues-message ues-message-inline ues-error ues-error-pulsating">Pulsating error</p>
945
455
946
456
<p class="ues-message ues-message-inline ues-information">Information</p>
947
457
948
458
<p id="msg-closeable" class="ues-message ues-message-closeable">Closable</p>
949
459
950
460
<p class="ues-message ues-message-bordered ues-information">Block element with border</p>
951
461
952
462
<p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
953
463
</section>
954
521
464
955
522
</body>
465
</body>
956
523
</html>
466
</html>
Status:	Merged
Merged at revision:	11
Proposed branch:	lp:~stephen-stewart/ulysses/fix-test-page
Merge into:	lp:ulysses
Diff against target:	956 lines (+439/-496) 1 file modified test/index.html (+439/-496)
To merge this branch:	bzr merge lp:~stephen-stewart/ulysses/fix-test-page
Related bugs:	Link a bug report
Reviewer	Review Type	Date Requested	Status
Jonas G. Drange (community)		2013-12-02	Approve on 2013-12-05
Review via email: mp+197358@code.launchpad.net