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.

1009 lines
27 KiB

10 years ago
10 years ago
11 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Grid
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Default
  38. -------------------*/
  39. /*******************************
  40. Global Variables
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Page
  47. --------------------*/
  48. /*-------------------
  49. Breakpoints
  50. --------------------*/
  51. /*-------------------
  52. Fonts
  53. --------------------*/
  54. /*-------------------
  55. Icons
  56. --------------------*/
  57. /* Max Width of Icon */
  58. /*-------------------
  59. Easing
  60. --------------------*/
  61. /*******************************
  62. BG Colors
  63. *******************************/
  64. /*******************************
  65. Colors
  66. *******************************/
  67. /*--- Colors ---*/
  68. /*--- Neutrals ---*/
  69. /*--- Text Colors ---*/
  70. /* Preserve */
  71. /* Adjust for Legibility */
  72. /*--- Backgrounds ---*/
  73. /*-------------------
  74. Emotive Colors
  75. --------------------*/
  76. /* Positive / Negative */
  77. /* Messages */
  78. /*-------------------
  79. Text Colors
  80. --------------------*/
  81. /*-------------------
  82. Brand Colors
  83. --------------------*/
  84. /*-------------------
  85. Borders
  86. --------------------*/
  87. /*-------------------
  88. Sizes
  89. --------------------*/
  90. /*-------------------
  91. Transitions
  92. --------------------*/
  93. /*******************************
  94. States
  95. *******************************/
  96. /*-------------------
  97. Disabled
  98. --------------------*/
  99. /*-------------------
  100. Hover
  101. --------------------*/
  102. /*--- Colors ---*/
  103. /*--- Emotive ---*/
  104. /*--- Neutrals ---*/
  105. /*-------------------
  106. Down (:active)
  107. --------------------*/
  108. /*--- Colors ---*/
  109. /*--- Emotive ---*/
  110. /*--- Neutrals ---*/
  111. /*-------------------
  112. Active
  113. --------------------*/
  114. /*--- Standard ---*/
  115. /*--- Emotive ---*/
  116. /*--- Neutrals ---*/
  117. /* Inherited From Site */
  118. /*******************************
  119. Grid
  120. *******************************/
  121. /*******************************
  122. Variations
  123. *******************************/
  124. /*--------------
  125. Page
  126. ---------------*/
  127. /* Standard */
  128. /*--------------
  129. Relaxed
  130. ---------------*/
  131. /*--------------
  132. Divided
  133. ---------------*/
  134. /*--------------
  135. Celled
  136. ---------------*/
  137. /*--------------
  138. Stackable
  139. ---------------*/
  140. /*------------------
  141. Load Theme
  142. -------------------*/
  143. /*------------------
  144. Load Site
  145. -------------------*/
  146. /*******************************
  147. User Global Variables
  148. *******************************/
  149. /*******************************
  150. User Variable Overrides
  151. *******************************/
  152. /*------------------
  153. Override Mix-in
  154. -------------------*/
  155. /*******************************
  156. Standard
  157. *******************************/
  158. .ui.grid {
  159. display: block;
  160. text-align: left;
  161. font-size: 0em;
  162. margin: 0%;
  163. padding: 0%;
  164. -webkit-box-sizing: border-box;
  165. -moz-box-sizing: border-box;
  166. box-sizing: border-box;
  167. }
  168. body > .ui.grid {
  169. margin-left: 0% !important;
  170. margin-right: 0% !important;
  171. }
  172. .ui.grid:after,
  173. .ui.row:after {
  174. content: ".";
  175. display: block;
  176. height: 0;
  177. clear: both;
  178. visibility: hidden;
  179. }
  180. /*-------------------
  181. Columns
  182. --------------------*/
  183. /* Standard 16 column */
  184. .ui.grid > .column,
  185. .ui.grid > .row > .column {
  186. display: inline-block;
  187. text-align: left;
  188. font-size: 1rem;
  189. width: 6.25%;
  190. padding-left: 1.5%;
  191. padding-right: 1.5%;
  192. -webkit-box-sizing: border-box;
  193. -moz-box-sizing: border-box;
  194. box-sizing: border-box;
  195. vertical-align: top;
  196. }
  197. /*-------------------
  198. Rows
  199. --------------------*/
  200. .ui.grid > .row {
  201. display: block;
  202. width: 100% !important;
  203. margin-top: 0.5rem;
  204. padding: 0.5rem 0% 0%;
  205. font-size: 0rem;
  206. }
  207. .ui.grid > .row:first-child {
  208. padding-top: 0rem;
  209. margin-top: 0rem;
  210. }
  211. /*-------------------
  212. Columns
  213. --------------------*/
  214. /* Vertical padding when no rows */
  215. .ui.grid > .column {
  216. margin-top: 1rem;
  217. margin-bottom: 1rem;
  218. }
  219. /*-------------------
  220. Content
  221. --------------------*/
  222. .ui.grid > .row > img,
  223. .ui.grid > .row > .column > img {
  224. max-width: 100%;
  225. }
  226. .ui.grid .column > .ui.segment:only-child {
  227. margin: 0em;
  228. }
  229. /*******************************
  230. Variations
  231. *******************************/
  232. /*-----------------------
  233. Page Grid (Responsive)
  234. -------------------------*/
  235. .ui.page.grid {
  236. min-width: 320px;
  237. padding-left: 0%;
  238. padding-right: 0%;
  239. margin-left: 13%;
  240. margin-right: 13%;
  241. }
  242. @media only screen and (max-width: 767px) {
  243. .ui.page.grid {
  244. margin-left: 1em;
  245. margin-right: 1em;
  246. }
  247. }
  248. @media only screen and (min-width: 768px) {
  249. .ui.page.grid {
  250. margin-left: 8%;
  251. margin-right: 8%;
  252. }
  253. }
  254. @media only screen and (min-width: 992px) {
  255. .ui.page.grid {
  256. margin-left: 13%;
  257. margin-right: 13%;
  258. }
  259. }
  260. @media only screen and (min-width: 1400px) {
  261. .ui.page.grid {
  262. margin-left: 18%;
  263. margin-right: 18%;
  264. }
  265. }
  266. @media only screen and (min-width: 1900px) {
  267. .ui.page.grid {
  268. margin-left: 23%;
  269. margin-right: 23%;
  270. }
  271. }
  272. /*-------------------
  273. Column Count
  274. --------------------*/
  275. /* Grid Based */
  276. .ui.one.column.grid > .row > .column,
  277. .ui.one.column.grid > .column {
  278. width: 100%;
  279. }
  280. .ui.two.column.grid > .row > .column,
  281. .ui.two.column.grid > .column {
  282. width: 50%;
  283. }
  284. .ui.three.column.grid > .row > .column,
  285. .ui.three.column.grid > .column {
  286. width: 33.33333333%;
  287. }
  288. .ui.four.column.grid > .row > .column,
  289. .ui.four.column.grid > .column {
  290. width: 25%;
  291. }
  292. .ui.five.column.grid > .row > .column,
  293. .ui.five.column.grid > .column {
  294. width: 20%;
  295. }
  296. .ui.six.column.grid > .row > .column,
  297. .ui.six.column.grid > .column {
  298. width: 16.66666667%;
  299. }
  300. .ui.seven.column.grid > .row > .column,
  301. .ui.seven.column.grid > .column {
  302. width: 14.28571429%;
  303. }
  304. .ui.eight.column.grid > .row > .column,
  305. .ui.eight.column.grid > .column {
  306. width: 12.5%;
  307. }
  308. .ui.nine.column.grid > .row > .column,
  309. .ui.nine.column.grid > .column {
  310. width: 11.11111111%;
  311. }
  312. .ui.ten.column.grid > .row > .column,
  313. .ui.ten.column.grid > .column {
  314. width: 10%;
  315. }
  316. .ui.eleven.column.grid > .row > .column,
  317. .ui.eleven.column.grid > .column {
  318. width: 9.09090909%;
  319. }
  320. .ui.twelve.column.grid > .row > .column,
  321. .ui.twelve.column.grid > .column {
  322. width: 8.33333333%;
  323. }
  324. .ui.thirteen.column.grid > .row > .column,
  325. .ui.thirteen.column.grid > .column {
  326. width: 7.69230769%;
  327. }
  328. .ui.fourteen.column.grid > .row > .column,
  329. .ui.fourteen.column.grid > .column {
  330. width: 7.14285714%;
  331. }
  332. .ui.fifteen.column.grid > .row > .column,
  333. .ui.fifteen.column.grid > .column {
  334. width: 6.66666667%;
  335. }
  336. .ui.sixteen.column.grid > .row > .column,
  337. .ui.sixteen.column.grid > .column {
  338. width: 6.25%;
  339. }
  340. /* Row Based Overrides */
  341. .ui.grid > .one.column.row > .column {
  342. width: 100% !important;
  343. }
  344. .ui.grid > .two.column.row > .column {
  345. width: 50% !important;
  346. }
  347. .ui.grid > .three.column.row > .column {
  348. width: 33.33333333% !important;
  349. }
  350. .ui.grid > .four.column.row > .column {
  351. width: 25% !important;
  352. }
  353. .ui.grid > .five.column.row > .column {
  354. width: 20% !important;
  355. }
  356. .ui.grid > .six.column.row > .column {
  357. width: 16.66666667% !important;
  358. }
  359. .ui.grid > .seven.column.row > .column {
  360. width: 14.28571429% !important;
  361. }
  362. .ui.grid > .eight.column.row > .column {
  363. width: 12.5% !important;
  364. }
  365. .ui.grid > .nine.column.row > .column {
  366. width: 11.11111111% !important;
  367. }
  368. .ui.grid > .ten.column.row > .column {
  369. width: 10% !important;
  370. }
  371. .ui.grid > .eleven.column.row > .column {
  372. width: 9.09090909% !important;
  373. }
  374. .ui.grid > .twelve.column.row > .column {
  375. width: 8.33333333% !important;
  376. }
  377. .ui.grid > .thirteen.column.row > .column {
  378. width: 7.69230769% !important;
  379. }
  380. .ui.grid > .fourteen.column.row > .column {
  381. width: 7.14285714% !important;
  382. }
  383. .ui.grid > .fifteen.column.row > .column {
  384. width: 6.66666667% !important;
  385. }
  386. .ui.grid > .sixteen.column.row > .column {
  387. width: 6.25% !important;
  388. }
  389. /* Assume full width with one column */
  390. .ui.grid > .column:only-child,
  391. .ui.grid > .row > .column:only-child {
  392. width: 100%;
  393. }
  394. /*-------------------
  395. Column Width
  396. --------------------*/
  397. /* Sizing Combinations */
  398. .ui.grid > .row > .one.wide.column,
  399. .ui.grid > .column.row > .one.wide.column,
  400. .ui.grid > .one.wide.column,
  401. .ui.column.grid > .one.wide.column {
  402. width: 6.25% !important;
  403. }
  404. .ui.grid > .row > .two.wide.column,
  405. .ui.grid > .column.row > .two.wide.column,
  406. .ui.grid > .two.wide.column,
  407. .ui.column.grid > .two.wide.column {
  408. width: 12.5% !important;
  409. }
  410. .ui.grid > .row > .three.wide.column,
  411. .ui.grid > .column.row > .three.wide.column,
  412. .ui.grid > .three.wide.column,
  413. .ui.column.grid > .three.wide.column {
  414. width: 18.75% !important;
  415. }
  416. .ui.grid > .row > .four.wide.column,
  417. .ui.grid > .column.row > .four.wide.column,
  418. .ui.grid > .four.wide.column,
  419. .ui.column.grid > .four.wide.column {
  420. width: 25% !important;
  421. }
  422. .ui.grid > .row > .five.wide.column,
  423. .ui.grid > .column.row > .five.wide.column,
  424. .ui.grid > .five.wide.column,
  425. .ui.column.grid > .five.wide.column {
  426. width: 31.25% !important;
  427. }
  428. .ui.grid > .row > .six.wide.column,
  429. .ui.grid > .column.row > .six.wide.column,
  430. .ui.grid > .six.wide.column,
  431. .ui.column.grid > .six.wide.column {
  432. width: 37.5% !important;
  433. }
  434. .ui.grid > .row > .seven.wide.column,
  435. .ui.grid > .column.row > .seven.wide.column,
  436. .ui.grid > .seven.wide.column,
  437. .ui.column.grid > .seven.wide.column {
  438. width: 43.75% !important;
  439. }
  440. .ui.grid > .row > .eight.wide.column,
  441. .ui.grid > .column.row > .eight.wide.column,
  442. .ui.grid > .eight.wide.column,
  443. .ui.column.grid > .eight.wide.column {
  444. width: 50% !important;
  445. }
  446. .ui.grid > .row > .nine.wide.column,
  447. .ui.grid > .column.row > .nine.wide.column,
  448. .ui.grid > .nine.wide.column,
  449. .ui.column.grid > .nine.wide.column {
  450. width: 56.25% !important;
  451. }
  452. .ui.grid > .row > .ten.wide.column,
  453. .ui.grid > .column.row > .ten.wide.column,
  454. .ui.grid > .ten.wide.column,
  455. .ui.column.grid > .ten.wide.column {
  456. width: 62.5% !important;
  457. }
  458. .ui.grid > .row > .eleven.wide.column,
  459. .ui.grid > .column.row > .eleven.wide.column,
  460. .ui.grid > .eleven.wide.column,
  461. .ui.column.grid > .eleven.wide.column {
  462. width: 68.75% !important;
  463. }
  464. .ui.grid > .row > .twelve.wide.column,
  465. .ui.grid > .column.row > .twelve.wide.column,
  466. .ui.grid > .twelve.wide.column,
  467. .ui.column.grid > .twelve.wide.column {
  468. width: 75% !important;
  469. }
  470. .ui.grid > .row > .thirteen.wide.column,
  471. .ui.grid > .column.row > .thirteen.wide.column,
  472. .ui.grid > .thirteen.wide.column,
  473. .ui.column.grid > .thirteen.wide.column {
  474. width: 81.25% !important;
  475. }
  476. .ui.grid > .row > .fourteen.wide.column,
  477. .ui.grid > .column.row > .fourteen.wide.column,
  478. .ui.grid > .fourteen.wide.column,
  479. .ui.column.grid > .fourteen.wide.column {
  480. width: 87.5% !important;
  481. }
  482. .ui.grid > .row > .fifteen.wide.column,
  483. .ui.grid > .column.row > .fifteen.wide.column,
  484. .ui.grid > .fifteen.wide.column,
  485. .ui.column.grid > .fifteen.wide.column {
  486. width: 93.75% !important;
  487. }
  488. .ui.grid > .row > .sixteen.wide.column,
  489. .ui.grid > .column.row > .sixteen.wide.column,
  490. .ui.grid > .sixteen.wide.column,
  491. .ui.column.grid > .sixteen.wide.column {
  492. width: 100% !important;
  493. }
  494. /*----------------------
  495. Centered
  496. -----------------------*/
  497. .ui.centered.grid,
  498. .ui.centered.grid > .row,
  499. .ui.grid .centered.row {
  500. text-align: center;
  501. }
  502. /*----------------------
  503. Relaxed
  504. -----------------------*/
  505. .ui.relaxed.grid > .column:not(.row),
  506. .ui.relaxed.grid > .row > .column {
  507. padding-left: 2.5%;
  508. padding-right: 2.5%;
  509. }
  510. .ui.very.relaxed.grid > .column:not(.row),
  511. .ui.very.relaxed.grid > .row > .column {
  512. padding-left: 4%;
  513. padding-right: 4%;
  514. }
  515. /*----------------------
  516. Fitted
  517. -----------------------*/
  518. .ui.fitted.grid {
  519. margin-left: -1.5%;
  520. margin-right: -1.5%;
  521. }
  522. .ui.relaxed.fitted.grid {
  523. margin-left: -2.5%;
  524. margin-right: -2.5%;
  525. }
  526. .ui.very.relaxed.fitted.grid {
  527. margin-left: -4%;
  528. margin-right: -4%;
  529. }
  530. /*----------------------
  531. "Floated"
  532. -----------------------*/
  533. .ui.grid .left.floated.column {
  534. float: left;
  535. }
  536. .ui.grid .right.floated.column {
  537. float: right;
  538. }
  539. /*----------------------
  540. Divided
  541. -----------------------*/
  542. .ui.divided.grid:not(.vertically) > .column:not(.row),
  543. .ui.divided.grid:not(.vertically) > .row > .column {
  544. -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3);
  545. box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3);
  546. }
  547. .ui.divided.grid:not(.vertically) > .column:first-child,
  548. .ui.divided.grid:not(.vertically) > .row > .column:first-child {
  549. -webkit-box-shadow: none;
  550. box-shadow: none;
  551. }
  552. /* Divided Row */
  553. .ui.grid > .divided.row > .column {
  554. -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3);
  555. box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.3);
  556. }
  557. .ui.grid > .divided.row > .column:first-child {
  558. -webkit-box-shadow: none;
  559. box-shadow: none;
  560. }
  561. /* Vertically Divided */
  562. .ui.vertically.divided.grid > .row {
  563. position: relative;
  564. }
  565. .ui.vertically.divided.grid > .row:before {
  566. position: absolute;
  567. content: '';
  568. top: 0px;
  569. left: 0px;
  570. width: 97%;
  571. height: 1px;
  572. margin: 0% 1.5%;
  573. -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
  574. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
  575. }
  576. .ui.vertically.divided.grid > .row:first-child:before {
  577. -webkit-box-shadow: none;
  578. box-shadow: none;
  579. }
  580. /* Inverted Divided */
  581. .ui.inverted.divided.grid > .row {
  582. -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15), -2px 0px 0px 0px rgba(0, 0, 0, 0.15);
  583. box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15), -2px 0px 0px 0px rgba(0, 0, 0, 0.15);
  584. }
  585. .ui.inverted.vertically.divided.grid > .row {
  586. -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.15);
  587. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15), 0px -2px 0px 0px rgba(0, 0, 0, 0.15);
  588. }
  589. /* Relaxed */
  590. .ui.relaxed.vertically.divided.grid > .row:before {
  591. margin-left: 2.5%;
  592. margin-right: 2.5%;
  593. width: 95%;
  594. }
  595. .ui.very.relaxed.vertically.divided.grid > .row:before {
  596. margin-left: 4%;
  597. margin-right: 4%;
  598. width: 92%;
  599. }
  600. /* Fitted */
  601. /*
  602. .ui.vertically.divided.fitted.grid > .row:before {
  603. margin-left: 0%;
  604. margin-right: 0%;
  605. width: 100%;
  606. }
  607. */
  608. /*----------------------
  609. Celled
  610. -----------------------*/
  611. .ui.celled.grid {
  612. display: table;
  613. max-width: 100%;
  614. margin-left: 0%;
  615. margin-right: 0%;
  616. -webkit-box-shadow: 0px 0px 0px 1px #dddddd;
  617. box-shadow: 0px 0px 0px 1px #dddddd;
  618. }
  619. .ui.celled.grid > .row,
  620. .ui.celled.grid > .column.row,
  621. .ui.celled.grid > .column.row:first-child {
  622. display: table;
  623. width: 100%;
  624. margin-top: 0em;
  625. padding-top: 0em;
  626. -webkit-box-shadow: 0px -1px 0px 0px #dddddd;
  627. box-shadow: 0px -1px 0px 0px #dddddd;
  628. }
  629. .ui.celled.grid > .column:not(.row),
  630. .ui.celled.grid > .row > .column {
  631. display: table-cell;
  632. padding: 0.75em;
  633. -webkit-box-shadow: -1px 0px 0px 0px #dddddd;
  634. box-shadow: -1px 0px 0px 0px #dddddd;
  635. }
  636. .ui.celled.grid > .column:first-child,
  637. .ui.celled.grid > .row > .column:first-child {
  638. -webkit-box-shadow: none;
  639. box-shadow: none;
  640. }
  641. .ui.celled.page.grid {
  642. -webkit-box-shadow: none;
  643. box-shadow: none;
  644. }
  645. /*----------------------
  646. Horizontally Centered
  647. -----------------------*/
  648. /* Vertical Centered */
  649. .ui.left.aligned.grid,
  650. .ui.left.aligned.grid > .row > .column,
  651. .ui.left.aligned.grid > .column,
  652. .ui.grid .left.aligned.column,
  653. .ui.grid > .left.aligned.row > .column {
  654. text-align: left;
  655. }
  656. .ui.center.aligned.grid,
  657. .ui.center.aligned.grid > .row > .column,
  658. .ui.center.aligned.grid > .column,
  659. .ui.grid .center.aligned.column,
  660. .ui.grid > .center.aligned.row > .column {
  661. text-align: center;
  662. }
  663. .ui.right.aligned.grid,
  664. .ui.right.aligned.grid > .row > .column,
  665. .ui.right.aligned.grid > .column,
  666. .ui.grid .right.aligned.column,
  667. .ui.grid > .right.aligned.row > .column {
  668. text-align: right;
  669. }
  670. .ui.justified.grid,
  671. .ui.justified.grid > .row > .column,
  672. .ui.justified.grid > .column,
  673. .ui.grid .justified.column,
  674. .ui.grid > .justified.row > .column {
  675. text-align: justify;
  676. -webkit-hyphens: auto;
  677. -moz-hyphens: auto;
  678. -ms-hyphens: auto;
  679. hyphens: auto;
  680. }
  681. /*----------------------
  682. Vertically Centered
  683. -----------------------*/
  684. /* Vertical Centered */
  685. .ui.top.aligned.grid,
  686. .ui.top.aligned.grid > .row > .column,
  687. .ui.top.aligned.grid > .column,
  688. .ui.grid .top.aligned.column,
  689. .ui.grid > .top.aligned.row > .column {
  690. vertical-align: top;
  691. }
  692. .ui.middle.aligned.grid,
  693. .ui.middle.aligned.grid > .row > .column,
  694. .ui.middle.aligned.grid > .column,
  695. .ui.grid .middle.aligned.column,
  696. .ui.grid > .middle.aligned.row > .column {
  697. vertical-align: middle;
  698. }
  699. .ui.bottom.aligned.grid,
  700. .ui.bottom.aligned.grid > .row > .column,
  701. .ui.bottom.aligned.grid > .column,
  702. .ui.grid .bottom.aligned.column,
  703. .ui.grid > .bottom.aligned.row > .column {
  704. vertical-align: bottom;
  705. }
  706. /*----------------------
  707. Equal Height Columns
  708. -----------------------*/
  709. .ui.grid > .equal.height.row,
  710. .ui.equal.height.grid {
  711. display: table;
  712. max-width: 100%;
  713. }
  714. .ui.equal.height.grid > .column,
  715. .ui.equal.height.grid > .row > .column,
  716. .ui.grid > .equal.height.row > .column {
  717. display: table-cell;
  718. }
  719. /*----------------------
  720. Only (Device)
  721. -----------------------*/
  722. /* Mobile Only */
  723. @media only screen and (max-width: 767px) {
  724. .ui.mobile.only.grid,
  725. .ui.grid > .mobile.only.row {
  726. display: block !important;
  727. }
  728. .ui.grid > .row > .mobile.only.column {
  729. display: inline-block !important;
  730. }
  731. .ui.celled.mobile.only.grid,
  732. .ui.celled.mobile.only.grid .row,
  733. .ui.celled.grid .mobile.only.row,
  734. .ui.grid .mobile.only.equal.height.row,
  735. .ui.mobile.only.grid .equal.height.row {
  736. display: table !important;
  737. }
  738. .ui.celled.grid > .row > .mobile.only.column,
  739. .ui.celled.mobile.only.grid > .row > .column,
  740. .ui.celled.mobile.only.grid > .column {
  741. display: table-cell !important;
  742. }
  743. }
  744. @media only screen and (min-width: 768px) {
  745. .ui.mobile.only.grid,
  746. .ui.grid > .mobile.only.row,
  747. .ui.grid > .mobile.only.column,
  748. .ui.grid > .row > .mobile.only.column {
  749. display: none;
  750. }
  751. }
  752. /* Tablet Only */
  753. @media only screen and (min-width: 768px) and (max-width: 991px) {
  754. .ui.tablet.only.grid,
  755. .ui.grid > .tablet.only.row {
  756. display: block !important;
  757. }
  758. .ui.grid > .row > .tablet.only.column {
  759. display: inline-block !important;
  760. }
  761. .ui.celled.tablet.only.grid,
  762. .ui.celled.tablet.only.grid .row,
  763. .ui.celled.grid .tablet.only.row,
  764. .ui.grid .tablet.only.equal.height.row,
  765. .ui.tablet.only.grid .equal.height.row {
  766. display: table !important;
  767. }
  768. .ui.celled.grid > .row > .tablet.only.column,
  769. .ui.celled.tablet.only.grid > .row > .column,
  770. .ui.celled.tablet.only.grid > .column {
  771. display: table-cell !important;
  772. }
  773. }
  774. @media only screen and (max-width: 767px), (min-width: 992px) {
  775. .ui.tablet.only.grid,
  776. .ui.grid > .tablet.only.row,
  777. .ui.grid > .tablet.only.column,
  778. .ui.grid > .row > .tablet.only.column {
  779. display: none;
  780. }
  781. }
  782. /* Computer Only */
  783. @media only screen and (min-width: 992px) {
  784. .ui.computer.only.grid,
  785. .ui.grid > .computer.only.row {
  786. display: block !important;
  787. }
  788. .ui.grid > .row > .computer.only.column {
  789. display: inline-block !important;
  790. }
  791. .ui.celled.computer.only.grid,
  792. .ui.celled.computer.only.grid .row,
  793. .ui.celled.grid .computer.only.row,
  794. .ui.grid .computer.only.equal.height.row,
  795. .ui.computer.only.grid .equal.height.row {
  796. display: table !important;
  797. }
  798. .ui.celled.grid > .row > .computer.only.column,
  799. .ui.celled.computer.only.grid > .row > .column,
  800. .ui.celled.computer.only.grid > .column {
  801. display: table-cell !important;
  802. }
  803. }
  804. @media only screen and (max-width: 991px) {
  805. .ui.computer.only.grid,
  806. .ui.grid > .computer.only.row,
  807. .ui.grid > .computer.only.column,
  808. .ui.grid > .row > .computer.only.column {
  809. display: none;
  810. }
  811. }
  812. /*-------------------
  813. Doubling
  814. --------------------*/
  815. /* Mobily Only */
  816. @media only screen and (max-width: 767px) {
  817. .ui.doubling.grid > .row {
  818. display: inline;
  819. }
  820. .ui.doubling.grid > .row > .column {
  821. margin-bottom: 1rem;
  822. }
  823. .ui.two.column.doubling.grid > .row > .column,
  824. .ui.two.column.doubling.grid > .column,
  825. .ui.grid > .two.column.doubling.row > .column {
  826. width: 100%;
  827. }
  828. .ui.three.column.doubling.grid > .row > .column,
  829. .ui.three.column.doubling.grid > .column,
  830. .ui.grid > .three.column.doubling.row > .column {
  831. width: 50%;
  832. }
  833. .ui.four.column.doubling.grid > .row > .column,
  834. .ui.four.column.doubling.grid > .column,
  835. .ui.grid > .four.column.doubling.row > .column {
  836. width: 50%;
  837. }
  838. .ui.five.column.doubling.grid > .row > .column,
  839. .ui.five.column.doubling.grid > .column,
  840. .ui.grid > .five.column.doubling.row > .column {
  841. width: 50%;
  842. }
  843. .ui.six.column.doubling.grid > .row > .column,
  844. .ui.six.column.doubling.grid > .column,
  845. .ui.grid > .six.column.doubling.row > .column {
  846. width: 50%;
  847. }
  848. .ui.seven.column.doubling.grid > .row > .column,
  849. .ui.seven.column.doubling.grid > .column,
  850. .ui.grid > .seven.column.doubling.row > .column {
  851. width: 33.33333333%;
  852. }
  853. .ui.eight.column.doubling.grid > .row > .column,
  854. .ui.eight.column.doubling.grid > .column,
  855. .ui.grid > .eight.column.doubling.row > .column {
  856. width: 33.33333333%;
  857. }
  858. .ui.nine.column.doubling.grid > .row > .column,
  859. .ui.nine.column.doubling.grid > .column,
  860. .ui.grid > .nine.column.doubling.row > .column {
  861. width: 33.33333333%;
  862. }
  863. .ui.ten.column.doubling.grid > .row > .column,
  864. .ui.ten.column.doubling.grid > .column,
  865. .ui.grid > .ten.column.doubling.row > .column {
  866. width: 33.33333333%;
  867. }
  868. .ui.twelve.column.doubling.grid > .row > .column,
  869. .ui.twelve.column.doubling.grid > .column,
  870. .ui.grid > .twelve.column.doubling.row > .column {
  871. width: 25%;
  872. }
  873. .ui.fourteen.column.doubling.grid > .row > .column,
  874. .ui.fourteen.column.doubling.grid > .column,
  875. .ui.grid > .fourteen.column.doubling.row > .column {
  876. width: 25%;
  877. }
  878. .ui.sixteen.column.doubling.grid > .row > .column,
  879. .ui.sixteen.column.doubling.grid > .column,
  880. .ui.grid > .sixteen.column.doubling.row > .column {
  881. width: 25%;
  882. }
  883. }
  884. /* Tablet Only */
  885. @media only screen and (min-width: 768px) and (max-width: 991px) {
  886. .ui.doubling.grid > .row {
  887. display: inline;
  888. }
  889. .ui.two.column.doubling.grid > .row > .column,
  890. .ui.two.column.doubling.grid > .column,
  891. .ui.grid > .two.column.doubling.row > .column {
  892. width: 100%;
  893. }
  894. .ui.three.column.doubling.grid > .row > .column,
  895. .ui.three.column.doubling.grid > .column,
  896. .ui.grid > .three.column.doubling.row > .column {
  897. width: 50%;
  898. }
  899. .ui.four.column.doubling.grid > .row > .column,
  900. .ui.four.column.doubling.grid > .column,
  901. .ui.grid > .four.column.doubling.row > .column {
  902. width: 50%;
  903. }
  904. .ui.five.column.doubling.grid > .row > .column,
  905. .ui.five.column.doubling.grid > .column,
  906. .ui.grid > .five.column.doubling.row > .column {
  907. width: 33.33333333%;
  908. }
  909. .ui.six.column.doubling.grid > .row > .column,
  910. .ui.six.column.doubling.grid > .column,
  911. .ui.grid > .six.column.doubling.row > .column {
  912. width: 33.33333333%;
  913. }
  914. .ui.eight.column.doubling.grid > .row > .column,
  915. .ui.eight.column.doubling.grid > .column,
  916. .ui.grid > .eight.column.doubling.row > .column {
  917. width: 33.33333333%;
  918. }
  919. .ui.eight.column.doubling.grid > .row > .column,
  920. .ui.eight.column.doubling.grid > .column,
  921. .ui.grid > .eight.column.doubling.row > .column {
  922. width: 25%;
  923. }
  924. .ui.nine.column.doubling.grid > .row > .column,
  925. .ui.nine.column.doubling.grid > .column,
  926. .ui.grid > .nine.column.doubling.row > .column {
  927. width: 25%;
  928. }
  929. .ui.ten.column.doubling.grid > .row > .column,
  930. .ui.ten.column.doubling.grid > .column,
  931. .ui.grid > .ten.column.doubling.row > .column {
  932. width: 20%;
  933. }
  934. .ui.twelve.column.doubling.grid > .row > .column,
  935. .ui.twelve.column.doubling.grid > .column,
  936. .ui.grid > .twelve.column.doubling.row > .column {
  937. width: 16.66666667%;
  938. }
  939. .ui.fourteen.column.doubling.grid > .row > .column,
  940. .ui.fourteen.column.doubling.grid > .column,
  941. .ui.grid > .fourteen.column.doubling.row > .column {
  942. width: 14.28571429%;
  943. }
  944. .ui.sixteen.column.doubling.grid > .row > .column,
  945. .ui.sixteen.column.doubling.grid > .column,
  946. .ui.grid > .sixteen.column.doubling.row > .column {
  947. width: 12.5%;
  948. }
  949. }
  950. /*-------------------
  951. Stackable
  952. --------------------*/
  953. @media only screen and (max-width: 767px) {
  954. .ui.stackable.grid {
  955. display: block !important;
  956. padding: 0em;
  957. margin: 0em !important;
  958. }
  959. .ui.stackable.grid > .row > .wide.column,
  960. .ui.stackable.grid > .wide.column,
  961. .ui.stackable.grid > .row > .column,
  962. .ui.stackable.grid > .column {
  963. display: block !important;
  964. width: auto !important;
  965. margin: 0.5rem 0em 0em !important;
  966. padding: 0.5rem 0em 0em !important;
  967. -webkit-box-shadow: none !important;
  968. box-shadow: none !important;
  969. }
  970. .ui.stackable.divided.grid > .column,
  971. .ui.stackable.celled.grid > .row > .column {
  972. border-top: 1px solid rgba(0, 0, 0, 0.1);
  973. }
  974. .ui.stackable.grid > .row:first-child > .column:first-child,
  975. .ui.stackable.grid > .column:first-child {
  976. margin-top: 0em !important;
  977. padding-top: 0em !important;
  978. }
  979. .ui.stackable.divided.grid > .row:first-child > .column:first-child,
  980. .ui.stackable.celled.grid > .row:first-child > .column:first-child,
  981. .ui.stackable.divided.grid > .column:first-child,
  982. .ui.stackable.celled.grid > .column:first-child {
  983. border-top: none !important;
  984. }
  985. .ui.stackable.page.grid > .row > .column,
  986. .ui.stackable.page.grid > .column {
  987. padding-left: 1.5em !important;
  988. padding-right: 1.5em !important;
  989. }
  990. /* Remove pointers from vertical menus */
  991. .ui.stackable.grid .vertical.pointing.menu .item:after {
  992. display: none;
  993. }
  994. }
  995. /*******************************
  996. Overrides
  997. *******************************/
  998. /*******************************
  999. Overrides
  1000. *******************************/