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.

888 lines
24 KiB

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