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.

1019 lines
23 KiB

10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Label
  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. Label
  132. *******************************/
  133. /*-------------------
  134. Element
  135. --------------------*/
  136. /* Group */
  137. /*-------------------
  138. Parts
  139. --------------------*/
  140. /*-------------------
  141. Types
  142. --------------------*/
  143. /* Image Label */
  144. /* Computed Values */
  145. /*-------------------
  146. States
  147. --------------------*/
  148. /*-------------------
  149. Variations
  150. --------------------*/
  151. /* Tag */
  152. /* Ribbon */
  153. /* Attached */
  154. /* Corner */
  155. /* Corner Text */
  156. /* Horizontal */
  157. /* Circular Padding */
  158. /* Pointing */
  159. /* Floating */
  160. /*-------------------
  161. Group
  162. --------------------*/
  163. /* Sizing */
  164. /*------------------
  165. Load Theme
  166. -------------------*/
  167. /*------------------
  168. Load Site
  169. -------------------*/
  170. /*******************************
  171. User Global Variables
  172. *******************************/
  173. /*******************************
  174. User Variable Overrides
  175. *******************************/
  176. /*------------------
  177. Override Mix-in
  178. -------------------*/
  179. /*******************************
  180. Label
  181. *******************************/
  182. .ui.label {
  183. display: inline-block;
  184. vertical-align: baseline;
  185. line-height: 1;
  186. margin: 0em 0.125em;
  187. background-color: #e8e8e8;
  188. border-color: #e8e8e8;
  189. background-image: none;
  190. padding: 0.6em 0.8em;
  191. color: rgba(0, 0, 0, 0.6);
  192. text-transform: none;
  193. font-weight: bold;
  194. border-radius: 0.325em;
  195. box-sizing: border-box;
  196. -webkit-transition: background 0.1s linear
  197. ;
  198. transition: background 0.1s linear
  199. ;
  200. }
  201. .ui.label:first-child {
  202. margin-left: 0em;
  203. }
  204. .ui.label:last-child {
  205. margin-right: 0em;
  206. }
  207. /* Link */
  208. a.ui.label {
  209. cursor: pointer;
  210. }
  211. /* Inside Link */
  212. .ui.label a {
  213. cursor: pointer;
  214. color: inherit;
  215. opacity: 0.8;
  216. -webkit-transition: 0.25s opacity ease;
  217. transition: 0.25s opacity ease;
  218. }
  219. .ui.label a:hover {
  220. opacity: 1;
  221. }
  222. /* Icon */
  223. .ui.label .icon {
  224. width: auto;
  225. margin: 0em 0.75em 0em 0em;
  226. }
  227. /* Detail */
  228. .ui.label .detail {
  229. display: inline-block;
  230. margin-left: 1em;
  231. font-weight: bold;
  232. opacity: 0.8;
  233. }
  234. .ui.label .detail .icon {
  235. margin: 0em 0.25em 0em 0em;
  236. }
  237. /* Removable label */
  238. .ui.label .close.icon,
  239. .ui.label .delete.icon {
  240. cursor: pointer;
  241. margin-right: 0em;
  242. margin-left: 0.5em;
  243. opacity: 0.8;
  244. -webkit-transition: background 0.1s linear
  245. ;
  246. transition: background 0.1s linear
  247. ;
  248. }
  249. .ui.label .delete.icon:hover {
  250. opacity: 1;
  251. }
  252. /*-------------------
  253. Group
  254. --------------------*/
  255. .ui.labels .label {
  256. margin: 0em 0.5em 0.75em 0em;
  257. }
  258. /*-------------------
  259. Coupling
  260. --------------------*/
  261. /* Padding on next content after a label */
  262. .ui.top.attached.label:first-child + * {
  263. margin-top: 2rem;
  264. }
  265. .ui.bottom.attached.label:first-child ~ :last-child {
  266. margin-top: 0em;
  267. margin-bottom: 2rem;
  268. }
  269. /*******************************
  270. Types
  271. *******************************/
  272. .ui.image.label {
  273. width: auto !important;
  274. margin-top: 0em;
  275. margin-bottom: 0em;
  276. max-width: 9999px;
  277. vertical-align: baseline;
  278. text-transform: none;
  279. background: #e8e8e8;
  280. padding: 0.6em 0.8em 0.6em 0.5em;
  281. border-radius: 0.325em;
  282. box-shadow: none;
  283. }
  284. .ui.image.label img {
  285. display: inline-block;
  286. vertical-align: top;
  287. height: 2.2em;
  288. margin: -0.6em 0.5em -0.6em -0.5em;
  289. border-radius: 0.325em;
  290. }
  291. .ui.image.label .detail {
  292. background: rgba(0, 0, 0, 0.1);
  293. margin: -0.6em -0.8em -0.6em 0.5em;
  294. padding: 0.6em 0.8em;
  295. border-radius: 0em 0.325em 0.325em 0em;
  296. }
  297. /*-------------------
  298. Tag
  299. --------------------*/
  300. .ui.tag.labels .label,
  301. .ui.tag.label {
  302. margin-left: 1em;
  303. position: relative;
  304. padding-left: 1.5em;
  305. padding-right: 1.5em;
  306. border-radius: 0em 0.325em 0.325em 0em;
  307. }
  308. .ui.tag.labels .label:before,
  309. .ui.tag.label:before {
  310. position: absolute;
  311. top: 50%;
  312. right: 100%;
  313. content: '';
  314. background-color: #e8e8e8;
  315. background-image: none;
  316. width: 1.56em;
  317. height: 1.56em;
  318. -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
  319. -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
  320. transform: translateY(-50%) translateX(50%) rotate(-45deg);
  321. -webkit-transition: background 0.1s linear
  322. ;
  323. transition: background 0.1s linear
  324. ;
  325. }
  326. .ui.tag.labels .label:after,
  327. .ui.tag.label:after {
  328. position: absolute;
  329. content: '';
  330. top: 50%;
  331. left: -0.25em;
  332. margin-top: -0.25em;
  333. background-color: #ffffff !important;
  334. width: 0.5em;
  335. height: 0.5em;
  336. box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  337. border-radius: 500rem;
  338. }
  339. /*-------------------
  340. Corner Label
  341. --------------------*/
  342. .ui.corner.label {
  343. position: absolute;
  344. top: 0em;
  345. right: 0em;
  346. z-index: 10;
  347. margin: 0em;
  348. width: 3.25em;
  349. height: 3.25em;
  350. padding: 0em;
  351. text-align: center;
  352. -webkit-transition: color 0.25s ease;
  353. transition: color 0.25s ease;
  354. }
  355. /* Icon Label */
  356. .ui.corner.label {
  357. background-color: transparent !important;
  358. }
  359. .ui.corner.label:after {
  360. position: absolute;
  361. content: "";
  362. right: 0em;
  363. top: 0em;
  364. z-index: -1;
  365. width: 0em;
  366. height: 0em;
  367. background-color: transparent !important;
  368. border-top: 0em solid transparent;
  369. border-right: 3.25em solid transparent;
  370. border-bottom: 3.25em solid transparent;
  371. border-left: 0em solid transparent;
  372. border-right-color: inherit;
  373. -webkit-transition: border-color 0.25s ease;
  374. transition: border-color 0.25s ease;
  375. }
  376. .ui.corner.label .icon {
  377. position: relative;
  378. top: 0.4em;
  379. left: 0.75em;
  380. font-size: 1em;
  381. margin: 0em;
  382. }
  383. /* Text Label
  384. .ui.text.corner.label {
  385. font-weight: @cornerTextWeight;
  386. text-align: center;
  387. padding: 0.25em 0;
  388. top: 1.1em;
  389. transform: rotate(45deg);
  390. width: 4em;
  391. height: auto;
  392. }
  393. .ui.left.text.corner.label {
  394. transform: rotate(-45deg);
  395. }
  396. .ui.text.corner.label:before,
  397. .ui.text.corner.label:after {
  398. position: absolute;
  399. content: '';
  400. top: 0em;
  401. width: 0em;
  402. height: 0em;
  403. }
  404. .ui.text.corner.label:before {
  405. left: auto;
  406. right: 100%;
  407. border-top: 0em solid transparent;
  408. border-right-width: @ribbonTriangleSize;
  409. border-right-color: inherit;
  410. border-right-style: solid;
  411. border-bottom: @ribbonTriangleSize solid transparent;
  412. border-left: 0em solid transparent;
  413. }
  414. .ui.text.corner.label:after {
  415. left: 100%;
  416. right: auto;
  417. border-top: 0em solid transparent;
  418. border-right-width: @ribbonTriangleSize;
  419. border-right-color: inherit;
  420. border-right-style: solid;
  421. border-bottom: @ribbonTriangleSize solid transparent;
  422. border-left: 0em solid transparent;
  423. }
  424. */
  425. /* Left Corner */
  426. .ui.left.corner.label,
  427. .ui.left.corner.label:after {
  428. right: auto;
  429. left: 0em;
  430. }
  431. .ui.left.corner.label:after {
  432. border-top: 3.25em solid transparent;
  433. border-right: 3.25em solid transparent;
  434. border-bottom: 0em solid transparent;
  435. border-left: 0em solid transparent;
  436. border-top-color: inherit;
  437. }
  438. .ui.left.corner.label .icon {
  439. left: -0.75em;
  440. }
  441. /* Segment */
  442. .ui.segment > .ui.corner.label {
  443. top: -1px;
  444. right: -1px;
  445. }
  446. .ui.segment > .ui.left.corner.label {
  447. right: auto;
  448. left: -1px;
  449. }
  450. /* Input */
  451. .ui.input > .ui.corner.label {
  452. top: 1px;
  453. right: 1px;
  454. }
  455. .ui.input > .ui.right.corner.label {
  456. right: auto;
  457. left: 1px;
  458. }
  459. /*-------------------
  460. Ribbon
  461. --------------------*/
  462. .ui.ribbon.label {
  463. position: relative;
  464. margin: 0em;
  465. left: -2rem;
  466. padding-left: 2rem;
  467. border-radius: 0em 0.325em 0.325em 0em;
  468. border-color: rgba(0, 0, 0, 0.15);
  469. }
  470. .ui.ribbon.label:after {
  471. position: absolute;
  472. content: "";
  473. top: 100%;
  474. left: 0%;
  475. background-color: transparent !important;
  476. border-top: 0em solid transparent;
  477. border-right-width: 1.3em;
  478. border-right-color: inherit;
  479. border-right-style: solid;
  480. border-bottom: 1.3em solid transparent;
  481. border-left: 0em solid transparent;
  482. width: 0em;
  483. height: 0em;
  484. }
  485. /*-------------------
  486. Attached
  487. --------------------*/
  488. .ui.top.attached.label,
  489. .ui.attached.label {
  490. width: 100%;
  491. position: absolute;
  492. margin: 0em;
  493. top: 0em;
  494. left: 0em;
  495. padding: 0.75em 1em;
  496. border-radius: 0.325em 0.325em 0em 0em;
  497. }
  498. .ui.bottom.attached.label {
  499. top: auto;
  500. bottom: 0em;
  501. border-radius: 0em 0em 0.325em 0.325em;
  502. }
  503. .ui.top.left.attached.label {
  504. width: auto;
  505. margin-top: 0em !important;
  506. border-radius: 0.325em 0em 0.325em 0em;
  507. }
  508. .ui.top.right.attached.label {
  509. width: auto;
  510. left: auto;
  511. right: 0em;
  512. border-radius: 0em 0.325em 0em 0.325em;
  513. }
  514. .ui.bottom.left.attached.label {
  515. width: auto;
  516. top: auto;
  517. bottom: 0em;
  518. border-radius: 0em 0em 0.325em 0.325em;
  519. }
  520. .ui.bottom.right.attached.label {
  521. top: auto;
  522. bottom: 0em;
  523. left: auto;
  524. right: 0em;
  525. width: auto;
  526. border-radius: 0.325em 0em 0.325em 0em;
  527. }
  528. /*******************************
  529. States
  530. *******************************/
  531. /*-------------------
  532. Disabled
  533. --------------------*/
  534. .ui.label.disabled {
  535. opacity: 0.5;
  536. }
  537. /*-------------------
  538. Hover
  539. --------------------*/
  540. a.ui.labels .label:hover,
  541. a.ui.label:hover {
  542. background-color: #e0e0e0;
  543. border-color: #e0e0e0;
  544. background-image: none;
  545. color: rgba(0, 0, 0, 0.8);
  546. }
  547. .ui.labels a.label:hover:before,
  548. a.ui.label:hover:before {
  549. background-color: #e0e0e0;
  550. background-image: none;
  551. color: rgba(0, 0, 0, 0.8);
  552. }
  553. /*-------------------
  554. Visible
  555. --------------------*/
  556. .ui.labels.visible .label,
  557. .ui.label.visible {
  558. display: inline-block !important;
  559. }
  560. /*-------------------
  561. Hidden
  562. --------------------*/
  563. .ui.labels.hidden .label,
  564. .ui.label.hidden {
  565. display: none !important;
  566. }
  567. /*******************************
  568. Variations
  569. *******************************/
  570. /*-------------------
  571. Colors
  572. --------------------*/
  573. /*--- Black ---*/
  574. .ui.black.labels .label,
  575. .ui.black.label {
  576. background-color: #191919 !important;
  577. border-color: #191919 !important;
  578. color: #ffffff !important;
  579. }
  580. .ui.labels .black.label:before,
  581. .ui.black.labels .label:before,
  582. .ui.black.label:before {
  583. background-color: #191919 !important;
  584. }
  585. a.ui.black.labels .label:hover,
  586. a.ui.black.label:hover {
  587. background-color: #2b2b2b !important;
  588. border-color: #2b2b2b !important;
  589. }
  590. .ui.labels a.black.label:hover:before,
  591. .ui.black.labels a.label:hover:before,
  592. a.ui.black.label:hover:before {
  593. background-color: #2b2b2b !important;
  594. }
  595. .ui.black.corner.label,
  596. .ui.black.corner.label:hover {
  597. background-color: transparent !important;
  598. }
  599. .ui.black.ribbon.label {
  600. border-color: #191919 !important;
  601. }
  602. /*--- Blue ---*/
  603. .ui.blue.labels .label,
  604. .ui.blue.label {
  605. background-color: #0074d9 !important;
  606. border-color: #0074d9 !important;
  607. color: #ffffff !important;
  608. }
  609. .ui.labels .blue.label:before,
  610. .ui.blue.labels .label:before,
  611. .ui.blue.label:before {
  612. background-color: #0074d9 !important;
  613. }
  614. a.ui.blue.labels .label:hover,
  615. .ui.blue.labels a.label:hover,
  616. a.ui.blue.label:hover {
  617. background-color: #0087fd !important;
  618. border-color: #0087fd !important;
  619. color: #ffffff !important;
  620. }
  621. .ui.labels a.blue.label:hover:before,
  622. .ui.blue.labels a.label:hover:before,
  623. a.ui.blue.label:hover:before {
  624. background-color: #0087fd !important;
  625. }
  626. .ui.blue.corner.label,
  627. .ui.blue.corner.label:hover {
  628. background-color: transparent !important;
  629. }
  630. .ui.blue.ribbon.label {
  631. border-color: #0074d9 !important;
  632. }
  633. /*--- Green ---*/
  634. .ui.green.labels .label,
  635. .ui.green.label {
  636. background-color: #2ecc40 !important;
  637. border-color: #2ecc40 !important;
  638. color: #ffffff !important;
  639. }
  640. .ui.labels .green.label:before,
  641. .ui.green.labels .label:before,
  642. .ui.green.label:before {
  643. background-color: #2ecc40 !important;
  644. }
  645. a.ui.green.labels .label:hover,
  646. a.ui.green.label:hover {
  647. background-color: #48d658 !important;
  648. border-color: #48d658 !important;
  649. }
  650. .ui.labels a.green.label:hover:before,
  651. .ui.green.labels a.label:hover:before,
  652. a.ui.green.label:hover:before {
  653. background-color: #48d658 !important;
  654. }
  655. .ui.green.corner.label,
  656. .ui.green.corner.label:hover {
  657. background-color: transparent !important;
  658. }
  659. .ui.green.ribbon.label {
  660. border-color: #2ecc40 !important;
  661. }
  662. /*--- Orange ---*/
  663. .ui.orange.labels .label,
  664. .ui.orange.label {
  665. background-color: #ff851b !important;
  666. border-color: #ff851b !important;
  667. color: #ffffff !important;
  668. }
  669. .ui.labels .orange.label:before,
  670. .ui.orange.labels .label:before,
  671. .ui.orange.label:before {
  672. background-color: #ff851b !important;
  673. }
  674. a.ui.orange.labels .label:hover,
  675. .ui.orange.labels a.label:hover,
  676. a.ui.orange.label:hover {
  677. background-color: #ff983f !important;
  678. border-color: #ff983f !important;
  679. color: #ffffff !important;
  680. }
  681. .ui.labels a.orange.label:hover:before,
  682. .ui.orange.labels a.label:hover:before,
  683. a.ui.orange.label:hover:before {
  684. background-color: #ff983f !important;
  685. }
  686. .ui.orange.corner.label,
  687. .ui.orange.corner.label:hover {
  688. background-color: transparent !important;
  689. }
  690. .ui.orange.ribbon.label {
  691. border-color: #ff851b !important;
  692. }
  693. /*--- Pink ---*/
  694. .ui.pink.labels .label,
  695. .ui.pink.label {
  696. background-color: #d9499a !important;
  697. border-color: #d9499a !important;
  698. color: #ffffff !important;
  699. }
  700. .ui.labels .pink.label:before,
  701. .ui.pink.labels .label:before,
  702. .ui.pink.label:before {
  703. background-color: #d9499a !important;
  704. }
  705. a.ui.pink.labels .label:hover,
  706. .ui.pink.labels a.label:hover,
  707. a.ui.pink.label:hover {
  708. background-color: #df67aa !important;
  709. border-color: #df67aa !important;
  710. color: #ffffff !important;
  711. }
  712. .ui.labels a.pink.label:hover:before,
  713. .ui.pink.labels a.label:hover:before,
  714. a.ui.pink.label:hover:before {
  715. background-color: #df67aa !important;
  716. }
  717. .ui.pink.corner.label,
  718. .ui.pink.corner.label:hover {
  719. background-color: transparent !important;
  720. }
  721. .ui.pink.ribbon.label {
  722. border-color: #d9499a !important;
  723. }
  724. /*--- Purple ---*/
  725. .ui.purple.labels .label,
  726. .ui.purple.label {
  727. background-color: #a24096 !important;
  728. border-color: #a24096 !important;
  729. color: #ffffff !important;
  730. }
  731. .ui.labels .purple.label:before,
  732. .ui.purple.labels .label:before,
  733. .ui.purple.label:before {
  734. background-color: #a24096 !important;
  735. }
  736. a.ui.purple.labels .label:hover,
  737. .ui.purple.labels a.label:hover,
  738. a.ui.purple.label:hover {
  739. background-color: #b94dac !important;
  740. border-color: #b94dac !important;
  741. color: #ffffff !important;
  742. }
  743. .ui.labels a.purple.label:hover:before,
  744. .ui.purple.labels a.label:hover:before,
  745. a.ui.purple.label:hover:before {
  746. background-color: #b94dac !important;
  747. }
  748. .ui.purple.corner.label,
  749. .ui.purple.corner.label:hover {
  750. background-color: transparent !important;
  751. }
  752. .ui.purple.ribbon.label {
  753. border-color: #a24096 !important;
  754. }
  755. /*--- Red ---*/
  756. .ui.red.labels .label,
  757. .ui.red.label {
  758. background-color: #ff4136 !important;
  759. border-color: #ff4136 !important;
  760. color: #ffffff !important;
  761. }
  762. .ui.labels .red.label:before,
  763. .ui.red.labels .label:before,
  764. .ui.red.label:before {
  765. background-color: #ff4136 !important;
  766. }
  767. .ui.red.corner.label,
  768. .ui.red.corner.label:hover {
  769. background-color: transparent !important;
  770. }
  771. a.ui.red.labels .label:hover,
  772. a.ui.red.label:hover {
  773. background-color: #ff635a !important;
  774. border-color: #ff635a !important;
  775. color: #ffffff !important;
  776. }
  777. .ui.labels a.red.label:hover:before,
  778. .ui.red.labels a.label:hover:before,
  779. a.ui.red.label:hover:before {
  780. background-color: #ff635a !important;
  781. }
  782. .ui.red.ribbon.label {
  783. border-color: #ff4136 !important;
  784. }
  785. /*--- Teal ---*/
  786. .ui.teal.labels .label,
  787. .ui.teal.label {
  788. background-color: #39cccc !important;
  789. border-color: #39cccc !important;
  790. color: #ffffff !important;
  791. }
  792. .ui.labels .teal.label:before,
  793. .ui.teal.labels .label:before,
  794. .ui.teal.label:before {
  795. background-color: #39cccc !important;
  796. }
  797. a.ui.teal.labels .label:hover,
  798. .ui.teal.labels a.label:hover,
  799. a.ui.teal.label:hover {
  800. background-color: #55d3d3 !important;
  801. border-color: #55d3d3 !important;
  802. color: #ffffff !important;
  803. }
  804. .ui.labels a.teal.label:hover:before,
  805. .ui.teal.labels a.label:hover:before,
  806. a.ui.teal.label:hover:before {
  807. background-color: #55d3d3 !important;
  808. }
  809. .ui.teal.corner.label,
  810. .ui.teal.corner.label:hover {
  811. background-color: transparent !important;
  812. }
  813. .ui.teal.ribbon.label {
  814. border-color: #39cccc !important;
  815. }
  816. /*--- Yellow ---*/
  817. .ui.yellow.labels .label,
  818. .ui.yellow.label {
  819. background-color: #ffcb08 !important;
  820. border-color: #ffcb08 !important;
  821. color: #ffffff !important;
  822. }
  823. .ui.labels .yellow.label:before,
  824. .ui.yellow.labels .label:before,
  825. .ui.yellow.label:before {
  826. background-color: #ffcb08 !important;
  827. }
  828. a.ui.yellow.labels .label:hover,
  829. .ui.yellow.labels a.label:hover,
  830. a.ui.yellow.label:hover {
  831. background-color: #ffd32c !important;
  832. border-color: #ffd32c !important;
  833. color: #ffffff !important;
  834. }
  835. .ui.labels a.yellow.label:hover:before,
  836. .ui.yellow.labels a.label:hover:before,
  837. a.ui.yellow.label:hover:before {
  838. background-color: #ffd32c !important;
  839. }
  840. .ui.yellow.corner.label,
  841. .ui.yellow.corner.label:hover {
  842. background-color: transparent !important;
  843. }
  844. .ui.yellow.ribbon.label {
  845. border-color: #ffcb08 !important;
  846. }
  847. /*-------------------
  848. Fluid
  849. --------------------*/
  850. .ui.label.fluid,
  851. .ui.fluid.labels > .label {
  852. width: 100%;
  853. box-sizing: border-box;
  854. }
  855. /*-------------------
  856. Inverted
  857. --------------------*/
  858. .ui.inverted.labels .label,
  859. .ui.inverted.label {
  860. color: #ffffff !important;
  861. }
  862. /*-------------------
  863. Horizontal
  864. --------------------*/
  865. .ui.horizontal.labels .label,
  866. .ui.horizontal.label {
  867. margin: 0em 0.5em 0em 0em;
  868. padding: 0.4em 0.8em;
  869. min-width: 3em;
  870. text-align: center;
  871. }
  872. /*-------------------
  873. Circular
  874. --------------------*/
  875. .ui.circular.labels .label,
  876. .ui.circular.label {
  877. min-width: 2em;
  878. min-height: 2em;
  879. padding: 0.5em !important;
  880. line-height: 1em;
  881. text-align: center;
  882. border-radius: 500rem;
  883. }
  884. .ui.empty.circular.labels .label,
  885. .ui.empty.circular.label {
  886. min-width: 0em;
  887. min-height: 0em;
  888. overflow: hidden;
  889. width: 0.5em;
  890. height: 0.5em;
  891. vertical-align: baseline;
  892. }
  893. /*-------------------
  894. Pointing
  895. --------------------*/
  896. .ui.pointing.label {
  897. position: relative;
  898. }
  899. .ui.attached.pointing.label {
  900. position: absolute;
  901. }
  902. .ui.pointing.label:before {
  903. position: absolute;
  904. content: '';
  905. width: 0.6em;
  906. height: 0.6em;
  907. background-image: none;
  908. -webkit-transform: rotate(45deg);
  909. -ms-transform: rotate(45deg);
  910. transform: rotate(45deg);
  911. z-index: 2;
  912. -webkit-transition: background 0.1s linear
  913. ;
  914. transition: background 0.1s linear
  915. ;
  916. }
  917. /*--- Above ---*/
  918. .ui.pointing.label:before {
  919. background-color: #e8e8e8;
  920. background-image: none;
  921. }
  922. .ui.pointing.label,
  923. .ui.pointing.above.label {
  924. margin-top: 1em;
  925. }
  926. .ui.pointing.label:before,
  927. .ui.pointing.above.label:before {
  928. margin-left: -0.3em;
  929. top: -0.3em;
  930. left: 50%;
  931. }
  932. /*--- Below ---*/
  933. .ui.pointing.below.label {
  934. margin-top: 0em;
  935. margin-bottom: 1em;
  936. }
  937. .ui.pointing.below.label:before {
  938. margin-left: -0.3em;
  939. top: auto;
  940. right: auto;
  941. bottom: -0.3em;
  942. left: 50%;
  943. }
  944. /*--- Left ---*/
  945. .ui.pointing.left.label {
  946. margin-top: 0em;
  947. margin-left: 1em;
  948. }
  949. .ui.pointing.left.label:before {
  950. margin-top: -0.3em;
  951. bottom: auto;
  952. right: auto;
  953. top: 50%;
  954. left: 0em;
  955. }
  956. /*--- Right ---*/
  957. .ui.pointing.right.label {
  958. margin-top: 0em;
  959. margin-right: 1em;
  960. }
  961. .ui.pointing.right.label:before {
  962. margin-top: -0.3em;
  963. right: -0.3em;
  964. top: 50%;
  965. bottom: auto;
  966. left: auto;
  967. }
  968. /*------------------
  969. Floating Label
  970. -------------------*/
  971. .ui.floating.label {
  972. position: absolute;
  973. z-index: 100;
  974. top: -1em;
  975. left: 100%;
  976. margin: 0em 0em 0em -1.5em !important;
  977. }
  978. /*-------------------
  979. Sizes
  980. --------------------*/
  981. .ui.mini.labels .label,
  982. .ui.mini.label {
  983. font-size: 0.7rem;
  984. }
  985. .ui.tiny.labels .label,
  986. .ui.tiny.label {
  987. font-size: 0.75rem;
  988. }
  989. .ui.small.labels .label,
  990. .ui.small.label {
  991. font-size: 0.8rem;
  992. }
  993. .ui.labels .label,
  994. .ui.label {
  995. font-size: 0.875rem;
  996. }
  997. .ui.large.labels .label,
  998. .ui.large.label {
  999. font-size: 1rem;
  1000. }
  1001. .ui.huge.labels .label,
  1002. .ui.huge.label {
  1003. font-size: 1.25rem;
  1004. }
  1005. /*******************************
  1006. Overrides
  1007. *******************************/
  1008. /*******************************
  1009. Overrides
  1010. *******************************/