semantic-ui-sass 1.12.3.0 → 2.0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/javascripts/semantic-ui.js +1 -0
  4. data/app/assets/javascripts/semantic-ui/accordion.js +67 -53
  5. data/app/assets/javascripts/semantic-ui/api.js +395 -189
  6. data/app/assets/javascripts/semantic-ui/checkbox.js +322 -114
  7. data/app/assets/javascripts/semantic-ui/colorize.js +4 -2
  8. data/app/assets/javascripts/semantic-ui/dimmer.js +74 -50
  9. data/app/assets/javascripts/semantic-ui/dropdown.js +2046 -584
  10. data/app/assets/javascripts/semantic-ui/embed.js +662 -0
  11. data/app/assets/javascripts/semantic-ui/form.js +345 -163
  12. data/app/assets/javascripts/semantic-ui/modal.js +119 -90
  13. data/app/assets/javascripts/semantic-ui/nag.js +8 -9
  14. data/app/assets/javascripts/semantic-ui/popup.js +390 -228
  15. data/app/assets/javascripts/semantic-ui/progress.js +112 -103
  16. data/app/assets/javascripts/semantic-ui/rating.js +79 -55
  17. data/app/assets/javascripts/semantic-ui/search.js +305 -123
  18. data/app/assets/javascripts/semantic-ui/shape.js +94 -48
  19. data/app/assets/javascripts/semantic-ui/sidebar.js +84 -151
  20. data/app/assets/javascripts/semantic-ui/site.js +5 -5
  21. data/app/assets/javascripts/semantic-ui/state.js +4 -4
  22. data/app/assets/javascripts/semantic-ui/sticky.js +108 -35
  23. data/app/assets/javascripts/semantic-ui/tab.js +220 -125
  24. data/app/assets/javascripts/semantic-ui/transition.js +205 -171
  25. data/app/assets/javascripts/semantic-ui/visibility.js +220 -100
  26. data/app/assets/javascripts/semantic-ui/visit.js +6 -4
  27. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +17 -16
  28. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +223 -121
  29. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +462 -448
  30. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +949 -665
  31. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +134 -92
  32. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +270 -208
  33. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +1 -0
  34. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1357 -521
  35. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +125 -0
  36. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +51 -31
  37. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +3 -3
  38. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +270 -144
  39. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +241 -110
  40. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +30 -16
  41. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +88 -53
  42. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +432 -281
  43. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +172 -128
  44. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +16 -14
  45. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +15 -7
  46. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +32 -13
  47. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +329 -212
  48. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +291 -99
  49. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +2 -2
  50. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +19 -18
  51. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +17 -18
  52. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +1 -0
  53. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +265 -161
  54. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +29 -15
  55. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +441 -156
  56. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +168 -0
  57. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +163 -85
  58. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +8 -8
  59. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +88 -23
  60. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +185 -129
  61. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +75 -60
  62. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +99 -52
  63. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +11 -11
  64. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +16 -12
  65. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +4 -4
  66. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +3 -3
  67. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +31 -39
  68. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +3 -3
  69. data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -0
  70. data/app/assets/stylesheets/semantic-ui/views/_card.scss +204 -162
  71. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +6 -6
  72. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +51 -26
  73. data/app/assets/stylesheets/semantic-ui/views/_item.scss +62 -36
  74. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +265 -90
  75. data/lib/semantic/ui/sass/version.rb +2 -2
  76. data/semantic-ui-sass.gemspec +2 -2
  77. metadata +9 -6
@@ -1,9 +1,9 @@
1
1
  /*!
2
- * # Semantic UI 1.12.3 - Grid
2
+ * # Semantic UI 2.0.4 - Grid
3
3
  * http://github.com/semantic-org/semantic-ui/
4
4
  *
5
5
  *
6
- * Copyright 2014 Contributors
6
+ * Copyright 2015 Contributors
7
7
  * Released under the MIT license
8
8
  * http://opensource.org/licenses/MIT
9
9
  *
@@ -15,19 +15,24 @@
15
15
  *******************************/
16
16
 
17
17
  .ui.grid {
18
- display: block;
19
- text-align: left;
20
- font-size: 0em;
18
+ display: -webkit-box;
19
+ display: -webkit-flex;
20
+ display: -ms-flexbox;
21
+ display: flex;
22
+ -webkit-box-orient: horizontal;
23
+ -webkit-box-direction: normal;
24
+ -webkit-flex-direction: row;
25
+ -ms-flex-direction: row;
26
+ flex-direction: row;
27
+ -webkit-flex-wrap: wrap;
28
+ -ms-flex-wrap: wrap;
29
+ flex-wrap: wrap;
30
+ -webkit-box-align: stretch;
31
+ -webkit-align-items: stretch;
32
+ -ms-flex-align: stretch;
33
+ align-items: stretch;
21
34
  padding: 0em;
22
35
  }
23
- .ui.grid:after,
24
- .ui.grid > .row:after {
25
- content: '';
26
- display: block;
27
- height: 0px;
28
- clear: both;
29
- visibility: hidden;
30
- }
31
36
 
32
37
  /*----------------------
33
38
  Remove Gutters
@@ -48,7 +53,7 @@
48
53
  margin-right: -2.5rem;
49
54
  }
50
55
 
51
- /* Collapse Margins on Consecutive Grids */
56
+ /* Preserve Rows Spacing on Consecutive Grids */
52
57
  .ui.grid + .grid {
53
58
  margin-top: 1rem;
54
59
  }
