Skip to content

Commit cc9b933

Browse files
jlukicjlukic
committed
Merge branch 'next' of github.com:Semantic-Org/Semantic-UI-Docs into next
Conflicts: server/documents/hotfix.html.eco
2 parents c37b516 + 1312a89 commit cc9b933

3 files changed

Lines changed: 255 additions & 2 deletions

File tree

‎server/documents/behaviors/form.html.eco‎

Lines changed: 124 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,23 @@ type : 'UI Behavior'
196196
</tr>
197197
</tbody>
198198
</table>
199+
200+
<h3 class="ui header"><a href="#payment">Payment</a></h3>
201+
<table class="ui celled sortable basic table segment">
202+
<tbody>
203+
<tr>
204+
<td class="four wide">creditCard</td>
205+
<td class="six wide">A field is a valid credit card</td>
206+
<td><code>creditCard</code></td>
207+
</tr>
208+
<tr>
209+
<td>creditCard[types]</td>
210+
<td>A field matches a specified array of card types</td>
211+
<td><code>creditCard[visa,mastercard,unionpay]</code></td>
212+
</tr>
213+
</tbody>
214+
</table>
215+
199216
<h3 class="ui header"><a href="#specified-content">Specified Content</a></h3>
200217
<table class="ui celled sortable basic table segment">
201218
<tbody>
@@ -246,6 +263,7 @@ type : 'UI Behavior'
246263
</tr>
247264
</tbody>
248265
</table>
266+
249267
<h3 class="ui header"><a href="#length">Length</a></h3>
250268
<table class="ui celled sortable basic table segment">
251269
<tbody>
@@ -272,7 +290,7 @@ type : 'UI Behavior'
272290
<tbody>
273291
<tr>
274292
<td class="four wide">match</td>
275-
<td>A field should match the value of another validation field, for example to confirm passwords</td class="six wide">
293+
<td class="six wide">A field should match the value of another validation field, for example to confirm passwords</td>
276294
<td><code>match[password]</code></td>
277295
</tr>
278296
<tr>
@@ -695,6 +713,111 @@ type : 'UI Behavior'
695713
;
696714
</div>
697715
</div>
716+
<div class="payment example">
717+
<h4 class="ui header">Payment</h4>
718+
<p>Inputs can validate credit cards and other payment types.</p>
719+
720+
<table class="ui very basic collapsing celled table">
721+
<tbody>
722+
<tr>
723+
<td class="four wide">Card Name</td>
724+
<td class="six wide">Validation Name</td>
725+
<td class="six wide">Test Card Number</td>
726+
</tr>
727+
<tr>
728+
<td>Visa</td>
729+
<td><code>visa</code></td>
730+
<td>4565340519181845</td>
731+
</tr>
732+
<tr>
733+
<td>American Express</td>
734+
<td><code>amex</code></td>
735+
<td>378282246310005</td>
736+
</tr>
737+
<tr>
738+
<td>Mastercard</td>
739+
<td><code>mastercard</code></td>
740+
<td>5200828282828210</td>
741+
</tr>
742+
<tr>
743+
<td>Discover</td>
744+
<td><code>discover</code></td>
745+
<td>6011111111111117</td>
746+
</tr>
747+
<tr>
748+
<td>Unionpay</td>
749+
<td><code>unionpay</code></td>
750+
<td>6240008631401148</td>
751+
</tr>
752+
<tr>
753+
<td>JCB</td>
754+
<td><code>jcb</code></td>
755+
<td>3530111333300000</td>
756+
</tr>
757+
<tr>
758+
<td>Diner's Club</td>
759+
<td><code>dinersClub</code></td>
760+
<td>38520000023237</td>
761+
</tr>
762+
<tr>
763+
<td>Maestro</td>
764+
<td><code>maestro</code></td>
765+
<td>6799990100000000019</td>
766+
</tr>
767+
<tr>
768+
<td>Laser</td>
769+
<td><code>laser</code></td>
770+
<td>630490017740292441</td>
771+
</tr>
772+
<tr>
773+
<td>Visa Electron</td>
774+
<td><code>visaElectron</code></td>
775+
<td>4917300800000000</td>
776+
</tr>
777+
</tbody>
778+
</table>
779+
<form class="ui form segment">
780+
<div class="two fields">
781+
<div class="field">
782+
<label>Credit Card</label>
783+
<input name="card" type="text" value="4444444444444444">
784+
</div>
785+
<div class="field">
786+
<label>Certain Type</label>
787+
<input name="exact-card" type="text" value="4444444444444444">
788+
</div>
789+
</div>
790+
<div class="ui submit button">Submit</div>
791+
<div class="ui error message"></div>
792+
</form>
793+
<div class="evaluated code">
794+
$('.payment.example form')
795+
.form({
796+
on: 'blur',
797+
fields: {
798+
card: {
799+
identifier : 'card',
800+
rules: [
801+
{
802+
type : 'creditCard',
803+
prompt : 'Please enter a valid credit card'
804+
}
805+
]
806+
},
807+
exactCard: {
808+
identifier : 'exact-card',
809+
rules: [
810+
{
811+
type : 'creditCard[visa,amex]',
812+
prompt : 'Please enter a visa or amex card'
813+
}
814+
]
815+
}
816+
}
817+
})
818+
;
819+
</div>
820+
</div>
698821
<div class="match example">
699822
<h4 class="ui header">Matching Fields</h4>
700823
<p>Fields can be required to match, or not match other fields. You may consider using this with <a href="#optional-fields">optional fields</a>.</p>

