Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

753 linhas
16KB

  1. /*!
  2. * # Semantic UI 2.4.0 - Popup
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Popup
  12. *******************************/
  13. .ui.popup {
  14. display: none;
  15. position: absolute;
  16. top: 0px;
  17. right: 0px;
  18. /* Fixes content being squished when inline (moz only) */
  19. min-width: -webkit-min-content;
  20. min-width: -moz-min-content;
  21. min-width: min-content;
  22. z-index: 1900;
  23. border: 1px solid #D4D4D5;
  24. line-height: 1.4285em;
  25. max-width: 250px;
  26. background: #FFFFFF;
  27. padding: 0.833em 1em;
  28. font-weight: normal;
  29. font-style: normal;
  30. color: rgba(0, 0, 0, 0.87);
  31. border-radius: 0.28571429rem;
  32. -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
  33. box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
  34. }
  35. .ui.popup > .header {
  36. padding: 0em;
  37. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  38. font-size: 1.14285714em;
  39. line-height: 1.2;
  40. font-weight: bold;
  41. }
  42. .ui.popup > .header + .content {
  43. padding-top: 0.5em;
  44. }
  45. .ui.popup:before {
  46. position: absolute;
  47. content: '';
  48. width: 0.71428571em;
  49. height: 0.71428571em;
  50. background: #FFFFFF;
  51. -webkit-transform: rotate(45deg);
  52. transform: rotate(45deg);
  53. z-index: 2;
  54. -webkit-box-shadow: 1px 1px 0px 0px #bababc;
  55. box-shadow: 1px 1px 0px 0px #bababc;
  56. }
  57. /*******************************
  58. Types
  59. *******************************/
  60. /*--------------
  61. Tooltip
  62. ---------------*/
  63. /* Content */
  64. [data-tooltip] {
  65. position: relative;
  66. }
  67. /* Arrow */
  68. [data-tooltip]:before {
  69. pointer-events: none;
  70. position: absolute;
  71. content: '';
  72. font-size: 1rem;
  73. width: 0.71428571em;
  74. height: 0.71428571em;
  75. background: #FFFFFF;
  76. -webkit-transform: rotate(45deg);
  77. transform: rotate(45deg);
  78. z-index: 2;
  79. -webkit-box-shadow: 1px 1px 0px 0px #bababc;
  80. box-shadow: 1px 1px 0px 0px #bababc;
  81. }
  82. /* Popup */
  83. [data-tooltip]:after {
  84. pointer-events: none;
  85. content: attr(data-tooltip);
  86. position: absolute;
  87. text-transform: none;
  88. text-align: left;
  89. white-space: nowrap;
  90. font-size: 1rem;
  91. border: 1px solid #D4D4D5;
  92. line-height: 1.4285em;
  93. max-width: none;
  94. background: #FFFFFF;
  95. padding: 0.833em 1em;
  96. font-weight: normal;
  97. font-style: normal;
  98. color: rgba(0, 0, 0, 0.87);
  99. border-radius: 0.28571429rem;
  100. -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
  101. box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
  102. z-index: 1;
  103. }
  104. /* Default Position (Top Center) */
  105. [data-tooltip]:not([data-position]):before {
  106. top: auto;
  107. right: auto;
  108. bottom: 100%;
  109. left: 50%;
  110. background: #FFFFFF;
  111. margin-left: -0.07142857rem;
  112. margin-bottom: 0.14285714rem;
  113. }
  114. [data-tooltip]:not([data-position]):after {
  115. left: 50%;
  116. -webkit-transform: translateX(-50%);
  117. transform: translateX(-50%);
  118. bottom: 100%;
  119. margin-bottom: 0.5em;
  120. }
  121. /* Animation */
  122. [data-tooltip]:before,
  123. [data-tooltip]:after {
  124. pointer-events: none;
  125. visibility: hidden;
  126. }
  127. [data-tooltip]:before {
  128. opacity: 0;
  129. -webkit-transform: rotate(45deg) scale(0) !important;
  130. transform: rotate(45deg) scale(0) !important;
  131. -webkit-transform-origin: center top;
  132. transform-origin: center top;
  133. -webkit-transition: all 0.1s ease;
  134. transition: all 0.1s ease;
  135. }
  136. [data-tooltip]:after {
  137. opacity: 1;
  138. -webkit-transform-origin: center bottom;
  139. transform-origin: center bottom;
  140. -webkit-transition: all 0.1s ease;
  141. transition: all 0.1s ease;
  142. }
  143. [data-tooltip]:hover:before,
  144. [data-tooltip]:hover:after {
  145. visibility: visible;
  146. pointer-events: auto;
  147. }
  148. [data-tooltip]:hover:before {
  149. -webkit-transform: rotate(45deg) scale(1) !important;
  150. transform: rotate(45deg) scale(1) !important;
  151. opacity: 1;
  152. }
  153. /* Animation Position */
  154. [data-tooltip]:after,
  155. [data-tooltip][data-position="top center"]:after,
  156. [data-tooltip][data-position="bottom center"]:after {
  157. -webkit-transform: translateX(-50%) scale(0) !important;
  158. transform: translateX(-50%) scale(0) !important;
  159. }
  160. [data-tooltip]:hover:after,
  161. [data-tooltip][data-position="bottom center"]:hover:after {
  162. -webkit-transform: translateX(-50%) scale(1) !important;
  163. transform: translateX(-50%) scale(1) !important;
  164. }
  165. [data-tooltip][data-position="left center"]:after,
  166. [data-tooltip][data-position="right center"]:after {
  167. -webkit-transform: translateY(-50%) scale(0) !important;
  168. transform: translateY(-50%) scale(0) !important;
  169. }
  170. [data-tooltip][data-position="left center"]:hover:after,
  171. [data-tooltip][data-position="right center"]:hover:after {
  172. -webkit-transform: translateY(-50%) scale(1) !important;
  173. transform: translateY(-50%) scale(1) !important;
  174. }
  175. [data-tooltip][data-position="top left"]:after,
  176. [data-tooltip][data-position="top right"]:after,
  177. [data-tooltip][data-position="bottom left"]:after,
  178. [data-tooltip][data-position="bottom right"]:after {
  179. -webkit-transform: scale(0) !important;
  180. transform: scale(0) !important;
  181. }
  182. [data-tooltip][data-position="top left"]:hover:after,
  183. [data-tooltip][data-position="top right"]:hover:after,
  184. [data-tooltip][data-position="bottom left"]:hover:after,
  185. [data-tooltip][data-position="bottom right"]:hover:after {
  186. -webkit-transform: scale(1) !important;
  187. transform: scale(1) !important;
  188. }
  189. /*--------------
  190. Inverted
  191. ---------------*/
  192. /* Arrow */
  193. [data-tooltip][data-inverted]:before {
  194. -webkit-box-shadow: none !important;
  195. box-shadow: none !important;
  196. }
  197. /* Arrow Position */
  198. [data-tooltip][data-inverted]:before {
  199. background: #1B1C1D;
  200. }
  201. /* Popup */
  202. [data-tooltip][data-inverted]:after {
  203. background: #1B1C1D;
  204. color: #FFFFFF;
  205. border: none;
  206. -webkit-box-shadow: none;
  207. box-shadow: none;
  208. }
  209. [data-tooltip][data-inverted]:after .header {
  210. background-color: none;
  211. color: #FFFFFF;
  212. }
  213. /*--------------
  214. Position
  215. ---------------*/
  216. /* Top Center */
  217. [data-position="top center"][data-tooltip]:after {
  218. top: auto;
  219. right: auto;
  220. left: 50%;
  221. bottom: 100%;
  222. -webkit-transform: translateX(-50%);
  223. transform: translateX(-50%);
  224. margin-bottom: 0.5em;
  225. }
  226. [data-position="top center"][data-tooltip]:before {
  227. top: auto;
  228. right: auto;
  229. bottom: 100%;
  230. left: 50%;
  231. background: #FFFFFF;
  232. margin-left: -0.07142857rem;
  233. margin-bottom: 0.14285714rem;
  234. }
  235. /* Top Left */
  236. [data-position="top left"][data-tooltip]:after {
  237. top: auto;
  238. right: auto;
  239. left: 0;
  240. bottom: 100%;
  241. margin-bottom: 0.5em;
  242. }
  243. [data-position="top left"][data-tooltip]:before {
  244. top: auto;
  245. right: auto;
  246. bottom: 100%;
  247. left: 1em;
  248. margin-left: -0.07142857rem;
  249. margin-bottom: 0.14285714rem;
  250. }
  251. /* Top Right */
  252. [data-position="top right"][data-tooltip]:after {
  253. top: auto;
  254. left: auto;
  255. right: 0;
  256. bottom: 100%;
  257. margin-bottom: 0.5em;
  258. }
  259. [data-position="top right"][data-tooltip]:before {
  260. top: auto;
  261. left: auto;
  262. bottom: 100%;
  263. right: 1em;
  264. margin-left: -0.07142857rem;
  265. margin-bottom: 0.14285714rem;
  266. }
  267. /* Bottom Center */
  268. [data-position="bottom center"][data-tooltip]:after {
  269. bottom: auto;
  270. right: auto;
  271. left: 50%;
  272. top: 100%;
  273. -webkit-transform: translateX(-50%);
  274. transform: translateX(-50%);
  275. margin-top: 0.5em;
  276. }
  277. [data-position="bottom center"][data-tooltip]:before {
  278. bottom: auto;
  279. right: auto;
  280. top: 100%;
  281. left: 50%;
  282. margin-left: -0.07142857rem;
  283. margin-top: 0.14285714rem;
  284. }
  285. /* Bottom Left */
  286. [data-position="bottom left"][data-tooltip]:after {
  287. left: 0;
  288. top: 100%;
  289. margin-top: 0.5em;
  290. }
  291. [data-position="bottom left"][data-tooltip]:before {
  292. bottom: auto;
  293. right: auto;
  294. top: 100%;
  295. left: 1em;
  296. margin-left: -0.07142857rem;
  297. margin-top: 0.14285714rem;
  298. }
  299. /* Bottom Right */
  300. [data-position="bottom right"][data-tooltip]:after {
  301. right: 0;
  302. top: 100%;
  303. margin-top: 0.5em;
  304. }
  305. [data-position="bottom right"][data-tooltip]:before {
  306. bottom: auto;
  307. left: auto;
  308. top: 100%;
  309. right: 1em;
  310. margin-left: -0.14285714rem;
  311. margin-top: 0.07142857rem;
  312. }
  313. /* Left Center */
  314. [data-position="left center"][data-tooltip]:after {
  315. right: 100%;
  316. top: 50%;
  317. margin-right: 0.5em;
  318. -webkit-transform: translateY(-50%);
  319. transform: translateY(-50%);
  320. }
  321. [data-position="left center"][data-tooltip]:before {
  322. right: 100%;
  323. top: 50%;
  324. margin-top: -0.14285714rem;
  325. margin-right: -0.07142857rem;
  326. }
  327. /* Right Center */
  328. [data-position="right center"][data-tooltip]:after {
  329. left: 100%;
  330. top: 50%;
  331. margin-left: 0.5em;
  332. -webkit-transform: translateY(-50%);
  333. transform: translateY(-50%);
  334. }
  335. [data-position="right center"][data-tooltip]:before {
  336. left: 100%;
  337. top: 50%;
  338. margin-top: -0.07142857rem;
  339. margin-left: 0.14285714rem;
  340. }
  341. /* Arrow */
  342. [data-position~="bottom"][data-tooltip]:before {
  343. background: #FFFFFF;
  344. -webkit-box-shadow: -1px -1px 0px 0px #bababc;
  345. box-shadow: -1px -1px 0px 0px #bababc;
  346. }
  347. [data-position="left center"][data-tooltip]:before {
  348. background: #FFFFFF;
  349. -webkit-box-shadow: 1px -1px 0px 0px #bababc;
  350. box-shadow: 1px -1px 0px 0px #bababc;
  351. }
  352. [data-position="right center"][data-tooltip]:before {
  353. background: #FFFFFF;
  354. -webkit-box-shadow: -1px 1px 0px 0px #bababc;
  355. box-shadow: -1px 1px 0px 0px #bababc;
  356. }
  357. [data-position~="top"][data-tooltip]:before {
  358. background: #FFFFFF;
  359. }
  360. /* Inverted Arrow Color */
  361. [data-inverted][data-position~="bottom"][data-tooltip]:before {
  362. background: #1B1C1D;
  363. -webkit-box-shadow: -1px -1px 0px 0px #bababc;
  364. box-shadow: -1px -1px 0px 0px #bababc;
  365. }
  366. [data-inverted][data-position="left center"][data-tooltip]:before {
  367. background: #1B1C1D;
  368. -webkit-box-shadow: 1px -1px 0px 0px #bababc;
  369. box-shadow: 1px -1px 0px 0px #bababc;
  370. }
  371. [data-inverted][data-position="right center"][data-tooltip]:before {
  372. background: #1B1C1D;
  373. -webkit-box-shadow: -1px 1px 0px 0px #bababc;
  374. box-shadow: -1px 1px 0px 0px #bababc;
  375. }
  376. [data-inverted][data-position~="top"][data-tooltip]:before {
  377. background: #1B1C1D;
  378. }
  379. [data-position~="bottom"][data-tooltip]:before {
  380. -webkit-transform-origin: center bottom;
  381. transform-origin: center bottom;
  382. }
  383. [data-position~="bottom"][data-tooltip]:after {
  384. -webkit-transform-origin: center top;
  385. transform-origin: center top;
  386. }
  387. [data-position="left center"][data-tooltip]:before {
  388. -webkit-transform-origin: top center;
  389. transform-origin: top center;
  390. }
  391. [data-position="left center"][data-tooltip]:after {
  392. -webkit-transform-origin: right center;
  393. transform-origin: right center;
  394. }
  395. [data-position="right center"][data-tooltip]:before {
  396. -webkit-transform-origin: right center;
  397. transform-origin: right center;
  398. }
  399. [data-position="right center"][data-tooltip]:after {
  400. -webkit-transform-origin: left center;
  401. transform-origin: left center;
  402. }
  403. /*--------------
  404. Spacing
  405. ---------------*/
  406. .ui.popup {
  407. margin: 0em;
  408. }
  409. /* Extending from Top */
  410. .ui.top.popup {
  411. margin: 0em 0em 0.71428571em;
  412. }
  413. .ui.top.left.popup {
  414. -webkit-transform-origin: left bottom;
  415. transform-origin: left bottom;
  416. }
  417. .ui.top.center.popup {
  418. -webkit-transform-origin: center bottom;
  419. transform-origin: center bottom;
  420. }
  421. .ui.top.right.popup {
  422. -webkit-transform-origin: right bottom;
  423. transform-origin: right bottom;
  424. }
  425. /* Extending from Vertical Center */
  426. .ui.left.center.popup {
  427. margin: 0em 0.71428571em 0em 0em;
  428. -webkit-transform-origin: right 50%;
  429. transform-origin: right 50%;
  430. }
  431. .ui.right.center.popup {
  432. margin: 0em 0em 0em 0.71428571em;
  433. -webkit-transform-origin: left 50%;
  434. transform-origin: left 50%;
  435. }
  436. /* Extending from Bottom */
  437. .ui.bottom.popup {
  438. margin: 0.71428571em 0em 0em;
  439. }
  440. .ui.bottom.left.popup {
  441. -webkit-transform-origin: left top;
  442. transform-origin: left top;
  443. }
  444. .ui.bottom.center.popup {
  445. -webkit-transform-origin: center top;
  446. transform-origin: center top;
  447. }
  448. .ui.bottom.right.popup {
  449. -webkit-transform-origin: right top;
  450. transform-origin: right top;
  451. }
  452. /*--------------
  453. Pointer
  454. ---------------*/
  455. /*--- Below ---*/
  456. .ui.bottom.center.popup:before {
  457. margin-left: -0.30714286em;
  458. top: -0.30714286em;
  459. left: 50%;
  460. right: auto;
  461. bottom: auto;
  462. -webkit-box-shadow: -1px -1px 0px 0px #bababc;
  463. box-shadow: -1px -1px 0px 0px #bababc;
  464. }
  465. .ui.bottom.left.popup {
  466. margin-left: 0em;
  467. }
  468. /*rtl:rename*/
  469. .ui.bottom.left.popup:before {
  470. top: -0.30714286em;
  471. left: 1em;
  472. right: auto;
  473. bottom: auto;
  474. margin-left: 0em;
  475. -webkit-box-shadow: -1px -1px 0px 0px #bababc;
  476. box-shadow: -1px -1px 0px 0px #bababc;
  477. }
  478. .ui.bottom.right.popup {
  479. margin-right: 0em;
  480. }
  481. /*rtl:rename*/
  482. .ui.bottom.right.popup:before {
  483. top: -0.30714286em;
  484. right: 1em;
  485. bottom: auto;
  486. left: auto;
  487. margin-left: 0em;
  488. -webkit-box-shadow: -1px -1px 0px 0px #bababc;
  489. box-shadow: -1px -1px 0px 0px #bababc;
  490. }
  491. /*--- Above ---*/
  492. .ui.top.center.popup:before {
  493. top: auto;
  494. right: auto;
  495. bottom: -0.30714286em;
  496. left: 50%;
  497. margin-left: -0.30714286em;
  498. }
  499. .ui.top.left.popup {
  500. margin-left: 0em;
  501. }
  502. /*rtl:rename*/
  503. .ui.top.left.popup:before {
  504. bottom: -0.30714286em;
  505. left: 1em;
  506. top: auto;
  507. right: auto;
  508. margin-left: 0em;
  509. }
  510. .ui.top.right.popup {
  511. margin-right: 0em;
  512. }
  513. /*rtl:rename*/
  514. .ui.top.right.popup:before {
  515. bottom: -0.30714286em;
  516. right: 1em;
  517. top: auto;
  518. left: auto;
  519. margin-left: 0em;
  520. }
  521. /*--- Left Center ---*/
  522. /*rtl:rename*/
  523. .ui.left.center.popup:before {
  524. top: 50%;
  525. right: -0.30714286em;
  526. bottom: auto;
  527. left: auto;
  528. margin-top: -0.30714286em;
  529. -webkit-box-shadow: 1px -1px 0px 0px #bababc;
  530. box-shadow: 1px -1px 0px 0px #bababc;
  531. }
  532. /*--- Right Center ---*/
  533. /*rtl:rename*/
  534. .ui.right.center.popup:before {
  535. top: 50%;
  536. left: -0.30714286em;
  537. bottom: auto;
  538. right: auto;
  539. margin-top: -0.30714286em;
  540. -webkit-box-shadow: -1px 1px 0px 0px #bababc;
  541. box-shadow: -1px 1px 0px 0px #bababc;
  542. }
  543. /* Arrow Color By Location */
  544. .ui.bottom.popup:before {
  545. background: #FFFFFF;
  546. }
  547. .ui.right.center.popup:before,
  548. .ui.left.center.popup:before {
  549. background: #FFFFFF;
  550. }
  551. .ui.top.popup:before {
  552. background: #FFFFFF;
  553. }
  554. /* Inverted Arrow Color */
  555. .ui.inverted.bottom.popup:before {
  556. background: #1B1C1D;
  557. }
  558. .ui.inverted.right.center.popup:before,
  559. .ui.inverted.left.center.popup:before {
  560. background: #1B1C1D;
  561. }
  562. .ui.inverted.top.popup:before {
  563. background: #1B1C1D;
  564. }
  565. /*******************************
  566. Coupling
  567. *******************************/
  568. /* Immediate Nested Grid */
  569. .ui.popup > .ui.grid:not(.padded) {
  570. width: calc(100% + 1.75rem);
  571. margin: -0.7rem -0.875rem;
  572. }
  573. /*******************************
  574. States
  575. *******************************/
  576. .ui.loading.popup {
  577. display: block;
  578. visibility: hidden;
  579. z-index: -1;
  580. }
  581. .ui.animating.popup,
  582. .ui.visible.popup {
  583. display: block;
  584. }
  585. .ui.visible.popup {
  586. -webkit-transform: translateZ(0px);
  587. transform: translateZ(0px);
  588. -webkit-backface-visibility: hidden;
  589. backface-visibility: hidden;
  590. }
  591. /*******************************
  592. Variations
  593. *******************************/
  594. /*--------------
  595. Basic
  596. ---------------*/
  597. .ui.basic.popup:before {
  598. display: none;
  599. }
  600. /*--------------
  601. Wide
  602. ---------------*/
  603. .ui.wide.popup {
  604. max-width: 350px;
  605. }
  606. .ui[class*="very wide"].popup {
  607. max-width: 550px;
  608. }
  609. @media only screen and (max-width: 767px) {
  610. .ui.wide.popup,
  611. .ui[class*="very wide"].popup {
  612. max-width: 250px;
  613. }
  614. }
  615. /*--------------
  616. Fluid
  617. ---------------*/
  618. .ui.fluid.popup {
  619. width: 100%;
  620. max-width: none;
  621. }
  622. /*--------------
  623. Colors
  624. ---------------*/
  625. /* Inverted colors */
  626. .ui.inverted.popup {
  627. background: #1B1C1D;
  628. color: #FFFFFF;
  629. border: none;
  630. -webkit-box-shadow: none;
  631. box-shadow: none;
  632. }
  633. .ui.inverted.popup .header {
  634. background-color: none;
  635. color: #FFFFFF;
  636. }
  637. .ui.inverted.popup:before {
  638. background-color: #1B1C1D;
  639. -webkit-box-shadow: none !important;
  640. box-shadow: none !important;
  641. }
  642. /*--------------
  643. Flowing
  644. ---------------*/
  645. .ui.flowing.popup {
  646. max-width: none;
  647. }
  648. /*--------------
  649. Sizes
  650. ---------------*/
  651. .ui.mini.popup {
  652. font-size: 0.78571429rem;
  653. }
  654. .ui.tiny.popup {
  655. font-size: 0.85714286rem;
  656. }
  657. .ui.small.popup {
  658. font-size: 0.92857143rem;
  659. }
  660. .ui.popup {
  661. font-size: 1rem;
  662. }
  663. .ui.large.popup {
  664. font-size: 1.14285714rem;
  665. }
  666. .ui.huge.popup {
  667. font-size: 1.42857143rem;
  668. }
  669. /*******************************
  670. Theme Overrides
  671. *******************************/
  672. /*******************************
  673. User Overrides
  674. *******************************/