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.

661 lines
15 KiB

11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Grid
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Grid
  13. *******************************/
  14. .ui.grid {
  15. display: block;
  16. text-align: right;
  17. font-size: 0em;
  18. margin: 0% -1.5%;
  19. padding: 0%;
  20. -webkit-box-sizing: border-box;
  21. -moz-box-sizing: border-box;
  22. -ms-box-sizing: border-box;
  23. box-sizing: border-box;
  24. }
  25. body > .ui.grid {
  26. margin-right: 0% !important;
  27. margin-left: 0% !important;
  28. }
  29. .ui.grid:after,
  30. .ui.row:after {
  31. content: ".";
  32. display: block;
  33. height: 0;
  34. clear: both;
  35. visibility: hidden;
  36. }
  37. /*-------------------
  38. Columns
  39. --------------------*/
  40. .ui.grid > .column,
  41. .ui.grid > .row > .column {
  42. display: inline-block;
  43. text-align: right;
  44. font-size: 1rem;
  45. padding-right: 1.5%;
  46. padding-left: 1.5%;
  47. -webkit-box-sizing: border-box;
  48. -moz-box-sizing: border-box;
  49. -ms-box-sizing: border-box;
  50. box-sizing: border-box;
  51. vertical-align: top;
  52. }
  53. /*-------------------
  54. Rows
  55. --------------------*/
  56. .ui.grid > .row {
  57. display: block;
  58. width: 100% !important;
  59. margin-top: 1.5%;
  60. padding: 1.5% 0% 0%;
  61. font-size: 0rem;
  62. }
  63. .ui.grid > .row:first-child {
  64. padding-top: 0rem;
  65. margin-top: 0rem;
  66. }
  67. /*-------------------
  68. Content
  69. --------------------*/
  70. .ui.grid > .row > img,
  71. .ui.grid > .row > .column > img {
  72. max-width: 100%;
  73. }
  74. .ui.grid .column > .ui.segment:only-child {
  75. margin: 0em;
  76. }
  77. /*******************************
  78. Variations
  79. *******************************/
  80. /*-----------------------
  81. Page Grid (Responsive)
  82. -------------------------*/
  83. .ui.page.grid {
  84. min-width: 320px;
  85. margin-right: 0%;
  86. margin-left: 0%;
  87. }
  88. @media only screen and (max-width : 998px) {
  89. .ui.page.grid {
  90. padding: 0% 4%;
  91. }
  92. }
  93. @media only screen and (min-width : 998px) {
  94. .ui.page.grid {
  95. padding: 0% 8%;
  96. }
  97. }
  98. @media only screen and (min-width : 1500px) {
  99. .ui.page.grid {
  100. padding: 0% 13%;
  101. }
  102. }
  103. @media only screen and (min-width : 1750px) {
  104. .ui.page.grid {
  105. padding: 0% 18%;
  106. }
  107. }
  108. @media only screen and (min-width : 2000px) {
  109. .ui.page.grid {
  110. padding: 0% 23%;
  111. }
  112. }
  113. /*-------------------
  114. Column Width
  115. --------------------*/
  116. /* Sizing Combinations */
  117. .ui.grid > .row > .one.wide.column,
  118. .ui.grid > .one.wide.column {
  119. width: 6.25%;
  120. }
  121. .ui.grid > .row > .two.wide.column,
  122. .ui.grid > .two.wide.column {
  123. width: 12.5%;
  124. }
  125. .ui.grid > .row > .three.wide.column,
  126. .ui.grid > .three.wide.column {
  127. width: 18.75%;
  128. }
  129. .ui.grid > .row > .four.wide.column,
  130. .ui.grid > .four.wide.column {
  131. width: 25%;
  132. }
  133. .ui.grid > .row > .five.wide.column,
  134. .ui.grid > .five.wide.column {
  135. width: 31.25%;
  136. }
  137. .ui.grid > .row > .six.wide.column,
  138. .ui.grid > .six.wide.column {
  139. width: 37.5%;
  140. }
  141. .ui.grid > .row > .seven.wide.column,
  142. .ui.grid > .seven.wide.column {
  143. width: 43.75%;
  144. }
  145. .ui.grid > .row > .eight.wide.column,
  146. .ui.grid > .eight.wide.column {
  147. width: 50%;
  148. }
  149. .ui.grid > .row > .nine.wide.column,
  150. .ui.grid > .nine.wide.column {
  151. width: 56.25%;
  152. }
  153. .ui.grid > .row > .ten.wide.column,
  154. .ui.grid > .ten.wide.column {
  155. width: 62.5%;
  156. }
  157. .ui.grid > .row > .eleven.wide.column,
  158. .ui.grid > .eleven.wide.column {
  159. width: 68.75%;
  160. }
  161. .ui.grid > .row > .twelve.wide.column,
  162. .ui.grid > .twelve.wide.column {
  163. width: 75%;
  164. }
  165. .ui.grid > .row > .thirteen.wide.column,
  166. .ui.grid > .thirteen.wide.column {
  167. width: 81.25%;
  168. }
  169. .ui.grid > .row > .fourteen.wide.column,
  170. .ui.grid > .fourteen.wide.column {
  171. width: 87.5%;
  172. }
  173. .ui.grid > .row > .fifteen.wide.column,
  174. .ui.grid > .fifteen.wide.column {
  175. width: 93.75%;
  176. }
  177. .ui.grid > .row > .sixteen.wide.column,
  178. .ui.grid > .sixteen.wide.column {
  179. width: 100%;
  180. }
  181. /*-------------------
  182. Column Count
  183. --------------------*/
  184. /* Standard */
  185. .ui.grid > .column,
  186. .ui.grid > .row > .column {
  187. width: 6.25%;
  188. }
  189. /* Assume full width with one column */
  190. .ui.one.column.grid > .row > .column,
  191. .ui.one.column.grid > .column,
  192. .ui.grid > .one.column.row > .column {
  193. width: 100%;
  194. }
  195. .ui.two.column.grid > .row > .column,
  196. .ui.two.column.grid > .column,
  197. .ui.grid > .two.column.row > .column {
  198. width: 50%;
  199. }
  200. .ui.three.column.grid > .row > .column,
  201. .ui.three.column.grid > .column,
  202. .ui.grid > .three.column.row > .column {
  203. width: 33.3333%;
  204. }
  205. .ui.four.column.grid > .row > .column,
  206. .ui.four.column.grid > .column,
  207. .ui.grid > .four.column.row > .column {
  208. width: 25%;
  209. }
  210. .ui.five.column.grid > .row > .column,
  211. .ui.five.column.grid > .column,
  212. .ui.grid > .five.column.row > .column {
  213. width: 20%;
  214. }
  215. .ui.six.column.grid > .row > .column,
  216. .ui.six.column.grid > .column,
  217. .ui.grid > .six.column.row > .column {
  218. width: 16.66667%;
  219. }
  220. .ui.seven.column.grid > .row > .column,
  221. .ui.seven.column.grid > .column,
  222. .ui.grid > .seven.column.row > .column {
  223. width: 14.2857%;
  224. }
  225. .ui.eight.column.grid > .row > .column,
  226. .ui.eight.column.grid > .column,
  227. .ui.grid > .eight.column.row > .column {
  228. width: 12.5%;
  229. }
  230. .ui.nine.column.grid > .row > .column,
  231. .ui.nine.column.grid > .column,
  232. .ui.grid > .nine.column.row > .column {
  233. width: 11.1111%;
  234. }
  235. .ui.ten.column.grid > .row > .column,
  236. .ui.ten.column.grid > .column,
  237. .ui.grid > .ten.column.row > .column {
  238. width: 10%;
  239. }
  240. .ui.eleven.column.grid > .row > .column,
  241. .ui.eleven.column.grid > .column,
  242. .ui.grid > .eleven.column.row > .column {
  243. width: 9.0909%;
  244. }
  245. .ui.twelve.column.grid > .row > .column,
  246. .ui.twelve.column.grid > .column,
  247. .ui.grid > .twelve.column.row > .column {
  248. width: 8.3333%;
  249. }
  250. .ui.thirteen.column.grid > .row > .column,
  251. .ui.thirteen.column.grid > .column,
  252. .ui.grid > .thirteen.column.row > .column {
  253. width: 7.6923%;
  254. }
  255. .ui.fourteen.column.grid > .row > .column,
  256. .ui.fourteen.column.grid > .column,
  257. .ui.grid > .fourteen.column.row > .column {
  258. width: 7.1428%;
  259. }
  260. .ui.fifteen.column.grid > .row > .column,
  261. .ui.fifteen.column.grid > .column,
  262. .ui.grid > .fifteen.column.row > .column {
  263. width: 6.6666%;
  264. }
  265. .ui.sixteen.column.grid > .row > .column,
  266. .ui.sixteen.column.grid > .column,
  267. .ui.grid > .sixteen.column.row > .column {
  268. width: 6.25%;
  269. }
  270. /* Assume full width with one column */
  271. .ui.grid > .column:only-child,
  272. .ui.grid > .row > .column:only-child {
  273. width: 100%;
  274. }
  275. /*----------------------
  276. Relaxed
  277. -----------------------*/
  278. .ui.relaxed.grid {
  279. margin: 0% -2.5%;
  280. }
  281. .ui.relaxed.grid > .column,
  282. .ui.relaxed.grid > .row > .column {
  283. padding-right: 2.5%;
  284. padding-left: 2.5%;
  285. }
  286. /*----------------------
  287. "Floated"
  288. -----------------------*/
  289. .ui.grid .left.floated.column {
  290. float: right;
  291. }
  292. .ui.grid .right.floated.column {
  293. float: left;
  294. }
  295. /*----------------------
  296. Divided
  297. -----------------------*/
  298. .ui.divided.grid,
  299. .ui.divided.grid > .row {
  300. display: table;
  301. width: 100%;
  302. margin-right: 0% !important;
  303. margin-left: 0% !important;
  304. }
  305. .ui.divided.grid > .column:not(.row),
  306. .ui.divided.grid > .row > .column {
  307. display: table-cell;
  308. -webkit-box-shadow:
  309. -1px 0px 0px 0px rgba(0, 0, 0, 0.1),
  310. -2px 0px 0px 0px rgba(255, 255, 255, 0.8)
  311. ;
  312. -moz-box-shadow:
  313. -1px 0px 0px 0px rgba(0, 0, 0, 0.1),
  314. -2px 0px 0px 0px rgba(255, 255, 255, 0.8)
  315. ;
  316. box-shadow:
  317. -1px 0px 0px 0px rgba(0, 0, 0, 0.1),
  318. -2px 0px 0px 0px rgba(255, 255, 255, 0.8)
  319. ;
  320. }
  321. .ui.divided.grid > .column.row {
  322. display: table;
  323. }
  324. .ui.divided.grid > .column:first-child,
  325. .ui.divided.grid > .row > .column:first-child {
  326. -webkit-box-shadow: none;
  327. -moz-box-shadow: none;
  328. box-shadow: none;
  329. }
  330. /* Vertically Divided */
  331. .ui.vertically.divided.grid > .row {
  332. -webkit-box-shadow:
  333. 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
  334. 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important
  335. ;
  336. -moz-box-shadow:
  337. 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
  338. 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important
  339. ;
  340. box-shadow:
  341. 0px -1px 0px 0px rgba(0, 0, 0, 0.1),
  342. 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important
  343. ;
  344. }
  345. .ui.vertically.divided.grid > .row > .column,
  346. .ui.vertically.divided.grid > .column:not(.row),
  347. .ui.vertically.divided.grid > .row:first-child {
  348. -webkit-box-shadow: none !important;
  349. -moz-box-shadow: none !important;
  350. box-shadow: none !important;
  351. }
  352. /*----------------------
  353. Celled
  354. -----------------------*/
  355. .ui.celled.grid {
  356. display: table;
  357. width: 100%;
  358. margin-right: 0% !important;
  359. margin-left: 0% !important;
  360. -webkit-box-shadow: 0px 0px 0px 1px #DFDFDF;
  361. -moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
  362. box-shadow: 0px 0px 0px 1px #DFDFDF;
  363. }
  364. .ui.celled.grid > .row,
  365. .ui.celled.grid > .column.row,
  366. .ui.celled.grid > .column.row:first-child {
  367. display: table;
  368. width: 100%;
  369. margin-top: 0em;
  370. padding-top: 0em;
  371. -webkit-box-shadow: 0px -1px 0px 0px #DFDFDF;
  372. -moz-box-shadow: 0px -1px 0px 0px #DFDFDF;
  373. box-shadow: 0px -1px 0px 0px #DFDFDF;
  374. }
  375. .ui.celled.grid > .column:not(.row),
  376. .ui.celled.grid > .row > .column {
  377. display: table-cell;
  378. padding: 0.75em;
  379. -webkit-box-shadow: -1px 0px 0px 0px #DFDFDF;
  380. -moz-box-shadow: -1px 0px 0px 0px #DFDFDF;
  381. box-shadow: -1px 0px 0px 0px #DFDFDF;
  382. }
  383. .ui.celled.grid > .column:first-child,
  384. .ui.celled.grid > .row > .column:first-child {
  385. -webkit-box-shadow: none;
  386. -moz-box-shadow: none;
  387. box-shadow: none;
  388. }
  389. .ui.celled.page.grid {
  390. -webkit-box-shadow: none;
  391. -moz-box-shadow: none;
  392. box-shadow: none;
  393. }
  394. /*----------------------
  395. Horizontally Centered
  396. -----------------------*/
  397. /* Vertical Centered */
  398. .ui.left.aligned.grid,
  399. .ui.left.aligned.grid > .row > .column,
  400. .ui.left.aligned.grid > .column,
  401. .ui.grid .left.aligned.column,
  402. .ui.grid > .left.aligned.row > .column {
  403. text-align: right;
  404. }
  405. .ui.center.aligned.grid,
  406. .ui.center.aligned.grid > .row > .column,
  407. .ui.center.aligned.grid > .column,
  408. .ui.grid .center.aligned.column,
  409. .ui.grid > .center.aligned.row > .column {
  410. text-align: center;
  411. }
  412. .ui.right.aligned.grid,
  413. .ui.right.aligned.grid > .row > .column,
  414. .ui.right.aligned.grid > .column,
  415. .ui.grid .right.aligned.column,
  416. .ui.grid > .right.aligned.row > .column {
  417. text-align: left;
  418. }
  419. /*----------------------
  420. Vertically Centered
  421. -----------------------*/
  422. /* Vertical Centered */
  423. .ui.top.aligned.grid,
  424. .ui.top.aligned.grid > .row > .column,
  425. .ui.top.aligned.grid > .column,
  426. .ui.grid .top.aligned.column,
  427. .ui.grid > .top.aligned.row > .column {
  428. vertical-align: top;
  429. }
  430. .ui.middle.aligned.grid,
  431. .ui.middle.aligned.grid > .row > .column,
  432. .ui.middle.aligned.grid > .column,
  433. .ui.grid .middle.aligned.column,
  434. .ui.grid > .middle.aligned.row > .column {
  435. vertical-align: middle;
  436. }
  437. .ui.bottom.aligned.grid,
  438. .ui.bottom.aligned.grid > .row > .column,
  439. .ui.bottom.aligned.grid > .column,
  440. .ui.grid .bottom.aligned.column,
  441. .ui.grid > .bottom.aligned.row > .column {
  442. vertical-align: bottom;
  443. }
  444. /*----------------------
  445. Equal Height Columns
  446. -----------------------*/
  447. .ui.grid > .equal.height.row {
  448. display: table;
  449. width: 100%;
  450. }
  451. .ui.grid > .equal.height.row > .column {
  452. display: table-cell;
  453. }
  454. /*----------------------
  455. Only (Device)
  456. -----------------------*/
  457. /* Mobile Only */
  458. @media only screen and (max-width : 768px) {
  459. .ui.mobile.only.grid,
  460. .ui.grid > .mobile.only.row {
  461. display: block !important;
  462. }
  463. .ui.grid > .row > .mobile.only.column {
  464. display: inline-block !important;
  465. }
  466. .ui.divided.mobile.only.grid,
  467. .ui.celled.mobile.only.grid,
  468. .ui.divided.mobile.only.grid .row,
  469. .ui.celled.mobile.only.grid .row,
  470. .ui.divided.grid .mobile.only.row,
  471. .ui.celled.grid .mobile.only.row,
  472. .ui.grid .mobile.only.equal.height.row,
  473. .ui.mobile.only.grid .equal.height.row {
  474. display: table !important;
  475. }
  476. .ui.divided.grid > .row > .mobile.only.column,
  477. .ui.celled.grid > .row > .mobile.only.column,
  478. .ui.divided.mobile.only.grid > .row > .column,
  479. .ui.celled.mobile.only.grid > .row > .column,
  480. .ui.divided.mobile.only.grid > .column,
  481. .ui.celled.mobile.only.grid > .column {
  482. display: table-cell !important;
  483. }
  484. }
  485. @media only screen and (min-width : 768px) {
  486. .ui.mobile.only.grid,
  487. .ui.grid > .mobile.only.row,
  488. .ui.grid > .mobile.only.column,
  489. .ui.grid > .row > .mobile.only.column {
  490. display: none;
  491. }
  492. }
  493. /* Tablet Only */
  494. @media only screen and (min-width : 768px) and (max-width : 998px) {
  495. .ui.tablet.only.grid,
  496. .ui.grid > .tablet.only.row {
  497. display: block !important;
  498. }
  499. .ui.grid > .row > .tablet.only.column {
  500. display: inline-block !important;
  501. }
  502. .ui.divided.tablet.only.grid,
  503. .ui.celled.tablet.only.grid,
  504. .ui.divided.tablet.only.grid .row,
  505. .ui.celled.tablet.only.grid .row,
  506. .ui.divided.grid .tablet.only.row,
  507. .ui.celled.grid .tablet.only.row,
  508. .ui.grid .tablet.only.equal.height.row,
  509. .ui.tablet.only.grid .equal.height.row {
  510. display: table !important;
  511. }
  512. .ui.divided.grid > .row > .tablet.only.column,
  513. .ui.celled.grid > .row > .tablet.only.column,
  514. .ui.divided.tablet.only.grid > .row > .column,
  515. .ui.celled.tablet.only.grid > .row > .column,
  516. .ui.divided.tablet.only.grid > .column,
  517. .ui.celled.tablet.only.grid > .column {
  518. display: table-cell !important;
  519. }
  520. }
  521. @media only screen and (max-width : 768px), (min-width: 998px) {
  522. .ui.tablet.only.grid,
  523. .ui.grid > .tablet.only.row,
  524. .ui.grid > .tablet.only.column,
  525. .ui.grid > .row > .tablet.only.column {
  526. display: none;
  527. }
  528. }
  529. /* Computer Only */
  530. @media only screen and (min-width : 998px) {
  531. .ui.computer.only.grid,
  532. .ui.grid > .computer.only.row {
  533. display: block !important;
  534. }
  535. .ui.grid > .row > .computer.only.column {
  536. display: inline-block !important;
  537. }
  538. .ui.divided.computer.only.grid,
  539. .ui.celled.computer.only.grid,
  540. .ui.divided.computer.only.grid .row,
  541. .ui.celled.computer.only.grid .row,
  542. .ui.divided.grid .computer.only.row,
  543. .ui.celled.grid .computer.only.row,
  544. .ui.grid .computer.only.equal.height.row,
  545. .ui.computer.only.grid .equal.height.row {
  546. display: table !important;
  547. }
  548. .ui.divided.grid > .row > .computer.only.column,
  549. .ui.celled.grid > .row > .computer.only.column,
  550. .ui.divided.computer.only.grid > .row > .column,
  551. .ui.celled.computer.only.grid > .row > .column,
  552. .ui.divided.computer.only.grid > .column,
  553. .ui.celled.computer.only.grid > .column {
  554. display: table-cell !important;
  555. }
  556. }
  557. @media only screen and (max-width : 998px) {
  558. .ui.computer.only.grid,
  559. .ui.grid > .computer.only.row,
  560. .ui.grid > .computer.only.column,
  561. .ui.grid > .row > .computer.only.column {
  562. display: none;
  563. }
  564. }
  565. /*-------------------
  566. Stackable
  567. --------------------*/
  568. @media only screen and (max-width : 768px) {
  569. .ui.stackable.grid {
  570. display: block !important;
  571. padding: 0em;
  572. }
  573. .ui.stackable.grid > .row > .column,
  574. .ui.stackable.grid > .column {
  575. display: block !important;
  576. width: auto !important;
  577. margin: 1.5em 5% 0em !important;
  578. padding: 1.5em 0em 0em !important;
  579. -webkit-box-shadow: none !important;
  580. -moz-box-shadow: none !important;
  581. box-shadow: none !important;
  582. }
  583. .ui.stackable.divided.grid .column,
  584. .ui.stackable.celled.grid .column {
  585. border-top: 1px dotted rgba(0, 0, 0, 0.1);
  586. }
  587. .ui.stackable.grid > .row:first-child > .column:first-child,
  588. .ui.stackable.grid > .column:first-child {
  589. margin-top: 0em !important;
  590. padding-top: 0em !important;
  591. }
  592. .ui.stackable.divided.grid > .row:first-child > .column:first-child,
  593. .ui.stackable.celled.grid > .row:first-child > .column:first-child,
  594. .ui.stackable.divided.grid > .column:first-child,
  595. .ui.stackable.celled.grid > .column:first-child {
  596. border-top: none !important;
  597. }
  598. /* Remove pointers from vertical menus */
  599. .ui.stackable.grid .vertical.pointing.menu .item:after {
  600. display: none;
  601. }
  602. }