You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

589 lines
12 KiB

  1. .ui.grid {
  2. display: block;
  3. text-align: left;
  4. font-size: 0;
  5. margin: 0 -1.5%;
  6. padding: 0;
  7. -webkit-box-sizing: border-box;
  8. -moz-box-sizing: border-box;
  9. -ms-box-sizing: border-box;
  10. box-sizing: border-box;
  11. }
  12. body>.ui.grid {
  13. margin-left: 0;
  14. margin-right: 0;
  15. }
  16. .ui.grid:after,
  17. .ui.row:after {
  18. content: ".";
  19. display: block;
  20. height: 0;
  21. clear: both;
  22. visibility: hidden;
  23. }
  24. .ui.grid>.column,
  25. .ui.grid>.row>.column {
  26. display: inline-block;
  27. text-align: left;
  28. font-size: 1rem;
  29. padding-left: 1.5%;
  30. padding-right: 1.5%;
  31. -webkit-box-sizing: border-box;
  32. -moz-box-sizing: border-box;
  33. -ms-box-sizing: border-box;
  34. box-sizing: border-box;
  35. vertical-align: top;
  36. }
  37. .ui.grid>.row {
  38. display: block;
  39. width: 100%!important;
  40. margin-top: 1.5%;
  41. padding: 1.5% 0 0;
  42. font-size: 0rem;
  43. }
  44. .ui.grid>.row:first-child {
  45. padding-top: 0rem;
  46. margin-top: 0rem;
  47. }
  48. .ui.grid>.row>img,
  49. .ui.grid>.row>.column>img {
  50. max-width: 100%;
  51. }
  52. .ui.grid .column>.ui.segment:only-child {
  53. margin: 0;
  54. }
  55. .ui.page.grid {
  56. min-width: 320px;
  57. margin-left: 0;
  58. margin-right: 0;
  59. }
  60. @media only screen and (max-width:998px) {
  61. .ui.page.grid {
  62. padding: 0 4%;
  63. }
  64. }
  65. @media only screen and (min-width:998px) {
  66. .ui.page.grid {
  67. padding: 0 8%;
  68. }
  69. }
  70. @media only screen and (min-width:1500px) {
  71. .ui.page.grid {
  72. padding: 0 13%;
  73. }
  74. }
  75. @media only screen and (min-width:1750px) {
  76. .ui.page.grid {
  77. padding: 0 18%;
  78. }
  79. }
  80. @media only screen and (min-width:2000px) {
  81. .ui.page.grid {
  82. padding: 0 23%;
  83. }
  84. }
  85. .ui.grid>.row>.one.wide.column,
  86. .ui.grid>.one.wide.column {
  87. width: 6.25%;
  88. }
  89. .ui.grid>.row>.two.wide.column,
  90. .ui.grid>.two.wide.column {
  91. width: 12.5%;
  92. }
  93. .ui.grid>.row>.three.wide.column,
  94. .ui.grid>.three.wide.column {
  95. width: 18.75%;
  96. }
  97. .ui.grid>.row>.four.wide.column,
  98. .ui.grid>.four.wide.column {
  99. width: 25%;
  100. }
  101. .ui.grid>.row>.five.wide.column,
  102. .ui.grid>.five.wide.column {
  103. width: 31.25%;
  104. }
  105. .ui.grid>.row>.six.wide.column,
  106. .ui.grid>.six.wide.column {
  107. width: 37.5%;
  108. }
  109. .ui.grid>.row>.seven.wide.column,
  110. .ui.grid>.seven.wide.column {
  111. width: 43.75%;
  112. }
  113. .ui.grid>.row>.eight.wide.column,
  114. .ui.grid>.eight.wide.column {
  115. width: 50%;
  116. }
  117. .ui.grid>.row>.nine.wide.column,
  118. .ui.grid>.nine.wide.column {
  119. width: 56.25%;
  120. }
  121. .ui.grid>.row>.ten.wide.column,
  122. .ui.grid>.ten.wide.column {
  123. width: 62.5%;
  124. }
  125. .ui.grid>.row>.eleven.wide.column,
  126. .ui.grid>.eleven.wide.column {
  127. width: 68.75%;
  128. }
  129. .ui.grid>.row>.twelve.wide.column,
  130. .ui.grid>.twelve.wide.column {
  131. width: 75%;
  132. }
  133. .ui.grid>.row>.thirteen.wide.column,
  134. .ui.grid>.thirteen.wide.column {
  135. width: 81.25%;
  136. }
  137. .ui.grid>.row>.fourteen.wide.column,
  138. .ui.grid>.fourteen.wide.column {
  139. width: 87.5%;
  140. }
  141. .ui.grid>.row>.fifteen.wide.column,
  142. .ui.grid>.fifteen.wide.column {
  143. width: 93.75%;
  144. }
  145. .ui.grid>.row>.sixteen.wide.column,
  146. .ui.grid>.sixteen.wide.column {
  147. width: 100%;
  148. }
  149. .ui.grid>.column,
  150. .ui.grid>.row>.column {
  151. width: 6.25%;
  152. }
  153. .ui.one.column.grid>.row>.column,
  154. .ui.one.column.grid>.column,
  155. .ui.grid>.one.column.row>.column {
  156. width: 100%;
  157. }
  158. .ui.two.column.grid>.row>.column,
  159. .ui.two.column.grid>.column,
  160. .ui.grid>.two.column.row>.column {
  161. width: 50%;
  162. }
  163. .ui.three.column.grid>.row>.column,
  164. .ui.three.column.grid>.column,
  165. .ui.grid>.three.column.row>.column {
  166. width: 33.3333%;
  167. }
  168. .ui.four.column.grid>.row>.column,
  169. .ui.four.column.grid>.column,
  170. .ui.grid>.four.column.row>.column {
  171. width: 25%;
  172. }
  173. .ui.five.column.grid>.row>.column,
  174. .ui.five.column.grid>.column,
  175. .ui.grid>.five.column.row>.column {
  176. width: 20%;
  177. }
  178. .ui.six.column.grid>.row>.column,
  179. .ui.six.column.grid>.column,
  180. .ui.grid>.six.column.row>.column {
  181. width: 16.66667%;
  182. }
  183. .ui.seven.column.grid>.row>.column,
  184. .ui.seven.column.grid>.column,
  185. .ui.grid>.seven.column.row>.column {
  186. width: 14.2857%;
  187. }
  188. .ui.eight.column.grid>.row>.column,
  189. .ui.eight.column.grid>.column,
  190. .ui.grid>.eight.column.row>.column {
  191. width: 12.5%;
  192. }
  193. .ui.nine.column.grid>.row>.column,
  194. .ui.nine.column.grid>.column,
  195. .ui.grid>.nine.column.row>.column {
  196. width: 11.1111%;
  197. }
  198. .ui.ten.column.grid>.row>.column,
  199. .ui.ten.column.grid>.column,
  200. .ui.grid>.ten.column.row>.column {
  201. width: 10%;
  202. }
  203. .ui.eleven.column.grid>.row>.column,
  204. .ui.eleven.column.grid>.column,
  205. .ui.grid>.eleven.column.row>.column {
  206. width: 9.0909%;
  207. }
  208. .ui.twelve.column.grid>.row>.column,
  209. .ui.twelve.column.grid>.column,
  210. .ui.grid>.twelve.column.row>.column {
  211. width: 8.3333%;
  212. }
  213. .ui.thirteen.column.grid>.row>.column,
  214. .ui.thirteen.column.grid>.column,
  215. .ui.grid>.thirteen.column.row>.column {
  216. width: 7.6923%;
  217. }
  218. .ui.fourteen.column.grid>.row>.column,
  219. .ui.fourteen.column.grid>.column,
  220. .ui.grid>.fourteen.column.row>.column {
  221. width: 7.1428%;
  222. }
  223. .ui.fifteen.column.grid>.row>.column,
  224. .ui.fifteen.column.grid>.column,
  225. .ui.grid>.fifteen.column.row>.column {
  226. width: 6.6666%;
  227. }
  228. .ui.sixteen.column.grid>.row>.column,
  229. .ui.sixteen.column.grid>.column,
  230. .ui.grid>.sixteen.column.row>.column {
  231. width: 6.25%;
  232. }
  233. .ui.grid>.column:only-child,
  234. .ui.grid>.row>.column:only-child {
  235. width: 100%;
  236. }
  237. .ui.relaxed.grid {
  238. margin: 0 -2.5%;
  239. }
  240. .ui.relaxed.grid>.column,
  241. .ui.relaxed.grid>.row>.column {
  242. padding-left: 2.5%;
  243. padding-right: 2.5%;
  244. }
  245. .ui.grid .left.floated.column {
  246. float: left;
  247. }
  248. .ui.grid .right.floated.column {
  249. float: right;
  250. }
  251. .ui.divided.grid,
  252. .ui.divided.grid>.row {
  253. display: table;
  254. width: 100%;
  255. margin-left: 0!important;
  256. margin-right: 0!important;
  257. }
  258. .ui.divided.grid>.column:not(.row),
  259. .ui.divided.grid>.row>.column {
  260. display: table-cell;
  261. -webkit-box-shadow: -1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);
  262. box-shadow: -1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);
  263. }
  264. .ui.divided.grid>.column.row {
  265. display: table;
  266. }
  267. .ui.divided.grid>.column:first-child,
  268. .ui.divided.grid>.row>.column:first-child {
  269. -webkit-box-shadow: none;
  270. box-shadow: none;
  271. }
  272. .ui.vertically.divided.grid>.row {
  273. -webkit-box-shadow: 0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;
  274. box-shadow: 0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)!important;
  275. }
  276. .ui.vertically.divided.grid>.row>.column,
  277. .ui.vertically.divided.grid>.column:not(.row),
  278. .ui.vertically.divided.grid>.row:first-child {
  279. -webkit-box-shadow: none!important;
  280. box-shadow: none!important;
  281. }
  282. .ui.celled.grid {
  283. display: table;
  284. width: 100%;
  285. margin-left: 0!important;
  286. margin-right: 0!important;
  287. -webkit-box-shadow: 0 0 0 1px #DFDFDF;
  288. box-shadow: 0 0 0 1px #DFDFDF;
  289. }
  290. .ui.celled.grid>.row,
  291. .ui.celled.grid>.column.row,
  292. .ui.celled.grid>.column.row:first-child {
  293. display: table;
  294. width: 100%;
  295. margin-top: 0;
  296. padding-top: 0;
  297. -webkit-box-shadow: 0 -1px 0 0 #dfdfdf;
  298. box-shadow: 0 -1px 0 0 #dfdfdf;
  299. }
  300. .ui.celled.grid>.column:not(.row),
  301. .ui.celled.grid>.row>.column {
  302. display: table-cell;
  303. padding: .75em;
  304. -webkit-box-shadow: -1px 0 0 0 #dfdfdf;
  305. box-shadow: -1px 0 0 0 #dfdfdf;
  306. }
  307. .ui.celled.grid>.column:first-child,
  308. .ui.celled.grid>.row>.column:first-child {
  309. -webkit-box-shadow: none;
  310. box-shadow: none;
  311. }
  312. .ui.celled.page.grid {
  313. -webkit-box-shadow: none;
  314. box-shadow: none;
  315. }
  316. .ui.left.aligned.grid,
  317. .ui.left.aligned.grid>.row>.column,
  318. .ui.left.aligned.grid>.column,
  319. .ui.grid .left.aligned.column,
  320. .ui.grid>.left.aligned.row>.column {
  321. text-align: left;
  322. }
  323. .ui.center.aligned.grid,
  324. .ui.center.aligned.grid>.row>.column,
  325. .ui.center.aligned.grid>.column,
  326. .ui.grid .center.aligned.column,
  327. .ui.grid>.center.aligned.row>.column {
  328. text-align: center;
  329. }
  330. .ui.right.aligned.grid,
  331. .ui.right.aligned.grid>.row>.column,
  332. .ui.right.aligned.grid>.column,
  333. .ui.grid .right.aligned.column,
  334. .ui.grid>.right.aligned.row>.column {
  335. text-align: right;
  336. }
  337. .ui.top.aligned.grid,
  338. .ui.top.aligned.grid>.row>.column,
  339. .ui.top.aligned.grid>.column,
  340. .ui.grid .top.aligned.column,
  341. .ui.grid>.top.aligned.row>.column {
  342. vertical-align: top;
  343. }
  344. .ui.middle.aligned.grid,
  345. .ui.middle.aligned.grid>.row>.column,
  346. .ui.middle.aligned.grid>.column,
  347. .ui.grid .middle.aligned.column,
  348. .ui.grid>.middle.aligned.row>.column {
  349. vertical-align: middle;
  350. }
  351. .ui.bottom.aligned.grid,
  352. .ui.bottom.aligned.grid>.row>.column,
  353. .ui.bottom.aligned.grid>.column,
  354. .ui.grid .bottom.aligned.column,
  355. .ui.grid>.bottom.aligned.row>.column {
  356. vertical-align: bottom;
  357. }
  358. .ui.grid>.equal.height.row {
  359. display: table;
  360. width: 100%;
  361. }
  362. .ui.grid>.equal.height.row>.column {
  363. display: table-cell;
  364. }
  365. @media only screen and (max-width:768px) {
  366. .ui.mobile.only.grid,
  367. .ui.grid>.mobile.only.row {
  368. display: block!important;
  369. }
  370. .ui.grid>.row>.mobile.only.column {
  371. display: inline-block!important;
  372. }
  373. .ui.divided.mobile.only.grid,
  374. .ui.celled.mobile.only.grid,
  375. .ui.divided.mobile.only.grid .row,
  376. .ui.celled.mobile.only.grid .row,
  377. .ui.divided.grid .mobile.only.row,
  378. .ui.celled.grid .mobile.only.row,
  379. .ui.grid .mobile.only.equal.height.row,
  380. .ui.mobile.only.grid .equal.height.row {
  381. display: table!important;
  382. }
  383. .ui.divided.grid>.row>.mobile.only.column,
  384. .ui.celled.grid>.row>.mobile.only.column,
  385. .ui.divided.mobile.only.grid>.row>.column,
  386. .ui.celled.mobile.only.grid>.row>.column,
  387. .ui.divided.mobile.only.grid>.column,
  388. .ui.celled.mobile.only.grid>.column {
  389. display: table-cell!important;
  390. }
  391. }
  392. @media only screen and (min-width:768px) {
  393. .ui.mobile.only.grid,
  394. .ui.grid>.mobile.only.row,
  395. .ui.grid>.row>.mobile.only.column {
  396. display: none;
  397. }
  398. }
  399. @media only screen and (min-width:768px) and (max-width:998px) {
  400. .ui.tablet.only.grid,
  401. .ui.grid>.tablet.only.row {
  402. display: block!important;
  403. }
  404. .ui.grid>.row>.tablet.only.column {
  405. display: inline-block!important;
  406. }
  407. .ui.divided.tablet.only.grid,
  408. .ui.celled.tablet.only.grid,
  409. .ui.divided.tablet.only.grid .row,
  410. .ui.celled.tablet.only.grid .row,
  411. .ui.divided.grid .tablet.only.row,
  412. .ui.celled.grid .tablet.only.row,
  413. .ui.grid .tablet.only.equal.height.row,
  414. .ui.tablet.only.grid .equal.height.row {
  415. display: table!important;
  416. }
  417. .ui.divided.grid>.row>.tablet.only.column,
  418. .ui.celled.grid>.row>.tablet.only.column,
  419. .ui.divided.tablet.only.grid>.row>.column,
  420. .ui.celled.tablet.only.grid>.row>.column,
  421. .ui.divided.tablet.only.grid>.column,
  422. .ui.celled.tablet.only.grid>.column {
  423. display: table-cell!important;
  424. }
  425. }
  426. @media only screen and (max-width:768px),(min-width:998px) {
  427. .ui.tablet.only.grid,
  428. .ui.grid>.tablet.only.row,
  429. .ui.grid>.row>.tablet.only.column {
  430. display: none;
  431. }
  432. }
  433. @media only screen and (min-width:998px) {
  434. .ui.computer.only.grid,
  435. .ui.grid>.computer.only.row {
  436. display: block!important;
  437. }
  438. .ui.grid>.row>.computer.only.column {
  439. display: inline-block!important;
  440. }
  441. .ui.divided.computer.only.grid,
  442. .ui.celled.computer.only.grid,
  443. .ui.divided.computer.only.grid .row,
  444. .ui.celled.computer.only.grid .row,
  445. .ui.divided.grid .computer.only.row,
  446. .ui.celled.grid .computer.only.row,
  447. .ui.grid .computer.only.equal.height.row,
  448. .ui.computer.only.grid .equal.height.row {
  449. display: table!important;
  450. }
  451. .ui.divided.grid>.row>.computer.only.column,
  452. .ui.celled.grid>.row>.computer.only.column,
  453. .ui.divided.computer.only.grid>.row>.column,
  454. .ui.celled.computer.only.grid>.row>.column,
  455. .ui.divided.computer.only.grid>.column,
  456. .ui.celled.computer.only.grid>.column {
  457. display: table-cell!important;
  458. }
  459. }
  460. @media only screen and (max-width:998px) {
  461. .ui.computer.only.grid,
  462. .ui.grid>.computer.only.row,
  463. .ui.grid>.row>.computer.only.column {
  464. display: none;
  465. }
  466. }
  467. @media only screen and (max-width:768px) {
  468. .ui.stackable.grid {
  469. display: block!important;
  470. padding: 0;
  471. }
  472. .ui.stackable.grid>.row>.column,
  473. .ui.stackable.grid>.column {
  474. display: block!important;
  475. width: auto!important;
  476. margin: 1.5em 5% 0!important;
  477. padding: 1.5em 0 0!important;
  478. -webkit-box-shadow: none!important;
  479. box-shadow: none!important;
  480. }
  481. .ui.stackable.divided.grid .column,
  482. .ui.stackable.celled.grid .column {
  483. border-top: 1px dotted rgba(0,0,0,.1);
  484. }
  485. .ui.stackable.grid>.row:first-child>.column:first-child,
  486. .ui.stackable.grid>.column:first-child {
  487. margin-top: 0!important;
  488. padding-top: 0!important;
  489. }
  490. .ui.stackable.divided.grid>.row:first-child>.column:first-child,
  491. .ui.stackable.celled.grid>.row:first-child>.column:first-child,
  492. .ui.stackable.divided.grid>.column:first-child,
  493. .ui.stackable.celled.grid>.column:first-child {
  494. border-top: 0!important;
  495. }
  496. .ui.stackable.grid .vertical.pointing.menu .item:after {
  497. display: none;
  498. }
  499. }