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.

1044 lines
27 KiB

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