@fundamental-styles/theming-preview 0.30.0-rc.8 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/form.html CHANGED
@@ -27,19 +27,19 @@
27
27
  <div class="fd-panel__content fd-theming__flex" style="width: 1000px;">
28
28
  <div class="fd-container fd-form-layout-grid-container">
29
29
  <div class="fd-row">
30
- <div class="fd-col fd-col--4">
31
- <label class="fd-form-label" for="input-13-compact">Name: </label>
30
+ <div class="fd-col fd-col-md--4">
31
+ <label class="fd-form-label" for="input-13-name">Name: </label>
32
32
  </div>
33
33
  <span>John Smith</span>
34
34
  </div>
35
35
  <div class="fd-row">
36
- <div class="fd-col fd-col--4">
37
- <label class="fd-form-label" for="input-13b-compact">Street/no: </label>
36
+ <div class="fd-col fd-col-md--4">
37
+ <label class="fd-form-label" for="input-13b-street">Street/no: </label>
38
38
  </div>
39
39
  <span>123 Front St.</span>
40
40
  </div>
41
41
  <div class="fd-row" role="group" aria-labelledby="groupLabel-compact">
42
- <div class="fd-col fd-col--4">
42
+ <div class="fd-col fd-col-md--4">
43
43
  <label class="fd-form-label" id="groupLabel-compact">ZIP Code/City: </label>
44
44
  </div>
45
45
  <span>12345 Montreal</span>
@@ -54,40 +54,40 @@
54
54
  </div>
55
55
  <div class="fd-panel__content fd-theming__flex" style="width: 1000px;">
56
56
  <div class="fd-container fd-form-layout-grid-container">
57
- <div class="fd-row">
58
- <div class="fd-col fd-col--4">
59
- <label class="fd-form-label" for="input-13-compact">Name: </label>
57
+ <div class="fd-row fd-form-item">
58
+ <div class="fd-col fd-col-md--4">
59
+ <label class="fd-form-label" for="input-13-name">Name: </label>
60
60
  </div>
61
- <div class="fd-col fd-col--7">
62
- <input class="fd-input fd-input--compact" type="text" id="input-13-compact" placeholder="Name">
61
+ <div class="fd-col fd-col-md--7">
62
+ <input class="fd-input" type="text" id="input-13-name" placeholder="Name">
63
63
  </div>
64
64
  </div>
65
- <div class="fd-row">
66
- <div class="fd-col fd-col--4">
67
- <label class="fd-form-label" for="input-13b-compact">Street/no: </label>
65
+ <div class="fd-row fd-form-item">
66
+ <div class="fd-col fd-col-md--4">
67
+ <label class="fd-form-label fd-form-label--required" for="input-13b-street">Street/no: </label>
68
68
  </div>
69
- <div class="fd-col fd-col--7">
69
+ <div class="fd-col fd-col-md--7">
70
70
  <div class="fd-row">
71
- <div class="fd-col fd-col--6">
72
- <input class="fd-input fd-input--compact" type="text" id="input1-of-2-compact" aria-label="input1-of-2-compact" placeholder="Street Address">
71
+ <div class="fd-col fd-col-md--6">
72
+ <input class="fd-input" type="text" id="input1-of-2-street-address" aria-label="input1-of-2-street-address" placeholder="Street Address">
73
73
  </div>
74
- <div class="fd-col fd-col--6">
75
- <input class="fd-input fd-input--compact" type="text" id="input2-of-2-compact" aria-label="input2-of-2-compact" placeholder="Street Number">
74
+ <div class="fd-col fd-col-md--6">
75
+ <input class="fd-input" type="text" id="input2-of-2-street-number" aria-label="input2-of-2-street-number" placeholder="Street Number">
76
76
  </div>
77
77
  </div>
78
78
  </div>
79
79
  </div>
80
- <div class="fd-row" role="group" aria-labelledby="groupLabel-compact">
81
- <div class="fd-col fd-col--4">
82
- <label class="fd-form-label" id="groupLabel-compact">ZIP Code/City: </label>
80
+ <div class="fd-row fd-form-item" role="group" aria-labelledby="groupLabel">
81
+ <div class="fd-col fd-col-md--4">
82
+ <label class="fd-form-label fd-form-label--required" id="groupLabel-city">ZIP Code/City: </label>
83
83
  </div>
84
- <div class="fd-col fd-col--7">
84
+ <div class="fd-col fd-col-md--7">
85
85
  <div class="fd-row">
86
- <div class="fd-col fd-col--6">
87
- <input class="fd-input fd-input--compact" type="text" id="input1-of-2-compact" aria-label="input1-of-2-compact" placeholder="Zip Code">
86
+ <div class="fd-col fd-col-md--6">
87
+ <input class="fd-input" type="text" id="input1-of-2-zip" aria-label="input1-of-2-zip" placeholder="Zip Code">
88
88
  </div>
89
- <div class="fd-col fd-col--6">
90
- <input class="fd-input fd-input--compact" type="text" id="input2-of-2-compact" aria-label="input2-of-2-compact" placeholder="City">
89
+ <div class="fd-col fd-col-md--6">
90
+ <input class="fd-input" type="text" id="input2-of-2-city" aria-label="input2-of-2-city" placeholder="City">
91
91
  </div>
92
92
  </div>
93
93
  </div>