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,7 +1,7 @@
1
- /*
2
- * # Semantic - Grid
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,60 +9,71 @@
9
9
  *
10
10
  */
11
11
 
12
+
13
+
12
14
  /*******************************
13
- Grid
15
+ Standard
14
16
  *******************************/
15
17
 
16
18
  .ui.grid {
17
19
  display: block;
18
20
  text-align: left;
19
21
  font-size: 0em;
20
- margin: 0% -1.5%;
21
- padding: 0%;
22
- -webkit-box-sizing: border-box;
23
- -moz-box-sizing: border-box;
24
- box-sizing: border-box;
22
+ padding: 0em;
25
23
  }
26
-
27
- body > .ui.grid {
28
- margin-left: 0% !important;
29
- margin-right: 0% !important;
30
- }
31
-
32
24
  .ui.grid:after,
33
- .ui.row:after {
34
- content: ".";
25
+ .ui.grid > .row:after {
26
+ content: '';
35
27
  display: block;
36
- height: 0;
28
+ height: 0px;
37
29
  clear: both;
38
30
  visibility: hidden;
39
31
  }
40
32
 
33
+ /*----------------------
34
+ Remove Gutters
35
+ -----------------------*/
36
+
37
+ .ui.grid {
38
+ margin-top: -1rem;
39
+ margin-bottom: -1rem;
40
+ margin-left: -1rem;
41
+ margin-right: -1rem;
42
+ }
43
+ .ui.relaxed.grid {
44
+ margin-left: -1.5rem;
45
+ margin-right: -1.5rem;
46
+ }
47
+ .ui[class*="very relaxed"].grid {
48
+ margin-left: -2.5rem;
49
+ margin-right: -2.5rem;
50
+ }
51
+
52
+ /* Collapse Margins on Consecutive Grids */
53
+ .ui.grid + .grid {
54
+ margin-top: 1rem;
55
+ }
56
+
41
57
  /*-------------------
42
58
  Columns
43
59
  --------------------*/
44
60
 
45
- /* Standard 16 column */
46
61
 
47
- .ui.grid > .column,
62
+ /* Standard 16 column */
63
+ .ui.grid > .column:not(.row),
48
64
  .ui.grid > .row > .column {
65
+ position: relative;
49
66
  display: inline-block;
50
67
  text-align: left;
51
68
  font-size: 1rem;
52
69
  width: 6.25%;
53
- padding-left: 1.5%;
54
- padding-right: 1.5%;
55
- -webkit-box-sizing: border-box;
56
- -moz-box-sizing: border-box;
57
- box-sizing: border-box;
70
+ padding-left: 1rem;
71
+ padding-right: 1rem;
58
72
  vertical-align: top;
59
73
  }
60
-
61
- /* Vertical padding when no rows */
62
-
63
- .ui.grid > .column {
64
- margin-top: 1rem;
65
- margin-bottom: 1rem;
74
+ .ui.grid > * {
75
+ padding-left: 1rem;
76
+ padding-right: 1rem;
66
77
  }
67
78
 
68
79
  /*-------------------
@@ -70,16 +81,28 @@ body > .ui.grid {
70
81
  --------------------*/
71
82
 
72
83
  .ui.grid > .row {
84
+ position: relative;
73
85
  display: block;
74
- width: 100% !important;
75
- margin-top: 1.5%;
76
- padding: 1rem 0% 0%;
86
+ width: auto !important;
87
+ padding: 0rem;
77
88
  font-size: 0rem;
89
+ padding-top: 1rem;
90
+ padding-bottom: 1rem;
78
91
  }
79
92
 
80
- .ui.grid > .row:first-child {
81
- padding-top: 0rem;
82
- margin-top: 0rem;
93
+ /*-------------------
94
+ Columns
95
+ --------------------*/
96
+
97
+
98
+ /* Vertical padding when no rows */
99
+ .ui.grid > .column:not(.row) {
100
+ padding-top: 1rem;
101
+ padding-bottom: 1rem;
102
+ }
103
+ .ui.grid > .row > .column {
104
+ margin-top: 0em;
105
+ margin-bottom: 0em;
83
106
  }
84
107
 
85
108
  /*-------------------
@@ -91,304 +114,899 @@ body > .ui.grid {
91
114
  max-width: 100%;
92
115
  }
93
116
 
94
- .ui.grid .column > .ui.segment:only-child {
95
- margin: 0em;
117
+ /*-------------------
118
+ Loose Coupling
119
+ --------------------*/
120
+
121
+ .ui.grid .row + .ui.divider {
122
+ margin: 1rem 1rem;
123
+ }
124
+
125
+ /* remove Border on last horizontal segment */
126
+ .ui.grid > .row > .column:last-child > .horizontal.segment,
127
+ .ui.grid > .column:last-child > .horizontal.segment {
128
+ box-shadow: none;
96
129
  }
97
130
 
131
+
98
132
  /*******************************
99
133
  Variations
100
134
  *******************************/
101
135
 
136
+
102
137
  /*-----------------------
103
- Page Grid (Responsive)
138
+ Page Grid
104
139
  -------------------------*/
105
140
 
106
141
  .ui.page.grid {
107
- min-width: 320px;
108
- margin-left: 0%;
109
- margin-right: 0%;
142
+ padding-left: 8%;
143
+ padding-right: 8%;
144
+ width: auto;
110
145
  }
111
146
 
112
- @media only screen and (max-width : 991px) {
147
+ /* Collapse Margin */
148
+ .ui.grid > .ui.grid:first-child {
149
+ margin-top: 0em;
150
+ }
151
+ .ui.grid > .ui.grid:last-child {
152
+ margin-bottom: 0em;
153
+ }
154
+ @media only screen and (max-width: 767px) {
113
155
  .ui.page.grid {
114
- padding: 0% 4%;
156
+ width: auto;
157
+ padding-left: 0em;
158
+ padding-right: 0em;
159
+ margin-left: 0em;
160
+ margin-right: 0em;
115
161
  }
116
162
  }
117
-
118
- @media only screen and (min-width : 992px) {
163
+ @media only screen and (min-width: 768px) {
119
164
  .ui.page.grid {
120
- padding: 0% 8%;
165
+ width: auto;
166
+ margin-left: 0em;
167
+ margin-right: 0em;
168
+ padding-left: 4em;
169
+ padding-right: 4em;
121
170
  }
122
171
  }
123
-
124
- @media only screen and (min-width : 1500px) {
172
+ @media only screen and (min-width: 992px) {
125
173
  .ui.page.grid {
126
- padding: 0% 13%;
174
+ width: auto;
175
+ margin-left: 0em;
176
+ margin-right: 0em;
177
+ padding-left: 8%;
178
+ padding-right: 8%;
127
179
  }
128
180
  }
129
-
130
- @media only screen and (min-width : 1750px) {
181
+ @media only screen and (min-width: 1400px) {
131
182
  .ui.page.grid {
132
- padding: 0% 18%;
183
+ width: auto;
184
+ margin-left: 0em;
185
+ margin-right: 0em;
186
+ padding-left: 15%;
187
+ padding-right: 15%;
133
188
  }
134
189
  }
135
-
136
- @media only screen and (min-width : 2000px) {
190
+ @media only screen and (min-width: 1920px) {
137
191
  .ui.page.grid {
138
- padding: 0% 23%;
192
+ width: auto;
193
+ margin-left: 0em;
194
+ margin-right: 0em;
195
+ padding-left: 23%;
196
+ padding-right: 23%;
139
197
  }
140
198
  }
141
199
 
142
200
  /*-------------------
143
- Column Width
201
+ Column Count
144
202
  --------------------*/
145
203
 
146
- /* Sizing Combinations */
147
204
 
148
- .ui.grid > .row > .one.wide.column,
149
- .ui.grid > .column.row > .one.wide.column,
150
- .ui.grid > .one.wide.column,
151
- .ui.column.grid > .one.wide.column {
152
- width: 6.25%;
205
+ /* Assume full width with one column */
206
+ .ui.grid > .column:only-child,
207
+ .ui.grid > .row > .column:only-child {
208
+ width: 100%;
153
209
  }
154
210
 
155
- .ui.grid > .row > .two.wide.column,
156
- .ui.grid > .column.row > .two.wide.column,
157
- .ui.grid > .two.wide.column,
158
- .ui.column.grid > .two.wide.column {
159
- width: 12.5%;
211
+ /* Grid Based */
212
+ .ui[class*="one column"].grid > .row > .column,
213
+ .ui[class*="one column"].grid > .column {
214
+ width: 100%;
160
215
  }
161
-
162
- .ui.grid > .row > .three.wide.column,
163
- .ui.grid > .column.row > .three.wide.column,
164
- .ui.grid > .three.wide.column,
165
- .ui.column.grid > .three.wide.column {
166
- width: 18.75%;
216
+ .ui[class*="two column"].grid > .row > .column,
217
+ .ui[class*="two column"].grid > .column {
218
+ width: 50%;
167
219
  }
168
-
169
- .ui.grid > .row > .four.wide.column,
170
- .ui.grid > .column.row > .four.wide.column,
171
- .ui.grid > .four.wide.column,
172
- .ui.column.grid > .four.wide.column {
220
+ .ui[class*="three column"].grid > .row > .column,
221
+ .ui[class*="three column"].grid > .column {
222
+ width: 33.33333333%;
223
+ }
224
+ .ui[class*="four column"].grid > .row > .column,
225
+ .ui[class*="four column"].grid > .column {
173
226
  width: 25%;
174
227
  }
175
-
176
- .ui.grid > .row > .five.wide.column,
177
- .ui.grid > .column.row > .five.wide.column,
178
- .ui.grid > .five.wide.column,
179
- .ui.column.grid > .five.wide.column {
180
- width: 31.25%;
228
+ .ui[class*="five column"].grid > .row > .column,
229
+ .ui[class*="five column"].grid > .column {
230
+ width: 20%;
181
231
  }
182
-
183
- .ui.grid > .row > .six.wide.column,
184
- .ui.grid > .column.row > .six.wide.column,
185
- .ui.grid > .six.wide.column,
186
- .ui.column.grid > .six.wide.column {
187
- width: 37.5%;
232
+ .ui[class*="six column"].grid > .row > .column,
233
+ .ui[class*="six column"].grid > .column {
234
+ width: 16.66666667%;
188
235
  }
189
-
190
- .ui.grid > .row > .seven.wide.column,
191
- .ui.grid > .column.row > .seven.wide.column,
192
- .ui.grid > .seven.wide.column,
193
- .ui.column.grid > .seven.wide.column {
194
- width: 43.75%;
236
+ .ui[class*="seven column"].grid > .row > .column,
237
+ .ui[class*="seven column"].grid > .column {
238
+ width: 14.28571429%;
195
239
  }
196
-
197
- .ui.grid > .row > .eight.wide.column,
198
- .ui.grid > .column.row > .eight.wide.column,
199
- .ui.grid > .eight.wide.column,
200
- .ui.column.grid > .eight.wide.column {
201
- width: 50%;
240
+ .ui[class*="eight column"].grid > .row > .column,
241
+ .ui[class*="eight column"].grid > .column {
242
+ width: 12.5%;
202
243
  }
203
-
204
- .ui.grid > .row > .nine.wide.column,
205
- .ui.grid > .column.row > .nine.wide.column,
206
- .ui.grid > .nine.wide.column,
207
- .ui.column.grid > .nine.wide.column {
208
- width: 56.25%;
244
+ .ui[class*="nine column"].grid > .row > .column,
245
+ .ui[class*="nine column"].grid > .column {
246
+ width: 11.11111111%;
209
247
  }
210
-
211
- .ui.grid > .row > .ten.wide.column,
212
- .ui.grid > .column.row > .ten.wide.column,
213
- .ui.grid > .ten.wide.column,
214
- .ui.column.grid > .ten.wide.column {
215
- width: 62.5%;
248
+ .ui[class*="ten column"].grid > .row > .column,
249
+ .ui[class*="ten column"].grid > .column {
250
+ width: 10%;
216
251
  }
217
-
218
- .ui.grid > .row > .eleven.wide.column,
219
- .ui.grid > .column.row > .eleven.wide.column,
220
- .ui.grid > .eleven.wide.column,
221
- .ui.column.grid > .eleven.wide.column {
222
- width: 68.75%;
252
+ .ui[class*="eleven column"].grid > .row > .column,
253
+ .ui[class*="eleven column"].grid > .column {
254
+ width: 9.09090909%;
223
255
  }
224
-
225
- .ui.grid > .row > .twelve.wide.column,
226
- .ui.grid > .column.row > .twelve.wide.column,
227
- .ui.grid > .twelve.wide.column,
228
- .ui.column.grid > .twelve.wide.column {
229
- width: 75%;
256
+ .ui[class*="twelve column"].grid > .row > .column,
257
+ .ui[class*="twelve column"].grid > .column {
258
+ width: 8.33333333%;
230
259
  }
231
-
232
- .ui.grid > .row > .thirteen.wide.column,
233
- .ui.grid > .column.row > .thirteen.wide.column,
234
- .ui.grid > .thirteen.wide.column,
235
- .ui.column.grid > .thirteen.wide.column {
236
- width: 81.25%;
260
+ .ui[class*="thirteen column"].grid > .row > .column,
261
+ .ui[class*="thirteen column"].grid > .column {
262
+ width: 7.69230769%;
237
263
  }
238
-
239
- .ui.grid > .row > .fourteen.wide.column,
240
- .ui.grid > .column.row > .fourteen.wide.column,
241
- .ui.grid > .fourteen.wide.column,
242
- .ui.column.grid > .fourteen.wide.column {
243
- width: 87.5%;
264
+ .ui[class*="fourteen column"].grid > .row > .column,
265
+ .ui[class*="fourteen column"].grid > .column {
266
+ width: 7.14285714%;
244
267
  }
245
-
246
- .ui.grid > .row > .fifteen.wide.column,
247
- .ui.grid > .column.row > .fifteen.wide.column,
248
- .ui.grid > .fifteen.wide.column,
249
- .ui.column.grid > .fifteen.wide.column {
250
- width: 93.75%;
268
+ .ui[class*="fifteen column"].grid > .row > .column,
269
+ .ui[class*="fifteen column"].grid > .column {
270
+ width: 6.66666667%;
271
+ }
272
+ .ui[class*="sixteen column"].grid > .row > .column,
273
+ .ui[class*="sixteen column"].grid > .column {
274
+ width: 6.25%;
251
275
  }
252
276
 
253
- .ui.grid > .row > .sixteen.wide.column,
254
- .ui.grid > .column.row > .sixteen.wide.column,
255
- .ui.grid > .sixteen.wide.column,
256
- .ui.column.grid > .sixteen.wide.column {
257
- width: 100%;
277
+ /* Row Based Overrides */
278
+ .ui.grid > [class*="one column"].row > .column {
279
+ width: 100% !important;
280
+ }
281
+ .ui.grid > [class*="two column"].row > .column {
282
+ width: 50% !important;
283
+ }
284
+ .ui.grid > [class*="three column"].row > .column {
285
+ width: 33.33333333% !important;
286
+ }
287
+ .ui.grid > [class*="four column"].row > .column {
288
+ width: 25% !important;
289
+ }
290
+ .ui.grid > [class*="five column"].row > .column {
291
+ width: 20% !important;
292
+ }
293
+ .ui.grid > [class*="six column"].row > .column {
294
+ width: 16.66666667% !important;
295
+ }
296
+ .ui.grid > [class*="seven column"].row > .column {
297
+ width: 14.28571429% !important;
298
+ }
299
+ .ui.grid > [class*="eight column"].row > .column {
300
+ width: 12.5% !important;
301
+ }
302
+ .ui.grid > [class*="nine column"].row > .column {
303
+ width: 11.11111111% !important;
304
+ }
305
+ .ui.grid > [class*="ten column"].row > .column {
306
+ width: 10% !important;
307
+ }
308
+ .ui.grid > [class*="eleven column"].row > .column {
309
+ width: 9.09090909% !important;
310
+ }
311
+ .ui.grid > [class*="twelve column"].row > .column {
312
+ width: 8.33333333% !important;
313
+ }
314
+ .ui.grid > [class*="thirteen column"].row > .column {
315
+ width: 7.69230769% !important;
316
+ }
317
+ .ui.grid > [class*="fourteen column"].row > .column {
318
+ width: 7.14285714% !important;
319
+ }
320
+ .ui.grid > [class*="fifteen column"].row > .column {
321
+ width: 6.66666667% !important;
322
+ }
323
+ .ui.grid > [class*="sixteen column"].row > .column {
324
+ width: 6.25% !important;
258
325
  }
259
326
 
260
327
  /*-------------------
261
- Column Count
328
+ Column Width
262
329
  --------------------*/
263
330
 
264
- /* Assume full width with one column */
265
331
 
266
- .ui.one.column.grid > .row > .column,
267
- .ui.one.column.grid > .column,
268
- .ui.grid > .one.column.row > .column {
269
- width: 100%;
332
+ /* Sizing Combinations */
333
+ .ui.grid > .row > [class*="one wide"].column,
334
+ .ui.grid > .column.row > [class*="one wide"].column,
335
+ .ui.grid > [class*="one wide"].column,
336
+ .ui.column.grid > [class*="one wide"].column {
337
+ width: 6.25% !important;
338
+ }
339
+ .ui.grid > .row > [class*="two wide"].column,
340
+ .ui.grid > .column.row > [class*="two wide"].column,
341
+ .ui.grid > [class*="two wide"].column,
342
+ .ui.column.grid > [class*="two wide"].column {
343
+ width: 12.5% !important;
344
+ }
345
+ .ui.grid > .row > [class*="three wide"].column,
346
+ .ui.grid > .column.row > [class*="three wide"].column,
347
+ .ui.grid > [class*="three wide"].column,
348
+ .ui.column.grid > [class*="three wide"].column {
349
+ width: 18.75% !important;
350
+ }
351
+ .ui.grid > .row > [class*="four wide"].column,
352
+ .ui.grid > .column.row > [class*="four wide"].column,
353
+ .ui.grid > [class*="four wide"].column,
354
+ .ui.column.grid > [class*="four wide"].column {
355
+ width: 25% !important;
356
+ }
357
+ .ui.grid > .row > [class*="five wide"].column,
358
+ .ui.grid > .column.row > [class*="five wide"].column,
359
+ .ui.grid > [class*="five wide"].column,
360
+ .ui.column.grid > [class*="five wide"].column {
361
+ width: 31.25% !important;
362
+ }
363
+ .ui.grid > .row > [class*="six wide"].column,
364
+ .ui.grid > .column.row > [class*="six wide"].column,
365
+ .ui.grid > [class*="six wide"].column,
366
+ .ui.column.grid > [class*="six wide"].column {
367
+ width: 37.5% !important;
368
+ }
369
+ .ui.grid > .row > [class*="seven wide"].column,
370
+ .ui.grid > .column.row > [class*="seven wide"].column,
371
+ .ui.grid > [class*="seven wide"].column,
372
+ .ui.column.grid > [class*="seven wide"].column {
373
+ width: 43.75% !important;
374
+ }
375
+ .ui.grid > .row > [class*="eight wide"].column,
376
+ .ui.grid > .column.row > [class*="eight wide"].column,
377
+ .ui.grid > [class*="eight wide"].column,
378
+ .ui.column.grid > [class*="eight wide"].column {
379
+ width: 50% !important;
380
+ }
381
+ .ui.grid > .row > [class*="nine wide"].column,
382
+ .ui.grid > .column.row > [class*="nine wide"].column,
383
+ .ui.grid > [class*="nine wide"].column,
384
+ .ui.column.grid > [class*="nine wide"].column {
385
+ width: 56.25% !important;
386
+ }
387
+ .ui.grid > .row > [class*="ten wide"].column,
388
+ .ui.grid > .column.row > [class*="ten wide"].column,
389
+ .ui.grid > [class*="ten wide"].column,
390
+ .ui.column.grid > [class*="ten wide"].column {
391
+ width: 62.5% !important;
392
+ }
393
+ .ui.grid > .row > [class*="eleven wide"].column,
394
+ .ui.grid > .column.row > [class*="eleven wide"].column,
395
+ .ui.grid > [class*="eleven wide"].column,
396
+ .ui.column.grid > [class*="eleven wide"].column {
397
+ width: 68.75% !important;
398
+ }
399
+ .ui.grid > .row > [class*="twelve wide"].column,
400
+ .ui.grid > .column.row > [class*="twelve wide"].column,
401
+ .ui.grid > [class*="twelve wide"].column,
402
+ .ui.column.grid > [class*="twelve wide"].column {
403
+ width: 75% !important;
404
+ }
405
+ .ui.grid > .row > [class*="thirteen wide"].column,
406
+ .ui.grid > .column.row > [class*="thirteen wide"].column,
407
+ .ui.grid > [class*="thirteen wide"].column,
408
+ .ui.column.grid > [class*="thirteen wide"].column {
409
+ width: 81.25% !important;
410
+ }
411
+ .ui.grid > .row > [class*="fourteen wide"].column,
412
+ .ui.grid > .column.row > [class*="fourteen wide"].column,
413
+ .ui.grid > [class*="fourteen wide"].column,
414
+ .ui.column.grid > [class*="fourteen wide"].column {
415
+ width: 87.5% !important;
416
+ }
417
+ .ui.grid > .row > [class*="fifteen wide"].column,
418
+ .ui.grid > .column.row > [class*="fifteen wide"].column,
419
+ .ui.grid > [class*="fifteen wide"].column,
420
+ .ui.column.grid > [class*="fifteen wide"].column {
421
+ width: 93.75% !important;
422
+ }
423
+ .ui.grid > .row > [class*="sixteen wide"].column,
424
+ .ui.grid > .column.row > [class*="sixteen wide"].column,
425
+ .ui.grid > [class*="sixteen wide"].column,
426
+ .ui.column.grid > [class*="sixteen wide"].column {
427
+ width: 100% !important;
270
428
  }
271
429
 
272
- .ui.two.column.grid > .row > .column,
273
- .ui.two.column.grid > .column,
274
- .ui.grid > .two.column.row > .column {
275
- width: 50%;
276
- }
430
+ /*----------------------
431
+ Width per Device
432
+ -----------------------*/
277
433
 
278
- .ui.three.column.grid > .row > .column,
279
- .ui.three.column.grid > .column,
280
- .ui.grid > .three.column.row > .column {
281
- width: 33.3333%;
282
- }
283
434
 
284
- .ui.four.column.grid > .row > .column,
285
- .ui.four.column.grid > .column,
286
- .ui.grid > .four.column.row > .column {
287
- width: 25%;
435
+ /* Mobile Sizing Combinations */
436
+ @media only screen and (min-width: 320px) and (max-width: 767px) {
437
+ .ui.grid > .row > [class*="one wide mobile"].column,
438
+ .ui.grid > .column.row > [class*="one wide mobile"].column,
439
+ .ui.grid > [class*="one wide mobile"].column,
440
+ .ui.column.grid > [class*="one wide mobile"].column {
441
+ width: 6.25% !important;
442
+ }
443
+ .ui.grid > .row > [class*="two wide mobile"].column,
444
+ .ui.grid > .column.row > [class*="two wide mobile"].column,
445
+ .ui.grid > [class*="two wide mobile"].column,
446
+ .ui.column.grid > [class*="two wide mobile"].column {
447
+ width: 12.5% !important;
448
+ }
449
+ .ui.grid > .row > [class*="three wide mobile"].column,
450
+ .ui.grid > .column.row > [class*="three wide mobile"].column,
451
+ .ui.grid > [class*="three wide mobile"].column,
452
+ .ui.column.grid > [class*="three wide mobile"].column {
453
+ width: 18.75% !important;
454
+ }
455
+ .ui.grid > .row > [class*="four wide mobile"].column,
456
+ .ui.grid > .column.row > [class*="four wide mobile"].column,
457
+ .ui.grid > [class*="four wide mobile"].column,
458
+ .ui.column.grid > [class*="four wide mobile"].column {
459
+ width: 25% !important;
460
+ }
461
+ .ui.grid > .row > [class*="five wide mobile"].column,
462
+ .ui.grid > .column.row > [class*="five wide mobile"].column,
463
+ .ui.grid > [class*="five wide mobile"].column,
464
+ .ui.column.grid > [class*="five wide mobile"].column {
465
+ width: 31.25% !important;
466
+ }
467
+ .ui.grid > .row > [class*="six wide mobile"].column,
468
+ .ui.grid > .column.row > [class*="six wide mobile"].column,
469
+ .ui.grid > [class*="six wide mobile"].column,
470
+ .ui.column.grid > [class*="six wide mobile"].column {
471
+ width: 37.5% !important;
472
+ }
473
+ .ui.grid > .row > [class*="seven wide mobile"].column,
474
+ .ui.grid > .column.row > [class*="seven wide mobile"].column,
475
+ .ui.grid > [class*="seven wide mobile"].column,
476
+ .ui.column.grid > [class*="seven wide mobile"].column {
477
+ width: 43.75% !important;
478
+ }
479
+ .ui.grid > .row > [class*="eight wide mobile"].column,
480
+ .ui.grid > .column.row > [class*="eight wide mobile"].column,
481
+ .ui.grid > [class*="eight wide mobile"].column,
482
+ .ui.column.grid > [class*="eight wide mobile"].column {
483
+ width: 50% !important;
484
+ }
485
+ .ui.grid > .row > [class*="nine wide mobile"].column,
486
+ .ui.grid > .column.row > [class*="nine wide mobile"].column,
487
+ .ui.grid > [class*="nine wide mobile"].column,
488
+ .ui.column.grid > [class*="nine wide mobile"].column {
489
+ width: 56.25% !important;
490
+ }
491
+ .ui.grid > .row > [class*="ten wide mobile"].column,
492
+ .ui.grid > .column.row > [class*="ten wide mobile"].column,
493
+ .ui.grid > [class*="ten wide mobile"].column,
494
+ .ui.column.grid > [class*="ten wide mobile"].column {
495
+ width: 62.5% !important;
496
+ }
497
+ .ui.grid > .row > [class*="eleven wide mobile"].column,
498
+ .ui.grid > .column.row > [class*="eleven wide mobile"].column,
499
+ .ui.grid > [class*="eleven wide mobile"].column,
500
+ .ui.column.grid > [class*="eleven wide mobile"].column {
501
+ width: 68.75% !important;
502
+ }
503
+ .ui.grid > .row > [class*="twelve wide mobile"].column,
504
+ .ui.grid > .column.row > [class*="twelve wide mobile"].column,
505
+ .ui.grid > [class*="twelve wide mobile"].column,
506
+ .ui.column.grid > [class*="twelve wide mobile"].column {
507
+ width: 75% !important;
508
+ }
509
+ .ui.grid > .row > [class*="thirteen wide mobile"].column,
510
+ .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
511
+ .ui.grid > [class*="thirteen wide mobile"].column,
512
+ .ui.column.grid > [class*="thirteen wide mobile"].column {
513
+ width: 81.25% !important;
514
+ }
515
+ .ui.grid > .row > [class*="fourteen wide mobile"].column,
516
+ .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
517
+ .ui.grid > [class*="fourteen wide mobile"].column,
518
+ .ui.column.grid > [class*="fourteen wide mobile"].column {
519
+ width: 87.5% !important;
520
+ }
521
+ .ui.grid > .row > [class*="fifteen wide mobile"].column,
522
+ .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
523
+ .ui.grid > [class*="fifteen wide mobile"].column,
524
+ .ui.column.grid > [class*="fifteen wide mobile"].column {
525
+ width: 93.75% !important;
526
+ }
527
+ .ui.grid > .row > [class*="sixteen wide mobile"].column,
528
+ .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
529
+ .ui.grid > [class*="sixteen wide mobile"].column,
530
+ .ui.column.grid > [class*="sixteen wide mobile"].column {
531
+ width: 100% !important;
532
+ }
288
533
  }
289
534
 
290
- .ui.five.column.grid > .row > .column,
291
- .ui.five.column.grid > .column,
292
- .ui.grid > .five.column.row > .column {
293
- width: 20%;
535
+ /* Tablet Sizing Combinations */
536
+ @media only screen and (min-width: 768px) and (max-width: 991px) {
537
+ .ui.grid > .row > [class*="one wide tablet"].column,
538
+ .ui.grid > .column.row > [class*="one wide tablet"].column,
539
+ .ui.grid > [class*="one wide tablet"].column,
540
+ .ui.column.grid > [class*="one wide tablet"].column {
541
+ width: 6.25% !important;
542
+ }
543
+ .ui.grid > .row > [class*="two wide tablet"].column,
544
+ .ui.grid > .column.row > [class*="two wide tablet"].column,
545
+ .ui.grid > [class*="two wide tablet"].column,
546
+ .ui.column.grid > [class*="two wide tablet"].column {
547
+ width: 12.5% !important;
548
+ }
549
+ .ui.grid > .row > [class*="three wide tablet"].column,
550
+ .ui.grid > .column.row > [class*="three wide tablet"].column,
551
+ .ui.grid > [class*="three wide tablet"].column,
552
+ .ui.column.grid > [class*="three wide tablet"].column {
553
+ width: 18.75% !important;
554
+ }
555
+ .ui.grid > .row > [class*="four wide tablet"].column,
556
+ .ui.grid > .column.row > [class*="four wide tablet"].column,
557
+ .ui.grid > [class*="four wide tablet"].column,
558
+ .ui.column.grid > [class*="four wide tablet"].column {
559
+ width: 25% !important;
560
+ }
561
+ .ui.grid > .row > [class*="five wide tablet"].column,
562
+ .ui.grid > .column.row > [class*="five wide tablet"].column,
563
+ .ui.grid > [class*="five wide tablet"].column,
564
+ .ui.column.grid > [class*="five wide tablet"].column {
565
+ width: 31.25% !important;
566
+ }
567
+ .ui.grid > .row > [class*="six wide tablet"].column,
568
+ .ui.grid > .column.row > [class*="six wide tablet"].column,
569
+ .ui.grid > [class*="six wide tablet"].column,
570
+ .ui.column.grid > [class*="six wide tablet"].column {
571
+ width: 37.5% !important;
572
+ }
573
+ .ui.grid > .row > [class*="seven wide tablet"].column,
574
+ .ui.grid > .column.row > [class*="seven wide tablet"].column,
575
+ .ui.grid > [class*="seven wide tablet"].column,
576
+ .ui.column.grid > [class*="seven wide tablet"].column {
577
+ width: 43.75% !important;
578
+ }
579
+ .ui.grid > .row > [class*="eight wide tablet"].column,
580
+ .ui.grid > .column.row > [class*="eight wide tablet"].column,
581
+ .ui.grid > [class*="eight wide tablet"].column,
582
+ .ui.column.grid > [class*="eight wide tablet"].column {
583
+ width: 50% !important;
584
+ }
585
+ .ui.grid > .row > [class*="nine wide tablet"].column,
586
+ .ui.grid > .column.row > [class*="nine wide tablet"].column,
587
+ .ui.grid > [class*="nine wide tablet"].column,
588
+ .ui.column.grid > [class*="nine wide tablet"].column {
589
+ width: 56.25% !important;
590
+ }
591
+ .ui.grid > .row > [class*="ten wide tablet"].column,
592
+ .ui.grid > .column.row > [class*="ten wide tablet"].column,
593
+ .ui.grid > [class*="ten wide tablet"].column,
594
+ .ui.column.grid > [class*="ten wide tablet"].column {
595
+ width: 62.5% !important;
596
+ }
597
+ .ui.grid > .row > [class*="eleven wide tablet"].column,
598
+ .ui.grid > .column.row > [class*="eleven wide tablet"].column,
599
+ .ui.grid > [class*="eleven wide tablet"].column,
600
+ .ui.column.grid > [class*="eleven wide tablet"].column {
601
+ width: 68.75% !important;
602
+ }
603
+ .ui.grid > .row > [class*="twelve wide tablet"].column,
604
+ .ui.grid > .column.row > [class*="twelve wide tablet"].column,
605
+ .ui.grid > [class*="twelve wide tablet"].column,
606
+ .ui.column.grid > [class*="twelve wide tablet"].column {
607
+ width: 75% !important;
608
+ }
609
+ .ui.grid > .row > [class*="thirteen wide tablet"].column,
610
+ .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
611
+ .ui.grid > [class*="thirteen wide tablet"].column,
612
+ .ui.column.grid > [class*="thirteen wide tablet"].column {
613
+ width: 81.25% !important;
614
+ }
615
+ .ui.grid > .row > [class*="fourteen wide tablet"].column,
616
+ .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
617
+ .ui.grid > [class*="fourteen wide tablet"].column,
618
+ .ui.column.grid > [class*="fourteen wide tablet"].column {
619
+ width: 87.5% !important;
620
+ }
621
+ .ui.grid > .row > [class*="fifteen wide tablet"].column,
622
+ .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
623
+ .ui.grid > [class*="fifteen wide tablet"].column,
624
+ .ui.column.grid > [class*="fifteen wide tablet"].column {
625
+ width: 93.75% !important;
626
+ }
627
+ .ui.grid > .row > [class*="sixteen wide tablet"].column,
628
+ .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
629
+ .ui.grid > [class*="sixteen wide tablet"].column,
630
+ .ui.column.grid > [class*="sixteen wide tablet"].column {
631
+ width: 100% !important;
632
+ }
294
633
  }
295
634
 
296
- .ui.six.column.grid > .row > .column,
297
- .ui.six.column.grid > .column,
298
- .ui.grid > .six.column.row > .column {
299
- width: 16.66667%;
635
+ /* Computer/Desktop Sizing Combinations */
636
+ @media only screen and (min-width: 992px) {
637
+ .ui.grid > .row > [class*="one wide computer"].column,
638
+ .ui.grid > .column.row > [class*="one wide computer"].column,
639
+ .ui.grid > [class*="one wide computer"].column,
640
+ .ui.column.grid > [class*="one wide computer"].column {
641
+ width: 6.25% !important;
642
+ }
643
+ .ui.grid > .row > [class*="two wide computer"].column,
644
+ .ui.grid > .column.row > [class*="two wide computer"].column,
645
+ .ui.grid > [class*="two wide computer"].column,
646
+ .ui.column.grid > [class*="two wide computer"].column {
647
+ width: 12.5% !important;
648
+ }
649
+ .ui.grid > .row > [class*="three wide computer"].column,
650
+ .ui.grid > .column.row > [class*="three wide computer"].column,
651
+ .ui.grid > [class*="three wide computer"].column,
652
+ .ui.column.grid > [class*="three wide computer"].column {
653
+ width: 18.75% !important;
654
+ }
655
+ .ui.grid > .row > [class*="four wide computer"].column,
656
+ .ui.grid > .column.row > [class*="four wide computer"].column,
657
+ .ui.grid > [class*="four wide computer"].column,
658
+ .ui.column.grid > [class*="four wide computer"].column {
659
+ width: 25% !important;
660
+ }
661
+ .ui.grid > .row > [class*="five wide computer"].column,
662
+ .ui.grid > .column.row > [class*="five wide computer"].column,
663
+ .ui.grid > [class*="five wide computer"].column,
664
+ .ui.column.grid > [class*="five wide computer"].column {
665
+ width: 31.25% !important;
666
+ }
667
+ .ui.grid > .row > [class*="six wide computer"].column,
668
+ .ui.grid > .column.row > [class*="six wide computer"].column,
669
+ .ui.grid > [class*="six wide computer"].column,
670
+ .ui.column.grid > [class*="six wide computer"].column {
671
+ width: 37.5% !important;
672
+ }
673
+ .ui.grid > .row > [class*="seven wide computer"].column,
674
+ .ui.grid > .column.row > [class*="seven wide computer"].column,
675
+ .ui.grid > [class*="seven wide computer"].column,
676
+ .ui.column.grid > [class*="seven wide computer"].column {
677
+ width: 43.75% !important;
678
+ }
679
+ .ui.grid > .row > [class*="eight wide computer"].column,
680
+ .ui.grid > .column.row > [class*="eight wide computer"].column,
681
+ .ui.grid > [class*="eight wide computer"].column,
682
+ .ui.column.grid > [class*="eight wide computer"].column {
683
+ width: 50% !important;
684
+ }
685
+ .ui.grid > .row > [class*="nine wide computer"].column,
686
+ .ui.grid > .column.row > [class*="nine wide computer"].column,
687
+ .ui.grid > [class*="nine wide computer"].column,
688
+ .ui.column.grid > [class*="nine wide computer"].column {
689
+ width: 56.25% !important;
690
+ }
691
+ .ui.grid > .row > [class*="ten wide computer"].column,
692
+ .ui.grid > .column.row > [class*="ten wide computer"].column,
693
+ .ui.grid > [class*="ten wide computer"].column,
694
+ .ui.column.grid > [class*="ten wide computer"].column {
695
+ width: 62.5% !important;
696
+ }
697
+ .ui.grid > .row > [class*="eleven wide computer"].column,
698
+ .ui.grid > .column.row > [class*="eleven wide computer"].column,
699
+ .ui.grid > [class*="eleven wide computer"].column,
700
+ .ui.column.grid > [class*="eleven wide computer"].column {
701
+ width: 68.75% !important;
702
+ }
703
+ .ui.grid > .row > [class*="twelve wide computer"].column,
704
+ .ui.grid > .column.row > [class*="twelve wide computer"].column,
705
+ .ui.grid > [class*="twelve wide computer"].column,
706
+ .ui.column.grid > [class*="twelve wide computer"].column {
707
+ width: 75% !important;
708
+ }
709
+ .ui.grid > .row > [class*="thirteen wide computer"].column,
710
+ .ui.grid > .column.row > [class*="thirteen wide computer"].column,
711
+ .ui.grid > [class*="thirteen wide computer"].column,
712
+ .ui.column.grid > [class*="thirteen wide computer"].column {
713
+ width: 81.25% !important;
714
+ }
715
+ .ui.grid > .row > [class*="fourteen wide computer"].column,
716
+ .ui.grid > .column.row > [class*="fourteen wide computer"].column,
717
+ .ui.grid > [class*="fourteen wide computer"].column,
718
+ .ui.column.grid > [class*="fourteen wide computer"].column {
719
+ width: 87.5% !important;
720
+ }
721
+ .ui.grid > .row > [class*="fifteen wide computer"].column,
722
+ .ui.grid > .column.row > [class*="fifteen wide computer"].column,
723
+ .ui.grid > [class*="fifteen wide computer"].column,
724
+ .ui.column.grid > [class*="fifteen wide computer"].column {
725
+ width: 93.75% !important;
726
+ }
727
+ .ui.grid > .row > [class*="sixteen wide computer"].column,
728
+ .ui.grid > .column.row > [class*="sixteen wide computer"].column,
729
+ .ui.grid > [class*="sixteen wide computer"].column,
730
+ .ui.column.grid > [class*="sixteen wide computer"].column {
731
+ width: 100% !important;
732
+ }
300
733
  }
301
734
 
302
- .ui.seven.column.grid > .row > .column,
303
- .ui.seven.column.grid > .column,
304
- .ui.grid > .seven.column.row > .column {
305
- width: 14.2857%;
735
+ /* Large Monitor Sizing Combinations */
736
+ @media only screen and (min-width: 1400px) and (max-width: 1919px) {
737
+ .ui.grid > .row > [class*="one wide large screen"].column,
738
+ .ui.grid > .column.row > [class*="one wide large screen"].column,
739
+ .ui.grid > [class*="one wide large screen"].column,
740
+ .ui.column.grid > [class*="one wide large screen"].column {
741
+ width: 6.25% !important;
742
+ }
743
+ .ui.grid > .row > [class*="two wide large screen"].column,
744
+ .ui.grid > .column.row > [class*="two wide large screen"].column,
745
+ .ui.grid > [class*="two wide large screen"].column,
746
+ .ui.column.grid > [class*="two wide large screen"].column {
747
+ width: 12.5% !important;
748
+ }
749
+ .ui.grid > .row > [class*="three wide large screen"].column,
750
+ .ui.grid > .column.row > [class*="three wide large screen"].column,
751
+ .ui.grid > [class*="three wide large screen"].column,
752
+ .ui.column.grid > [class*="three wide large screen"].column {
753
+ width: 18.75% !important;
754
+ }
755
+ .ui.grid > .row > [class*="four wide large screen"].column,
756
+ .ui.grid > .column.row > [class*="four wide large screen"].column,
757
+ .ui.grid > [class*="four wide large screen"].column,
758
+ .ui.column.grid > [class*="four wide large screen"].column {
759
+ width: 25% !important;
760
+ }
761
+ .ui.grid > .row > [class*="five wide large screen"].column,
762
+ .ui.grid > .column.row > [class*="five wide large screen"].column,
763
+ .ui.grid > [class*="five wide large screen"].column,
764
+ .ui.column.grid > [class*="five wide large screen"].column {
765
+ width: 31.25% !important;
766
+ }
767
+ .ui.grid > .row > [class*="six wide large screen"].column,
768
+ .ui.grid > .column.row > [class*="six wide large screen"].column,
769
+ .ui.grid > [class*="six wide large screen"].column,
770
+ .ui.column.grid > [class*="six wide large screen"].column {
771
+ width: 37.5% !important;
772
+ }
773
+ .ui.grid > .row > [class*="seven wide large screen"].column,
774
+ .ui.grid > .column.row > [class*="seven wide large screen"].column,
775
+ .ui.grid > [class*="seven wide large screen"].column,
776
+ .ui.column.grid > [class*="seven wide large screen"].column {
777
+ width: 43.75% !important;
778
+ }
779
+ .ui.grid > .row > [class*="eight wide large screen"].column,
780
+ .ui.grid > .column.row > [class*="eight wide large screen"].column,
781
+ .ui.grid > [class*="eight wide large screen"].column,
782
+ .ui.column.grid > [class*="eight wide large screen"].column {
783
+ width: 50% !important;
784
+ }
785
+ .ui.grid > .row > [class*="nine wide large screen"].column,
786
+ .ui.grid > .column.row > [class*="nine wide large screen"].column,
787
+ .ui.grid > [class*="nine wide large screen"].column,
788
+ .ui.column.grid > [class*="nine wide large screen"].column {
789
+ width: 56.25% !important;
790
+ }
791
+ .ui.grid > .row > [class*="ten wide large screen"].column,
792
+ .ui.grid > .column.row > [class*="ten wide large screen"].column,
793
+ .ui.grid > [class*="ten wide large screen"].column,
794
+ .ui.column.grid > [class*="ten wide large screen"].column {
795
+ width: 62.5% !important;
796
+ }
797
+ .ui.grid > .row > [class*="eleven wide large screen"].column,
798
+ .ui.grid > .column.row > [class*="eleven wide large screen"].column,
799
+ .ui.grid > [class*="eleven wide large screen"].column,
800
+ .ui.column.grid > [class*="eleven wide large screen"].column {
801
+ width: 68.75% !important;
802
+ }
803
+ .ui.grid > .row > [class*="twelve wide large screen"].column,
804
+ .ui.grid > .column.row > [class*="twelve wide large screen"].column,
805
+ .ui.grid > [class*="twelve wide large screen"].column,
806
+ .ui.column.grid > [class*="twelve wide large screen"].column {
807
+ width: 75% !important;
808
+ }
809
+ .ui.grid > .row > [class*="thirteen wide large screen"].column,
810
+ .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
811
+ .ui.grid > [class*="thirteen wide large screen"].column,
812
+ .ui.column.grid > [class*="thirteen wide large screen"].column {
813
+ width: 81.25% !important;
814
+ }
815
+ .ui.grid > .row > [class*="fourteen wide large screen"].column,
816
+ .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
817
+ .ui.grid > [class*="fourteen wide large screen"].column,
818
+ .ui.column.grid > [class*="fourteen wide large screen"].column {
819
+ width: 87.5% !important;
820
+ }
821
+ .ui.grid > .row > [class*="fifteen wide large screen"].column,
822
+ .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
823
+ .ui.grid > [class*="fifteen wide large screen"].column,
824
+ .ui.column.grid > [class*="fifteen wide large screen"].column {
825
+ width: 93.75% !important;
826
+ }
827
+ .ui.grid > .row > [class*="sixteen wide large screen"].column,
828
+ .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
829
+ .ui.grid > [class*="sixteen wide large screen"].column,
830
+ .ui.column.grid > [class*="sixteen wide large screen"].column {
831
+ width: 100% !important;
832
+ }
306
833
  }
307
834
 
308
- .ui.eight.column.grid > .row > .column,
309
- .ui.eight.column.grid > .column,
310
- .ui.grid > .eight.column.row > .column {
311
- width: 12.5%;
835
+ /* Widescreen Sizing Combinations */
836
+ @media only screen and (min-width: 1920px) {
837
+ .ui.grid > .row > [class*="one wide widescreen"].column,
838
+ .ui.grid > .column.row > [class*="one wide widescreen"].column,
839
+ .ui.grid > [class*="one wide widescreen"].column,
840
+ .ui.column.grid > [class*="one wide widescreen"].column {
841
+ width: 6.25% !important;
842
+ }
843
+ .ui.grid > .row > [class*="two wide widescreen"].column,
844
+ .ui.grid > .column.row > [class*="two wide widescreen"].column,
845
+ .ui.grid > [class*="two wide widescreen"].column,
846
+ .ui.column.grid > [class*="two wide widescreen"].column {
847
+ width: 12.5% !important;
848
+ }
849
+ .ui.grid > .row > [class*="three wide widescreen"].column,
850
+ .ui.grid > .column.row > [class*="three wide widescreen"].column,
851
+ .ui.grid > [class*="three wide widescreen"].column,
852
+ .ui.column.grid > [class*="three wide widescreen"].column {
853
+ width: 18.75% !important;
854
+ }
855
+ .ui.grid > .row > [class*="four wide widescreen"].column,
856
+ .ui.grid > .column.row > [class*="four wide widescreen"].column,
857
+ .ui.grid > [class*="four wide widescreen"].column,
858
+ .ui.column.grid > [class*="four wide widescreen"].column {
859
+ width: 25% !important;
860
+ }
861
+ .ui.grid > .row > [class*="five wide widescreen"].column,
862
+ .ui.grid > .column.row > [class*="five wide widescreen"].column,
863
+ .ui.grid > [class*="five wide widescreen"].column,
864
+ .ui.column.grid > [class*="five wide widescreen"].column {
865
+ width: 31.25% !important;
866
+ }
867
+ .ui.grid > .row > [class*="six wide widescreen"].column,
868
+ .ui.grid > .column.row > [class*="six wide widescreen"].column,
869
+ .ui.grid > [class*="six wide widescreen"].column,
870
+ .ui.column.grid > [class*="six wide widescreen"].column {
871
+ width: 37.5% !important;
872
+ }
873
+ .ui.grid > .row > [class*="seven wide widescreen"].column,
874
+ .ui.grid > .column.row > [class*="seven wide widescreen"].column,
875
+ .ui.grid > [class*="seven wide widescreen"].column,
876
+ .ui.column.grid > [class*="seven wide widescreen"].column {
877
+ width: 43.75% !important;
878
+ }
879
+ .ui.grid > .row > [class*="eight wide widescreen"].column,
880
+ .ui.grid > .column.row > [class*="eight wide widescreen"].column,
881
+ .ui.grid > [class*="eight wide widescreen"].column,
882
+ .ui.column.grid > [class*="eight wide widescreen"].column {
883
+ width: 50% !important;
884
+ }
885
+ .ui.grid > .row > [class*="nine wide widescreen"].column,
886
+ .ui.grid > .column.row > [class*="nine wide widescreen"].column,
887
+ .ui.grid > [class*="nine wide widescreen"].column,
888
+ .ui.column.grid > [class*="nine wide widescreen"].column {
889
+ width: 56.25% !important;
890
+ }
891
+ .ui.grid > .row > [class*="ten wide widescreen"].column,
892
+ .ui.grid > .column.row > [class*="ten wide widescreen"].column,
893
+ .ui.grid > [class*="ten wide widescreen"].column,
894
+ .ui.column.grid > [class*="ten wide widescreen"].column {
895
+ width: 62.5% !important;
896
+ }
897
+ .ui.grid > .row > [class*="eleven wide widescreen"].column,
898
+ .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
899
+ .ui.grid > [class*="eleven wide widescreen"].column,
900
+ .ui.column.grid > [class*="eleven wide widescreen"].column {
901
+ width: 68.75% !important;
902
+ }
903
+ .ui.grid > .row > [class*="twelve wide widescreen"].column,
904
+ .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
905
+ .ui.grid > [class*="twelve wide widescreen"].column,
906
+ .ui.column.grid > [class*="twelve wide widescreen"].column {
907
+ width: 75% !important;
908
+ }
909
+ .ui.grid > .row > [class*="thirteen wide widescreen"].column,
910
+ .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
911
+ .ui.grid > [class*="thirteen wide widescreen"].column,
912
+ .ui.column.grid > [class*="thirteen wide widescreen"].column {
913
+ width: 81.25% !important;
914
+ }
915
+ .ui.grid > .row > [class*="fourteen wide widescreen"].column,
916
+ .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
917
+ .ui.grid > [class*="fourteen wide widescreen"].column,
918
+ .ui.column.grid > [class*="fourteen wide widescreen"].column {
919
+ width: 87.5% !important;
920
+ }
921
+ .ui.grid > .row > [class*="fifteen wide widescreen"].column,
922
+ .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
923
+ .ui.grid > [class*="fifteen wide widescreen"].column,
924
+ .ui.column.grid > [class*="fifteen wide widescreen"].column {
925
+ width: 93.75% !important;
926
+ }
927
+ .ui.grid > .row > [class*="sixteen wide widescreen"].column,
928
+ .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
929
+ .ui.grid > [class*="sixteen wide widescreen"].column,
930
+ .ui.column.grid > [class*="sixteen wide widescreen"].column {
931
+ width: 100% !important;
932
+ }
312
933
  }
313
934
 
314
- .ui.nine.column.grid > .row > .column,
315
- .ui.nine.column.grid > .column,
316
- .ui.grid > .nine.column.row > .column {
317
- width: 11.1111%;
318
- }
935
+ /*----------------------
936
+ Centered
937
+ -----------------------*/
319
938
 
320
- .ui.ten.column.grid > .row > .column,
321
- .ui.ten.column.grid > .column,
322
- .ui.grid > .ten.column.row > .column {
323
- width: 10%;
939
+ .ui.centered.grid,
940
+ .ui.centered.grid > .row,
941
+ .ui.grid > .centered.row {
942
+ text-align: center;
324
943
  }
325
-
326
- .ui.eleven.column.grid > .row > .column,
327
- .ui.eleven.column.grid > .column,
328
- .ui.grid > .eleven.column.row > .column {
329
- width: 9.0909%;
944
+ .ui.centered.grid > .column:not(.aligned):not(.row),
945
+ .ui.centered.grid > .row > .column:not(.aligned),
946
+ .ui.centered.grid > .row:not(.centered),
947
+ .ui.grid .centered.row > .column:not(.aligned) {
948
+ text-align: left;
330
949
  }
331
-
332
- .ui.twelve.column.grid > .row > .column,
333
- .ui.twelve.column.grid > .column,
334
- .ui.grid > .twelve.column.row > .column {
335
- width: 8.3333%;
950
+ .ui.grid > .centered.column,
951
+ .ui.grid > .row > .centered.column {
952
+ display: block;
953
+ margin-left: auto;
954
+ margin-right: auto;
336
955
  }
337
956
 
338
- .ui.thirteen.column.grid > .row > .column,
339
- .ui.thirteen.column.grid > .column,
340
- .ui.grid > .thirteen.column.row > .column {
341
- width: 7.6923%;
342
- }
957
+ /*----------------------
958
+ Relaxed
959
+ -----------------------*/
343
960
 
344
- .ui.fourteen.column.grid > .row > .column,
345
- .ui.fourteen.column.grid > .column,
346
- .ui.grid > .fourteen.column.row > .column {
347
- width: 7.1428%;
961
+ .ui.relaxed.grid > .column:not(.row),
962
+ .ui.relaxed.grid > .row > .column,
963
+ .ui.grid > .relaxed.row > .column {
964
+ padding-left: 1.5rem;
965
+ padding-right: 1.5rem;
348
966
  }
349
-
350
- .ui.fifteen.column.grid > .row > .column,
351
- .ui.fifteen.column.grid > .column,
352
- .ui.grid > .fifteen.column.row > .column {
353
- width: 6.6666%;
967
+ .ui[class*="very relaxed"].grid > .column:not(.row),
968
+ .ui[class*="very relaxed"].grid > .row > .column,
969
+ .ui.grid > [class*="very relaxed"].row > .column {
970
+ padding-left: 2.5rem;
971
+ padding-right: 2.5rem;
354
972
  }
355
973
 
356
- .ui.sixteen.column.grid > .row > .column,
357
- .ui.sixteen.column.grid > .column,
358
- .ui.grid > .sixteen.column.row > .column {
359
- width: 6.25%;
974
+ /* Coupling with UI Divider */
975
+ .ui.relaxed.grid .row + .ui.divider,
976
+ .ui.grid .relaxed.row + .ui.divider {
977
+ margin-left: 1.5rem;
978
+ margin-right: 1.5rem;
360
979
  }
361
-
362
- /* Assume full width with one column */
363
-
364
- .ui.grid > .column:only-child,
365
- .ui.grid > .row > .column:only-child {
366
- width: 100%;
980
+ .ui[class*="very relaxed"].grid .row + .ui.divider,
981
+ .ui.grid [class*="very relaxed"].row + .ui.divider {
982
+ margin-left: 2.5rem;
983
+ margin-right: 2.5rem;
367
984
  }
368
985
 
369
986
  /*----------------------
370
- Relaxed
987
+ Padded
371
988
  -----------------------*/
372
989
 
373
- .ui.relaxed.grid {
374
- margin: 0% -2.5%;
990
+ .ui.padded.grid:not(.vertically):not(.horizontally) {
991
+ margin: 0em !important;
375
992
  }
376
-
377
- .ui.relaxed.grid > .column,
378
- .ui.relaxed.grid > .row > .column {
379
- padding-left: 2.5%;
380
- padding-right: 2.5%;
993
+ [class*="horizontally padded"].ui.grid {
994
+ margin-left: 0em !important;
995
+ margin-right: 0em !important;
996
+ }
997
+ [class*="vertically padded"].ui.grid {
998
+ margin-top: 0em !important;
999
+ margin-bottom: 0em !important;
381
1000
  }
382
1001
 
383
1002
  /*----------------------
384
1003
  "Floated"
385
1004
  -----------------------*/
386
1005
 
387
- .ui.grid .left.floated.column {
1006
+ .ui.grid [class*="left floated"].column {
388
1007
  float: left;
389
1008
  }
390
-
391
- .ui.grid .right.floated.column {
1009
+ .ui.grid [class*="right floated"].column {
392
1010
  float: right;
393
1011
  }
394
1012
 
@@ -396,47 +1014,92 @@ body > .ui.grid {
396
1014
  Divided
397
1015
  -----------------------*/
398
1016
 
399
- .ui.divided.grid,
400
- .ui.divided.grid > .row {
401
- display: table;
402
- width: 100%;
403
- margin-left: 0% !important;
404
- margin-right: 0% !important;
1017
+ .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1018
+ .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
1019
+ box-shadow: -1px 0px 0px 0px rgba(39, 41, 43, 0.15);
405
1020
  }
406
1021
 
407
- .ui.divided.grid > .column:not(.row),
408
- .ui.divided.grid > .row > .column {
409
- display: table-cell;
410
- -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1),
411
- -2px 0px 0px 0px rgba(255, 255, 255, 0.8);
412
- box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1),
413
- -2px 0px 0px 0px rgba(255, 255, 255, 0.8);
1022
+ /* Swap from padding to margin on columns to have dividers align */
1023
+ .ui[class*="vertically divided"].grid > .column:not(.row),
1024
+ .ui[class*="vertically divided"].grid > .row > .column {
1025
+ margin-top: 1rem;
1026
+ margin-bottom: 1rem;
1027
+ padding-top: 0rem;
1028
+ padding-bottom: 0rem;
1029
+ }
1030
+ .ui[class*="vertically divided"].grid > .row {
1031
+ margin-top: 0em;
1032
+ margin-bottom: 0em;
1033
+ padding-top: 0em;
1034
+ padding-bottom: 0em;
414
1035
  }
415
1036
 
416
- .ui.divided.grid > .column.row {
417
- display: table;
1037
+ /* No divider on first column on row */
1038
+ .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
1039
+ .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1040
+ box-shadow: none;
418
1041
  }
419
1042
 
420
- .ui.divided.grid > .column:first-child,
421
- .ui.divided.grid > .row > .column:first-child {
422
- -webkit-box-shadow: none;
1043
+ /* Divided Row */
1044
+ .ui.grid > .divided.row > .column {
1045
+ box-shadow: -1px 0px 0px 0px rgba(39, 41, 43, 0.15);
1046
+ }
1047
+ .ui.grid > .divided.row > .column:first-child {
423
1048
  box-shadow: none;
424
1049
  }
425
1050
 
426
1051
  /* Vertically Divided */
1052
+ .ui[class*="vertically divided"].grid > .row {
1053
+ position: relative;
1054
+ }
1055
+ .ui[class*="vertically divided"].grid > .row:before {
1056
+ position: absolute;
1057
+ content: "";
1058
+ top: 0em;
1059
+ left: 0px;
1060
+ width: -webkit-calc(100% - 2rem );
1061
+ width: calc(100% - 2rem );
1062
+ height: 1px;
1063
+ margin: 0% 1rem;
1064
+ box-shadow: 0px -1px 0px 0px rgba(39, 41, 43, 0.15);
1065
+ }
1066
+
1067
+ /* Padded Horizontally Divided */
1068
+ [class*="horizontally padded"].ui.divided.grid,
1069
+ .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
1070
+ width: 100%;
1071
+ }
1072
+
1073
+ /* First Row Vertically Divided */
1074
+ .ui[class*="vertically divided"].grid > .row:first-child:before {
1075
+ box-shadow: none;
1076
+ }
427
1077
 
428
- .ui.vertically.divided.grid > .row {
429
- -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
430
- 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important;
431
- box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
432
- 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important;
1078
+ /* Inverted Divided */
1079
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1080
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
1081
+ box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.2);
1082
+ }
1083
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
1084
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1085
+ box-shadow: none;
1086
+ }
1087
+ .ui.inverted[class*="vertically divided"].grid > .row:before {
1088
+ box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
433
1089
  }
434
1090
 
435
- .ui.vertically.divided.grid > .row > .column,
436
- .ui.vertically.divided.grid > .column:not(.row),
437
- .ui.vertically.divided.grid > .row:first-child {
438
- -webkit-box-shadow: none !important;
439
- box-shadow: none !important;
1091
+ /* Relaxed */
1092
+ .ui.relaxed[class*="vertically divided"].grid > .row:before {
1093
+ margin-left: 1.5rem;
1094
+ margin-right: 1.5rem;
1095
+ width: -webkit-calc(100% - 3rem );
1096
+ width: calc(100% - 3rem );
1097
+ }
1098
+ .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
1099
+ margin-left: 5rem;
1100
+ margin-right: 5rem;
1101
+ width: -webkit-calc(100% - 5rem );
1102
+ width: calc(100% - 5rem );
440
1103
  }
441
1104
 
442
1105
  /*----------------------
@@ -445,40 +1108,54 @@ body > .ui.grid {
445
1108
 
446
1109
  .ui.celled.grid {
447
1110
  display: table;
1111
+ table-layout: fixed;
448
1112
  width: 100%;
449
- margin-left: 0% !important;
450
- margin-right: 0% !important;
451
- -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
452
- box-shadow: 0px 0px 0px 1px #DFDFDF;
1113
+ margin: 1em 0em;
1114
+ box-shadow: 0px 0px 0px 1px #d4d4d5;
453
1115
  }
454
-
455
1116
  .ui.celled.grid > .row,
456
1117
  .ui.celled.grid > .column.row,
457
1118
  .ui.celled.grid > .column.row:first-child {
458
1119
  display: table;
459
- width: 100%;
460
- margin-top: 0em;
461
- padding-top: 0em;
462
- -webkit-box-shadow: 0px -1px 0px 0px #DFDFDF;
463
- box-shadow: 0px -1px 0px 0px #DFDFDF;
1120
+ table-layout: fixed;
1121
+ width: 100% !important;
1122
+ margin: 0em;
1123
+ padding: 0em;
1124
+ box-shadow: 0px -1px 0px 0px #d4d4d5;
464
1125
  }
465
-
466
1126
  .ui.celled.grid > .column:not(.row),
467
1127
  .ui.celled.grid > .row > .column {
468
1128
  display: table-cell;
469
- padding: 0.75em;
470
- -webkit-box-shadow: -1px 0px 0px 0px #DFDFDF;
471
- box-shadow: -1px 0px 0px 0px #DFDFDF;
1129
+ box-shadow: -1px 0px 0px 0px #d4d4d5;
472
1130
  }
473
-
474
1131
  .ui.celled.grid > .column:first-child,
475
1132
  .ui.celled.grid > .row > .column:first-child {
476
- -webkit-box-shadow: none;
477
1133
  box-shadow: none;
478
1134
  }
479
-
480
1135
  .ui.celled.page.grid {
481
- -webkit-box-shadow: none;
1136
+ box-shadow: none;
1137
+ }
1138
+ .ui.celled.grid > .column:not(.row),
1139
+ .ui.celled.grid > .row > .column {
1140
+ padding: 0.75em;
1141
+ }
1142
+ .ui.relaxed.celled.grid > .column:not(.row),
1143
+ .ui.relaxed.celled.grid > .row > .column {
1144
+ padding: 1em;
1145
+ }
1146
+ .ui[class*="very relaxed"].celled.grid > .column:not(.row),
1147
+ .ui[class*="very relaxed"].celled.grid > .row > .column {
1148
+ padding: 2em;
1149
+ }
1150
+
1151
+ /* Internally Celled */
1152
+ .ui[class*="internally celled"].grid {
1153
+ box-shadow: none;
1154
+ }
1155
+ .ui[class*="internally celled"].grid > .row:first-child {
1156
+ box-shadow: none;
1157
+ }
1158
+ .ui[class*="internally celled"].grid > .row > .column:first-child {
482
1159
  box-shadow: none;
483
1160
  }
484
1161
 
@@ -486,32 +1163,42 @@ body > .ui.grid {
486
1163
  Horizontally Centered
487
1164
  -----------------------*/
488
1165
 
489
- /* Vertical Centered */
490
1166
 
491
- .ui.left.aligned.grid,
492
- .ui.left.aligned.grid > .row > .column,
493
- .ui.left.aligned.grid > .column,
494
- .ui.grid .left.aligned.column,
495
- .ui.grid > .left.aligned.row > .column {
1167
+ /* Left Aligned */
1168
+ .ui[class*="left aligned"].grid,
1169
+ .ui[class*="left aligned"].grid > .row > .column,
1170
+ .ui[class*="left aligned"].grid > .column,
1171
+ .ui.grid [class*="left aligned"].column,
1172
+ .ui.grid > [class*="left aligned"].aligned.row > .column {
496
1173
  text-align: left;
497
1174
  }
1175
+ .ui.grid [class*="left aligned"].column {
1176
+ text-align: left !important;
1177
+ }
498
1178
 
499
- .ui.center.aligned.grid,
500
- .ui.center.aligned.grid > .row > .column,
501
- .ui.center.aligned.grid > .column,
502
- .ui.grid .center.aligned.column,
503
- .ui.grid > .center.aligned.row > .column {
1179
+ /* Center Aligned */
1180
+ .ui[class*="center aligned"].grid,
1181
+ .ui[class*="center aligned"].grid > .row > .column,
1182
+ .ui[class*="center aligned"].grid > .column,
1183
+ .ui.grid > [class*="center aligned"].aligned.row > .column {
504
1184
  text-align: center;
505
1185
  }
1186
+ .ui.grid [class*="center aligned"].column {
1187
+ text-align: center !important;
1188
+ }
506
1189
 
507
- .ui.right.aligned.grid,
508
- .ui.right.aligned.grid > .row > .column,
509
- .ui.right.aligned.grid > .column,
510
- .ui.grid .right.aligned.column,
511
- .ui.grid > .right.aligned.row > .column {
1190
+ /* Right Aligned */
1191
+ .ui[class*="right aligned"].grid,
1192
+ .ui[class*="right aligned"].grid > .row > .column,
1193
+ .ui[class*="right aligned"].grid > .column,
1194
+ .ui.grid > [class*="right aligned"].aligned.row > .column {
512
1195
  text-align: right;
513
1196
  }
1197
+ .ui.grid [class*="right aligned"].column {
1198
+ text-align: right !important;
1199
+ }
514
1200
 
1201
+ /* Justified */
515
1202
  .ui.justified.grid,
516
1203
  .ui.justified.grid > .row > .column,
517
1204
  .ui.justified.grid > .column,
@@ -519,265 +1206,353 @@ body > .ui.grid {
519
1206
  .ui.grid > .justified.row > .column {
520
1207
  text-align: justify;
521
1208
  -webkit-hyphens: auto;
522
- -moz-hyphens: auto;
523
- -ms-hyphens: auto;
524
- hyphens: auto;
1209
+ -moz-hyphens: auto;
1210
+ -ms-hyphens: auto;
1211
+ hyphens: auto;
1212
+ }
1213
+ .ui.grid .justified.column {
1214
+ text-align: justify !important;
1215
+ -webkit-hyphens: auto !important;
1216
+ -moz-hyphens: auto !important;
1217
+ -ms-hyphens: auto !important;
1218
+ hyphens: auto !important;
525
1219
  }
526
1220
 
527
1221
  /*----------------------
528
- Vertically Centered
1222
+ Vertically Aligned
529
1223
  -----------------------*/
530
1224
 
531
- /* Vertical Centered */
532
1225
 
533
- .ui.top.aligned.grid,
534
- .ui.top.aligned.grid > .row > .column,
535
- .ui.top.aligned.grid > .column,
536
- .ui.grid .top.aligned.column,
537
- .ui.grid > .top.aligned.row > .column {
1226
+ /* Top Aligned */
1227
+ .ui[class*="top aligned"].grid,
1228
+ .ui[class*="top aligned"].grid > .row > .column,
1229
+ .ui[class*="top aligned"].grid > .column,
1230
+ .ui.grid [class*="top aligned"].column,
1231
+ .ui.grid > [class*="top aligned"].aligned.row > .column {
538
1232
  vertical-align: top;
539
1233
  }
1234
+ .ui.grid [class*="top aligned"].column {
1235
+ vertical-align: top !important;
1236
+ }
540
1237
 
541
- .ui.middle.aligned.grid,
542
- .ui.middle.aligned.grid > .row > .column,
543
- .ui.middle.aligned.grid > .column,
544
- .ui.grid .middle.aligned.column,
545
- .ui.grid > .middle.aligned.row > .column {
1238
+ /* Middle Aligned */
1239
+ .ui[class*="center aligned"].grid,
1240
+ .ui[class*="middle aligned"].grid > .row > .column,
1241
+ .ui[class*="middle aligned"].grid > .column,
1242
+ .ui.grid > [class*="middle aligned"].aligned.row > .column {
546
1243
  vertical-align: middle;
547
1244
  }
1245
+ .ui.grid [class*="middle aligned"].column {
1246
+ vertical-align: middle !important;
1247
+ }
548
1248
 
549
- .ui.bottom.aligned.grid,
550
- .ui.bottom.aligned.grid > .row > .column,
551
- .ui.bottom.aligned.grid > .column,
552
- .ui.grid .bottom.aligned.column,
553
- .ui.grid > .bottom.aligned.row > .column {
1249
+ /* Bottom Aligned */
1250
+ .ui[class*="bottom aligned"].grid,
1251
+ .ui[class*="bottom aligned"].grid > .row > .column,
1252
+ .ui[class*="bottom aligned"].grid > .column,
1253
+ .ui.grid > [class*="bottom aligned"].aligned.row > .column {
554
1254
  vertical-align: bottom;
555
1255
  }
1256
+ .ui.grid [class*="bottom aligned"].column {
1257
+ vertical-align: bottom !important;
1258
+ }
556
1259
 
557
1260
  /*----------------------
558
- Equal Height Columns
1261
+ Colored
559
1262
  -----------------------*/
560
1263
 
561
- .ui.grid > .equal.height.row {
562
- display: table;
563
- width: 100%;
564
- }
565
-
566
- .ui.grid > .equal.height.row > .column {
567
- display: table-cell;
1264
+ .ui.grid > .white.row,
1265
+ .ui.grid .white.column {
1266
+ background-color: #ffffff !important;
1267
+ color: rgba(0, 0, 0, 0.8);
1268
+ }
1269
+ .ui.grid > .row > .white.column {
1270
+ margin-top: -1rem;
1271
+ margin-bottom: -1rem;
1272
+ padding-top: 1rem;
1273
+ padding-bottom: 1rem;
1274
+ }
1275
+ .ui.grid > .black.row,
1276
+ .ui.grid .black.column {
1277
+ background-color: #1b1c1d !important;
1278
+ color: #ffffff;
1279
+ }
1280
+ .ui.grid > .row > .black.column {
1281
+ margin-top: -1rem;
1282
+ margin-bottom: -1rem;
1283
+ padding-top: 1rem;
1284
+ padding-bottom: 1rem;
1285
+ }
1286
+ .ui.grid > .blue.row,
1287
+ .ui.grid .blue.column {
1288
+ background-color: #3b83c0 !important;
1289
+ color: #ffffff;
1290
+ }
1291
+ .ui.grid > .row > .blue.column {
1292
+ margin-top: -1rem;
1293
+ margin-bottom: -1rem;
1294
+ padding-top: 1rem;
1295
+ padding-bottom: 1rem;
1296
+ }
1297
+ .ui.grid > .green.row,
1298
+ .ui.grid .green.column {
1299
+ background-color: #5bbd72 !important;
1300
+ color: #ffffff;
1301
+ }
1302
+ .ui.grid > .row > .green.column {
1303
+ margin-top: -1rem;
1304
+ margin-bottom: -1rem;
1305
+ padding-top: 1rem;
1306
+ padding-bottom: 1rem;
1307
+ }
1308
+ .ui.grid > .orange.row,
1309
+ .ui.grid .orange.column {
1310
+ background-color: #e07b53 !important;
1311
+ color: #ffffff;
1312
+ }
1313
+ .ui.grid > .row > .orange.column {
1314
+ margin-top: -1rem;
1315
+ margin-bottom: -1rem;
1316
+ padding-top: 1rem;
1317
+ padding-bottom: 1rem;
1318
+ }
1319
+ .ui.grid > .pink.row,
1320
+ .ui.grid .pink.column {
1321
+ background-color: #d9499a !important;
1322
+ color: #ffffff;
1323
+ }
1324
+ .ui.grid > .row > .pink.column {
1325
+ margin-top: -1rem;
1326
+ margin-bottom: -1rem;
1327
+ padding-top: 1rem;
1328
+ padding-bottom: 1rem;
1329
+ }
1330
+ .ui.grid > .purple.row,
1331
+ .ui.grid .purple.column {
1332
+ background-color: #564f8a !important;
1333
+ color: #ffffff;
1334
+ }
1335
+ .ui.grid > .row > .purple.column {
1336
+ margin-top: -1rem;
1337
+ margin-bottom: -1rem;
1338
+ padding-top: 1rem;
1339
+ padding-bottom: 1rem;
1340
+ }
1341
+ .ui.grid > .red.row,
1342
+ .ui.grid .red.column {
1343
+ background-color: #d95c5c !important;
1344
+ color: #ffffff;
1345
+ }
1346
+ .ui.grid > .row > .red.column {
1347
+ margin-top: -1rem;
1348
+ margin-bottom: -1rem;
1349
+ padding-top: 1rem;
1350
+ padding-bottom: 1rem;
1351
+ }
1352
+ .ui.grid > .teal.row,
1353
+ .ui.grid .teal.column {
1354
+ background-color: #00b5ad !important;
1355
+ color: #ffffff;
1356
+ }
1357
+ .ui.grid > .row > .teal.column {
1358
+ margin-top: -1rem;
1359
+ margin-bottom: -1rem;
1360
+ padding-top: 1rem;
1361
+ padding-bottom: 1rem;
1362
+ }
1363
+ .ui.grid > .yellow.row,
1364
+ .ui.grid .yellow.column {
1365
+ background-color: #f2c61f !important;
1366
+ color: #ffffff;
1367
+ }
1368
+ .ui.grid > .row > .yellow.column {
1369
+ margin-top: -1rem;
1370
+ margin-bottom: -1rem;
1371
+ padding-top: 1rem;
1372
+ padding-bottom: 1rem;
568
1373
  }
569
1374
 
570
1375
  /*----------------------
571
- Only (Device)
1376
+ Equal Height Columns
572
1377
  -----------------------*/
573
1378
 
574
- /* Mobile Only Hide */
575
-
576
- @media only screen and ( max-width : 767px ) {
577
- .ui.tablet:not(.mobile).only.grid,
578
- .ui.grid > .tablet:not(.mobile).only.row,
579
- .ui.grid > .tablet:not(.mobile).only.column,
580
- .ui.grid > .row > .tablet:not(.mobile).only.column {
581
- display: none !important;
582
- }
583
-
584
- .ui.computer:not(.mobile).only.grid,
585
- .ui.grid > .computer:not(.mobile).only.row,
586
- .ui.grid > .computer:not(.mobile).only.column,
587
- .ui.grid > .row > .computer:not(.mobile).only.column {
588
- display: none !important;
589
- }
1379
+ .ui[class*="equal height"].grid {
1380
+ display: table;
1381
+ table-layout: fixed;
590
1382
  }
591
-
592
- /* Tablet Only Hide */
593
-
594
- @media only screen and (min-width: 768px) and (max-width: 991px ) {
595
- .ui.mobile:not(.tablet).only.grid,
596
- .ui.grid > .mobile:not(.tablet).only.row,
597
- .ui.grid > .mobile:not(.tablet).only.column,
598
- .ui.grid > .row > .mobile:not(.tablet).only.column {
599
- display: none !important;
600
- }
601
-
602
- .ui.computer:not(.tablet).only.grid,
603
- .ui.grid > .computer:not(.tablet).only.row,
604
- .ui.grid > .computer:not(.tablet).only.column,
605
- .ui.grid > .row > .computer:not(.tablet).only.column {
606
- display: none !important;
607
- }
1383
+ .ui[class*="equal height"].grid > .row,
1384
+ .ui[class*="equal height"].row {
1385
+ display: table;
1386
+ table-layout: fixed;
1387
+ width: 100% !important;
608
1388
  }
609
-
610
- /* Computer Only Hide */
611
-
612
- @media only screen and ( min-width : 992px) {
613
- .ui.mobile:not(.computer).only.grid,
614
- .ui.grid > .mobile:not(.computer).only.row,
615
- .ui.grid > .mobile:not(.computer).only.column,
616
- .ui.grid > .row > .mobile:not(.computer).only.column {
617
- display: none !important;
618
- }
619
-
620
- .ui.tablet:not(.computer).only.grid,
621
- .ui.grid > .tablet:not(.computer).only.row,
622
- .ui.grid > .tablet:not(.computer).only.column,
623
- .ui.grid > .row > .tablet:not(.computer).only.column {
624
- display: none !important;
625
- }
1389
+ .ui[class*="equal height"].grid > .column,
1390
+ .ui[class*="equal height"].grid > .row > .column,
1391
+ .ui.grid > [class*="equal height"].row > .column {
1392
+ display: table-cell;
626
1393
  }
627
1394
 
628
1395
  /*-------------------
629
1396
  Doubling
630
1397
  --------------------*/
631
1398
 
632
- /* Mobily Only */
633
1399
 
634
- @media only screen and (max-width : 767px) {
635
- .ui.two.column.doubling.grid > .row > .column,
636
- .ui.two.column.doubling.grid > .column,
637
- .ui.grid > .two.column.doubling.row > .column {
638
- width: 100%;
1400
+ /* Tablet Only */
1401
+ @media only screen and (min-width: 768px) and (max-width: 991px) {
1402
+ .ui.doubling.grid {
1403
+ width: 100% !important;
639
1404
  }
640
-
641
- .ui.three.column.doubling.grid > .row > .column,
642
- .ui.three.column.doubling.grid > .column,
643
- .ui.grid > .three.column.doubling.row > .column {
644
- width: 100%;
1405
+ .ui.grid > .doubling.row,
1406
+ .ui.doubling.grid > .row {
1407
+ margin: 0em !important;
1408
+ padding: 0em !important;
645
1409
  }
646
-
647
- .ui.four.column.doubling.grid > .row > .column,
648
- .ui.four.column.doubling.grid > .column,
649
- .ui.grid > .four.column.doubling.row > .column {
650
- width: 100%;
1410
+ .ui.grid > .doubling.row > .column,
1411
+ .ui.doubling.grid > .row > .column {
1412
+ display: inline-block !important;
1413
+ padding-top: 1rem !important;
1414
+ padding-bottom: 1rem !important;
1415
+ margin: 0em;
651
1416
  }
652
-
653
- .ui.five.column.doubling.grid > .row > .column,
654
- .ui.five.column.doubling.grid > .column,
655
- .ui.grid > .five.column.doubling.row > .column {
656
- width: 100%;
1417
+ .ui[class*="two column"].doubling.grid > .row > .column,
1418
+ .ui[class*="two column"].doubling.grid > .column,
1419
+ .ui.grid > [class*="two column"].doubling.row > .column {
1420
+ width: 100% !important;
657
1421
  }
658
-
659
- .ui.six.column.doubling.grid > .row > .column,
660
- .ui.six.column.doubling.grid > .column,
661
- .ui.grid > .six.column.doubling.row > .column {
662
- width: 50%;
1422
+ .ui[class*="three column"].doubling.grid > .row > .column,
1423
+ .ui[class*="three column"].doubling.grid > .column,
1424
+ .ui.grid > [class*="three column"].doubling.row > .column {
1425
+ width: 50% !important;
663
1426
  }
664
-
665
- .ui.seven.column.doubling.grid > .row > .column,
666
- .ui.seven.column.doubling.grid > .column,
667
- .ui.grid > .seven.column.doubling.row > .column {
668
- width: 50%;
1427
+ .ui[class*="four column"].doubling.grid > .row > .column,
1428
+ .ui[class*="four column"].doubling.grid > .column,
1429
+ .ui.grid > [class*="four column"].doubling.row > .column {
1430
+ width: 50% !important;
669
1431
  }
670
-
671
- .ui.eight.column.doubling.grid > .row > .column,
672
- .ui.eight.column.doubling.grid > .column,
673
- .ui.grid > .eight.column.doubling.row > .column {
674
- width: 50%;
1432
+ .ui[class*="five column"].doubling.grid > .row > .column,
1433
+ .ui[class*="five column"].doubling.grid > .column,
1434
+ .ui.grid > [class*="five column"].doubling.row > .column {
1435
+ width: 33.33333333% !important;
675
1436
  }
676
-
677
- .ui.nine.column.doubling.grid > .row > .column,
678
- .ui.nine.column.doubling.grid > .column,
679
- .ui.grid > .nine.column.doubling.row > .column {
680
- width: 50%;
1437
+ .ui[class*="six column"].doubling.grid > .row > .column,
1438
+ .ui[class*="six column"].doubling.grid > .column,
1439
+ .ui.grid > [class*="six column"].doubling.row > .column {
1440
+ width: 33.33333333% !important;
681
1441
  }
682
-
683
- .ui.ten.column.doubling.grid > .row > .column,
684
- .ui.ten.column.doubling.grid > .column,
685
- .ui.grid > .ten.column.doubling.row > .column {
686
- width: 50%;
1442
+ .ui[class*="eight column"].doubling.grid > .row > .column,
1443
+ .ui[class*="eight column"].doubling.grid > .column,
1444
+ .ui.grid > [class*="eight column"].doubling.row > .column {
1445
+ width: 33.33333333% !important;
687
1446
  }
688
-
689
- .ui.twelve.column.doubling.grid > .row > .column,
690
- .ui.twelve.column.doubling.grid > .column,
691
- .ui.grid > .twelve.column.doubling.row > .column {
692
- width: 33.3333333333333%;
1447
+ .ui[class*="eight column"].doubling.grid > .row > .column,
1448
+ .ui[class*="eight column"].doubling.grid > .column,
1449
+ .ui.grid > [class*="eight column"].doubling.row > .column {
1450
+ width: 25% !important;
693
1451
  }
694
-
695
- .ui.fourteen.column.doubling.grid > .row > .column,
696
- .ui.fourteen.column.doubling.grid > .column,
697
- .ui.grid > .fourteen.column.doubling.row > .column {
698
- width: 33.3333333333333%;
1452
+ .ui[class*="nine column"].doubling.grid > .row > .column,
1453
+ .ui[class*="nine column"].doubling.grid > .column,
1454
+ .ui.grid > [class*="nine column"].doubling.row > .column {
1455
+ width: 25% !important;
699
1456
  }
700
-
701
- .ui.sixteen.column.doubling.grid > .row > .column,
702
- .ui.sixteen.column.doubling.grid > .column,
703
- .ui.grid > .sixteen.column.doubling.row > .column {
704
- width: 25%;
1457
+ .ui[class*="ten column"].doubling.grid > .row > .column,
1458
+ .ui[class*="ten column"].doubling.grid > .column,
1459
+ .ui.grid > [class*="ten column"].doubling.row > .column {
1460
+ width: 20% !important;
1461
+ }
1462
+ .ui[class*="twelve column"].doubling.grid > .row > .column,
1463
+ .ui[class*="twelve column"].doubling.grid > .column,
1464
+ .ui.grid > [class*="twelve column"].doubling.row > .column {
1465
+ width: 16.66666667% !important;
1466
+ }
1467
+ .ui[class*="fourteen column"].doubling.grid > .row > .column,
1468
+ .ui[class*="fourteen column"].doubling.grid > .column,
1469
+ .ui.grid > [class*="fourteen column"].doubling.row > .column {
1470
+ width: 14.28571429% !important;
1471
+ }
1472
+ .ui[class*="sixteen column"].doubling.grid > .row > .column,
1473
+ .ui[class*="sixteen column"].doubling.grid > .column,
1474
+ .ui.grid > [class*="sixteen column"].doubling.row > .column {
1475
+ width: 12.5% !important;
705
1476
  }
706
1477
  }
707
1478
 
708
- /* Tablet Only */
709
-
710
- @media only screen and (min-width : 768px) and (max-width : 991px) {
711
- .ui.two.column.doubling.grid > .row > .column,
712
- .ui.two.column.doubling.grid > .column,
713
- .ui.grid > .two.column.doubling.row > .column {
714
- width: 100%;
1479
+ /* Mobily Only */
1480
+ @media only screen and (max-width: 767px) {
1481
+ .ui.doubling.grid {
1482
+ width: 100% !important;
715
1483
  }
716
-
717
- .ui.three.column.doubling.grid > .row > .column,
718
- .ui.three.column.doubling.grid > .column,
719
- .ui.grid > .three.column.doubling.row > .column {
720
- width: 50%;
1484
+ .ui.grid > .doubling.row,
1485
+ .ui.doubling.grid > .row {
1486
+ display: block !important;
1487
+ margin: 0em !important;
1488
+ padding: 0em !important;
721
1489
  }
722
-
723
- .ui.four.column.doubling.grid > .row > .column,
724
- .ui.four.column.doubling.grid > .column,
725
- .ui.grid > .four.column.doubling.row > .column {
726
- width: 50%;
1490
+ .ui.grid > .doubling.row > .column,
1491
+ .ui.doubling.grid > .row > .column {
1492
+ display: inline-block !important;
1493
+ padding-top: 1rem !important;
1494
+ padding-bottom: 1rem !important;
1495
+ margin: 0em !important;
727
1496
  }
728
-
729
- .ui.five.column.doubling.grid > .row > .column,
730
- .ui.five.column.doubling.grid > .column,
731
- .ui.grid > .five.column.doubling.row > .column {
732
- width: 33.3333333%;
1497
+ .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
1498
+ .ui[class*="two column"].doubling:not(.stackable).grid > .column,
1499
+ .ui.grid > [class*="two column"].doubling:not(.stackable).row > .column {
1500
+ width: 100% !important;
733
1501
  }
734
-
735
- .ui.six.column.doubling.grid > .row > .column,
736
- .ui.six.column.doubling.grid > .column,
737
- .ui.grid > .six.column.doubling.row > .column {
738
- width: 33.3333333%;
1502
+ .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
1503
+ .ui[class*="three column"].doubling:not(.stackable).grid > .column,
1504
+ .ui.grid > [class*="three column"].doubling:not(.stackable).row > .column {
1505
+ width: 50% !important;
739
1506
  }
740
-
741
- .ui.eight.column.doubling.grid > .row > .column,
742
- .ui.eight.column.doubling.grid > .column,
743
- .ui.grid > .eight.column.doubling.row > .column {
744
- width: 33.3333333%;
1507
+ .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
1508
+ .ui[class*="four column"].doubling:not(.stackable).grid > .column,
1509
+ .ui.grid > [class*="four column"].doubling:not(.stackable).row > .column {
1510
+ width: 50% !important;
745
1511
  }
746
-
747
- .ui.eight.column.doubling.grid > .row > .column,
748
- .ui.eight.column.doubling.grid > .column,
749
- .ui.grid > .eight.column.doubling.row > .column {
750
- width: 25%;
1512
+ .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
1513
+ .ui[class*="five column"].doubling:not(.stackable).grid > .column,
1514
+ .ui.grid > [class*="five column"].doubling:not(.stackable).row > .column {
1515
+ width: 50% !important;
751
1516
  }
752
-
753
- .ui.nine.column.doubling.grid > .row > .column,
754
- .ui.nine.column.doubling.grid > .column,
755
- .ui.grid > .nine.column.doubling.row > .column {
756
- width: 25%;
1517
+ .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
1518
+ .ui[class*="six column"].doubling:not(.stackable).grid > .column,
1519
+ .ui.grid > [class*="six column"].doubling:not(.stackable).row > .column {
1520
+ width: 50% !important;
757
1521
  }
758
-
759
- .ui.ten.column.doubling.grid > .row > .column,
760
- .ui.ten.column.doubling.grid > .column,
761
- .ui.grid > .ten.column.doubling.row > .column {
762
- width: 20%;
1522
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
1523
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .column,
1524
+ .ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column {
1525
+ width: 50% !important;
763
1526
  }
764
-
765
- .ui.twelve.column.doubling.grid > .row > .column,
766
- .ui.twelve.column.doubling.grid > .column,
767
- .ui.grid > .twelve.column.doubling.row > .column {
768
- width: 16.6666666%;
1527
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
1528
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .column,
1529
+ .ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column {
1530
+ width: 50% !important;
769
1531
  }
770
-
771
- .ui.fourteen.column.doubling.grid > .row > .column,
772
- .ui.fourteen.column.doubling.grid > .column,
773
- .ui.grid > .fourteen.column.doubling.row > .column {
774
- width: 14.28571428571429%;
1532
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
1533
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .column,
1534
+ .ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column {
1535
+ width: 33.33333333% !important;
775
1536
  }
776
-
777
- .ui.sixteen.column.doubling.grid > .row > .column,
778
- .ui.sixteen.column.doubling.grid > .column,
779
- .ui.grid > .sixteen.column.doubling.row > .column {
780
- width: 12.5%;
1537
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
1538
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .column,
1539
+ .ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column {
1540
+ width: 33.33333333% !important;
1541
+ }
1542
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
1543
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .column,
1544
+ .ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column {
1545
+ width: 33.33333333% !important;
1546
+ }
1547
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
1548
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column,
1549
+ .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column {
1550
+ width: 25% !important;
1551
+ }
1552
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
1553
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column,
1554
+ .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column {
1555
+ width: 25% !important;
781
1556
  }
782
1557
  }
783
1558
 
@@ -785,50 +1560,127 @@ body > .ui.grid {
785
1560
  Stackable
786
1561
  --------------------*/
787
1562
 
788
- @media only screen and (max-width : 767px) {
1563
+ @media only screen and (max-width: 767px) {
789
1564
  .ui.stackable.grid {
790
1565
  display: block !important;
1566
+ width: auto;
1567
+ margin-left: 0em !important;
1568
+ margin-right: 0em !important;
791
1569
  padding: 0em;
792
- margin: 0em;
793
1570
  }
794
-
1571
+ .ui.stackable.grid > .row > .wide.column,
1572
+ .ui.stackable.grid > .wide.column,
1573
+ .ui.stackable.grid > .column.grid > .column,
1574
+ .ui.stackable.grid > .column.row > .column,
795
1575
  .ui.stackable.grid > .row > .column,
796
- .ui.stackable.grid > .column {
1576
+ .ui.stackable.grid > .column:not(.row) {
797
1577
  display: block !important;
798
1578
  width: auto !important;
799
- margin: 1em 0em 0em !important;
800
- padding: 1em 0em 0em !important;
801
- -webkit-box-shadow: none !important;
1579
+ margin: 0em 0em !important;
802
1580
  box-shadow: none !important;
1581
+ padding: 1rem 1rem !important;
803
1582
  }
804
-
805
- .ui.stackable.divided.grid .column,
806
- .ui.stackable.celled.grid .column {
807
- border-top: 1px dotted rgba(0, 0, 0, 0.1);
1583
+ .ui.stackable.grid > .row {
1584
+ margin: 0em;
1585
+ padding: 0em;
808
1586
  }
809
-
810
- .ui.stackable.grid > .row:first-child > .column:first-child,
811
- .ui.stackable.grid > .column:first-child {
812
- margin-top: 0em !important;
813
- padding-top: 0em !important;
1587
+ .ui.stackable.grid .column > .ui.stackable.grid {
1588
+ margin-left: -1rem !important;
1589
+ margin-right: -1rem !important;
814
1590
  }
815
-
1591
+
1592
+ /* Equal Height Stackable */
1593
+ .ui[class*="equal height"].stackable.page.grid {
1594
+ display: block !important;
1595
+ }
1596
+
1597
+ /* Divided Stackable */
816
1598
  .ui.stackable.divided.grid > .row:first-child > .column:first-child,
817
1599
  .ui.stackable.celled.grid > .row:first-child > .column:first-child,
818
- .ui.stackable.divided.grid > .column:first-child,
819
- .ui.stackable.celled.grid > .column:first-child {
1600
+ .ui.stackable.divided.grid > .column:not(.row):first-child,
1601
+ .ui.stackable.celled.grid > .column:not(.row):first-child {
820
1602
  border-top: none !important;
821
1603
  }
1604
+ .ui.inverted.stackable.celled.grid > .column:not(.row),
1605
+ .ui.inverted.stackable.divided.grid > .column:not(.row),
1606
+ .ui.inverted.stackable.celled.grid > .row > .column,
1607
+ .ui.inverted.stackable.divided.grid > .row > .column {
1608
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
1609
+ }
1610
+ .ui.stackable.celled.grid > .column:not(.row),
1611
+ .ui.stackable.divided.grid > .column:not(.row),
1612
+ .ui.stackable.celled.grid > .row > .column,
1613
+ .ui.stackable.divided.grid > .row > .column {
1614
+ border-top: 1px solid rgba(39, 41, 43, 0.15);
1615
+ box-shadow: none !important;
1616
+ padding-top: 2rem !important;
1617
+ padding-bottom: 2rem !important;
1618
+ }
1619
+ }
1620
+
1621
+ /*----------------------
1622
+ Only (Device)
1623
+ -----------------------*/
1624
+
822
1625
 
823
- .ui.stackable.page.grid > .row > .column,
824
- .ui.stackable.page.grid > .column {
825
- padding-left: 1em !important;
826
- padding-right: 1em !important;
1626
+ /* These include arbitrary class repetitions for forced specificity */
1627
+
1628
+ /* Mobile Only Hide */
1629
+ @media only screen and (max-width: 767px) {
1630
+ .ui.tablet:not(.mobile).only.grid.grid.grid,
1631
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
1632
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
1633
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
1634
+ display: none !important;
827
1635
  }
1636
+ .ui[class*="computer only"].grid.grid.grid:not(.mobile),
1637
+ .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
1638
+ .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
1639
+ .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
1640
+ display: none !important;
1641
+ }
1642
+ }
828
1643
 
829
- /* Remove pointers from vertical menus */
1644
+ /* Tablet Only Hide */
1645
+ @media only screen and (min-width: 768px) and (max-width: 991px) {
1646
+ .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
1647
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
1648
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
1649
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
1650
+ display: none !important;
1651
+ }
1652
+ .ui[class*="computer only"].grid.grid.grid:not(.tablet),
1653
+ .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
1654
+ .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
1655
+ .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
1656
+ display: none !important;
1657
+ }
1658
+ }
830
1659
 
831
- .ui.stackable.grid .vertical.pointing.menu .item:after {
832
- display: none;
1660
+ /* Computer Only Hide */
1661
+ @media only screen and (min-width: 992px) {
1662
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1663
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1664
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1665
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1666
+ display: none !important;
1667
+ }
1668
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1669
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1670
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1671
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1672
+ display: none !important;
833
1673
  }
834
- }
1674
+ }
1675
+
1676
+
1677
+ /*******************************
1678
+ Theme Overrides
1679
+ *******************************/
1680
+
1681
+
1682
+
1683
+ /*******************************
1684
+ Site Overrides
1685
+ *******************************/
1686
+