semantic-ui-sass 0.19.3.1 → 1.7.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +21 -0
  3. data/README.md +5 -6
  4. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  5. data/app/assets/fonts/semantic-ui/icons.otf +0 -0
  6. data/app/assets/fonts/semantic-ui/icons.svg +472 -367
  7. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  8. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  9. data/app/assets/images/semantic-ui/flags.png +0 -0
  10. data/app/assets/javascripts/semantic-ui.js +9 -5
  11. data/app/assets/javascripts/semantic-ui/accordion.js +169 -102
  12. data/app/assets/javascripts/semantic-ui/api.js +840 -0
  13. data/app/assets/javascripts/semantic-ui/checkbox.js +203 -46
  14. data/app/assets/javascripts/semantic-ui/{behavior/colorize.js → colorize.js} +4 -2
  15. data/app/assets/javascripts/semantic-ui/dimmer.js +110 -76
  16. data/app/assets/javascripts/semantic-ui/dropdown.js +897 -285
  17. data/app/assets/javascripts/semantic-ui/{behavior/form.js → form.js} +127 -42
  18. data/app/assets/javascripts/semantic-ui/modal.js +294 -219
  19. data/app/assets/javascripts/semantic-ui/nag.js +120 -186
  20. data/app/assets/javascripts/semantic-ui/popup.js +491 -223
  21. data/app/assets/javascripts/semantic-ui/progress.js +779 -0
  22. data/app/assets/javascripts/semantic-ui/rating.js +66 -22
  23. data/app/assets/javascripts/semantic-ui/search.js +219 -99
  24. data/app/assets/javascripts/semantic-ui/shape.js +72 -29
  25. data/app/assets/javascripts/semantic-ui/sidebar.js +678 -142
  26. data/app/assets/javascripts/semantic-ui/site.js +487 -0
  27. data/app/assets/javascripts/semantic-ui/{behavior/state.js → state.js} +116 -151
  28. data/app/assets/javascripts/semantic-ui/sticky.js +771 -0
  29. data/app/assets/javascripts/semantic-ui/tab.js +680 -603
  30. data/app/assets/javascripts/semantic-ui/transition.js +269 -158
  31. data/app/assets/javascripts/semantic-ui/video.js +113 -32
  32. data/app/assets/javascripts/semantic-ui/visibility.js +970 -0
  33. data/app/assets/javascripts/semantic-ui/visit.js +513 -0
  34. data/app/assets/stylesheets/semantic-ui.scss +2 -0
  35. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +58 -14
  36. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +464 -372
  37. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +1385 -533
  38. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +482 -655
  39. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +238 -139
  40. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +631 -280
  41. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +3 -2
  42. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1614 -657
  43. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +143 -80
  44. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1018 -0
  45. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +302 -145
  46. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +1653 -1365
  47. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +160 -59
  48. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +247 -118
  49. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +501 -470
  50. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +888 -0
  51. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +189 -98
  52. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +125 -0
  53. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +147 -212
  54. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +328 -190
  55. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +261 -185
  56. data/app/assets/stylesheets/semantic-ui/globals/_all.scss +2 -0
  57. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +430 -0
  58. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +128 -0
  59. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +190 -106
  60. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +2 -1
  61. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +303 -201
  62. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +72 -63
  63. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +711 -331
  64. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +262 -140
  65. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +82 -71
  66. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +163 -119
  67. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +435 -0
  68. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +163 -68
  69. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +223 -150
  70. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +39 -40
  71. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +413 -147
  72. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +80 -0
  73. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +49 -20
  74. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +542 -568
  75. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +69 -37
  76. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +265 -0
  77. data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -1
  78. data/app/assets/stylesheets/semantic-ui/views/_card.scss +758 -0
  79. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +133 -92
  80. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +200 -87
  81. data/app/assets/stylesheets/semantic-ui/views/_item.scss +298 -523
  82. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +390 -12
  83. data/lib/semantic/ui/sass/version.rb +2 -2
  84. data/tasks/converter.rb +99 -216
  85. metadata +22 -27
  86. data/app/assets/fonts/semantic-ui/basic.icons.eot +0 -0
  87. data/app/assets/fonts/semantic-ui/basic.icons.svg +0 -450
  88. data/app/assets/fonts/semantic-ui/basic.icons.ttf +0 -0
  89. data/app/assets/fonts/semantic-ui/basic.icons.woff +0 -0
  90. data/app/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  91. data/app/assets/images/semantic-ui/loader-large.gif +0 -0
  92. data/app/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  93. data/app/assets/images/semantic-ui/loader-medium.gif +0 -0
  94. data/app/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  95. data/app/assets/images/semantic-ui/loader-mini.gif +0 -0
  96. data/app/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  97. data/app/assets/images/semantic-ui/loader-small.gif +0 -0
  98. data/app/assets/javascripts/semantic-ui/behavior/api.js +0 -634
  99. data/app/assets/javascripts/semantic-ui/chatroom.js +0 -772
  100. data/app/assets/stylesheets/semantic-ui/depends/_basic.icon.scss +0 -4
  101. data/app/assets/stylesheets/semantic-ui/depends/_icon.scss +0 -4
  102. data/app/assets/stylesheets/semantic-ui/depends/_loader.scss +0 -8
  103. data/app/assets/stylesheets/semantic-ui/elements/_basic.icon.scss +0 -1124
  104. data/app/assets/stylesheets/semantic-ui/elements/_progress.scss +0 -280
  105. data/app/assets/stylesheets/semantic-ui/modules/_chatroom.scss +0 -299
  106. data/app/assets/stylesheets/semantic-ui/modules/_reveal.scss +0 -322
  107. data/app/assets/stylesheets/semantic-ui/views/_list.scss +0 -700
@@ -1,3 +1,5 @@
1
+ @import 'semantic-ui/globals/all';
2
+
1
3
  @import 'semantic-ui/collections/all';
2
4
  @import 'semantic-ui/elements/all';
3
5
  @import 'semantic-ui/modules/all';
@@ -1,7 +1,7 @@
1
- /*
2
- * # Semantic - Breadcrumb
3
- * http://github.com/jlukic/semantic-ui/
4
- *
1
+ /*
2
+ * # Semantic UI
3
+ * https://github.com/Semantic-Org/Semantic-UI
4
+ * http://www.semantic-ui.com/
5
5
  *
6
6
  * Copyright 2014 Contributors
7
7
  * Released under the MIT license
@@ -9,6 +9,8 @@
9
9
  *
10
10
  */
11
11
 
12
+
13
+
12
14
  /*******************************
13
15
  Breadcrumb
14
16
  *******************************/
