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,16 +1,18 @@
1
- /*
2
- * # Semantic - Image
3
- * http://github.com/jlukic/semantic-ui/
4
- *
5
- *
6
- * Copyright 2014 Contributors
7
- * Released under the MIT license
8
- * http://opensource.org/licenses/MIT
9
- *
1
+ /*
2
+ * # Semantic UI
3
+ * https://github.com/Semantic-Org/Semantic-UI
4
+ * http://www.semantic-ui.com/
5
+ *
6
+ * Copyright 2014 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
10
  */
11
11
 
12
- /*******************************
13
- Image
12
+
13
+
14
+ /*******************************
15
+ Image
14
16
  *******************************/
15
17
 
16
18
  .ui.image {
@@ -18,22 +20,21 @@
18
20
  display: inline-block;
19
21
  vertical-align: middle;
20
22
  max-width: 100%;
21
- background-color: rgba(0, 0, 0, 0.05);
23
+ background-color: transparent;
22
24
  }
23
-
24
25
  img.ui.image {
25
26
  display: block;
26
- background: none;
27
27
  }
28
-
28
+ .ui.image svg,
29
29
  .ui.image img {
30
30
  display: block;
31
31
  max-width: 100%;
32
32
  height: auto;
33
33
  }
34
34
 
35
- /*******************************
36
- States
35
+
36
+ /*******************************
37
+ States
37
38
  *******************************/
38
39
 
