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.

887 lines
24 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Dropdown
  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. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /*-------------------
  57. Background Colors
  58. --------------------*/
  59. /* Used for differentiating neutrals */
  60. /* Used for differentiating layers */
  61. /*-------------------
  62. Grid
  63. --------------------*/
  64. /*-------------------
  65. Breakpoints
  66. --------------------*/
  67. /*******************************
  68. Power-User
  69. *******************************/
  70. /*-------------------
  71. Icons
  72. --------------------*/
  73. /* Max Width of Icon */
  74. /*-------------------
  75. Easing
  76. --------------------*/
  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. Dropdown
  132. *******************************/
  133. /*-------------------
  134. Element
  135. --------------------*/
  136. /*-------------------
  137. Content
  138. --------------------*/
  139. /* Icon */
  140. /* Current Text */
  141. /* Menu */
  142. /* Menu Item */
  143. /* Menu Header */
  144. /* Menu Divider */
  145. /* Menu Input */
  146. /* Menu Image */
  147. /* Sub Menu Pointer Icon */
  148. /* Menu Item Icon */
  149. /* Sub Menu */
  150. /*-------------------
  151. b Types
  152. --------------------*/
  153. /* Selection */
  154. /* Hover */
  155. /* Visible */
  156. /* Visible Hover */
  157. /* Inline */
  158. /*-------------------
  159. States
  160. --------------------*/
  161. /* Default Text */
  162. /* Active Menu Item */
  163. /* Error */
  164. /*-------------------
  165. Variations
  166. --------------------*/
  167. /* Simple */
  168. /* Floating */
  169. /* Pointing */
  170. /*------------------
  171. Load Theme
  172. -------------------*/
  173. /*------------------
  174. Load Site
  175. -------------------*/
  176. /*******************************
  177. User Global Variables
  178. *******************************/
  179. /*******************************
  180. User Variable Overrides
  181. *******************************/
  182. /*------------------
  183. Override Mix-in
  184. -------------------*/
  185. /*******************************
  186. Dropdown
  187. *******************************/
  188. .ui.dropdown {
  189. cursor: pointer;
  190. position: relative;
  191. display: inline-block;
  192. line-height: 1;
  193. -webkit-transition: border-radius 0.1s ease, width 0.2s ease;
  194. transition: border-radius 0.1s ease, width 0.2s ease;
  195. tap-highlight-color: rgba(0, 0, 0, 0);
  196. outline: none;
  197. }
  198. /*******************************
  199. Content
  200. *******************************/
  201. /*--------------
  202. Menu
  203. ---------------*/
  204. .ui.dropdown .menu {
  205. cursor: auto;
  206. position: absolute;
  207. display: none;
  208. outline: none;
  209. top: 100%;
  210. margin: 0em;
  211. padding: 0em 0em;
  212. background: #ffffff;
  213. min-width: 100%;
  214. white-space: nowrap;
  215. font-size: 1rem;
  216. text-shadow: none;
  217. text-align: left;
  218. box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
  219. border: 1px solid rgba(0, 0, 0, 0.1);
  220. border-radius: 0em 0em 0.325em 0.325em;
  221. -webkit-transition: opacity 0.2s ease;
  222. transition: opacity 0.2s ease;
  223. z-index: 11;
  224. will-change: transform, opacity;
  225. }
  226. /*--------------
  227. Dropdown Icon
  228. ---------------*/
  229. .ui.dropdown > .dropdown.icon {
  230. width: auto;
  231. margin: 0em 0em 0em 1em;
  232. }
  233. .ui.dropdown .menu > .item .dropdown.icon {
  234. width: auto;
  235. float: right;
  236. margin: 0.2em 0em 0em 0.5em;
  237. }
  238. /*--------------
  239. Text
  240. ---------------*/
  241. .ui.dropdown > .text {
  242. display: inline-block;
  243. vertical-align: top;
  244. -webkit-transition: color 0.2s ease;
  245. transition: color 0.2s ease;
  246. }
  247. /*--------------
  248. Menu Item
  249. ---------------*/
  250. .ui.dropdown .menu > .item {
  251. position: relative;
  252. cursor: pointer;
  253. display: block;
  254. border: none;
  255. height: auto;
  256. border-top: none;
  257. line-height: 1.2;
  258. color: rgba(0, 0, 0, 0.8);
  259. padding: 0.65rem 1.25rem !important;
  260. font-size: 1rem;
  261. text-transform: none;
  262. font-weight: normal;
  263. box-shadow: none;
  264. -webkit-touch-callout: none;
  265. }
  266. .ui.dropdown .menu > .item:first-child {
  267. border-top: none;
  268. }
  269. /*--------------
  270. Menu Divider
  271. ---------------*/
  272. .ui.dropdown .menu > .header {
  273. margin: 1rem 0rem 0.75rem;
  274. padding: 0em 1.25rem;
  275. color: rgba(0, 0, 0, 0.85);
  276. font-size: 0.8em;
  277. font-weight: bold;
  278. text-transform: uppercase;
  279. }
  280. .ui.dropdown .menu > .divider {
  281. border-top: 1px solid rgba(0, 0, 0, 0.05);
  282. height: 0em;
  283. margin: 0.5em 0em;
  284. }
  285. .ui.dropdown .menu > .input {
  286. margin: 0.75rem 1.25rem 0.25rem;
  287. min-width: 200px;
  288. }
  289. .ui.dropdown .menu > .header + .input {
  290. margin-top: 0em;
  291. }
  292. .ui.dropdown .menu > .input:not(.transparent) input {
  293. padding: 0.5em 1em;
  294. }
  295. /*--------------
  296. Item Image
  297. ---------------*/
  298. .ui.dropdown .text > img,
  299. .ui.dropdown .text > .image,
  300. .ui.dropdown .menu > .item > .image,
  301. .ui.dropdown .menu > .item > img {
  302. display: inline-block;
  303. vertical-align: middle;
  304. width: auto;
  305. max-height: 2.5em;
  306. margin: 0em 0.75em 0em 0em;
  307. }
  308. /*--------------
  309. Sub Menu
  310. ---------------*/
  311. .ui.dropdown .menu .menu {
  312. top: 0% !important;
  313. left: 100% !important;
  314. right: auto !important;
  315. margin: 0em 0em 0em -0.5em !important;
  316. border-radius: 0em 0.325em 0.325em 0em !important;
  317. }
  318. /* Hide Arrow */
  319. .ui.dropdown .menu .menu:after {
  320. display: none;
  321. }
  322. /*******************************
  323. Coupling
  324. *******************************/
  325. /* Icons / Flags / Labels */
  326. .ui.dropdown > .text > .icon,
  327. .ui.dropdown .menu > .item .icon {
  328. margin: 0em 0.75em 0em 0em;
  329. }
  330. .ui.dropdown > .text > .label,
  331. .ui.dropdown .menu > .item .label {
  332. margin: 0em 0.75em 0em 0em;
  333. }
  334. .ui.dropdown > .text > .flag,
  335. .ui.dropdown .menu > .item .flag {
  336. margin: 0em 0.75em 0em 0em;
  337. }
  338. /* Remove Menu Item Divider */
  339. .ui.dropdown .ui.menu > .item:before,
  340. .ui.menu .ui.dropdown .menu > .item:before {
  341. display: none;
  342. }
  343. /* Prevent Menu Item Border */
  344. .ui.menu .ui.dropdown .menu .active.item {
  345. border-left: none;
  346. }
  347. /* No Margin On Icon Button */
  348. .ui.dropdown.icon.button > .dropdown.icon {
  349. margin: 0em;
  350. }
  351. /* Automatically float dropdown menu right on last menu item */
  352. .ui.menu .right.menu .dropdown:last-child .menu,
  353. .ui.buttons > .ui.dropdown:last-child .menu {
  354. left: auto;
  355. right: 0em;
  356. }
  357. /*******************************
  358. Types
  359. *******************************/
  360. /*--------------
  361. Selection
  362. ---------------*/
  363. /* Displays like a select box */
  364. .ui.selection.dropdown {
  365. cursor: pointer;
  366. word-wrap: break-word;
  367. white-space: normal;
  368. outline: 0;
  369. -webkit-transform: rotateZ(0deg);
  370. transform: rotateZ(0deg);
  371. min-width: 180px;
  372. background: #ffffff;
  373. display: inline-block;
  374. padding: 0.8em 1.1em;
  375. color: rgba(0, 0, 0, 0.8);
  376. box-shadow: none;
  377. border: 1px solid rgba(0, 0, 0, 0.1);
  378. border-radius: 0.325em;
  379. -webkit-transition: border-radius 0.1s ease, width 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
  380. transition: border-radius 0.1s ease, width 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
  381. }
  382. .ui.selection.dropdown.visible,
  383. .ui.selection.dropdown.active {
  384. z-index: 10;
  385. }
  386. select.ui.dropdown {
  387. height: 38px;
  388. padding: 0em;
  389. margin: 0em;
  390. visibility: hidden;
  391. }
  392. .ui.selection.dropdown > input[type="hidden"],
  393. .ui.selection.dropdown > select {
  394. display: none !important;
  395. }
  396. .ui.selection.dropdown > .text {
  397. margin-right: 2em;
  398. }
  399. .ui.selection.dropdown > .search.icon,
  400. .ui.selection.dropdown > .delete.icon,
  401. .ui.selection.dropdown > .dropdown.icon {
  402. position: absolute;
  403. top: auto;
  404. margin: 0em;
  405. width: auto;
  406. right: 1.1em;
  407. opacity: 0.8;
  408. -webkit-transition: opacity 0.2s ease;
  409. transition: opacity 0.2s ease;
  410. }
  411. /* Remove Selection */
  412. .ui.selection.dropdown > .delete.icon {
  413. opacity: 0.6;
  414. }
  415. .ui.selection.dropdown > .delete.icon:hover {
  416. opacity: 1;
  417. }
  418. /* Search Selection Input */
  419. .ui.selection > input.search {
  420. cursor: pointer;
  421. background: none transparent;
  422. border: none;
  423. position: absolute;
  424. top: 0em;
  425. left: 0em;
  426. width: 100%;
  427. line-height: 1.2em;
  428. padding: 0.8em 1.1em;
  429. outline: none;
  430. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  431. }
  432. .ui.selection.active > input.search,
  433. .ui.selection.visible > input.search {
  434. cursor: auto;
  435. }
  436. .ui.selection > input.search:focus + .text {
  437. color: rgba(0, 0, 0, 0.4) !important;
  438. }
  439. /* Selection Menu */
  440. .ui.selection.dropdown .menu {
  441. overflow-x: hidden;
  442. overflow-y: auto;
  443. -webkit-backface-visibility: hidden;
  444. backface-visibility: hidden;
  445. -webkit-overflow-scrolling: touch;
  446. border-top: none !important;
  447. width: auto;
  448. margin: 0px -1px;
  449. min-width: -webkit-calc(100% + 2px);
  450. min-width: calc(100% + 2px);
  451. outline: none;
  452. max-height: 245px;
  453. box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
  454. -webkit-transition: box-shadow 0.2s ease, border 0.2s ease;
  455. transition: box-shadow 0.2s ease, border 0.2s ease;
  456. }
  457. .ui.selection.dropdown .menu:after,
  458. .ui.selection.dropdown .menu:before {
  459. display: none;
  460. }
  461. .ui.selection.dropdown .menu > .item {
  462. border-top: 1px solid rgba(0, 0, 0, 0.05);
  463. padding-left: 1.1em !important;
  464. /* Add in spacing for scroll bar */
  465. padding-right: -webkit-calc(2.1em) !important;
  466. padding-right: calc(2.1em) !important;
  467. white-space: normal;
  468. word-wrap: normal;
  469. }
  470. /* Hover */
  471. .ui.selection.dropdown:hover {
  472. border-color: rgba(0, 0, 0, 0.2);
  473. box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
  474. }
  475. /* Visible Hover */
  476. .ui.selection.visible.dropdown:hover {
  477. border-color: rgba(0, 0, 0, 0.2);
  478. box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
  479. }
  480. .ui.selection.visible.dropdown:hover .menu {
  481. border: 1px solid rgba(0, 0, 0, 0.2);
  482. box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
  483. }
  484. /* Visible */
  485. .ui.selection.dropdown.visible {
  486. border-color: rgba(0, 0, 0, 0.1);
  487. box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
  488. }
  489. .ui.visible.selection.dropdown > .dropdown.icon {
  490. opacity: 1;
  491. }
  492. /* Filtered Item */
  493. .ui.selection.dropdown .filtered.text {
  494. visibility: hidden;
  495. }
  496. .ui.selection.dropdown .filtered.item {
  497. display: none;
  498. }
  499. /* Active Item */
  500. .ui.selection.active.dropdown .text:not(.default),
  501. .ui.selection.visible.dropdown .text:not(.default) {
  502. font-weight: normal;
  503. color: rgba(0, 0, 0, 0.8);
  504. }
  505. /*
  506. .ui.selection.dropdown .menu .active.item {
  507. display: none;
  508. }*/
  509. /* Connecting Border */
  510. .ui.active.selection.dropdown,
  511. .ui.visible.selection.dropdown {
  512. border-bottom-left-radius: 0em !important;
  513. border-bottom-right-radius: 0em !important;
  514. }
  515. /*--------------
  516. Inline
  517. ---------------*/
  518. .ui.inline.dropdown {
  519. cursor: pointer;
  520. display: inline-block;
  521. color: inherit;
  522. }
  523. .ui.inline.dropdown .dropdown.icon {
  524. margin: 0em 0.5em 0em 0.25em;
  525. vertical-align: top;
  526. }
  527. .ui.inline.dropdown .text {
  528. font-weight: bold;
  529. }
  530. .ui.inline.dropdown .menu {
  531. cursor: auto;
  532. margin-top: 0.25em;
  533. border-radius: 0.325em;
  534. }
  535. /*******************************
  536. States
  537. *******************************/
  538. /* Dropdown Visible */
  539. .ui.visible.dropdown > .menu {
  540. display: block;
  541. }
  542. /*--------------------
  543. Hover
  544. ----------------------*/
  545. /* Menu Item Hover */
  546. .ui.dropdown .menu > .item:hover {
  547. background-color: rgba(0, 0, 0, 0.03);
  548. z-index: 12;
  549. }
  550. /*--------------------
  551. Active
  552. ----------------------*/
  553. /* Menu Item Active */
  554. .ui.dropdown .menu .active.item {
  555. background: transparent;
  556. font-weight: bold;
  557. color: rgba(0, 0, 0, 0.8);
  558. box-shadow: none;
  559. z-index: 12;
  560. }
  561. /*--------------------
  562. Default Text
  563. ----------------------*/
  564. .ui.dropdown > .default.text,
  565. .ui.default.dropdown > .text {
  566. color: rgba(179, 179, 179, 0.7);
  567. }
  568. .ui.dropdown:hover > .default.text,
  569. .ui.default.dropdown:hover > .text {
  570. color: rgba(140, 140, 140, 0.7);
  571. }
  572. /*--------------------
  573. Keyboard Select
  574. ----------------------*/
  575. /* Selected Item */
  576. .ui.dropdown.selected,
  577. .ui.dropdown .menu .selected.item {
  578. background: rgba(0, 0, 0, 0.03);
  579. color: rgba(0, 0, 0, 0.8);
  580. }
  581. /*--------------------
  582. Error
  583. ----------------------*/
  584. .ui.dropdown.error,
  585. .ui.dropdown.error > .text,
  586. .ui.dropdown.error > .default.text {
  587. color: #a94442;
  588. }
  589. .ui.selection.dropdown.error {
  590. background: #fae8e8;
  591. border-color: #dbb1b1;
  592. }
  593. .ui.selection.dropdown.error:hover {
  594. border-color: #dbb1b1;
  595. }
  596. .ui.dropdown.error > .menu,
  597. .ui.dropdown.error > .menu .menu {
  598. border-color: #dbb1b1;
  599. }
  600. .ui.dropdown.error > .menu > .item {
  601. color: #d95c5c;
  602. }
  603. /* Item Hover */
  604. .ui.dropdown.error > .menu > .item:hover {
  605. background-color: #fff2f2;
  606. }
  607. /* Item Active */
  608. .ui.dropdown.error > .menu .active.item {
  609. background-color: #fdcfcf;
  610. }
  611. /*******************************
  612. Variations
  613. *******************************/
  614. /*--------------
  615. Direction
  616. ---------------*/
  617. /* Flyout Direction */
  618. .ui.dropdown .menu {
  619. left: 0px;
  620. }
  621. /*--------------
  622. Simple
  623. ---------------*/
  624. /* Displays without javascript */
  625. .ui.simple.dropdown .menu:before,
  626. .ui.simple.dropdown .menu:after {
  627. display: none;
  628. }
  629. .ui.simple.dropdown .menu {
  630. position: absolute;
  631. display: block;
  632. overflow: hidden;
  633. top: -9999px !important;
  634. opacity: 0;
  635. width: 0;
  636. height: 0;
  637. -webkit-transition: opacity 0.2s ease;
  638. transition: opacity 0.2s ease;
  639. }
  640. .ui.simple.active.dropdown,
  641. .ui.simple.dropdown:hover {
  642. border-bottom-left-radius: 0em !important;
  643. border-bottom-right-radius: 0em !important;
  644. }
  645. .ui.simple.active.dropdown > .menu,
  646. .ui.simple.dropdown:hover > .menu {
  647. overflow: visible;
  648. width: auto;
  649. height: auto;
  650. top: 100% !important;
  651. opacity: 1;
  652. }
  653. .ui.simple.dropdown > .menu > .item:active > .menu,
  654. .ui.simple.dropdown:hover > .menu > .item:hover > .menu {
  655. overflow: visible;
  656. width: auto;
  657. height: auto;
  658. top: 0% !important;
  659. left: 100% !important;
  660. opacity: 1;
  661. }
  662. .ui.simple.disabled.dropdown:hover .menu {
  663. display: none;
  664. height: 0px;
  665. width: 0px;
  666. overflow: hidden;
  667. }
  668. /*--------------
  669. Fluid
  670. ---------------*/
  671. .ui.fluid.dropdown {
  672. display: block;
  673. }
  674. .ui.fluid.dropdown > .dropdown.icon {
  675. float: right;
  676. }
  677. /*--------------
  678. Floating
  679. ---------------*/
  680. .ui.floating.dropdown .menu {
  681. left: 0;
  682. right: auto;
  683. margin-top: 0.5em !important;
  684. box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
  685. border-radius: 0.325em;
  686. }
  687. /*--------------
  688. Pointing
  689. ---------------*/
  690. .ui.pointing.dropdown > .menu {
  691. top: 100%;
  692. margin-top: 0.75em;
  693. border-radius: 0.325em;
  694. }
  695. .ui.pointing.dropdown > .menu:after {
  696. display: block;
  697. position: absolute;
  698. pointer-events: none;
  699. content: '';
  700. visibility: visible;
  701. -webkit-transform: rotate(45deg);
  702. -ms-transform: rotate(45deg);
  703. transform: rotate(45deg);
  704. width: 0.5em;
  705. height: 0.5em;
  706. box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1);
  707. background: #ffffff;
  708. z-index: 2;
  709. }
  710. .ui.pointing.dropdown > .menu:after {
  711. top: -0.25em;
  712. left: 50%;
  713. margin: 0em 0em 0em -0.25em;
  714. }
  715. /* Top Left Pointing */
  716. .ui.top.left.pointing.dropdown > .menu {
  717. top: 100%;
  718. bottom: auto;
  719. left: 0%;
  720. right: auto;
  721. margin: 1em 0em 0em;
  722. }
  723. .ui.top.left.pointing.dropdown > .menu {
  724. top: 100%;
  725. bottom: auto;
  726. left: 0%;
  727. right: auto;
  728. margin: 1em 0em 0em;
  729. }
  730. .ui.top.left.pointing.dropdown > .menu:after {
  731. top: -0.25em;
  732. left: 1em;
  733. right: auto;
  734. margin: 0em;
  735. -webkit-transform: rotate(45deg);
  736. -ms-transform: rotate(45deg);
  737. transform: rotate(45deg);
  738. }
  739. /* Top Right Pointing */
  740. .ui.top.right.pointing.dropdown > .menu {
  741. top: 100%;
  742. bottom: auto;
  743. right: 0%;
  744. left: auto;
  745. margin: 1em 0em 0em;
  746. }
  747. .ui.top.right.pointing.dropdown > .menu:after {
  748. top: -0.25em;
  749. left: auto;
  750. right: 1em;
  751. margin: 0em;
  752. -webkit-transform: rotate(45deg);
  753. -ms-transform: rotate(45deg);
  754. transform: rotate(45deg);
  755. }
  756. /* Left Pointing */
  757. .ui.left.pointing.dropdown > .menu {
  758. top: 0%;
  759. left: 100%;
  760. right: auto;
  761. margin: 0em 0em 0em 1em;
  762. }
  763. .ui.left.pointing.dropdown > .menu:after {
  764. top: 1em;
  765. left: -0.25em;
  766. margin: 0em 0em 0em 0em;
  767. -webkit-transform: rotate(-45deg);
  768. -ms-transform: rotate(-45deg);
  769. transform: rotate(-45deg);
  770. }
  771. /* Right Pointing */
  772. .ui.right.pointing.dropdown > .menu {
  773. top: 0%;
  774. left: auto;
  775. right: 100%;
  776. margin: 0em 1em 0em 0em;
  777. }
  778. .ui.right.pointing.dropdown > .menu:after {
  779. top: 1em;
  780. left: auto;
  781. right: -0.25em;
  782. margin: 0em 0em 0em 0em;
  783. -webkit-transform: rotate(135deg);
  784. -ms-transform: rotate(135deg);
  785. transform: rotate(135deg);
  786. }
  787. /* Bottom Pointing */
  788. .ui.bottom.pointing.dropdown > .menu {
  789. top: auto;
  790. bottom: 100%;
  791. left: 0%;
  792. right: auto;
  793. margin: 0em 0em 1em;
  794. }
  795. .ui.bottom.pointing.dropdown > .menu:after {
  796. top: auto;
  797. bottom: -0.25em;
  798. right: auto;
  799. margin: 0em;
  800. -webkit-transform: rotate(-135deg);
  801. -ms-transform: rotate(-135deg);
  802. transform: rotate(-135deg);
  803. }
  804. /* Reverse Sub-Menu Direction */
  805. .ui.bottom.pointing.dropdown > .menu .menu {
  806. top: auto !important;
  807. bottom: 0px !important;
  808. }
  809. /* Bottom Left */
  810. .ui.bottom.left.pointing.dropdown > .menu {
  811. left: 0%;
  812. right: auto;
  813. }
  814. .ui.bottom.left.pointing.dropdown > .menu:after {
  815. left: 1em;
  816. right: auto;
  817. }
  818. /* Bottom Right */
  819. .ui.bottom.right.pointing.dropdown > .menu {
  820. right: 0%;
  821. left: auto;
  822. }
  823. .ui.bottom.right.pointing.dropdown > .menu:after {
  824. left: auto;
  825. right: 1em;
  826. }
  827. /*******************************
  828. Overrides
  829. *******************************/
  830. /* Dropdown Carets */
  831. @font-face {
  832. font-family: 'Dropdown';
  833. src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
  834. font-weight: normal;
  835. font-style: normal;
  836. }
  837. .ui.dropdown > .dropdown.icon {
  838. font-family: 'Dropdown';
  839. line-height: 1;
  840. height: 1em;
  841. width: 1.23em;
  842. -webkit-backface-visibility: hidden;
  843. backface-visibility: hidden;
  844. font-weight: normal;
  845. font-style: normal;
  846. text-align: center;
  847. }
  848. .ui.dropdown > .dropdown.icon {
  849. width: auto;
  850. }
  851. .ui.dropdown > .dropdown.icon:before {
  852. content: '\f0d7';
  853. }
  854. /* Sub Menu */
  855. .ui.dropdown .menu .item .dropdown.icon:before {
  856. content: '\f0da' /*rtl:'\f0d9'*/;
  857. }
  858. /* Vertical Menu Dropdown */
  859. .ui.vertical.menu .dropdown.item > .dropdown.icon:before {
  860. content: "\f0da" /*rtl:"\f0d9"*/;
  861. }
  862. /* Icons for Reference
  863. .dropdown.down.icon {
  864. content: "\f0d7";
  865. }
  866. .dropdown.up.icon {
  867. content: "\f0d8";
  868. }
  869. .dropdown.left.icon {
  870. content: "\f0d9";
  871. }
  872. .dropdown.icon.icon {
  873. content: "\f0da";
  874. }
  875. */
  876. /*******************************
  877. User Overrides
  878. *******************************/