@@ -18,31 +20,47 @@
18
20
  display: inline-block;
19
21
  vertical-align: middle;
20
22
  }
21
-
22
23
  .ui.breadcrumb:first-child {
23
24
  margin-top: 0em;
24
25
  }
25
-
26
26
  .ui.breadcrumb:last-child {
27
27
  margin-bottom: 0em;
28
28
  }
29
29
 
30
+
30
31
  /*******************************
31
32
  Content
32
33
  *******************************/
33
34
 
35
+
36
+ /* Divider */
34
37
  .ui.breadcrumb .divider {
35
38
  display: inline-block;
36
39
  opacity: 0.5;
37
- margin: 0em 0.15em 0em;
38
- font-size: 1em;
39
- color: rgba(0, 0, 0, 0.3);
40
+ margin: 0em 0.2rem 0em;
41
+ font-size: 0.9em;
42
+ color: rgba(0, 0, 0, 0.4);
43
+ vertical-align: baseline;
40
44
  }
41
45
 
46
+ /* Link */
47
+ .ui.breadcrumb a {
48
+ color: #009fda;
49
+ }
50
+ .ui.breadcrumb a:hover {
51
+ color: #00b2f3;
52
+ }
53
+
54
+ /* Icon Divider */
55
+ .ui.breadcrumb .icon.divider {
56
+ font-size: 0.7em;
57
+ vertical-align: middle;
58
+ }
59
+
60
+ /* Section */
42
61
  .ui.breadcrumb a.section {
43
62
  cursor: pointer;
44
63
  }
45
-
46
64
  .ui.breadcrumb .section {
47
65
  display: inline-block;
48
66
  margin: 0em;
@@ -50,12 +68,12 @@
50
68
  }
51
69
 
52
70
  /* Loose Coupling */
53
-
54
71
  .ui.breadcrumb.segment {
55
72
  display: inline-block;
56
73
  padding: 0.5em 1em;
57
74
  }
58
75
 
76
+
59
77
  /*******************************
60
78
  States
61
79
  *******************************/
@@ -64,18 +82,44 @@
64
82
  font-weight: bold;
65
83
  }
66
84
 
85
+
67
86
  /*******************************
68
87
  Variations
69
88
  *******************************/
70
89
 
90
+ .ui.mini.breadcrumb {
91
+ font-size: 0.65em;
92
+ }
93
+ .ui.tiny.breadcrumb {
94
+ font-size: 0.7em;
95
+ }
71
96
  .ui.small.breadcrumb {
72
97
  font-size: 0.75em;
73
98
  }
74
-
99
+ .ui.breadcrumb {
100
+ font-size: 1em;
101
+ }
75
102
  .ui.large.breadcrumb {
76
103
  font-size: 1.1em;
77
104
  }
78
-
105
+ .ui.big.breadcrumb {
106
+ font-size: 1.05em;
107
+ }
79
108
  .ui.huge.breadcrumb {
80
109
  font-size: 1.3em;
81
- }
110
+ }
111
+ .ui.massive.breadcrumb {
112
+ font-size: 1.5em;
113
+ }
114
+
115
+
116
+ /*******************************
117
+ Theme Overrides
118
+ *******************************/
119
+
120
+
121
+
122
+ /*******************************
123
+ Site Overrides
124
+ *******************************/
125
+
@@ -1,8 +1,7 @@
1
- @import '../depends/loader';
2
- /*
3
- * # Semantic - Form
4
- * http://github.com/jlukic/semantic-ui/
5
- *
1
+ /*
2
+ * # Semantic UI
3
+ * https://github.com/Semantic-Org/Semantic-UI
4
+ * http://www.semantic-ui.com/
6
5
  *
7
6
  * Copyright 2014 Contributors
8
7
  * Released under the MIT license
@@ -10,10 +9,13 @@
10
9
  *
11
10
  */
12
11
 
12
+
13
+
13
14
  /*******************************
14
- Standard
15
+ Elements
15
16
  *******************************/
16
17
 
18
+
17
19
  /*--------------------
18
20
  Form
19
21
  ---------------------*/
@@ -23,40 +25,55 @@
23
25
  max-width: 100%;
24
26
  }
25
27
 
26
- .ui.form :first-child {
27
- margin-top: 0em;
28
- }
29
-
30
- .ui.form :last-child {
31
- margin-bottom: 0em;
32
- }
33
-
34
28
  /*--------------------
35
29
  Content
36
30
  ---------------------*/
37
31
 
38
32
  .ui.form > p {
39
- margin: 1em 0;
33
+ margin: 1em 0em;
40
34
  }
41
35
 
42
36
  /*--------------------
43
37
  Field
44
38
  ---------------------*/
45
39
 
40
+ .ui.form .fields .field,
46
41
  .ui.form .field {
47
42
  clear: both;
48
43
  margin: 0em 0em 1em;
49
44
  }
45
+ .ui.form .fields:last-child,
46
+ .ui.form .field:last-child {
47
+ margin-bottom: 0em;
48
+ }
50
49
 
51
50
  /*--------------------
52
51
  Labels
53
52
  ---------------------*/
54
53
 
55
54
  .ui.form .field > label {
56
- margin: 0em 0em 0.3em;
57
55
  display: block;
58
- color: #555555;
59
- font-size: 0.875em;
56
+ margin: 0em 0em 0.2857rem 0em;
57
+ color: rgba(0, 0, 0, 0.8);
58
+ font-size: 0.9285em;
59
+ font-weight: bold;
60
+ text-transform: none;
61
+ }
62
+ .ui.form .grouped.fields > label {
63
+ margin: 0em 0em 0.2857rem 0em;
64
+ color: rgba(0, 0, 0, 0.8);
65
+ font-size: 0.9285em;
66
+ font-weight: bold;
67
+ text-transform: none;
68
+ }
69
+ .ui.form .inline.fields > label {
70
+ display: inline-block;
71
+ vertical-align: middle;
72
+ margin: 0em 1em 0em 0em;
73
+ color: rgba(0, 0, 0, 0.8);
74
+ font-size: 0.9285em;
75
+ font-weight: bold;
76
+ text-transform: none;
60
77
  }
61
78
 
62
79
  /*--------------------
@@ -64,78 +81,113 @@
64
81
  ---------------------*/
65
82
 
66
83
  .ui.form textarea,
67
- .ui.form input[type="color"],
84
+ .ui.form input:not([type]),
85
+ .ui.form input[type="text"],
86
+ .ui.form input[type="email"],
68
87
  .ui.form input[type="date"],
69
- .ui.form input[type="datetime"],
70
88
  .ui.form input[type="datetime-local"],