39
40
  .ui.disabled.image {
@@ -41,61 +42,124 @@ img.ui.image {
41
42
  opacity: 0.3;
42
43
  }
43
44
 
44
- /*******************************
45
- Variations
45
+
46
+ /*******************************
47
+ Variations
46
48
  *******************************/
47
49
 
48
- /*--------------
49
- Rounded
50
+
51
+ /*--------------
52
+ Inline
53
+ ---------------*/
54
+
55
+ .ui.inline.image,
56
+ .ui.inline.image svg,
57
+ .ui.inline.image img {
58
+ display: inline-block;
59
+ }
60
+
61
+ /*------------------
62
+ Vertical Aligned
63
+ -------------------*/
64
+
65
+ .ui.top.aligned.images .image,
66
+ .ui.top.aligned.image,
67
+ .ui.top.aligned.image svg,
68
+ .ui.top.aligned.image img {
69
+ display: inline-block;
70
+ vertical-align: top;
71
+ }
72
+ .ui.middle.aligned.images .image,
73
+ .ui.middle.aligned.image,
74
+ .ui.middle.aligned.image svg,
75
+ .ui.middle.aligned.image img {
76
+ display: inline-block;
77
+ vertical-align: middle;
78
+ }
79
+ .ui.bottom.aligned.images .image,
80
+ .ui.bottom.aligned.image,
81
+ .ui.bottom.aligned.image svg,
82
+ .ui.bottom.aligned.image img {
83
+ display: inline-block;
84
+ vertical-align: bottom;
85
+ }
86
+
87
+ /*--------------
88
+ Rounded
50
89
  ---------------*/
51
90
 
52
91
  .ui.rounded.images .image,
53
92
  .ui.rounded.images img,
93
+ .ui.rounded.images svg,
54
94
  .ui.rounded.image img,
95
+ .ui.rounded.image svg,
55
96
  .ui.rounded.image {
56
97
  border-radius: 0.3125em;
57
98
  }
58
99
 
59
- /*--------------
60
- Circular
100
+ /*--------------
101
+ Bordered
61
102
  ---------------*/
62
103
 
104
+ .ui.bordered.images .image,
105
+ .ui.bordered.images img,
106
+ .ui.bordered.images svg,
107
+ .ui.bordered.image img,
108
+ .ui.bordered.image svg,
109
+ img.ui.bordered.image {
110
+ border: 1px solid rgba(0, 0, 0, 0.1);
111
+ }
112
+
113
+ /*--------------
114
+ Circular
115
+ ---------------*/
116
+
117
+ .ui.circular.images,
118
+ .ui.circular.image {
119
+ overflow: hidden;
120
+ }
63
121
  .ui.circular.images .image,
64
122
  .ui.circular.images img,
123
+ .ui.circular.images svg,
65
124
  .ui.circular.image img,
125
+ .ui.circular.image svg,
66
126
  .ui.circular.image {
67
127
  border-radius: 500rem;
68
128
  }
69
129
 
70
- /*--------------
71
- Fluid
130
+ /*--------------
131
+ Fluid
72
132
  ---------------*/
73
133
 
74
134
  .ui.fluid.images,
75
135
  .ui.fluid.image,
76
136
  .ui.fluid.images img,
137
+ .ui.fluid.images svg,
138
+ .ui.fluid.image svg,
77
139
  .ui.fluid.image img {
78
140
  display: block;
79
141
  width: 100%;
80
142
  }
81
143
 
82
- /*--------------
83
- Avatar
144
+ /*--------------
145
+ Avatar
84
146
  ---------------*/
85
147
 
86
148
  .ui.avatar.images .image,
87
149
  .ui.avatar.images img,
150
+ .ui.avatar.images svg,
88
151
  .ui.avatar.image img,
152
+ .ui.avatar.image svg,
89
153
  .ui.avatar.image {
90
- margin-right: 0.5em;
154
+ margin-right: 0.25em;
91
155
  display: inline-block;
92
- width: 2em;
93
- height: 2em;
156
+ width: 2.5em;
157
+ height: 2.5em;
94
158
  border-radius: 500rem;
95
159
  }
96
160
 
97
- /*-------------------
98
- Floated
161
+ /*-------------------
162
+ Floated
99
163
  --------------------*/
100
164
 
101
165
  .ui.floated.image,
@@ -104,71 +168,108 @@ img.ui.image {
104
168
  margin-right: 1em;
105
169
  margin-bottom: 1em;
106
170
  }
107
-
108
171
  .ui.right.floated.images,
109
172
  .ui.right.floated.image {
110
173
  float: right;
174
+ margin-right: 0em;
111
175
  margin-bottom: 1em;
112
176
  margin-left: 1em;
113
177
  }
178
+ .ui.floated.images:last-child,
179
+ .ui.floated.image:last-child {
180
+ margin-bottom: 0em;
181
+ }
182
+ .ui.centered.images,
183
+ .ui.centered.image {
184
+ margin-left: auto;
185
+ margin-right: auto;
186
+ }
114
187
 
115
- /*--------------
116
- Sizes
188
+ /*--------------
189
+ Sizes
117
190
  ---------------*/
118
191
 
119
- .ui.tiny.images .image,
120
- .ui.tiny.images img,
121
- .ui.tiny.image {
122
- width: 20px;
123
- font-size: 0.7rem;
124
- }
125
-
126
192
  .ui.mini.images .image,
127
193
  .ui.mini.images img,
194
+ .ui.mini.images svg,
128
195
  .ui.mini.image {
129
- width: 35px;
130
- font-size: 0.8rem;
196
+ width: 20px;
197
+ font-size: 0.71428571rem;
198
+ }
199
+ .ui.tiny.images .image,
200
+ .ui.tiny.images img,
201
+ .ui.tiny.images svg,
202
+ .ui.tiny.image {
203
+ width: 80px;
204
+ font-size: 0.85714286rem;
131
205
  }
132
-
133
206
  .ui.small.images .image,
134
207
  .ui.small.images img,
208
+ .ui.small.images svg,
135
209
  .ui.small.image {
136
- width: 80px;
137
- font-size: 0.9rem;
210
+ width: 150px;
211
+ font-size: 0.92857143rem;
138
212
  }
139
-
140
213
  .ui.medium.images .image,
141
214
  .ui.medium.images img,
215
+ .ui.medium.images svg,
142
216
  .ui.medium.image {
143
217
  width: 300px;
144
218
  font-size: 1rem;
145
219
  }
146
-
147
220
  .ui.large.images .image,
148
221
  .ui.large.images img,
222
+ .ui.large.images svg,
149
223
  .ui.large.image {
150
224
  width: 450px;
151
- font-size: 1.1rem;
225
+ font-size: 1.14285714rem;
226
+ }
227
+ .ui.big.images .image,
228
+ .ui.big.images img,
229
+ .ui.big.images svg,
230
+ .ui.big.image {
231
+ width: 600px;
232
+ font-size: 1.28571429rem;
152
233
  }
153
-
154
234
  .ui.huge.images .image,
155
235
  .ui.huge.images img,
236
+ .ui.huge.images svg,
156
237
  .ui.huge.image {
157
- width: 600px;
158
- font-size: 1.2rem;
238
+ width: 800px;
239
+ font-size: 1.42857143rem;
240
+ }
241
+ .ui.massive.images .image,
242
+ .ui.massive.images img,
243
+ .ui.massive.images svg,
244
+ .ui.massive.image {
245
+ width: 960px;
246
+ font-size: 1.71428571rem;
159
247
  }
160
248
 
161
- /*******************************
162
- Groups
249
+
250
+ /*******************************
251
+ Groups
163
252
  *******************************/
164
253
 
165
254
  .ui.images {
166
255
  font-size: 0em;
167
256
  margin: 0em -0.25rem 0rem;
168
257
  }
169
-
170
258
  .ui.images .image,
171
- .ui.images img {
259
+ .ui.images img,
260
+ .ui.images svg {
172
261
  display: inline-block;
173
- margin: 0em 0.25em 0.5em;
174
- }
262
+ margin: 0em 0.25rem 0.5rem;
263
+ }
264
+
265
+
266
+ /*******************************
267
+ Theme Overrides
268
+ *******************************/
269
+
270
+
271
+
272
+ /*******************************
273
+ Site Overrides
274
+ *******************************/
275
+
@@ -1,8 +1,7 @@
1
- @import '../depends/loader';
2
- /*
3
- * # Semantic - Input
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,62 +9,59 @@
10
9
  *
11
10
  */
12
11
 
12
+
13
+
13
14
  /*******************************
14
15
  Standard
15
16
  *******************************/
16
17
 
18
+
17
19
  /*--------------------
18
20
  Inputs
19
21
  ---------------------*/
20
22
 
21
23
  .ui.input {
22
- display: inline-block;
23
24
  position: relative;
24
- color: rgba(0, 0, 0, 0.7);
25
+ display: inline-block;
26
+ color: rgba(0, 0, 0, 0.8);
25
27
  }
26
-
27
28
  .ui.input input {
28
- width: 100%;
29
- font-family: "Helvetica Neue", "Helvetica", Arial;
30
29
  margin: 0em;
31
- padding: 0.65em 1em;
32
- font-size: 1em;
33
- background-color: #FFFFFF;
34
- border: 1px solid rgba(0, 0, 0, 0.15);
30
+ width: 100%;
35
31
  outline: none;
36
- color: rgba(0, 0, 0, 0.7);
37
- border-radius: 0.3125em;
38
- -webkit-transition: background-color 0.3s ease-out,
39
- -webkit-box-shadow 0.2s ease,
40
- border-color 0.2s ease;
41
- transition: background-color 0.3s ease-out,
42
- box-shadow 0.2s ease,
43
- border-color 0.2s ease;
44
32
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
45
- -webkit-box-sizing: border-box;
46
- -moz-box-sizing: border-box;
47
- -ms-box-sizing: border-box;
48
- box-sizing: border-box;
33
+ text-align: left;
34
+ line-height: 1.2142em;
35
+ font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
36
+ padding: 0.67861em 1em;
37
+ background: #ffffff;
38
+ border: 1px solid rgba(0, 0, 0, 0.15);
39
+ color: rgba(0, 0, 0, 0.8);
40
+ border-radius: 0.2857rem;
41
+ -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
42
+ transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
43
+ box-shadow: none;
49
44
  }
50
45
 
51
46
  /*--------------------
52
47
  Placeholder
53
48
  ---------------------*/
54
49
 
55
- /* browsers require these rules separate */
56
50
 
57
- .ui.input::-webkit-input-placeholder {
58
- color: #BBBBBB;
51
+ /* browsers require these rules separate */
52
+ .ui.input input::-webkit-input-placeholder {
53
+ color: rgba(0, 0, 0, 0.4);
59
54
  }
60
-
61
- .ui.input::-moz-placeholder {
62
- color: #BBBBBB;
55
+ .ui.input input::-moz-placeholder {
56
+ color: rgba(0, 0, 0, 0.4);
63
57
  }
64
58
 
59
+
65
60
  /*******************************
66
61
  States
67
62
  *******************************/
68
63
 
64
+
69
65
  /*--------------------
70
66
  Active
71
67
  ---------------------*/
@@ -73,20 +69,43 @@
73
69
  .ui.input input:active,
74
70
  .ui.input.down input {
75
71
  border-color: rgba(0, 0, 0, 0.3);
76
- background-color: #FAFAFA;
72
+ background: #fafafa;
73
+ color: rgba(0, 0, 0, 0.8);
74
+ box-shadow: none;
77
75
  }
78
76
 
79
77
  /*--------------------
80
- Loading
78
+ Loading
81
79
  ---------------------*/
82
80
 
83
- .ui.loading.input > .icon {
84
- background: image-url("semantic-ui/loader-mini.gif") no-repeat 50% 50%;
85
- }
86
-
87
- .ui.loading.input > .icon:before,
88
- .ui.loading.input > .icon:after {
89
- display: none;
81
+ .ui.loading.loading.input > i.icon:before {
82
+ position: absolute;
83
+ content: '';
84
+ top: 50%;
85
+ left: 50%;
86
+ margin: -0.64285em 0em 0em -0.64285em;
87
+ width: 1.2857em;
88
+ height: 1.2857em;
89
+ border-radius: 500rem;
90
+ border: 0.2em solid rgba(0, 0, 0, 0.1);
91
+ }
92
+ .ui.loading.loading.input > i.icon:after {
93
+ position: absolute;
94
+ content: '';
95
+ top: 50%;
96
+ left: 50%;
97
+ margin: -0.64285em 0em 0em -0.64285em;
98
+ width: 1.2857em;
99
+ height: 1.2857em;
100
+ -webkit-animation: button-spin 0.6s linear;
101
+ animation: button-spin 0.6s linear;
102
+ -webkit-animation-iteration-count: infinite;
103
+ animation-iteration-count: infinite;
104
+ border-radius: 500rem;
105
+ border-color: #aaaaaa transparent transparent;
106
+ border-style: solid;
107
+ border-width: 0.2em;
108
+ box-shadow: 0px 0px 0px 1px transparent;
90
109
  }
91
110
 
92
111
  /*--------------------
@@ -95,18 +114,18 @@
95
114
 
96
115
  .ui.input.focus input,
97
116
  .ui.input input:focus {
98
- border-color: rgba(0, 0, 0, 0.2);
99
- color: rgba(0, 0, 0, 0.85);
117
+ border-color: rgba(39, 41, 43, 0.3);
118
+ background: #ffffff;
119
+ color: rgba(0, 0, 0, 0.8);
120
+ box-shadow: none;
100
121
  }
101
-
102
122
  .ui.input.focus input input::-webkit-input-placeholder,
103
123
  .ui.input input:focus input::-webkit-input-placeholder {
104
- color: #AAAAAA;
124
+ color: rgba(0, 0, 0, 0.8);
105
125
  }
106
-
107
126
  .ui.input.focus input input::-moz-placeholder,
108
127
  .ui.input input:focus input::-moz-placeholder {
109
- color: #AAAAAA;
128
+ color: rgba(0, 0, 0, 0.8);
110
129
  }
111
130
 
112
131
  /*--------------------
@@ -114,100 +133,123 @@
114
133
  ---------------------*/
115
134
 
116
135
  .ui.input.error input {
117
- background-color: #FFFAFA;
118
- border-color: #E7BEBE;
119
- color: #D95C5C;
136
+ background-color: #fff0f0;
137
+ border-color: #dbb1b1;
138
+ color: #d95c5c;
139
+ box-shadow: none;
120
140
  }
121
141
 
122
142
  /* Error Placeholder */
123
-
124
143
  .ui.input.error input ::-webkit-input-placeholder {
125
144
  color: rgba(255, 80, 80, 0.4);
126
145
  }
127
-
128
146
  .ui.input.error input ::-moz-placeholder {
129
147
  color: rgba(255, 80, 80, 0.4);
130
148
  }
131
149
 
150
+ /* Focused Error Placeholder */
132
151
  .ui.input.error input :focus::-webkit-input-placeholder {
133
152
  color: rgba(255, 80, 80, 0.7);
134
153
  }
135
-
136
154
  .ui.input.error input :focus::-moz-placeholder {
137
155
  color: rgba(255, 80, 80, 0.7);
138
156
  }
139
157
 
158
+
140
159
  /*******************************
141
160
  Variations
142
161
  *******************************/
143
162
 
163
+
144
164
  /*--------------------
145
165
  Transparent
146
166
  ---------------------*/
147
167
 
148
168
  .ui.transparent.input input {
149
- border: none;
169
+ border-color: transparent;
150
170
  background-color: transparent;
171
+ padding: 0em;
172
+ }
173
+
174
+ /* Transparent Icon */
175
+ .ui.transparent.icon.input > i.icon {
176
+ width: 1.25em;
177
+ }
178
+ .ui.transparent.icon.input > input {
179
+ padding-left: 0em !important;
180
+ padding-right: 2em !important;
181
+ }
182
+ .ui.transparent[class*="left icon"].input > input {
183
+ padding-left: 0em !important;
184
+ padding-left: 2em !important;
185
+ }
186
+
187
+ /* Transparent Inverted */
188
+ .ui.transparent.inverted.input input::-moz-placeholder {
189
+ color: rgba(255, 255, 255, 0.5);
190
+ }
191
+ .ui.transparent.inverted.input {
192
+ color: #ffffff;
193
+ }
194
+ .ui.transparent.inverted.input input {
195
+ color: inherit;
151
196
  }
152
197
 
153
198
  /*--------------------
154
199
  Icon
155
200
  ---------------------*/
156
201
 
157
- .ui.icon.input > .icon {
202
+ .ui.icon.input > i.icon {
158
203
  cursor: default;
159
204
  position: absolute;
160
- opacity: 0.5;
205
+ text-align: center;
161
206
  top: 0px;
162
207
  right: 0px;
163
208
  margin: 0em;
164
- width: 2.6em;
165
209
  height: 100%;
166
- padding-top: 0.82em;
210
+ width: 2.82142em;
211
+ opacity: 0.5;
212
+ border-radius: 0em 0.2857rem 0.2857rem 0em;
213
+ -webkit-transition: opacity 0.3s ease;
214
+ transition: opacity 0.3s ease;
215
+ }
216
+ .ui.icon.input input {
217
+ padding-right: 2.82142em !important;
218
+ }
219
+ .ui.icon.input > i.icon:before,
220
+ .ui.icon.input > i.icon:after {
221
+ left: 0;
222
+ position: absolute;
167
223
  text-align: center;
168
- border-radius: 0em 0.3125em 0.3125em 0em;
169
- -webkit-box-sizing: border-box;
170
- -moz-box-sizing: border-box;
171
- -ms-box-sizing: border-box;
172
- box-sizing: border-box;
173
- -webkit-transition: opacity 0.3s ease-out;
174
- transition: opacity 0.3s ease-out;
224
+ top: 50%;
225
+ width: 100%;
226
+ margin-top: -0.5em;
175
227
  }
176
-
177
- .ui.icon.input > .link.icon {
228
+ .ui.icon.input > i.link.icon {
178
229
  cursor: pointer;
179
230
  }
180
-
181
- .ui.icon.input input {
182
- padding-right: 3em !important;
183
- }
184
-
185
- .ui.icon.input > .circular.icon {
231
+ .ui.icon.input > i.circular.icon {
186
232
  top: 0.35em;
187
233
  right: 0.5em;
188
234
  }
189
235
 
190
- /* Left Side */
191
-
192
- .ui.left.icon.input > .icon {
236
+ /* Left Icon Input */
237
+ .ui[class*="left icon"].input > i.icon {
193
238
  right: auto;
194
239
  left: 1px;
195
- border-radius: 0.3125em 0em 0em 0.3125em;
240
+ border-radius: 0.2857rem 0em 0em 0.2857rem;
196
241
  }
197
-
198
- .ui.left.icon.input > .circular.icon {
242
+ .ui[class*="left icon"].input > i.circular.icon {
199
243
  right: auto;
200
244
  left: 0.5em;
201
245
  }
202
-
203
- .ui.left.icon.input > input {
204
- padding-left: 3em !important;
205
- padding-right: 1.2em !important;
246
+ .ui[class*="left icon"].input > input {
247
+ padding-left: 2.82142em !important;
248
+ padding-right: 1em !important;
206
249
  }
207
250
 
208
251
  /* Focus */
209
-
210
- .ui.icon.input > input:focus ~ .icon {
252
+ .ui.icon.input > input:focus ~ i.icon {
211
253
  opacity: 1;
212
254
  }
213
255
 
@@ -215,26 +257,79 @@
215
257
  Labeled
216
258
  ---------------------*/
217
259
 
218
- .ui.labeled.input .corner.label {
219
- font-size: 0.7em;
220
- border-radius: 0 0.3125em;
260
+
261
+ /* Adjacent Label */
262
+ .ui.labeled.input {
263
+ display: table;
264
+ }
265
+ .ui.labeled.input > input {
266
+ display: table-cell;
267
+ vertical-align: top;
268
+ }
269
+ .ui.labeled.input > .label {
270
+ display: table-cell;
271
+ vertical-align: middle;
272
+ white-space: nowrap;
273
+ font-size: 1em;
274
+ }
275
+ .ui.labeled.input > .label > .icon {
276
+ display: inline;
277
+ vertical-align: top;
221
278
  }
222
279
 
223
- .ui.labeled.input .left.corner.label {
224
- border-radius: 0.3125em 0;
280
+ /* Fluid Labeled */
281
+ .ui.fluid.labeled.input {
282
+ display: table;
283
+ width: 100%;
284
+ }
285
+ .ui.fluid.labeled.input > .label {
286
+ width: 0.01%;
225
287
  }
226
288
 
289
+ /* Label on Left */
290
+ .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
291
+ border-left: none;
292
+ border-top-left-radius: 0px;
293
+ border-bottom-left-radius: 0px;
294
+ }
295
+ .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label {
296
+ border-top-right-radius: 0px;
297
+ border-bottom-right-radius: 0px;
298
+ }
299
+
300
+ /* Label on Right */
301
+ .ui[class*="right labeled"].input > input {
302
+ border-right: none;
303
+ border-top-right-radius: 0px !important;
304
+ border-bottom-right-radius: 0px !important;
305
+ }
306
+ .ui[class*="right labeled"].input > .label {
307
+ border-top-left-radius: 0px;
308
+ border-bottom-left-radius: 0px;
309
+ }
310
+
311
+ /* Corner Label */
312
+ .ui.labeled.input .corner.label {
313
+ top: 1px;
314
+ right: 1px;
315
+ font-size: 0.75em;
316
+ border-radius: 0em 0.2857rem 0em 0em;
317
+ }
227
318
  .ui.labeled.input input {
228
319
  padding-right: 2.5em !important;
229
320
  }
230
321
 
231
322
  /* Spacing with corner label */
232
-
233
- .ui.labeled.icon.input:not(.left) > input {
323
+ .ui[class*="corner labeled"].input {
324
+ display: inline-block;
325
+ }
326
+ .ui[class*="corner labeled"].input > input {
327
+ display: block;
328
+ }
329
+ .ui[class*="corner labeled"].icon.input:not(.left) > input {
234
330
  padding-right: 3.25em !important;
235
331
  }
236
-
237
- .ui.labeled.icon.input:not(.left) > .icon {
332
+ .ui[class*="corner labeled"].icon.input:not(.left) > .icon {
238
333
  margin-right: 1.25em;
239
334
  }
240
335
 
@@ -245,37 +340,65 @@
245
340
  .ui.action.input {
246
341
  display: table;
247
342
  }
248
-
249
343
  .ui.action.input > input {
250
344
  display: table-cell;
251
- border-top-right-radius: 0px !important;
252
- border-bottom-right-radius: 0px !important;
253
- border-right: none;
345
+ vertical-align: top;
254
346
  }
255
-
256
347
  .ui.action.input > .button,
257
348
  .ui.action.input > .buttons {
258
349
  display: table-cell;
259
- border-top-left-radius: 0px;
260
- border-bottom-left-radius: 0px;
350
+ vertical-align: middle;
261
351
  white-space: nowrap;
352
+ padding-top: 0.78571em;
353
+ padding-bottom: 0.78571em;
262
354
  }
263
-
264
355
  .ui.action.input > .button > .icon,
265
356
  .ui.action.input > .buttons > .button > .icon {
266
357
  display: inline;
267
358
  vertical-align: top;
268
359
  }
269
-
270
360
  .ui.fluid.action.input {
271
361
  display: table;
272
362
  width: 100%;
273
363
  }
274
-
275
364
  .ui.fluid.action.input > .button {
276
365
  width: 0.01%;
277
366
  }
278
367
 
368
+ /* Button on Right */
369
+ .ui.action.input:not([class*="left action"]) > input {
370
+ border-right: none;
371
+ border-top-right-radius: 0px !important;
372
+ border-bottom-right-radius: 0px !important;
373
+ }
374
+ .ui.action.input:not([class*="left action"]) > .button,
375
+ .ui.action.input:not([class*="left action"]) > .buttons {
376
+ border-top-left-radius: 0px;
377
+ border-bottom-left-radius: 0px;
378
+ }
379
+
380
+ /* Button on Left */
381
+ .ui[class*="left action"].input > .button,
382
+ .ui[class*="left action"].input > .buttons {
383
+ border-top-right-radius: 0px;
384
+ border-bottom-right-radius: 0px;
385
+ }
386
+ .ui[class*="left action"].input > input {
387
+ border-left: none;
388
+ border-top-left-radius: 0px;
389
+ border-bottom-left-radius: 0px;
390
+ }
391
+
392
+ /*--------------------
393
+ Inverted
394
+ ---------------------*/
395
+
396
+
397
+ /* Standard */
398
+ .ui.inverted.input input {
399
+ border: none;
400
+ }
401
+
279
402
  /*--------------------
280
403
  Fluid
281
404
  ---------------------*/
@@ -289,29 +412,35 @@
289
412
  ---------------------*/
290
413
 
291
414
  .ui.mini.input {
292
- font-size: 0.8125em;
415
+ font-size: 0.8125rem;
293
416
  }
294
-
295
417
  .ui.small.input {
296
- font-size: 0.875em;
418
+ font-size: 0.875rem;
297
419
  }
298
-
299
420
  .ui.input {
300
- font-size: 1em;
421
+ font-size: 1rem;
301
422
  }
302
-
303
423
  .ui.large.input {
304
- font-size: 1.125em;
424
+ font-size: 1.125rem;
305
425
  }
306
-
307
426
  .ui.big.input {
308
- font-size: 1.25em;
427
+ font-size: 1.25rem;
309
428
  }
310
-
311
429
  .ui.huge.input {
312
- font-size: 1.375em;
430
+ font-size: 1.375rem;
313
431
  }
314
-
315
432
  .ui.massive.input {
316
- font-size: 1.5em;
317
- }
433
+ font-size: 1.5rem;
434
+ }
435
+
436
+
437
+ /*******************************
438
+ Theme Overrides
439
+ *******************************/
440
+
441
+
442
+
443
+ /*******************************
444
+ Site Overrides
445
+ *******************************/
446
+