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.

1035 lines
28 KiB

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