71
- .ui.form input[type="email"],
72
- .ui.form input[type="month"],
73
- .ui.form input[type="number"],
74
89
  .ui.form input[type="password"],
75
- .ui.form input[type="range"],
76
- .ui.form input[type="search"],
77
- .ui.form input[type="tel"],
78
- .ui.form input[type="text"],
79
- .ui.form input[type="time"],
90
+ .ui.form input[type="number"],
80
91
  .ui.form input[type="url"],
81
- .ui.form input[type="week"],
92
+ .ui.form input[type="tel"],
82
93
  .ui.form .ui.input {
83
94
  width: 100%;
95
+ vertical-align: top;
84
96
  }
85
-
86
- .ui.form textarea,
87
- .ui.form input[type="color"],
97
+ .ui.form input:not([type]),
98
+ .ui.form input[type="text"],
99
+ .ui.form input[type="email"],
88
100
  .ui.form input[type="date"],
89
- .ui.form input[type="datetime"],
90
101
  .ui.form input[type="datetime-local"],
91
- .ui.form input[type="email"],
92
- .ui.form input[type="month"],
93
- .ui.form input[type="number"],
94
102
  .ui.form input[type="password"],
95
- .ui.form input[type="search"],
96
- .ui.form input[type="tel"],
97
- .ui.form input[type="text"],
98
- .ui.form input[type="time"],
103
+ .ui.form input[type="number"],
99
104
  .ui.form input[type="url"],