@@ -63,7 +68,6 @@
63
68
  .ui.grid > .row > .column {
64
69
  position: relative;
65
70
  display: inline-block;
66
- font-size: 1rem;
67
71
  width: 6.25%;
68
72
  padding-left: 1rem;
69
73
  padding-right: 1rem;
@@ -80,10 +84,28 @@
80
84
 
81
85
  .ui.grid > .row {
82
86
  position: relative;
83
- display: block;
84
- width: auto !important;
87
+ display: -webkit-box;
88
+ display: -webkit-flex;
89
+ display: -ms-flexbox;
90
+ display: flex;
91
+ -webkit-box-orient: horizontal;
92
+ -webkit-box-direction: normal;
93
+ -webkit-flex-direction: row;
94
+ -ms-flex-direction: row;
95
+ flex-direction: row;
96
+ -webkit-flex-wrap: wrap;
97
+ -ms-flex-wrap: wrap;
98
+ flex-wrap: wrap;
99
+ -webkit-box-pack: inherit;
100
+ -webkit-justify-content: inherit;
101
+ -ms-flex-pack: inherit;
102
+ justify-content: inherit;
103
+ -webkit-box-align: stretch;
104
+ -webkit-align-items: stretch;
105
+ -ms-flex-align: stretch;
106
+ align-items: stretch;
107
+ width: 100% !important;
85
108
  padding: 0rem;
86
- font-size: 0rem;
87
109
  padding-top: 1rem;
88
110
  padding-bottom: 1rem;
89
111
  }
@@ -116,11 +138,34 @@
116
138
  Loose Coupling
117
139
  --------------------*/
118
140
 
141
+
142
+ /* Collapse Margin on Consecutive Grid */
143
+ .ui.grid > .ui.grid:first-child {
144
+ margin-top: 0em;
145
+ }
146
+ .ui.grid > .ui.grid:last-child {
147
+ margin-bottom: 0em;
148
+ }
149
+
150
+ /* Segment inside Aligned Grid */
151
+ .ui.grid .aligned.row > .column > .segment:not(.compact),
152
+ .ui.aligned.grid .column > .segment:not(.compact) {
153
+ width: 100%;
154
+ }
155
+
156
+ /* Align Dividers with Gutter */
119
157
  .ui.grid .row + .ui.divider {
158
+ -webkit-box-flex: 1;
159
+ -webkit-flex-grow: 1;
160
+ -ms-flex-positive: 1;
161
+ flex-grow: 1;
120
162
  margin: 1rem 1rem;
121
163
  }
164
+ .ui.grid .column + .ui.vertical.divider {
165
+ height: calc(50% - 1rem );
166
+ }
122
167
 
123
- /* remove Border on last horizontal segment */
168
+ /* Remove Border on Last Horizontal Segment */
124
169
  .ui.grid > .row > .column:last-child > .horizontal.segment,
125
170
  .ui.grid > .column:last-child > .horizontal.segment {
126
171
  box-shadow: none;
@@ -136,19 +181,6 @@
136
181
  Page Grid
137
182
  -------------------------*/
138
183
 
139
- .ui.page.grid {
140
- padding-left: 8%;
141
- padding-right: 8%;
142
- width: auto;
143
- }
144
-
145
- /* Collapse Margin */
146
- .ui.grid > .ui.grid:first-child {
147
- margin-top: 0em;
148
- }
149
- .ui.grid > .ui.grid:last-child {
150
- margin-bottom: 0em;
151
- }
152
184
  @media only screen and (max-width: 767px) {
153
185
  .ui.page.grid {
154
186
  width: auto;
@@ -158,25 +190,25 @@
158
190
  margin-right: 0em;
159
191
  }
160
192
  }
161
- @media only screen and (min-width: 768px) {
193
+ @media only screen and (min-width: 768px) and (max-width: 991px) {
162
194
  .ui.page.grid {
163
195
  width: auto;
164
196
  margin-left: 0em;
165
197
  margin-right: 0em;
166
- padding-left: 4em;
167
- padding-right: 4em;
198
+ padding-left: 2em;
199
+ padding-right: 2em;
168
200
  }
169
201
  }
170
- @media only screen and (min-width: 992px) {
202
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
171
203
  .ui.page.grid {
172
204
  width: auto;
173
205
  margin-left: 0em;
174
206
  margin-right: 0em;
175
- padding-left: 8%;
176
- padding-right: 8%;
207
+ padding-left: 3%;
208
+ padding-right: 3%;
177
209
  }
178
210
  }
179
- @media only screen and (min-width: 1400px) {
211
+ @media only screen and (min-width: 1200px) and (max-width: 1919px) {
180
212
  .ui.page.grid {
181
213
  width: auto;
182
214
  margin-left: 0em;
@@ -208,67 +240,67 @@
208
240
 
209
241
  /* Grid Based */
210
242
  .ui[class*="one column"].grid > .row > .column,
211
- .ui[class*="one column"].grid > .column {
243
+ .ui[class*="one column"].grid > .column:not(.row) {
212
244
  width: 100%;
213
245
  }
214
246
  .ui[class*="two column"].grid > .row > .column,
215
- .ui[class*="two column"].grid > .column {
247
+ .ui[class*="two column"].grid > .column:not(.row) {
216
248
  width: 50%;
217
249
  }
218
250
  .ui[class*="three column"].grid > .row > .column,
219
- .ui[class*="three column"].grid > .column {
251
+ .ui[class*="three column"].grid > .column:not(.row) {
220
252
  width: 33.33333333%;
221
253
  }
222
254
  .ui[class*="four column"].grid > .row > .column,
223
- .ui[class*="four column"].grid > .column {
255
+ .ui[class*="four column"].grid > .column:not(.row) {
224
256
  width: 25%;
225
257
  }
226
258
  .ui[class*="five column"].grid > .row > .column,
227
- .ui[class*="five column"].grid > .column {
259
+ .ui[class*="five column"].grid > .column:not(.row) {
228
260
  width: 20%;
229
261
  }
230
262
  .ui[class*="six column"].grid > .row > .column,
231
- .ui[class*="six column"].grid > .column {
263
+ .ui[class*="six column"].grid > .column:not(.row) {
232
264
  width: 16.66666667%;
233
265
  }
234
266
  .ui[class*="seven column"].grid > .row > .column,
235
- .ui[class*="seven column"].grid > .column {
267
+ .ui[class*="seven column"].grid > .column:not(.row) {
236
268
  width: 14.28571429%;
237
269
  }
238
270
  .ui[class*="eight column"].grid > .row > .column,
239
- .ui[class*="eight column"].grid > .column {
271
+ .ui[class*="eight column"].grid > .column:not(.row) {
240
272
  width: 12.5%;
241
273
  }
242
274
  .ui[class*="nine column"].grid > .row > .column,
243
- .ui[class*="nine column"].grid > .column {
275
+ .ui[class*="nine column"].grid > .column:not(.row) {
244
276
  width: 11.11111111%;
245
277
  }
246
278
  .ui[class*="ten column"].grid > .row > .column,
247
- .ui[class*="ten column"].grid > .column {
279
+ .ui[class*="ten column"].grid > .column:not(.row) {
248
280
  width: 10%;
249
281
  }
250
282
  .ui[class*="eleven column"].grid > .row > .column,
251
- .ui[class*="eleven column"].grid > .column {
283
+ .ui[class*="eleven column"].grid > .column:not(.row) {
252
284
  width: 9.09090909%;
253
285
  }
254
286
  .ui[class*="twelve column"].grid > .row > .column,
255
- .ui[class*="twelve column"].grid > .column {
287
+ .ui[class*="twelve column"].grid > .column:not(.row) {
256
288
  width: 8.33333333%;
257
289
  }
258
290
  .ui[class*="thirteen column"].grid > .row > .column,
259
- .ui[class*="thirteen column"].grid > .column {
291
+ .ui[class*="thirteen column"].grid > .column:not(.row) {
260
292
  width: 7.69230769%;
261
293
  }
262
294
  .ui[class*="fourteen column"].grid > .row > .column,
263
- .ui[class*="fourteen column"].grid > .column {
295
+ .ui[class*="fourteen column"].grid > .column:not(.row) {
264
296
  width: 7.14285714%;
265
297
  }
266
298
  .ui[class*="fifteen column"].grid > .row > .column,
267
- .ui[class*="fifteen column"].grid > .column {
299
+ .ui[class*="fifteen column"].grid > .column:not(.row) {
268
300
  width: 6.66666667%;
269
301
  }
270
302
  .ui[class*="sixteen column"].grid > .row > .column,
271
- .ui[class*="sixteen column"].grid > .column {
303
+ .ui[class*="sixteen column"].grid > .column:not(.row) {
272
304
  width: 6.25%;
273
305
  }
274
306
 
@@ -731,7 +763,7 @@
731
763
  }
732
764
 
733
765
  /* Large Monitor Sizing Combinations */
734
- @media only screen and (min-width: 1400px) and (max-width: 1919px) {
766
+ @media only screen and (min-width: 1200px) and (max-width: 1919px) {
735
767
  .ui.grid > .row > [class*="one wide large screen"].column,
736
768
  .ui.grid > .column.row > [class*="one wide large screen"].column,
737
769
  .ui.grid > [class*="one wide large screen"].column,
@@ -1005,10 +1037,10 @@
1005
1037
  -----------------------*/
1006
1038
 
1007
1039
  .ui.grid [class*="left floated"].column {
1008
- float: left;
1040
+ margin-right: auto;
1009
1041
  }
1010
1042
  .ui.grid [class*="right floated"].column {
1011
- float: right;
1043
+ margin-left: auto;
1012
1044
  }
1013
1045
 
1014
1046
  /*----------------------
@@ -1017,7 +1049,7 @@
1017
1049
 
1018
1050
  .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1019
1051
  .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
1020
- box-shadow: -1px 0px 0px 0px rgba(39, 41, 43, 0.15);
1052
+ box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
1021
1053
  }
1022
1054
 
1023
1055
  /* Swap from padding to margin on columns to have dividers align */
@@ -1031,8 +1063,6 @@
1031
1063
  .ui[class*="vertically divided"].grid > .row {
1032
1064
  margin-top: 0em;
1033
1065
  margin-bottom: 0em;
1034
- padding-top: 0em;
1035
- padding-bottom: 0em;
1036
1066
  }
1037
1067
 
1038
1068
  /* No divider on first column on row */
@@ -1043,7 +1073,7 @@
1043
1073
 
1044
1074
  /* Divided Row */
1045
1075
  .ui.grid > .divided.row > .column {
1046
- box-shadow: -1px 0px 0px 0px rgba(39, 41, 43, 0.15);
1076
+ box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15);
1047
1077
  }
1048
1078
  .ui.grid > .divided.row > .column:first-child {
1049
1079
  box-shadow: none;
@@ -1058,11 +1088,10 @@
1058
1088
  content: "";
1059
1089
  top: 0em;
1060
1090
  left: 0px;
1061
- width: -webkit-calc(100% - 2rem );
1062
1091
  width: calc(100% - 2rem );
1063
1092
  height: 1px;
1064
1093
  margin: 0% 1rem;
1065
- box-shadow: 0px -1px 0px 0px rgba(39, 41, 43, 0.15);
1094
+ box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
1066
1095
  }
1067
1096
 
1068
1097
  /* Padded Horizontally Divided */
@@ -1079,27 +1108,25 @@
1079
1108
  /* Inverted Divided */
1080
1109
  .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1081
1110
  .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
1082
- box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.2);
1111
+ box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1);
1083
1112
  }
1084
1113
  .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
1085
1114
  .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1086
1115
  box-shadow: none;
1087
1116
  }
1088
1117
  .ui.inverted[class*="vertically divided"].grid > .row:before {
1089
- box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
1118
+ box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
1090
1119
  }
1091
1120
 
1092
1121
  /* Relaxed */
1093
1122
  .ui.relaxed[class*="vertically divided"].grid > .row:before {
1094
1123
  margin-left: 1.5rem;
1095
1124
  margin-right: 1.5rem;
1096
- width: -webkit-calc(100% - 3rem );
1097
1125
  width: calc(100% - 3rem );
1098
1126
  }
1099
1127
  .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
1100
1128
  margin-left: 5rem;
1101
1129
  margin-right: 5rem;
1102
- width: -webkit-calc(100% - 5rem );
1103
1130
  width: calc(100% - 5rem );
1104
1131
  }
1105
1132
 
@@ -1108,8 +1135,6 @@
1108
1135
  -----------------------*/
1109
1136
 
1110
1137
  .ui.celled.grid {
1111
- display: table;
1112
- table-layout: fixed;
1113
1138
  width: 100%;
1114
1139
  margin: 1em 0em;
1115
1140
  box-shadow: 0px 0px 0px 1px #d4d4d5;
@@ -1117,8 +1142,6 @@
1117
1142
  .ui.celled.grid > .row,
1118
1143
  .ui.celled.grid > .column.row,
1119
1144
  .ui.celled.grid > .column.row:first-child {
1120
- display: table;
1121
- table-layout: fixed;
1122
1145
  width: 100% !important;
1123
1146
  margin: 0em;
1124
1147
  padding: 0em;
@@ -1126,7 +1149,6 @@
1126
1149
  }
1127
1150
  .ui.celled.grid > .column:not(.row),
1128
1151
  .ui.celled.grid > .row > .column {
1129
- display: table-cell;
1130
1152
  box-shadow: -1px 0px 0px 0px #d4d4d5;
1131
1153
  }
1132
1154
  .ui.celled.grid > .column:first-child,
@@ -1138,11 +1160,11 @@
1138
1160
  }
1139
1161
  .ui.celled.grid > .column:not(.row),
1140
1162
  .ui.celled.grid > .row > .column {
1141
- padding: 0.75em;
1163
+ padding: 1em;
1142
1164
  }
1143
1165
  .ui.relaxed.celled.grid > .column:not(.row),
1144
1166
  .ui.relaxed.celled.grid > .row > .column {
1145
- padding: 1em;
1167
+ padding: 1.5em;
1146
1168
  }
1147
1169
  .ui[class*="very relaxed"].celled.grid > .column:not(.row),
1148
1170
  .ui[class*="very relaxed"].celled.grid > .row > .column {
@@ -1152,6 +1174,7 @@
1152
1174
  /* Internally Celled */
1153
1175
  .ui[class*="internally celled"].grid {
1154
1176
  box-shadow: none;
1177
+ margin: 0em;
1155
1178
  }
1156
1179
  .ui[class*="internally celled"].grid > .row:first-child {
1157
1180
  box-shadow: none;
@@ -1160,55 +1183,131 @@
1160
1183
  box-shadow: none;
1161
1184
  }
1162
1185
 
1186
+ /*----------------------
1187
+ Vertically Aligned
1188
+ -----------------------*/
1189
+
1190
+
1191
+ /* Top Aligned */
1192
+ .ui[class*="top aligned"].grid .column:not(.row),
1193
+ .ui.grid > [class*="top aligned"].row > .column,
1194
+ .ui.grid > [class*="top aligned"].column:not(.row),
1195
+ .ui.grid > .row > [class*="top aligned"].column {
1196
+ -webkit-box-orient: vertical;
1197
+ -webkit-box-direction: normal;
1198
+ -webkit-flex-direction: column;
1199
+ -ms-flex-direction: column;
1200
+ flex-direction: column;
1201
+ vertical-align: top;
1202
+ -webkit-align-self: flex-start !important;
1203
+ -ms-flex-item-align: start !important;
1204
+ align-self: flex-start !important;
1205
+ }
1206
+
1207
+ /* Middle Aligned */
1208
+ .ui[class*="middle aligned"].grid .column:not(.row),
1209
+ .ui.grid > [class*="middle aligned"].row > .column,
1210
+ .ui.grid > [class*="middle aligned"].column:not(.row),
1211
+ .ui.grid > .row > [class*="middle aligned"].column {
1212
+ -webkit-box-orient: vertical;
1213
+ -webkit-box-direction: normal;
1214
+ -webkit-flex-direction: column;
1215
+ -ms-flex-direction: column;
1216
+ flex-direction: column;
1217
+ vertical-align: middle;
1218
+ -webkit-align-self: center !important;
1219
+ -ms-flex-item-align: center !important;
1220
+ align-self: center !important;
1221
+ }
1222
+
1223
+ /* Bottom Aligned */
1224
+ .ui[class*="bottom aligned"].grid .column:not(.row),
1225
+ .ui.grid > [class*="bottom aligned"].row > .column,
1226
+ .ui.grid > [class*="bottom aligned"].column:not(.row),
1227
+ .ui.grid > .row > [class*="bottom aligned"].column {
1228
+ -webkit-box-orient: vertical;
1229
+ -webkit-box-direction: normal;
1230
+ -webkit-flex-direction: column;
1231
+ -ms-flex-direction: column;
1232
+ flex-direction: column;
1233
+ vertical-align: bottom;
1234
+ -webkit-align-self: flex-end !important;
1235
+ -ms-flex-item-align: end !important;
1236
+ align-self: flex-end !important;
1237
+ }
1238
+
1239
+ /* Stretched */
1240
+ .ui.stretched.grid > .row > .column,
1241
+ .ui.stretched.grid > .column,
1242
+ .ui.grid > .stretched.row > .column,
1243
+ .ui.grid > .stretched.column:not(.row),
1244
+ .ui.grid > .row > .stretched.column {
1245
+ display: -webkit-inline-box !important;
1246
+ display: -webkit-inline-flex !important;
1247
+ display: -ms-inline-flexbox !important;
1248
+ display: inline-flex !important;
1249
+ -webkit-align-self: stretch;
1250
+ -ms-flex-item-align: stretch;
1251
+ align-self: stretch;
1252
+ -webkit-box-orient: vertical;
1253
+ -webkit-box-direction: normal;
1254
+ -webkit-flex-direction: column;
1255
+ -ms-flex-direction: column;
1256
+ flex-direction: column;
1257
+ }
1258
+ .ui.stretched.grid > .row > .column > *,
1259
+ .ui.stretched.grid > .column > *,
1260
+ .ui.grid > .stretched.row > .column > *,
1261
+ .ui.grid > .stretched.column:not(.row) > *,
1262
+ .ui.grid > .row > .stretched.column > * {
1263
+ -webkit-box-flex: 1;
1264
+ -webkit-flex-grow: 1;
1265
+ -ms-flex-positive: 1;
1266
+ flex-grow: 1;
1267
+ }
1268
+
1163
1269
  /*----------------------
1164
1270
  Horizontally Centered
1165
1271
  -----------------------*/
1166
1272
 
1167
1273
 
1168
1274
  /* Left Aligned */
1169
- .ui[class*="left aligned"].grid,
1170
- .ui[class*="left aligned"].grid > .row > .column,
1171
- .ui[class*="left aligned"].grid > .column,
1172
- .ui.grid [class*="left aligned"].column,
1173
- .ui.grid > [class*="left aligned"].row > .column {
1275
+ .ui[class*="left aligned"].grid .column,
1276
+ .ui.grid > [class*="left aligned"].row > .column,
1277
+ .ui.grid > [class*="left aligned"].column.column,
1278
+ .ui.grid > .row > [class*="left aligned"].column {
1174
1279
  text-align: left;
1175
- -webkit-box-align: start !important;
1176
- -webkit-align-items: flex-start !important;
1177
- -ms-flex-align: start !important;
1178
- align-items: flex-start !important;
1179
- }
1180
- .ui.grid [class*="left aligned"].column {
1181
- text-align: left !important;
1280
+ -webkit-align-self: inherit;
1281
+ -ms-flex-item-align: inherit;
1282
+ align-self: inherit;
1182
1283
  }
1183
1284
 
1184
1285
  /* Center Aligned */
1185
- .ui[class*="center aligned"].grid,
1186
- .ui[class*="center aligned"].grid > .row > .column,
1187
- .ui[class*="center aligned"].grid > .column,
1188
- .ui.grid > [class*="center aligned"].row > .column {
1286
+ .ui[class*="center aligned"].grid .column,
1287
+ .ui.grid > [class*="center aligned"].row > .column,
1288
+ .ui.grid > [class*="center aligned"].column.column,
1289
+ .ui.grid > .row > [class*="center aligned"].column {
1189
1290
  text-align: center;
1190
- -webkit-box-align: center !important;
1191
- -webkit-align-items: center !important;
1192
- -ms-flex-align: center !important;
1193
- align-items: center !important;
1291
+ -webkit-align-self: inherit;
1292
+ -ms-flex-item-align: inherit;
1293
+ align-self: inherit;
1194
1294
  }
1195
- .ui.grid [class*="center aligned"].column {
1196
- text-align: center !important;
1295
+ .ui[class*="center aligned"].grid {
1296
+ -webkit-box-pack: center;
1297
+ -webkit-justify-content: center;
1298
+ -ms-flex-pack: center;
1299
+ justify-content: center;
1197
1300
  }
1198
1301
 
1199
1302
  /* Right Aligned */
1200
- .ui[class*="right aligned"].grid,
1201
- .ui[class*="right aligned"].grid > .row > .column,
1202
- .ui[class*="right aligned"].grid > .column,
1203
- .ui.grid > [class*="right aligned"].row > .column {
1303
+ .ui[class*="right aligned"].grid .column,
1304
+ .ui.grid > [class*="right aligned"].row > .column,
1305
+ .ui.grid > [class*="right aligned"].column.column,
1306
+ .ui.grid > .row > [class*="right aligned"].column {
1204
1307
  text-align: right;
1205
- -webkit-box-align: end !important;
1206
- -webkit-align-items: flex-end !important;
1207
- -ms-flex-align: end !important;
1208
- align-items: flex-end !important;
1209
- }
1210
- .ui.grid [class*="right aligned"].column {
1211
- text-align: right !important;
1308
+ -webkit-align-self: inherit;
1309
+ -ms-flex-item-align: inherit;
1310
+ align-self: inherit;
1212
1311
  }
1213
1312
 
1214
1313
  /* Justified */
@@ -1231,313 +1330,153 @@
1231
1330
  hyphens: auto !important;
1232
1331
  }
1233
1332
 
1234
- /*----------------------
1235
- Vertically Aligned
1236
- -----------------------*/
1237
-
1238
-
1239
- /* Top Aligned */
1240
- .ui[class*="top aligned"].grid,
1241
- .ui[class*="top aligned"].grid > .row > .column,
1242
- .ui[class*="top aligned"].grid > .column,
1243
- .ui.grid [class*="top aligned"].column,
1244
- .ui.grid > [class*="top aligned"].row > .column {
1245
- vertical-align: top;
1246
- -webkit-box-pack: start !important;
1247
- -webkit-justify-content: flex-start !important;
1248
- -ms-flex-pack: start !important;
1249
- justify-content: flex-start !important;
1250
- }
1251
- .ui.grid [class*="top aligned"].column {
1252
- vertical-align: top !important;
1253
- -webkit-box-pack: start !important;
1254
- -webkit-justify-content: flex-start !important;
1255
- -ms-flex-pack: start !important;
1256
- justify-content: flex-start !important;
1257
- }
1258
- .ui.stretched.grid > .row > .column,
1259
- .ui.stretched.grid > .column:not(.row),
1260
- .ui.grid .stretched.column,
1261
- .ui.grid > .stretched.row > .column {
1262
- display: -webkit-box !important;
1263
- display: -webkit-flex !important;
1264
- display: -ms-flexbox !important;
1265
- display: flex !important;
1266
- -webkit-box-orient: vertical;
1267
- -webkit-box-direction: normal;
1268
- -webkit-flex-direction: column;
1269
- -ms-flex-direction: column;
1270
- flex-direction: column;
1271
- }
1272
- .ui.stretched.grid > .row > .column > *,
1273
- .ui.stretched.grid > .column > *,
1274
- .ui.grid .stretched.column > *,
1275
- .ui.grid > .stretched.row > .column > * {
1276
- -webkit-box-flex: 1;
1277
- -webkit-flex-grow: 1;
1278
- -ms-flex-positive: 1;
1279
- flex-grow: 1;
1280
- }
1281
-
1282
- /* Middle Aligned */
1283
- .ui[class*="middle aligned"].grid,
1284
- .ui[class*="middle aligned"].grid > .row > .column,
1285
- .ui[class*="middle aligned"].grid > .column,
1286
- .ui.grid > [class*="middle aligned"].row > .column {
1287
- vertical-align: middle;
1288
- -webkit-box-pack: center !important;
1289
- -webkit-justify-content: center !important;
1290
- -ms-flex-pack: center !important;
1291
- justify-content: center !important;
1292
- }
1293
- .ui.grid [class*="middle aligned"].column {
1294
- vertical-align: middle !important;
1295
- -webkit-box-pack: center !important;
1296
- -webkit-justify-content: center !important;
1297
- -ms-flex-pack: center !important;
1298
- justify-content: center !important;
1299
- }
1300
-
1301
- /* Bottom Aligned */
1302
- .ui[class*="bottom aligned"].grid,
1303
- .ui[class*="bottom aligned"].grid > .row > .column,
1304
- .ui[class*="bottom aligned"].grid > .column,
1305
- .ui.grid > [class*="bottom aligned"].row > .column {
1306
- vertical-align: bottom;
1307
- -webkit-box-pack: end !important;
1308
- -webkit-justify-content: flex-end !important;
1309
- -ms-flex-pack: end !important;
1310
- justify-content: flex-end !important;
1311
- }
1312
- .ui.grid [class*="bottom aligned"].column {
1313
- -webkit-box-pack: end !important;
1314
- -webkit-justify-content: flex-end !important;
1315
- -ms-flex-pack: end !important;
1316
- justify-content: flex-end !important;
1317
- vertical-align: bottom !important;
1318
- }
1319
-
1320
1333
  /*----------------------
1321
1334
  Colored
1322
1335
  -----------------------*/
1323
1336
 
1324
- .ui.grid > .white.row,
1325
- .ui.grid > .white.column,
1326
- .ui.grid > .row > .white.column {
1327
- background-color: #ffffff !important;
1328
- color: rgba(0, 0, 0, 0.8);
1329
- }
1330
- .ui.grid > .row > .white.column {
1337
+ .ui.grid > .row > .red.column,
1338
+ .ui.grid > .row > .orange.column,
1339
+ .ui.grid > .row > .yellow.column,
1340
+ .ui.grid > .row > .olive.column,
1341
+ .ui.grid > .row > .green.column,
1342
+ .ui.grid > .row > .teal.column,
1343
+ .ui.grid > .row > .blue.column,
1344
+ .ui.grid > .row > .violet.column,
1345
+ .ui.grid > .row > .purple.column,
1346
+ .ui.grid > .row > .pink.column,
1347
+ .ui.grid > .row > .brown.column,
1348
+ .ui.grid > .row > .grey.column,
1349
+ .ui.grid > .row > .black.column {
1331
1350
  margin-top: -1rem;
1332
1351
  margin-bottom: -1rem;
1333
1352
  padding-top: 1rem;
1334
1353
  padding-bottom: 1rem;
1335
1354
  }
1336
- .ui.grid > .black.row,
1337
- .ui.grid > .black.column,
1338
- .ui.grid > .row > .black.column {
1339
- background-color: #1b1c1d !important;
1355
+
1356
+ /* Red */
1357
+ .ui.grid > .red.row,
1358
+ .ui.grid > .red.column,
1359
+ .ui.grid > .row > .red.column {
1360
+ background-color: #db2828 !important;
1340
1361
  color: #ffffff;
1341
1362
  }
1342
- .ui.grid > .row > .black.column {
1343
- margin-top: -1rem;
1344
- margin-bottom: -1rem;
1345
- padding-top: 1rem;
1346
- padding-bottom: 1rem;
1363
+
1364
+ /* Orange */
1365
+ .ui.grid > .orange.row,
1366
+ .ui.grid > .orange.column,
1367
+ .ui.grid > .row > .orange.column {
1368
+ background-color: #f2711c !important;
1369
+ color: #ffffff;
1347
1370
  }
1348
- .ui.grid > .blue.row,
1349
- .ui.grid > .blue.column,
1350
- .ui.grid > .row > .blue.column {
1351
- background-color: #3b83c0 !important;
1371
+
1372
+ /* Yellow */
1373
+ .ui.grid > .yellow.row,
1374
+ .ui.grid > .yellow.column,
1375
+ .ui.grid > .row > .yellow.column {
1376
+ background-color: #fbbd08 !important;
1352
1377
  color: #ffffff;
1353
1378
  }
1354
- .ui.grid > .row > .blue.column {
1355
- margin-top: -1rem;
1356
- margin-bottom: -1rem;
1357
- padding-top: 1rem;
1358
- padding-bottom: 1rem;
1379
+
1380
+ /* Olive */
1381
+ .ui.grid > .olive.row,
1382
+ .ui.grid > .olive.column,
1383
+ .ui.grid > .row > .olive.column {
1384
+ background-color: #b5cc18 !important;
1385
+ color: #ffffff;
1359
1386
  }
1387
+
1388
+ /* Green */
1360
1389
  .ui.grid > .green.row,
1361
1390
  .ui.grid > .green.column,
1362
1391
  .ui.grid > .row > .green.column {
1363
- background-color: #5bbd72 !important;
1392
+ background-color: #21ba45 !important;
1364
1393
  color: #ffffff;
1365
1394
  }
1366
- .ui.grid > .row > .green.column {
1367
- margin-top: -1rem;
1368
- margin-bottom: -1rem;
1369
- padding-top: 1rem;
1370
- padding-bottom: 1rem;
1371
- }
1372
- .ui.grid > .orange.row,
1373
- .ui.grid > .orange.column,
1374
- .ui.grid > .row > .orange.column {
1375
- background-color: #e07b53 !important;
1395
+
1396
+ /* Teal */
1397
+ .ui.grid > .teal.row,
1398
+ .ui.grid > .teal.column,
1399
+ .ui.grid > .row > .teal.column {
1400
+ background-color: #00b5ad !important;
1376
1401
  color: #ffffff;
1377
1402
  }
1378
- .ui.grid > .row > .orange.column {
1379
- margin-top: -1rem;
1380
- margin-bottom: -1rem;
1381
- padding-top: 1rem;
1382
- padding-bottom: 1rem;
1383
- }
1384
- .ui.grid > .pink.row,
1385
- .ui.grid .pink.column {
1386
- background-color: #d9499a !important;
1403
+
1404
+ /* Blue */
1405
+ .ui.grid > .blue.row,
1406
+ .ui.grid > .blue.column,
1407
+ .ui.grid > .row > .blue.column {
1408
+ background-color: #2185d0 !important;
1387
1409
  color: #ffffff;
1388
1410
  }
1389
- .ui.grid > .row > .pink.column {
1390
- margin-top: -1rem;
1391
- margin-bottom: -1rem;
1392
- padding-top: 1rem;
1393
- padding-bottom: 1rem;
1411
+
1412
+ /* Violet */
1413
+ .ui.grid > .violet.row,
1414
+ .ui.grid > .violet.column,
1415
+ .ui.grid > .row > .violet.column {
1416
+ background-color: #6435c9 !important;
1417
+ color: #ffffff;
1394
1418
  }
1419
+
1420
+ /* Purple */
1395
1421
  .ui.grid > .purple.row,
1396
1422
  .ui.grid > .purple.column,
1397
1423
  .ui.grid > .row > .purple.column {
1398
- background-color: #564f8a !important;
1424
+ background-color: #a333c8 !important;
1399
1425
  color: #ffffff;
1400
1426
  }
1401
- .ui.grid > .row > .purple.column {
1402
- margin-top: -1rem;
1403
- margin-bottom: -1rem;
1404
- padding-top: 1rem;
1405
- padding-bottom: 1rem;
1406
- }
1407
- .ui.grid > .red.row,
1408
- .ui.grid > .red.column,
1409
- .ui.grid > .row > .red.column {
1410
- background-color: #d95c5c !important;
1427
+
1428
+ /* Pink */
1429
+ .ui.grid > .pink.row,
1430
+ .ui.grid > .pink.column,
1431
+ .ui.grid > .row > .pink.column {
1432
+ background-color: #e03997 !important;
1411
1433
  color: #ffffff;
1412
1434
  }
1413
- .ui.grid > .row > .red.column {
1414
- margin-top: -1rem;
1415
- margin-bottom: -1rem;
1416
- padding-top: 1rem;
1417
- padding-bottom: 1rem;
1418
- }
1419
- .ui.grid > .teal.row,
1420
- .ui.grid > .teal.column,
1421
- .ui.grid > .row > .teal.column {
1422
- background-color: #00b5ad !important;
1435
+
1436
+ /* Brown */
1437
+ .ui.grid > .brown.row,
1438
+ .ui.grid > .brown.column,
1439
+ .ui.grid > .row > .brown.column {
1440
+ background-color: #a5673f !important;
1423
1441
  color: #ffffff;
1424
1442
  }
1425
- .ui.grid > .row > .teal.column {
1426
- margin-top: -1rem;
1427
- margin-bottom: -1rem;
1428
- padding-top: 1rem;
1429
- padding-bottom: 1rem;
1430
- }
1431
- .ui.grid > .yellow.row,
1432
- .ui.grid > .yellow.column,
1433
- .ui.grid > .row > .yellow.column {
1434
- background-color: #f2c61f !important;
1443
+
1444
+ /* Grey */
1445
+ .ui.grid > .grey.row,
1446
+ .ui.grid > .grey.column,
1447
+ .ui.grid > .row > .grey.column {
1448
+ background-color: #767676 !important;
1435
1449
  color: #ffffff;
1436
1450
  }
1437
- .ui.grid > .row > .yellow.column {
1438
- margin-top: -1rem;
1439
- margin-bottom: -1rem;
1440
- padding-top: 1rem;
1441
- padding-bottom: 1rem;
1451
+
1452
+ /* Black */
1453
+ .ui.grid > .black.row,
1454
+ .ui.grid > .black.column,
1455
+ .ui.grid > .row > .black.column {
1456
+ background-color: #1b1c1d !important;
1457
+ color: #ffffff;
1442
1458
  }
1443
1459
 
1444
1460
  /*----------------------
1445
1461
  Equal Width
1446
1462
  -----------------------*/
1447
1463
 
1448
- .ui[class*="equal width"].grid {
1449
- display: table;
1450
- table-layout: fixed;
1451
- }
1452
- .ui[class*="equal width"].grid > .row,
1453
- .ui.grid > [class*="equal width"].row {
1454
- display: table;
1455
- table-layout: fixed;
1456
- width: 100% !important;
1457
- }
1458
1464
  .ui[class*="equal width"].grid > .column:not(.row),
1459
1465
  .ui[class*="equal width"].grid > .row > .column,
1460
1466
  .ui.grid > [class*="equal width"].row > .column {
1461
- display: table-cell;
1462
- }
1463
-
1464
- /* Flexbox (Experimental / Overrides Where Supported) */
1465
- .ui[class*="equal width"].grid,
1466
- .ui[class*="equal width"].grid > .row,
1467
- .ui.grid > [class*="equal width"].row {
1468
- display: -webkit-box;
1469
- display: -webkit-flex;
1470
- display: -ms-flexbox;
1471
- display: flex;
1472
- -webkit-box-orient: horizontal;
1473
- -webkit-box-direction: normal;
1474
- -webkit-flex-direction: row;
1475
- -ms-flex-direction: row;
1476
- flex-direction: row;
1477
- -webkit-flex-wrap: wrap;
1478
- -ms-flex-wrap: wrap;
1479
- flex-wrap: wrap;
1480
- }
1481
- .ui[class*="equal width"].grid > .column:not(.row),
1482
- .ui[class*="equal width"].grid > .row > .column,
1483
- .ui.grid > [class*="equal width"].row > .column {
1484
- display: block;
1467
+ display: inline-block;
1485
1468
  -webkit-box-flex: 1;
1486
1469
  -webkit-flex-grow: 1;
1487
1470
  -ms-flex-positive: 1;
1488
1471
  flex-grow: 1;
1489
1472
  }
1490
-
1491
- /*----------------------
1492
- Equal Height Columns
1493
- -----------------------*/
1494
-
1495
- .ui[class*="equal height"].grid {
1496
- display: table;
1497
- table-layout: fixed;
1498
- }
1499
- .ui[class*="equal height"].grid > .row,
1500
- .ui.grid > [class*="equal height"].row {
1501
- display: table;
1502
- table-layout: fixed;
1503
- width: 100% !important;
1504
- }
1505
- .ui[class*="equal height"].grid > .column:not(.row),
1506
- .ui[class*="equal height"].grid > .row > .column,
1507
- .ui.grid > [class*="equal height"].row > .column {
1508
- display: table-cell;
1509
- }
1510
-
1511
- /* Flexbox (Experimental / Overrides Where Supported) */
1512
- .ui[class*="equal height"].grid,
1513
- .ui[class*="equal height"].grid > .row,
1514
- .ui.grid > [class*="equal height"].row {
1515
- display: -webkit-box;
1516
- display: -webkit-flex;
1517
- display: -ms-flexbox;
1518
- display: flex;
1519
- -webkit-box-orient: horizontal;
1520
- -webkit-box-direction: normal;
1521
- -webkit-flex-direction: row;
1522
- -ms-flex-direction: row;
1523
- flex-direction: row;
1524
- -webkit-flex-wrap: wrap;
1525
- -ms-flex-wrap: wrap;
1526
- flex-wrap: wrap;
1527
- }
1528
- .ui[class*="equal height"].grid > .column:not(.row),
1529
- .ui[class*="equal height"].grid > .row > .column,
1530
- .ui.grid > [class*="equal height"].row > .column {
1531
- display: block;
1532
- -webkit-box-orient: vertical;
1533
- -webkit-box-direction: normal;
1534
- -webkit-flex-direction: column;
1535
- -ms-flex-direction: column;
1536
- flex-direction: column;
1537
- -webkit-box-flex: 1;
1538
- -webkit-flex-grow: 1;
1539
- -ms-flex-positive: 1;
1540
- flex-grow: 1;
1473
+ .ui[class*="equal width"].grid > .wide.column,
1474
+ .ui[class*="equal width"].grid > .row > .wide.column,
1475
+ .ui.grid > [class*="equal width"].row > .wide.column {
1476
+ -webkit-box-flex: 0;
1477
+ -webkit-flex-grow: 0;
1478
+ -ms-flex-positive: 0;
1479
+ flex-grow: 0;
1541
1480
  }
1542
1481
 
1543
1482
  /*-------------------
@@ -1548,7 +1487,7 @@
1548
1487
  /* Tablet Only */
1549
1488
  @media only screen and (min-width: 768px) and (max-width: 991px) {
1550
1489
  .ui.doubling.grid {
1551
- width: 100% !important;
1490
+ width: auto;
1552
1491
  }
1553
1492
  .ui.grid > .doubling.row,
1554
1493
  .ui.doubling.grid > .row {
@@ -1560,81 +1499,82 @@
1560
1499
  display: inline-block !important;
1561
1500
  padding-top: 1rem !important;
1562
1501
  padding-bottom: 1rem !important;
1502
+ box-shadow: none !important;
1563
1503
  margin: 0em;
1564
1504
  }
1565
1505
  .ui[class*="two column"].doubling.grid > .row > .column,
1566
- .ui[class*="two column"].doubling.grid > .column,
1567
- .ui.grid > [class*="two column"].doubling.row > .column {
1506
+ .ui[class*="two column"].doubling.grid > .column:not(.row),
1507
+ .ui.grid > [class*="two column"].doubling.row.row > .column {
1568
1508
  width: 100% !important;
1569
1509
  }
1570
1510
  .ui[class*="three column"].doubling.grid > .row > .column,
1571
- .ui[class*="three column"].doubling.grid > .column,
1572
- .ui.grid > [class*="three column"].doubling.row > .column {
1511
+ .ui[class*="three column"].doubling.grid > .column:not(.row),
1512
+ .ui.grid > [class*="three column"].doubling.row.row > .column {
1573
1513
  width: 50% !important;
1574
1514
  }
1575
1515
  .ui[class*="four column"].doubling.grid > .row > .column,
1576
- .ui[class*="four column"].doubling.grid > .column,
1577
- .ui.grid > [class*="four column"].doubling.row > .column {
1516
+ .ui[class*="four column"].doubling.grid > .column:not(.row),
1517
+ .ui.grid > [class*="four column"].doubling.row.row > .column {
1578
1518
  width: 50% !important;
1579
1519
  }
1580
1520
  .ui[class*="five column"].doubling.grid > .row > .column,
1581
- .ui[class*="five column"].doubling.grid > .column,
1582
- .ui.grid > [class*="five column"].doubling.row > .column {
1521
+ .ui[class*="five column"].doubling.grid > .column:not(.row),
1522
+ .ui.grid > [class*="five column"].doubling.row.row > .column {
1583
1523
  width: 33.33333333% !important;
1584
1524
  }
1585
1525
  .ui[class*="six column"].doubling.grid > .row > .column,
1586
- .ui[class*="six column"].doubling.grid > .column,
1587
- .ui.grid > [class*="six column"].doubling.row > .column {
1526
+ .ui[class*="six column"].doubling.grid > .column:not(.row),
1527
+ .ui.grid > [class*="six column"].doubling.row.row > .column {
1588
1528
  width: 33.33333333% !important;
1589
1529
  }
1590
1530
  .ui[class*="seven column"].doubling.grid > .row > .column,
1591
- .ui[class*="seven column"].doubling.grid > .column,
1592
- .ui.grid > [class*="seven column"].doubling.row > .column {
1531
+ .ui[class*="seven column"].doubling.grid > .column:not(.row),
1532
+ .ui.grid > [class*="seven column"].doubling.row.row > .column {
1593
1533
  width: 33.33333333% !important;
1594
1534
  }
1595
1535
  .ui[class*="eight column"].doubling.grid > .row > .column,
1596
- .ui[class*="eight column"].doubling.grid > .column,
1597
- .ui.grid > [class*="eight column"].doubling.row > .column {
1536
+ .ui[class*="eight column"].doubling.grid > .column:not(.row),
1537
+ .ui.grid > [class*="eight column"].doubling.row.row > .column {
1598
1538
  width: 25% !important;
1599
1539
  }
1600
1540
  .ui[class*="nine column"].doubling.grid > .row > .column,
1601
- .ui[class*="nine column"].doubling.grid > .column,
1602
- .ui.grid > [class*="nine column"].doubling.row > .column {
1541
+ .ui[class*="nine column"].doubling.grid > .column:not(.row),
1542
+ .ui.grid > [class*="nine column"].doubling.row.row > .column {
1603
1543
  width: 25% !important;
1604
1544
  }
1605
1545
  .ui[class*="ten column"].doubling.grid > .row > .column,
1606
- .ui[class*="ten column"].doubling.grid > .column,
1607
- .ui.grid > [class*="ten column"].doubling.row > .column {
1546
+ .ui[class*="ten column"].doubling.grid > .column:not(.row),
1547
+ .ui.grid > [class*="ten column"].doubling.row.row > .column {
1608
1548
  width: 20% !important;
1609
1549
  }
1610
1550
  .ui[class*="eleven column"].doubling.grid > .row > .column,
1611
- .ui[class*="eleven column"].doubling.grid > .column,
1612
- .ui.grid > [class*="eleven column"].doubling.row > .column {
1551
+ .ui[class*="eleven column"].doubling.grid > .column:not(.row),
1552
+ .ui.grid > [class*="eleven column"].doubling.row.row > .column {
1613
1553
  width: 20% !important;
1614
1554
  }
1615
1555
  .ui[class*="twelve column"].doubling.grid > .row > .column,
1616
- .ui[class*="twelve column"].doubling.grid > .column,
1617
- .ui.grid > [class*="twelve column"].doubling.row > .column {
1556
+ .ui[class*="twelve column"].doubling.grid > .column:not(.row),
1557
+ .ui.grid > [class*="twelve column"].doubling.row.row > .column {
1618
1558
  width: 16.66666667% !important;
1619
1559
  }
1620
1560
  .ui[class*="thirteen column"].doubling.grid > .row > .column,
1621
- .ui[class*="thirteen column"].doubling.grid > .column,
1622
- .ui.grid > [class*="thirteen column"].doubling.row > .column {
1561
+ .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
1562
+ .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
1623
1563
  width: 16.66666667% !important;
1624
1564
  }
1625
1565
  .ui[class*="fourteen column"].doubling.grid > .row > .column,
1626
- .ui[class*="fourteen column"].doubling.grid > .column,
1627
- .ui.grid > [class*="fourteen column"].doubling.row > .column {
1566
+ .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
1567
+ .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
1628
1568
  width: 14.28571429% !important;
1629
1569
  }
1630
1570
  .ui[class*="fifteen column"].doubling.grid > .row > .column,
1631
- .ui[class*="fifteen column"].doubling.grid > .column,
1632
- .ui.grid > [class*="fifteen column"].doubling.row > .column {
1571
+ .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
1572
+ .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
1633
1573
  width: 14.28571429% !important;
1634
1574
  }
1635
1575
  .ui[class*="sixteen column"].doubling.grid > .row > .column,
1636
- .ui[class*="sixteen column"].doubling.grid > .column,
1637
- .ui.grid > [class*="sixteen column"].doubling.row > .column {
1576
+ .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
1577
+ .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
1638
1578
  width: 12.5% !important;
1639
1579
  }
1640
1580
  }
@@ -1643,90 +1583,89 @@
1643
1583
  @media only screen and (max-width: 767px) {
1644
1584
  .ui.grid > .doubling.row,
1645
1585
  .ui.doubling.grid > .row {
1646
- display: block !important;
1647
1586
  margin: 0em !important;
1648
1587
  padding: 0em !important;
1649
1588
  }
1650
1589
  .ui.grid > .doubling.row > .column,
1651
1590
  .ui.doubling.grid > .row > .column {
1652
- display: inline-block !important;
1653
1591
  padding-top: 1rem !important;
1654
1592
  padding-bottom: 1rem !important;
1655
1593
  margin: 0em !important;
1594
+ box-shadow: none !important;
1656
1595
  }
1657
1596
  .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
1658
- .ui[class*="two column"].doubling:not(.stackable).grid > .column,
1659
- .ui.grid > [class*="two column"].doubling:not(.stackable).row > .column {
1597
+ .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
1598
+ .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
1660
1599
  width: 100% !important;
1661
1600
  }
1662
1601
  .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
1663
- .ui[class*="three column"].doubling:not(.stackable).grid > .column,
1664
- .ui.grid > [class*="three column"].doubling:not(.stackable).row > .column {
1602
+ .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
1603
+ .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
1665
1604
  width: 50% !important;
1666
1605
  }
1667
1606
  .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
1668
- .ui[class*="four column"].doubling:not(.stackable).grid > .column,
1669
- .ui.grid > [class*="four column"].doubling:not(.stackable).row > .column {
1607
+ .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
1608
+ .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
1670
1609
  width: 50% !important;
1671
1610
  }
1672
1611
  .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
1673
- .ui[class*="five column"].doubling:not(.stackable).grid > .column,
1674
- .ui.grid > [class*="five column"].doubling:not(.stackable).row > .column {
1612
+ .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
1613
+ .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
1675
1614
  width: 50% !important;
1676
1615
  }
1677
1616
  .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
1678
- .ui[class*="six column"].doubling:not(.stackable).grid > .column,
1679
- .ui.grid > [class*="six column"].doubling:not(.stackable).row > .column {
1617
+ .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
1618
+ .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
1680
1619
  width: 50% !important;
1681
1620
  }
1682
1621
  .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
1683
- .ui[class*="seven column"].doubling:not(.stackable).grid > .column,
1684
- .ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column {
1622
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
1623
+ .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
1685
1624
  width: 50% !important;
1686
1625
  }
1687
1626
  .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
1688
- .ui[class*="eight column"].doubling:not(.stackable).grid > .column,
1689
- .ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column {
1627
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
1628
+ .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
1690
1629
  width: 50% !important;
1691
1630
  }
1692
1631
  .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
1693
- .ui[class*="nine column"].doubling:not(.stackable).grid > .column,
1694
- .ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column {
1632
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
1633
+ .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
1695
1634
  width: 33.33333333% !important;
1696
1635
  }
1697
1636
  .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
1698
- .ui[class*="ten column"].doubling:not(.stackable).grid > .column,
1699
- .ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column {
1637
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
1638
+ .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
1700
1639
  width: 33.33333333% !important;
1701
1640
  }
1702
1641
  .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
1703
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .column,
1704
- .ui.grid > [class*="eleven column"].doubling:not(.stackable).row > .column {
1642
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
1643
+ .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
1705
1644
  width: 33.33333333% !important;
1706
1645
  }
1707
1646
  .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
1708
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .column,
1709
- .ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column {
1647
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
1648
+ .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
1710
1649
  width: 33.33333333% !important;
1711
1650
  }
1712
1651
  .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
1713
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column,
1714
- .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row > .column {
1652
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
1653
+ .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
1715
1654
  width: 33.33333333% !important;
1716
1655
  }
1717
1656
  .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
1718
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column,
1719
- .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column {
1657
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
1658
+ .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
1720
1659
  width: 25% !important;
1721
1660
  }
1722
1661
  .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
1723
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column,
1724
- .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row > .column {
1662
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
1663
+ .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
1725
1664
  width: 25% !important;
1726
1665
  }
1727
1666
  .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
1728
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column,
1729
- .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column {
1667
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
1668
+ .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
1730
1669
  width: 25% !important;
1731
1670
  }
1732
1671
  }
@@ -1737,31 +1676,32 @@
1737
1676
 
1738
1677
  @media only screen and (max-width: 767px) {
1739
1678
  .ui.stackable.grid {
1740
- display: block !important;
1741
1679
  width: auto;
1742
- margin-left: 0em !important;
1743
- margin-right: 0em !important;
1744
- padding: 0em;
1745
1680
  }
1746
1681
  .ui.stackable.grid > .row > .wide.column,
1747
1682
  .ui.stackable.grid > .wide.column,
1748
1683
  .ui.stackable.grid > .column.grid > .column,
1749
1684
  .ui.stackable.grid > .column.row > .column,
1750
1685
  .ui.stackable.grid > .row > .column,
1751
- .ui.stackable.grid > .column:not(.row) {
1752
- display: block !important;
1753
- width: auto !important;
1686
+ .ui.stackable.grid > .column:not(.row),
1687
+ .ui.grid > .stackable.stackable.row > .column {
1688
+ width: 100% !important;
1754
1689
  margin: 0em 0em !important;
1755
1690
  box-shadow: none !important;
1756
- float: none !important;
1757
1691
  padding: 1rem 1rem !important;
1758
1692
  }
1759
- .ui.stackable.grid > .row {
1760
- display: block !important;
1693
+ .ui.stackable.grid:not(.vertically) > .row {
1761
1694
  margin: 0em;
1762
1695
  padding: 0em;
1763
1696
  }
1764
1697
 
1698
+ /* Coupling */
1699
+ .ui.container > .ui.stackable.grid > .column,
1700
+ .ui.container > .ui.stackable.grid > .row > .column {
1701
+ padding-left: 0em !important;
1702
+ padding-right: 0em !important;
1703
+ }
1704
+
1765
1705
  /* Don't pad inside segment or nested grid */
1766
1706
  .ui.grid .ui.stackable.grid,
1767
1707
  .ui.segment:not(.vertical) .ui.stackable.page.grid {
@@ -1769,11 +1709,6 @@
1769
1709
  margin-right: -1rem !important;
1770
1710
  }
1771
1711
 
1772
- /* Equal Height Stackable */
1773
- .ui[class*="equal height"].stackable.page.grid {
1774
- display: block !important;
1775
- }
1776
-
1777
1712
  /* Divided Stackable */
1778
1713
  .ui.stackable.divided.grid > .row:first-child > .column:first-child,
1779
1714
  .ui.stackable.celled.grid > .row:first-child > .column:first-child,
@@ -1785,17 +1720,22 @@
1785
1720
  .ui.inverted.stackable.divided.grid > .column:not(.row),
1786
1721
  .ui.inverted.stackable.celled.grid > .row > .column,
1787
1722
  .ui.inverted.stackable.divided.grid > .row > .column {
1788
- border-top: 1px solid rgba(255, 255, 255, 0.2);
1723
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
1789
1724
  }
1790
1725
  .ui.stackable.celled.grid > .column:not(.row),
1791
- .ui.stackable.divided.grid > .column:not(.row),
1726
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1792
1727
  .ui.stackable.celled.grid > .row > .column,
1793
- .ui.stackable.divided.grid > .row > .column {
1794
- border-top: 1px solid rgba(39, 41, 43, 0.15);
1728
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
1729
+ border-top: 1px solid rgba(34, 36, 38, 0.15);
1795
1730
  box-shadow: none !important;
1796
1731
  padding-top: 2rem !important;
1797
1732
  padding-bottom: 2rem !important;
1798
1733
  }
1734
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1735
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
1736
+ padding-left: 0em !important;
1737
+ padding-right: 0em !important;
1738
+ }
1799
1739
  }
1800
1740
 
1801
1741
  /*----------------------
@@ -1819,6 +1759,18 @@
1819
1759
  .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
1820
1760
  display: none !important;
1821
1761
  }
1762
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1763
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1764
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1765
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1766
+ display: none !important;
1767
+ }
1768
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1769
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1770
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1771
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1772
+ display: none !important;
1773
+ }
1822
1774
  }
1823
1775
 
1824
1776
  /* Tablet Only Hide */
@@ -1835,10 +1787,72 @@
1835
1787
  .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
1836
1788
  display: none !important;
1837
1789
  }
1790
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1791
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1792
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1793
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1794
+ display: none !important;
1795
+ }
1796
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1797
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1798
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1799
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1800
+ display: none !important;
1801
+ }
1838
1802
  }
1839
1803
 
1840
1804
  /* Computer Only Hide */
1841
- @media only screen and (min-width: 992px) {
1805
+ @media only screen and (min-width: 992px) and (max-width: 1199px) {
1806
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1807
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1808
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1809
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1810
+ display: none !important;
1811
+ }
1812
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1813
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1814
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1815
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1816
+ display: none !important;
1817
+ }
1818
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1819
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1820
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1821
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1822
+ display: none !important;
1823
+ }
1824
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1825
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1826
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1827
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1828
+ display: none !important;
1829
+ }
1830
+ }
1831
+
1832
+ /* Large Screen Only Hide */
1833
+ @media only screen and (min-width: 1200px) and (max-width: 1919px) {
1834
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1835
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1836
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1837
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1838
+ display: none !important;
1839
+ }
1840
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1841
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1842
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1843
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1844
+ display: none !important;
1845
+ }
1846
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1847
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1848
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1849
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1850
+ display: none !important;
1851
+ }
1852
+ }
1853
+
1854
+ /* Widescreen Only Hide */
1855
+ @media only screen and (min-width: 1920px) {
1842
1856
  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1843
1857
  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1844
1858
  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),