‎server/documents/collections/grid.html.eco‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,21 @@ themes : ['Default']
406406
<div class="column"></div>
407407
</div>
408408
</div>
409+
<div class="example" data-class="mobile reversed">
410+
<h4 class="ui header">Reverse Order</h4>
411+
<p>Semantic includes special <a href="#reversed"><code>reversed</code></a> variations that allow you to reverse the order of columns or rows by device</p>
412+
<div class="ui mobile reversed equal width grid">
413+
<div class="column">
414+
First
415+
</div>
416+
<div class="column">
417+
Second
418+
</div>
419+
<div class="column">
420+
Third
421+
</div>
422+
</div>
423+
</div>
409424

410425
<div class="highlighted example">
411426
<h4 class="ui header">Doubling</h4>
@@ -1270,6 +1285,101 @@ themes : ['Default']
12701285
</div>
12711286
</div>
12721287
</div>
1288+
<div class="example" data-use-content="true" data-class="computer reversed, tablet reversed, mobile reversed, computer vertically reversed, mobile vertically reversed, tablet vertically reversed">
1289+
<h4 class="ui header">Responsive Order</h4>
1290+
<p>A grid or row can specify that its columns should reverse order at different device sizes</p>
1291+
<div class="ui ignored warning message">Reversed grids are not yet compatible with variations like <code>divided</code> which require special <code>:first-child</code> and <code>:last-child</code> styling</div>
1292+
<div class="ui mobile reversed equal width grid">
1293+
<div class="column">
1294+
Tablet Fourth
1295+
</div>
1296+
<div class="column">
1297+
Tablet Third
1298+
</div>
1299+
<div class="column">
1300+
Tablet Second
1301+
</div>
1302+
<div class="column">
1303+
Tablet First
1304+
</div>
1305+
</div>
1306+
<div class="ui tablet reversed equal width grid">
1307+
<div class="column">
1308+
Tablet Fourth
1309+
</div>
1310+
<div class="column">
1311+
Tablet Third
1312+
</div>
1313+
<div class="column">
1314+
Tablet Second
1315+
</div>
1316+
<div class="column">
1317+
Tablet First
1318+
</div>
1319+
</div>
1320+
<div class="ui computer reversed equal width grid">
1321+
<div class="column">
1322+
Computer Fourth
1323+
</div>
1324+
<div class="column">
1325+
Computer Third
1326+
</div>
1327+
<div class="column">
1328+
Computer Second
1329+
</div>
1330+
<div class="column">
1331+
Computer First
1332+
</div>
1333+
</div>
1334+
</div>
1335+
<div class="another example">
1336+
<div class="ui computer vertically reversed grid">
1337+
<div class="row">
1338+
<div class="column">Computer Row 4</div>
1339+
</div>
1340+
<div class="row">
1341+
<div class="column">Computer Row 3</div>
1342+
</div>
1343+
<div class="row">
1344+
<div class="column">Computer Row 2</div>
1345+
</div>
1346+
<div class="row">
1347+
<div class="column">Computer Row 1</div>
1348+
</div>
1349+
</div>
1350+
</div>
1351+
<div class="another example">
1352+
<div class="ui tablet vertically reversed grid">
1353+
<div class="row">
1354+
<div class="column">Tablet Row 4</div>
1355+
</div>
1356+
<div class="row">
1357+
<div class="column">Tablet Row 3</div>
1358+
</div>
1359+
<div class="row">
1360+
<div class="column">Tablet Row 2</div>
1361+
</div>
1362+
<div class="row">
1363+
<div class="column">Tablet Row 1</div>
1364+
</div>
1365+
</div>
1366+
</div>
1367+
<div class="another example">
1368+
<div class="ui mobile vertically reversed grid">
1369+
<div class="row">
1370+
<div class="column">Mobile Row 4</div>
1371+
</div>
1372+
<div class="row">
1373+
<div class="column">Mobile Row 3</div>
1374+
</div>
1375+
<div class="row">
1376+
<div class="column">Mobile Row 2</div>
1377+
</div>
1378+
<div class="row">
1379+
<div class="column">Mobile Row 1</div>
1380+
</div>
1381+
</div>
1382+
</div>
12731383

12741384
<div class="example" data-use-content="true" data-class="large screen only, computer only, tablet only, mobile only">
12751385
<h4 class="ui header">Device Visibility</h4>

‎server/documents/elements/input.html.eco‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,33 @@ themes : ['Default', 'GitHub']
4949
<input type="text" placeholder="Search...">
5050
<i class="search icon"></i>
5151
</div>
52-
<div class="ui divider"></div>
52+
</div>
53+
<div class="another example">
5354
<div class="ui icon input loading">
5455
<input type="text" placeholder="Search...">
5556
<i class="search icon"></i>
5657
</div>
5758
</div>
5859

60+
<div class="example">
61+
<h4 class="ui header">Disabled</h4>
62+
<p>An input field can show that it is disabled</p>
63+
<div class="ui disabled input">
64+
<input type="text" placeholder="Search...">
65+
</div>
66+
</div>
67+
<div class="another example">
68+
<div class="ui disabled icon input">
69+
<i class="search icon"></i>
70+
<input type="text" placeholder="Search...">
71+
</div>
72+
</div>
73+
<div class="another example">
74+
<div class="ui input">
75+
<input type="text" placeholder="Search..." disabled>
76+
</div>
77+
</div>
78+
5979
<div class="example">
6080
<h4 class="ui header">Error</h4>
6181
<p>An input field can show the data contains errors</p>

0 commit comments

Comments
 (0)