100
- .ui.form input[type="week"] {
105
+ .ui.form input[type="tel"] {
106
+ font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
101
107
  margin: 0em;
102
- padding: 0.65em 1em;
103
- font-size: 1em;
104
- background-color: #FFFFFF;
105
- border: 1px solid rgba(0, 0, 0, 0.15);
106
108
  outline: none;
107
- color: rgba(0, 0, 0, 0.7);
108
- border-radius: 0.3125em;
109
- -webkit-transition: background-color 0.3s ease-out,
110
- -webkit-box-shadow 0.2s ease,
111
- border-color 0.2s ease;
112
- transition: background-color 0.3s ease-out,
113
- box-shadow 0.2s ease,
114
- border-color 0.2s ease;
115
- -webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
116
- box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
117
109
  -webkit-appearance: none;
118
110
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
119
- -webkit-box-sizing: border-box;
120
- -moz-box-sizing: border-box;
121
- -ms-box-sizing: border-box;
122
- box-sizing: border-box;
111
+ line-height: 1.2142em;
112
+ padding: 0.67861em 1em;
113
+ font-size: 1em;
114
+ background: #ffffff;
115
+ border: 1px solid rgba(39, 41, 43, 0.15);
116
+ color: rgba(0, 0, 0, 0.8);
117
+ border-radius: 0.2857rem;
118
+ box-shadow: 0em 0em 0em 0em transparent inset;
119
+ -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
120
+ transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
123
121
  }
124
-
125
122
  .ui.textarea,
126
123
  .ui.form textarea {
127
- line-height: 1.33;
128
- min-height: 8em;
124
+ margin: 0em;
125
+ -webkit-appearance: none;
126
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
127
+ padding: 0.78571em 1em;
128
+ background: #ffffff;
129
+ border: 1px solid rgba(39, 41, 43, 0.15);
130
+ outline: none;
131
+ color: rgba(0, 0, 0, 0.8);
132
+ border-radius: 0.2857rem;
133
+ box-shadow: 0em 0em 0em 0em transparent inset;
134
+ -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
135
+ transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
136
+ font-size: 1em;
129
137
  height: 12em;
138
+ min-height: 8em;
130
139
  max-height: 24em;
140
+ line-height: 1.2857;
131
141
  resize: vertical;
132
142
  }
133
-
134
143
  .ui.form textarea,
135
144
  .ui.form input[type="checkbox"] {
136
145
  vertical-align: top;
137
146
  }
138
147
 
148
+ /*--------------------------
149
+ Input w/ attached Button
150
+ ---------------------------*/
151
+
152
+ .ui.form input.attached {
153
+ width: auto;
154
+ }
155
+
156
+ /*--------------------
157
+ Basic Select
158
+ ---------------------*/
159
+
160
+ .ui.form select {
161
+ display: block;
162
+ height: auto;
163
+ width: 100%;
164
+ background: #ffffff;
165
+ border: 1px solid rgba(39, 41, 43, 0.15);
166
+ border-radius: 0.2857rem;
167
+ box-shadow: 0em 0em 0em 0em transparent inset;
168
+ padding: 0.62em 1em;
169
+ color: rgba(0, 0, 0, 0.8);
170
+ -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
171
+ transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
172
+ }
173
+
174
+ /*--------------------
175
+ Dropdown
176
+ ---------------------*/
177
+
178
+ .ui.form .field > .selection.dropdown {
179
+ width: 100%;
180
+ }
181
+ .ui.form .field > .selection.dropdown > .dropdown.icon {
182
+ float: right;
183
+ }
184
+ .ui.form .inline.field > .selection.dropdown {
185
+ width: auto;
186
+ }
187
+ .ui.form .inline.field > .selection.dropdown > .dropdown.icon {
188
+ float: none;
189
+ }
190
+
139
191
  /*--------------------
140
192
  Dividers
141
193
  ---------------------*/
@@ -150,13 +202,13 @@
150
202
  ---------------------*/
151
203
 
152
204
  .ui.form .info.message,
205
+ .ui.form .success.message,
153
206
  .ui.form .warning.message,
154
207
  .ui.form .error.message {
155
208
  display: none;
156
209
  }
157
210
 
158
211
  /* Assumptions */
159
-
160
212
  .ui.form .message:first-child {
161
213
  margin-top: 0px;
162
214
  }
@@ -168,12 +220,9 @@
168
220
  .ui.form .field .prompt.label {
169
221
  white-space: nowrap;
170
222
  }
171
-
172
223
  .ui.form .inline.field .prompt {
173
- margin-top: 0em;
174
- margin-left: 1em;
224
+ margin: 0em 0em 0em 1em;
175
225
  }
176
-
177
226
  .ui.form .inline.field .prompt:before {
178
227
  margin-top: -0.3em;
179
228
  bottom: auto;
@@ -182,44 +231,89 @@
182
231
  left: 0em;
183
232
  }
184
233
 
234
+
185
235
  /*******************************
186
236
  States
187
237
  *******************************/
188
238
 
239
+
240
+ /*--------------------
241
+ Placeholder
242
+ ---------------------*/
243
+
244
+
245
+ /* browsers require these rules separate */
246
+ .ui.form ::-webkit-input-placeholder {
247
+ color: rgba(140, 140, 140, 0.8);
248
+ }
249
+ .ui.form ::-moz-placeholder {
250
+ color: rgba(140, 140, 140, 0.8);
251
+ }
252
+ .ui.form :focus::-webkit-input-placeholder {
253
+ color: rgba(89, 89, 89, 0.8);
254
+ }
255
+ .ui.form :focus::-moz-placeholder {
256
+ color: rgba(89, 89, 89, 0.8);
257
+ }
258
+
259
+ /* Error Placeholder */
260
+ .ui.form .error ::-webkit-input-placeholder {
261
+ color: #e38585;
262
+ }
263
+ .ui.form .error ::-moz-placeholder {
264
+ color: #e38585;
265
+ }
266
+ .ui.form .error :focus::-webkit-input-placeholder {
267
+ color: #de7171;
268
+ }
269
+ .ui.form .error :focus::-moz-placeholder {
270
+ color: #de7171;
271
+ }
272
+
189
273
  /*--------------------
190
274
  Focus
191
275
  ---------------------*/
192
276
 
193
- .ui.form input[type="color"]:focus,
277
+ .ui.form input:not([type]):focus,
278
+ .ui.form input[type="text"]:focus,
279
+ .ui.form input[type="email"]:focus,
194
280
  .ui.form input[type="date"]:focus,
195
- .ui.form input[type="datetime"]:focus,
196
281
  .ui.form input[type="datetime-local"]:focus,
197
- .ui.form input[type="email"]:focus,
198
- .ui.form input[type="month"]:focus,
199
- .ui.form input[type="number"]:focus,
200
282
  .ui.form input[type="password"]:focus,
201
- .ui.form input[type="search"]:focus,
202
- .ui.form input[type="tel"]:focus,
203
- .ui.form input[type="text"]:focus,
204
- .ui.form input[type="time"]:focus,
283
+ .ui.form input[type="number"]:focus,
205
284
  .ui.form input[type="url"]:focus,
206
- .ui.form input[type="week"]:focus
285
+ .ui.form input[type="tel"]:focus {
286
+ color: rgba(0, 0, 0, 0.85);
287
+ border-color: rgba(39, 41, 43, 0.3);
288
+ border-radius: 0em 0.2857rem 0.2857rem 0em;
289
+ background: #ffffff;
290
+ box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset;
291
+ }
207
292
  .ui.form textarea:focus {
208
293
  color: rgba(0, 0, 0, 0.85);
209
- border-color: rgba(0, 0, 0, 0.2);
210
- border-bottom-left-radius: 0;
211
- border-top-left-radius: 0;
294
+ border-color: rgba(39, 41, 43, 0.3);
295
+ border-radius: 0em 0.2857rem 0.2857rem 0em;
296
+ background: #ffffff;
297
+ box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset;
212
298
  -webkit-appearance: none;
213
- -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
214
- box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
215
299
  }
216
300
 
217
301
  /*--------------------
218
- Error
302
+ Success
219
303
  ---------------------*/
220
304
 
305
+
221
306
  /* On Form */
307
+ .ui.form.success .success.message {
308
+ display: block;
309
+ }
310
+
311
+ /*--------------------
312
+ Error
313
+ ---------------------*/
314
+
222
315
 
316
+ /* On Form */
223
317
  .ui.form.warning .warning.message {
224
318
  display: block;
225
319
  }
@@ -228,170 +322,126 @@
228
322
  Warning
229
323
  ---------------------*/
230
324
 
231
- /* On Form */
232
325
 
326
+ /* On Form */
233
327
  .ui.form.error .error.message {
234
328
  display: block;
235
329
  }
236
330
 
237
331
  /* On Field(s) */
238
-
239
332
  .ui.form .fields.error .field label,
240
333
  .ui.form .field.error label,
241
334
  .ui.form .fields.error .field .input,
242
335
  .ui.form .field.error .input {
243
- color: #D95C5C;
336
+ color: #d95c5c;
244
337
  }
245
-
246
338
  .ui.form .fields.error .field .corner.label,
247
339
  .ui.form .field.error .corner.label {
248
- border-color: #D95C5C;
249
- color: #FFFFFF;
340
+ border-color: #d95c5c;
341
+ color: #ffffff;
250
342
  }
251
-
252
343
  .ui.form .fields.error .field textarea,
253
- .ui.form .fields.error .field input[type="color"],
344
+ .ui.form .fields.error .field input:not([type]),
345
+ .ui.form .fields.error .field input[type="text"],
346
+ .ui.form .fields.error .field input[type="email"],
254
347
  .ui.form .fields.error .field input[type="date"],
255
- .ui.form .fields.error .field input[type="datetime"],
256
348
  .ui.form .fields.error .field input[type="datetime-local"],
257
- .ui.form .fields.error .field input[type="email"],
258
- .ui.form .fields.error .field input[type="month"],
259
- .ui.form .fields.error .field input[type="number"],
260
349
  .ui.form .fields.error .field input[type="password"],
261
- .ui.form .fields.error .field input[type="search"],
262
- .ui.form .fields.error .field input[type="tel"],
263
- .ui.form .fields.error .field input[type="text"],
264
- .ui.form .fields.error .field input[type="time"],
350
+ .ui.form .fields.error .field input[type="number"],
265
351
  .ui.form .fields.error .field input[type="url"],
266
- .ui.form .fields.error .field input[type="week"],
352
+ .ui.form .fields.error .field input[type="tel"],
267
353
  .ui.form .field.error textarea,
268
- .ui.form .field.error input[type="color"],
354
+ .ui.form .field.error input:not([type]),
355
+ .ui.form .field.error input[type="text"],
356
+ .ui.form .field.error input[type="email"],
269
357
  .ui.form .field.error input[type="date"],
270
- .ui.form .field.error input[type="datetime"],
271
358
  .ui.form .field.error input[type="datetime-local"],
272
- .ui.form .field.error input[type="email"],
273
- .ui.form .field.error input[type="month"],
274
- .ui.form .field.error input[type="number"],
275
359
  .ui.form .field.error input[type="password"],
276
- .ui.form .field.error input[type="search"],
277
- .ui.form .field.error input[type="tel"],
278
- .ui.form .field.error input[type="text"],
279
- .ui.form .field.error input[type="time"],
360
+ .ui.form .field.error input[type="number"],
280
361
  .ui.form .field.error input[type="url"],
281
- .ui.form .field.error input[type="week"] {
282
- background-color: #FFFAFA;
283
- border-color: #E7BEBE;
284
- border-left: none;
285
- color: #D95C5C;
286
- padding-left: 1.2em;
287
- border-bottom-left-radius: 0;
288
- border-top-left-radius: 0;
289
- -webkit-box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
290
- box-shadow: 0.3em 0em 0em 0em #D95C5C inset;
362
+ .ui.form .field.error input[type="tel"] {
363
+ background: #fff0f0;
364
+ border-color: #dbb1b1;
365
+ color: #d95c5c;
366
+ border-radius: 0em 0.2857rem 0.2857rem 0em;
367
+ box-shadow: 2px 0em 0em 0em #d95c5c inset;
291
368
  }
292
-
293
369
  .ui.form .field.error textarea:focus,
294
- .ui.form .field.error input[type="color"]:focus,
370
+ .ui.form .field.error input:not([type]):focus,
371
+ .ui.form .field.error input[type="text"]:focus,
372
+ .ui.form .field.error input[type="email"]:focus,
295
373
  .ui.form .field.error input[type="date"]:focus,
296
- .ui.form .field.error input[type="datetime"]:focus,
297
374
  .ui.form .field.error input[type="datetime-local"]:focus,
298
- .ui.form .field.error input[type="email"]:focus,
299
- .ui.form .field.error input[type="month"]:focus,
300
- .ui.form .field.error input[type="number"]:focus,
301
375
  .ui.form .field.error input[type="password"]:focus,
302
- .ui.form .field.error input[type="search"]:focus,
303
- .ui.form .field.error input[type="tel"]:focus,
304
- .ui.form .field.error input[type="text"]:focus,
305
- .ui.form .field.error input[type="time"]:focus,
376
+ .ui.form .field.error input[type="number"]:focus,
306
377
  .ui.form .field.error input[type="url"]:focus,
307
- .ui.form .field.error input[type="week"]:focus {
308
- border-color: rgba(255, 80, 80, 1);
309
- color: rgba(255, 80, 80, 1);
378
+ .ui.form .field.error input[type="tel"]:focus {
379
+ background: #fff0f0;
380
+ border-color: #dbb1b1;
381
+ color: #dc6868;
310
382
  -webkit-appearance: none;
311
- -webkit-box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
312
- box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
383
+ box-shadow: 2px 0em 0em 0em #dc6868 inset;
313
384
  }
314
385
 
315
- /*----------------------------
316
- Dropdown Selection Warning
317
- -----------------------------*/
386
+ /*------------------
387
+ Dropdown Error
388
+ --------------------*/
318
389
 
319
390
  .ui.form .fields.error .field .ui.dropdown,
320
391
  .ui.form .fields.error .field .ui.dropdown .item,
321
392
  .ui.form .field.error .ui.dropdown,
393
+ .ui.form .field.error .ui.dropdown .text,
322
394
  .ui.form .field.error .ui.dropdown .item {
323
- background-color: #FFFAFA;
324
- color: #D95C5C;
395
+ background: #fff0f0;
396
+ color: #d95c5c;
325
397
  }
326
-
327
398
  .ui.form .fields.error .field .ui.dropdown,
328
399
  .ui.form .field.error .ui.dropdown {
329
- -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
330
- box-shadow: 0px 0px 0px 1px #E7BEBE !important;
400
+ border-color: #dbb1b1 !important;
331
401
  }
332
-
333
402
  .ui.form .fields.error .field .ui.dropdown:hover,
334
403
  .ui.form .field.error .ui.dropdown:hover {
335
- -webkit-box-shadow: 0px 0px 0px 1px #E7BEBE !important;
336
- box-shadow: 0px 0px 0px 1px #E7BEBE !important;
404
+ border-color: #dbb1b1 !important;
337
405
  }
338
-
339
406
  .ui.form .fields.error .field .ui.dropdown:hover .menu,
340
407
  .ui.form .field.error .ui.dropdown:hover .menu {
341
- -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
342
- box-shadow: 0px 1px 0px 1px #E7BEBE;
408
+ border-color: #dbb1b1;
343
409
  }
344
410
 
345
- .ui.form .fields.error .field .ui.selection.dropdown .menu .item:hover,
346
- .ui.form .field.error .ui.selection.dropdown .menu .item:hover {
347
- background-color: #FFF2F2;
411
+ /* Hover */
412
+ .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
413
+ .ui.form .field.error .ui.dropdown .menu .item:hover {
414
+ background-color: #fff2f2;
348
415
  }
349
416
 
350
- /* Currently Active Item */
351
-
417
+ /* Active */
352
418
  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
353
419
  .ui.form .field.error .ui.dropdown .menu .active.item {
354
- background-color: #FDCFCF !important;
420
+ background-color: #fdcfcf !important;
355
421
  }
356
422
 
357
423
  /*--------------------
358
- Empty (Placeholder)
424
+ Checkbox Error
359
425
  ---------------------*/
360
426
 
361
- /* browsers require these rules separate */
362
-
363
- .ui.form ::-webkit-input-placeholder {
364
- color: #AAAAAA;
365
- }
366
-
367
- .ui.form ::-moz-placeholder {
368
- color: #AAAAAA;
369
- }
370
-
371
- .ui.form :focus::-webkit-input-placeholder {
372
- color: #999999;
373
- }
374
-
375
- .ui.form :focus::-moz-placeholder {
376
- color: #999999;
377
- }
378
-
379
- /* Error Placeholder */
380
-
381
- .ui.form .error ::-webkit-input-placeholder {
382
- color: rgba(255, 80, 80, 0.4);
383
- }
384
-
385
- .ui.form .error ::-moz-placeholder {
386
- color: rgba(255, 80, 80, 0.4);
427
+ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
428
+ .ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
429
+ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
430
+ .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
431
+ color: #d95c5c;
387
432
  }
388
-
389
- .ui.form .error :focus::-webkit-input-placeholder {
390
- color: rgba(255, 80, 80, 0.7);
433
+ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
434
+ .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
435
+ .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
436
+ .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
437
+ background: #fff0f0;
438
+ border-color: #dbb1b1;
391
439
  }
392
-
393
- .ui.form .error :focus::-moz-placeholder {
394
- color: rgba(255, 80, 80, 0.7);
440
+ .ui.form .fields.error .field .checkbox label:after,
441
+ .ui.form .field.error .checkbox label:after,
442
+ .ui.form .fields.error .field .checkbox .box:after,
443
+ .ui.form .field.error .checkbox .box:after {
444
+ color: #d95c5c;
395
445
  }
396
446
 
397
447
  /*--------------------
@@ -402,124 +452,142 @@
402
452
  .ui.form .field.disabled {
403
453
  opacity: 0.5;
404
454
  }
405
-
406
455
  .ui.form .field.disabled label {
407
456
  opacity: 0.5;
408
457
  }
409
-
410
458
  .ui.form .field.disabled :disabled {
411
459
  opacity: 1;
412
460
  }
413
461
 
414
- /*--------------------
415
- Loading State
416
- ---------------------*/
417
-
418
- /* On Form */
462
+ /*--------------
463
+ Loading
464
+ ---------------*/
419
465
 
420
- .ui.form.loading {
466
+ .ui.loading.form {
421
467
  position: relative;
422
- }
423
-
424
- .ui.form.loading:after {
468
+ cursor: default;
469
+ point-events: none;
470
+ text-shadow: none !important;
471
+ color: transparent !important;
472
+ -webkit-transition: all 0s linear;
473
+ transition: all 0s linear;
474
+ z-index: 100;
475
+ }
476
+ .ui.loading.form:before {
425
477
  position: absolute;
478
+ content: '';
426
479
  top: 0%;
427
480
  left: 0%;
428
- content: '';
481
+ background: rgba(255, 255, 255, 0.8);
429
482
  width: 100%;
430
483
  height: 100%;
431
- background: rgba(255, 255, 255, 0.8) image-url("semantic-ui/loader-large.gif") no-repeat 50% 50%;
484
+ z-index: 100;
485
+ }
486
+ .ui.loading.form:after {
487
+ position: absolute;
488
+ content: '';
489
+ top: 50%;
490
+ left: 50%;
491
+ margin: -1.5em 0em 0em -1.5em;
492
+ width: 3em;
493
+ height: 3em;
494
+ -webkit-animation: form-spin 0.6s linear;
495
+ animation: form-spin 0.6s linear;
496
+ -webkit-animation-iteration-count: infinite;
497
+ animation-iteration-count: infinite;
498
+ border-radius: 500rem;
499
+ border-color: #aaaaaa rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
500
+ border-style: solid;
501
+ border-width: 0.2em;
502
+ box-shadow: 0px 0px 0px 1px transparent;
432
503
  visibility: visible;
504
+ z-index: 101;
505
+ }
506
+ @-webkit-keyframes form-spin {
507
+ from {
508
+ -webkit-transform: rotate(0deg);
509
+ transform: rotate(0deg);
510
+ }
511
+ to {
512
+ -webkit-transform: rotate(360deg);
513
+ transform: rotate(360deg);
514
+ }
515
+ }
516
+ @keyframes form-spin {
517
+ from {
518
+ -webkit-transform: rotate(0deg);
519
+ transform: rotate(0deg);
520
+ }
521
+ to {
522
+ -webkit-transform: rotate(360deg);
523
+ transform: rotate(360deg);
524
+ }
433
525
  }
434
526
 
527
+
435
528
  /*******************************
436
- Variations
529
+ Element Types
437
530
  *******************************/
438
531
 
532
+
439
533
  /*--------------------
440
- Fluid Width
534
+ Required Field
441
535
  ---------------------*/
442
536
 
443
- .ui.form.fluid {
444
- width: 100%;
445
- -webkit-box-sizing: border-box;
446
- -moz-box-sizing: border-box;
447
- -ms-box-sizing: border-box;
448
- box-sizing: border-box;
537
+ .ui.form .required.fields > .field > label:after,
538
+ .ui.form .required.field > label:after,
539
+ .ui.form .required.fields > .field > .checkbox:after,
540
+ .ui.form .required.field > .checkbox:after {
541
+ margin: -0.2em 0em 0em 0.2em;
542
+ content: '*';
543
+ color: #d95c5c;
449
544
  }
450
-
451
- /*--------------------------
452
- Input w/ attached Button
453
- ---------------------------*/
454
-
455
- .ui.form input.attached {
456
- width: auto;
545
+ .ui.form .required.fields > .field > label:after,
546
+ .ui.form .required.field > label:after {
547
+ display: inline-block;
548
+ vertical-align: top;
549
+ }
550
+ .ui.form .required.fields > .field > .checkbox:after,
551
+ .ui.form .required.field > .checkbox:after {
552
+ position: absolute;
553
+ top: 0%;
554
+ left: 100%;
457
555
  }
458
556
 
459
- /*--------------------
460
- Date Input
461
- ---------------------*/
462
557
 
463
- .ui.form .date.field > label {
464
- position: relative;
465
- }
558
+ /*******************************
559
+ Variations
560
+ *******************************/
466
561
 
467
- .ui.form .date.field > label:after {
468
- position: absolute;
469
- top: 2em;
470
- right: 0.5em;
471
- font-family: 'Icons';
472
- content: '\f133';
473
- font-size: 1.2em;
474
- font-weight: normal;
475
- color: #CCCCCC;
476
- }
477
562
 
478
563
  /*--------------------
479
564
  Inverted Colors
480
565
  ---------------------*/
481
566
 
482
- .ui.inverted.form label {
483
- color: #FFFFFF;
484
- }
485
-
486
- .ui.inverted.form .field.error textarea,
487
- .ui.inverted.form .field.error input[type="color"],
488
- .ui.inverted.form .field.error input[type="date"],
489
- .ui.inverted.form .field.error input[type="datetime"],
490
- .ui.inverted.form .field.error input[type="datetime-local"],
491
- .ui.inverted.form .field.error input[type="email"],
492
- .ui.inverted.form .field.error input[type="month"],
493
- .ui.inverted.form .field.error input[type="number"],
494
- .ui.inverted.form .field.error input[type="password"],
495
- .ui.inverted.form .field.error input[type="search"],
496
- .ui.inverted.form .field.error input[type="tel"],
497
- .ui.inverted.form .field.error input[type="text"],
498
- .ui.inverted.form .field.error input[type="time"],
499
- .ui.inverted.form .field.error input[type="url"],
500
- .ui.inverted.form .field.error input[type="week"] {
501
- background-color: #FFCCCC;
502
- }
503
-
504
- .ui.inverted.form .ui.checkbox label {
505
- color: rgba(255, 255, 255, 0.8);
506
- }
507
-
508
- .ui.inverted.form .ui.checkbox label:hover,
509
- .ui.inverted.form .ui.checkbox .box:hover {
510
- color: #FFFFFF;
567
+ .ui.inverted.form label,
568
+ .ui.form .inverted.segment label,
569
+ .ui.form .inverted.segment .ui.checkbox label,
570
+ .ui.form .inverted.segment .ui.checkbox .box,
571
+ .ui.inverted.form .ui.checkbox label,
572
+ .ui.inverted.form .ui.checkbox .box {
573
+ color: #ffffff;
511
574
  }
512
575
 
513
576
  /*--------------------
514
577
  Field Groups
515
578
  ---------------------*/
516
579
 
517
- /* Grouped Vertically */
518
580
 
581
+ /* Grouped Vertically */
519
582
  .ui.form .grouped.fields {
520
583
  margin: 0em 0em 1em;
521
584
  }
522
-
585
+ .ui.form .grouped.fields:last-child {
586
+ margin-bottom: 0em;
587
+ }
588
+ .ui.form .grouped.fields > label {
589
+ font-size: 0.9285em;
590
+ }
523
591
  .ui.form .grouped.fields .field {
524
592
  display: block;
525
593
  float: none;
@@ -528,15 +596,14 @@
528
596
  }
529
597
 
530
598
  /*--------------------
531
- Fields
599
+ Fields
532
600
  ---------------------*/
533
601
 
534
- /* Split fields */
535
602
 
603
+ /* Split fields */
536
604
  .ui.form .fields {
537
605
  clear: both;
538
606
  }
539
-
540
607
  .ui.form .fields:after {
541
608
  content: ' ';
542
609
  display: block;
@@ -545,143 +612,151 @@
545
612
  line-height: 0;
546
613
  height: 0;
547
614
  }
548
-
549
615
  .ui.form .fields > .field {
550
616
  clear: none;
551
617
  float: left;
552
- -webkit-box-sizing: border-box;
553
- -moz-box-sizing: border-box;
554
- -ms-box-sizing: border-box;
555
- box-sizing: border-box;
618
+ padding-left: 0.5em;
619
+ padding-right: 0.5em;
556
620
  }
557
-
558
621
  .ui.form .fields > .field:first-child {
559
622
  border-left: none;
560
- -webkit-box-shadow: none;
561
623
  box-shadow: none;
562
624
  }
563
625
 
564
626
  /* Other Combinations */
565
-
566
627
  .ui.form .two.fields > .fields,
567
628
  .ui.form .two.fields > .field {
568
629
  width: 50%;
569
- padding-left: 1%;
570
- padding-right: 1%;
571
630
  }
572
-
573
631
  .ui.form .three.fields > .fields,
574
632
  .ui.form .three.fields > .field {
575
- width: 33.333%;
576
- padding-left: 1%;
577
- padding-right: 1%;
633
+ width: 33.33333333%;
578
634
  }
579
-
580
635
  .ui.form .four.fields > .fields,
581
636
  .ui.form .four.fields > .field {
582
637
  width: 25%;
583
- padding-left: 1%;
584
- padding-right: 1%;
585
638
  }
586
-
587
639
  .ui.form .five.fields > .fields,
588
640
  .ui.form .five.fields > .field {
589
641
  width: 20%;
590
- padding-left: 1%;
591
- padding-right: 1%;
642
+ }
643
+ .ui.form .six.fields > .fields,
644
+ .ui.form .six.fields > .field {
645
+ width: 16.66666667%;
646
+ }
647
+ .ui.form .seven.fields > .fields,
648
+ .ui.form .seven.fields > .field {
649
+ width: 14.28571429%;
650
+ }
651
+ .ui.form .eight.fields > .fields,
652
+ .ui.form .eight.fields > .field {
653
+ width: 12.5%;
654
+ }
655
+ .ui.form .nine.fields > .fields,
656
+ .ui.form .nine.fields > .field {
657
+ width: 11.11111111%;
658
+ }
659
+ .ui.form .ten.fields > .fields,
660
+ .ui.form .ten.fields > .field {
661
+ width: 10%;
592
662
  }
593
663
 
664
+ /* Swap to full width on mobile */
665
+ @media only screen and (max-width: 767px) {
666
+ .ui.form .two.fields > .fields,
667
+ .ui.form .two.fields > .field,
668
+ .ui.form .three.fields > .fields,
669
+ .ui.form .three.fields > .field,
670
+ .ui.form .four.fields > .fields,
671
+ .ui.form .four.fields > .field,
672
+ .ui.form .five.fields > .fields,
673
+ .ui.form .five.fields > .field,
674
+ .ui.form .six.fields > .fields,
675
+ .ui.form .six.fields > .field,
676
+ .ui.form .seven.fields > .fields,
677
+ .ui.form .seven.fields > .field,
678
+ .ui.form .eight.fields > .fields,
679
+ .ui.form .eight.fields > .field,
680
+ .ui.form .nine.fields > .fields,
681
+ .ui.form .nine.fields > .field,
682
+ .ui.form .ten.fields > .fields,
683
+ .ui.form .ten.fields > .field {
684
+ width: 100% !important;
685
+ margin: 0em 0em 1em;
686
+ padding-left: 0%;
687
+ padding-right: 0%;
688
+ }
689
+ }
594
690
  .ui.form .fields .field:first-child {
595
691
  padding-left: 0%;
596
692
  }
597
-
598
693
  .ui.form .fields .field:last-child {
599
694
  padding-right: 0%;
600
695
  }
601
696
 
602
- /* Fields grid support */
603
-
697
+ /* Sizing Combinations */
604
698
  .ui.form .fields .wide.field {
605
699
  width: 6.25%;
606
- padding-left: 1%;
607
- padding-right: 1%;
700
+ padding-left: 0.5em;
701
+ padding-right: 0.5em;
608
702
  }
609
-
610
703
  .ui.form .fields .wide.field:first-child {
611
704
  padding-left: 0%;
612
705
  }
613
-
614
706
  .ui.form .fields .wide.field:last-child {
615
707
  padding-right: 0%;
616
708
  }
617
-
618
- .ui.form .fields > .one.wide.field {
619
- width: 6.25%;
709
+ .ui.form .one.wide.field {
710
+ width: 6.25% !important;
620
711
  }
621
-
622
- .ui.form .fields > .two.wide.field {
623
- width: 12.5%;
712
+ .ui.form .two.wide.field {
713
+ width: 12.5% !important;
624
714
  }
625
-
626
- .ui.form .fields > .three.wide.field {
627
- width: 18.75%;
715
+ .ui.form .three.wide.field {
716
+ width: 18.75% !important;
628
717
  }
629
-
630
- .ui.form .fields > .four.wide.field {
631
- width: 25%;
718
+ .ui.form .four.wide.field {
719
+ width: 25% !important;
632
720
  }
633
-
634
- .ui.form .fields > .five.wide.field {
635
- width: 31.25%;
721
+ .ui.form .five.wide.field {
722
+ width: 31.25% !important;
636
723
  }
637
-
638
- .ui.form .fields > .six.wide.field {
639
- width: 37.5%;
724
+ .ui.form .six.wide.field {
725
+ width: 37.5% !important;
640
726
  }
641
-
642
- .ui.form .fields > .seven.wide.field {
643
- width: 43.75%;
727
+ .ui.form .seven.wide.field {
728
+ width: 43.75% !important;
644
729
  }
645
-
646
- .ui.form .fields > .eight.wide.field {
647
- width: 50%;
730
+ .ui.form .eight.wide.field {
731
+ width: 50% !important;
648
732
  }
649
-
650
- .ui.form .fields > .nine.wide.field {
651
- width: 56.25%;
733
+ .ui.form .nine.wide.field {
734
+ width: 56.25% !important;
652
735
  }
653
-
654
- .ui.form .fields > .ten.wide.field {
655
- width: 62.5%;
736
+ .ui.form .ten.wide.field {
737
+ width: 62.5% !important;
656
738
  }
657
-
658
- .ui.form .fields > .eleven.wide.field {
659
- width: 68.75%;
739
+ .ui.form .eleven.wide.field {
740
+ width: 68.75% !important;
660
741
  }
661
-
662
- .ui.form .fields > .twelve.wide.field {
663
- width: 75%;
742
+ .ui.form .twelve.wide.field {
743
+ width: 75% !important;
664
744
  }
665
-
666
- .ui.form .fields > .thirteen.wide.field {
667
- width: 81.25%;
745
+ .ui.form .thirteen.wide.field {
746
+ width: 81.25% !important;
668
747
  }
669
-
670
- .ui.form .fields > .fourteen.wide.field {
671
- width: 87.5%;
748
+ .ui.form .fourteen.wide.field {
749
+ width: 87.5% !important;
672
750
  }
673
-
674
- .ui.form .fields > .fifteen.wide.field {
675
- width: 93.75%;
751
+ .ui.form .fifteen.wide.field {
752
+ width: 93.75% !important;
676
753
  }
677
-
678
- .ui.form .fields > .sixteen.wide.field {
679
- width: 100%;
754
+ .ui.form .sixteen.wide.field {
755
+ width: 100% !important;
680
756
  }
681
757
 
682
758
  /* Swap to full width on mobile */
683
-
684
- @media only screen and (max-width : 767px) {
759
+ @media only screen and (max-width: 767px) {
685
760
  .ui.form .two.fields > .fields,
686
761
  .ui.form .two.fields > .field,
687
762
  .ui.form .three.fields > .fields,
@@ -705,7 +780,8 @@
705
780
  .ui.form .fields > .fourteen.wide.field,
706
781
  .ui.form .fields > .fifteen.wide.field,
707
782
  .ui.form .fields > .sixteen.wide.field {
708
- width: 100%;
783
+ width: 100% !important;
784
+ margin: 0em 0em 1em;
709
785
  padding-left: 0%;
710
786
  padding-right: 0%;
711
787
  }
@@ -715,31 +791,45 @@
715
791
  Inline Fields
716
792
  ---------------------*/
717
793
 
794
+ .ui.form .inline.fields {
795
+ margin: 0em 0em 1em;
796
+ }
718
797
  .ui.form .inline.fields .field {
719
- min-height: 1.3em;
720
- margin-right: 0.5em;
798
+ display: inline-block;
799
+ float: none;
800
+ margin: 0em 1em 0em 0em;
801
+ padding: 0em;
721
802
  }
722
-
723
803
  .ui.form .inline.fields .field > label,
724
804
  .ui.form .inline.fields .field > p,
725
- .ui.form .inline.fields .field > .ui.input,
726
805
  .ui.form .inline.fields .field > input,
806
+ .ui.form .inline.fields .field > .ui.input,
727
807
  .ui.form .inline.field > label,
728
808
  .ui.form .inline.field > p,
729
- .ui.form .inline.field > .ui.input,
730
- .ui.form .inline.field > input {
809
+ .ui.form .inline.field > input,
810
+ .ui.form .inline.field > .ui.input {
731
811
  display: inline-block;
732
812
  width: auto;
733
813
  margin-top: 0em;
734
814
  margin-bottom: 0em;
735
815
  vertical-align: middle;
816
+ font-size: 0.9285em;
817
+ }
818
+ .ui.form .inline.fields .field > input,
819
+ .ui.form .inline.fields .field > .ui.input,
820
+ .ui.form .inline.field > input,
821
+ .ui.form .inline.field > .ui.input {
822
+ font-size: 0.9285em;
823
+ }
824
+ .ui.form .inline.fields .field > .ui.checkbox label {
825
+ padding-left: 1.75em;
736
826
  }
737
827
 
828
+ /* Label */
738
829
  .ui.form .inline.fields .field > :first-child,
739
830
  .ui.form .inline.field > :first-child {
740
- margin: 0em 0.5em 0em 0em;
831
+ margin: 0em 0.2857rem 0em 0em;
741
832
  }
742
-
743
833
  .ui.form .inline.fields .field > :only-child,
744
834
  .ui.form .inline.field > :only-child {
745
835
  margin: 0em;
@@ -749,33 +839,35 @@
749
839
  Sizes
750
840
  ---------------------*/
751
841
 
752
- /* Standard */
753
842
 
843
+ /* Standard */
754
844
  .ui.small.form {
755
845
  font-size: 0.875em;
756
846
  }
757
847
 
758
- .ui.small.form textarea,
759
- .ui.small.form input[type="color"],
760
- .ui.small.form input[type="date"],
761
- .ui.small.form input[type="datetime"],
762
- .ui.small.form input[type="datetime-local"],
763
- .ui.small.form input[type="email"],
764
- .ui.small.form input[type="month"],
765
- .ui.small.form input[type="number"],
766
- .ui.small.form input[type="password"],
767
- .ui.small.form input[type="search"],
768
- .ui.small.form input[type="tel"],
769
- .ui.small.form input[type="text"],
770
- .ui.small.form input[type="time"],
771
- .ui.small.form input[type="url"],
772
- .ui.small.form input[type="week"],
773
- .ui.small.form label {
774
- font-size: 1em;
848
+ /* Medium */
849
+ .ui.form {
850
+ font-size: auto;
775
851
  }
776
852
 
777
853
  /* Large */
778
-
779
854
  .ui.large.form {
780
855
  font-size: 1.125em;
781
- }
856
+ }
857
+
858
+ /* Huge */
859
+ .ui.huge.form {
860
+ font-size: 1.2em;
861
+ }
862
+
863
+
864
+ /*******************************
865
+ Theme Overrides
866
+ *******************************/
867
+
868
+
869
+
870
+ /*******************************
871
+ Site Overrides
872
+ *******************************/
873
+