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.

920 lines
18 KiB

  1. /*
  2. * # Semantic - Label
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Label
  13. *******************************/
  14. .ui.label {
  15. display: inline-block;
  16. vertical-align: middle;
  17. margin: -0.25em 0.25em 0em;
  18. background-color: #E8E8E8;
  19. border-color: #E8E8E8;
  20. padding: 0.5em 0.8em;
  21. color: rgba(0, 0, 0, 0.65);
  22. text-transform: uppercase;
  23. font-weight: normal;
  24. -webkit-border-radius: 0.325em;
  25. -moz-border-radius: 0.325em;
  26. border-radius: 0.325em;
  27. -webkit-box-sizing: border-box;
  28. -moz-box-sizing: border-box;
  29. -ms-box-sizing: border-box;
  30. box-sizing: border-box;
  31. -webkit-transition:
  32. background 0.1s linear
  33. ;
  34. -moz-transition:
  35. background 0.1s linear
  36. ;
  37. -o-transition:
  38. background 0.1s linear
  39. ;
  40. -ms-transition:
  41. background 0.1s linear
  42. ;
  43. transition:
  44. background 0.1s linear
  45. ;
  46. }
  47. .ui.label:first-child {
  48. margin-right: 0em;
  49. }
  50. .ui.label:last-child {
  51. margin-left: 0em;
  52. }
  53. /* Link */
  54. a.ui.label {
  55. cursor: pointer;
  56. }
  57. /* Inside Link */
  58. .ui.label a {
  59. cursor: pointer;
  60. color: inherit;
  61. opacity: 0.8;
  62. transition: 0.2s opacity ease;
  63. }
  64. .ui.label a:hover {
  65. opacity: 1;
  66. }
  67. /* Detail */
  68. .ui.label .detail {
  69. display: inline-block;
  70. margin-right: 0.5em;
  71. font-weight: bold;
  72. opacity: 0.8;
  73. }
  74. /* Icon */
  75. .ui.label .icon {
  76. width: auto;
  77. }
  78. /* Removable label */
  79. .ui.label .delete.icon {
  80. cursor: pointer;
  81. margin: 0em 0.5em 0em 0em;
  82. opacity: 0.7;
  83. -webkit-transition:
  84. background 0.1s linear
  85. ;
  86. -moz-transition:
  87. background 0.1s linear
  88. ;
  89. -o-transition:
  90. background 0.1s linear
  91. ;
  92. -ms-transition:
  93. background 0.1s linear
  94. ;
  95. transition:
  96. background 0.1s linear
  97. ;
  98. }
  99. .ui.label .delete.icon:hover {
  100. opacity: 0.99;
  101. }
  102. /*-------------------
  103. Coupling
  104. --------------------*/
  105. /* Padding on next content after a label */
  106. .ui.segment > .attached.label:first-child + * {
  107. margin-top: 2.5em;
  108. }
  109. .ui.segment > .bottom.attached.label:first-child ~ :last-child {
  110. margin-top: 0em;
  111. margin-bottom: 2.5em;
  112. }
  113. /*******************************
  114. Types
  115. *******************************/
  116. .ui.image.label {
  117. width: auto !important;
  118. margin-top: 0em;
  119. margin-bottom: 0em;
  120. padding-top: 0.4em;
  121. padding-bottom: 0.4em;
  122. line-height: 1.5em;
  123. vertical-align: baseline;
  124. text-transform: none;
  125. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  126. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  127. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  128. }
  129. .ui.image.label img {
  130. display: inline-block;
  131. height: 2.25em;
  132. margin: -0.4em -0.8em -0.4em 0.8em;
  133. vertical-align: top;
  134. -moz-border-radius: 0em 0.325em 0.325em 0em;
  135. -webkit-border-radius: 0em 0.325em 0.325em 0em;
  136. border-radius: 0em 0.325em 0.325em 0em;
  137. }
  138. /*******************************
  139. States
  140. *******************************/
  141. /*-------------------
  142. Disabled
  143. --------------------*/
  144. .ui.label.disabled {
  145. opacity: 0.5;
  146. }
  147. /*-------------------
  148. Hover
  149. --------------------*/
  150. a.ui.labels .label:hover,
  151. a.ui.label:hover {
  152. background-color: #E0E0E0;
  153. border-color: #E0E0E0;
  154. color: rgba(0, 0, 0, 0.7);
  155. }
  156. .ui.labels a.label:hover:before,
  157. a.ui.label:hover:before {
  158. background-color: #E0E0E0;
  159. color: rgba(0, 0, 0, 0.7);
  160. }
  161. /*-------------------
  162. Visible
  163. --------------------*/
  164. .ui.labels.visible .label,
  165. .ui.label.visible {
  166. display: inline-block !important;
  167. }
  168. /*-------------------
  169. Hidden
  170. --------------------*/
  171. .ui.labels.hidden .label,
  172. .ui.label.hidden {
  173. display: none !important;
  174. }
  175. /*******************************
  176. Variations
  177. *******************************/
  178. /*-------------------
  179. Tag
  180. --------------------*/
  181. .ui.tag.labels .label,
  182. .ui.tag.label {
  183. margin-right: 1em;
  184. position: relative;
  185. padding: 0.33em 1.4em 0.33em 1.3em;
  186. -webkit-border-radius: 3px 0px 0px 3px;
  187. -moz-border-radius: 3px 0px 0px 3px;
  188. border-radius: 3px 0px 0px 3px;
  189. }
  190. .ui.tag.labels .label:before,
  191. .ui.tag.label:before {
  192. position: absolute;
  193. top: 0.3em;
  194. right: 0.3em;
  195. content: '';
  196. margin-right: -1em;
  197. background-image: none;
  198. width: 1.5em;
  199. height: 1.5em;
  200. -webkit-transform: rotate(45deg);
  201. -moz-transform: rotate(45deg);
  202. transform: rotate(45deg);
  203. -webkit-transition:
  204. background 0.1s linear
  205. ;
  206. -moz-transition:
  207. background 0.1s linear
  208. ;
  209. -o-transition:
  210. background 0.1s linear
  211. ;
  212. -ms-transition:
  213. background 0.1s linear
  214. ;
  215. transition:
  216. background 0.1s linear
  217. ;
  218. }
  219. .ui.tag.labels .label:after,
  220. .ui.tag.label:after {
  221. position: absolute;
  222. content: '';
  223. top: 50%;
  224. right: -0.25em;
  225. margin-top: -0.3em;
  226. background-color: #FFFFFF;
  227. width: 0.55em;
  228. height: 0.55em;
  229. -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  230. -moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  231. box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  232. -moz-border-radius: 100px 100px 100px 100px;
  233. -webkit-border-radius: 100px 100px 100px 100px;
  234. border-radius: 100px 100px 100px 100px;
  235. }
  236. /*-------------------
  237. Ribbon
  238. --------------------*/
  239. .ui.ribbon.label {
  240. position: relative;
  241. margin: 0em 0.2em;
  242. right: -2rem;
  243. padding-right: 2rem;
  244. -webkit-border-radius: 4px 0px 0px 4px;
  245. -moz-border-radius: 4px 0px 0px 4px;
  246. border-radius: 4px 0px 0px 4px;
  247. border-color: rgba(0, 0, 0, 0.15);
  248. }
  249. .ui.ribbon.label:after {
  250. position: absolute;
  251. content: "";
  252. top: 100%;
  253. right: 0%;
  254. border-top: 0em solid transparent;
  255. border-left-width: 1em;
  256. border-left-color: inherit;
  257. border-left-style: solid;
  258. border-bottom: 1em solid transparent;
  259. border-right: 0em solid transparent;
  260. width: 0em;
  261. height: 0em;
  262. }
  263. /*-------------------
  264. Attached
  265. --------------------*/
  266. .ui.top.attached.label,
  267. .ui.attached.label {
  268. width: 100%;
  269. position: absolute;
  270. margin: 0em;
  271. top: 0em;
  272. right: 0em;
  273. padding: 0.75em 1em;
  274. -webkit-border-radius: 4px 4px 0em 0em;
  275. -moz-border-radius: 4px 4px 0em 0em;
  276. border-radius: 4px 4px 0em 0em;
  277. }
  278. .ui.bottom.attached.label {
  279. top: auto;
  280. bottom: 0em;
  281. -webkit-border-radius: 0em 0em 4px 4px;
  282. -moz-border-radius: 0em 0em 4px 4px;
  283. border-radius: 0em 0em 4px 4px;
  284. }
  285. .ui.top.left.attached.label {
  286. width: auto;
  287. margin-top: 0em !important;
  288. -webkit-border-radius: 0em 4px 0em 4px;
  289. -moz-border-radius: 0em 4px 0em 4px;
  290. border-radius: 0em 4px 0em 4px;
  291. }
  292. .ui.top.right.attached.label {
  293. width: auto;
  294. right: auto;
  295. left: 0em;
  296. -webkit-border-radius: 4px 0em 4px 0em;
  297. -moz-border-radius: 4px 0em 4px 0em;
  298. border-radius: 4px 0em 4px 0em;
  299. }
  300. .ui.bottom.left.attached.label {
  301. width: auto;
  302. top: auto;
  303. bottom: 0em;
  304. -webkit-border-radius: 0em 4px 4px 0em;
  305. -moz-border-radius: 0em 4px 4px 0em;
  306. border-radius: 0em 4px 4px 0em;
  307. }
  308. .ui.bottom.right.attached.label {
  309. top: auto;
  310. bottom: 0em;
  311. right: auto;
  312. left: 0em;
  313. width: auto;
  314. -webkit-border-radius: 0em 4px 0em 4px;
  315. -moz-border-radius: 0em 4px 0em 4px;
  316. border-radius: 0em 4px 0em 4px;
  317. }
  318. /*-------------------
  319. Corner Label
  320. --------------------*/
  321. .ui.corner.label {
  322. background-color: transparent;
  323. position: absolute;
  324. top: 0em;
  325. left: 0em;
  326. z-index: 10;
  327. margin: 0em;
  328. font-size: 0.8125em;
  329. width: 2rem;
  330. height: 2rem;
  331. padding: 0em;
  332. text-align: center;
  333. -webkit-transition: color 0.2s ease;
  334. -moz-transition: color 0.2s ease;
  335. -o-transition: color 0.2s ease;
  336. -ms-transition: color 0.2s ease;
  337. transition: color 0.2s ease;
  338. }
  339. .ui.corner.label:after {
  340. position: absolute;
  341. content: "";
  342. left: 0em;
  343. top: 0em;
  344. z-index: -1;
  345. width: 0em;
  346. height: 0em;
  347. border-top: 0em solid transparent;
  348. border-left: 3em solid transparent;
  349. border-bottom: 3em solid transparent;
  350. border-right: 0em solid transparent;
  351. border-left-color: inherit;
  352. -webkit-transition: border-color 0.2s ease;
  353. -moz-transition: border-color 0.2s ease;
  354. -o-transition: border-color 0.2s ease;
  355. -ms-transition: border-color 0.2s ease;
  356. transition: border-color 0.2s ease;
  357. }
  358. .ui.corner.label .icon {
  359. margin: 0.4em 0.7em 0em 0em;
  360. }
  361. .ui.corner.label .text {
  362. display: inline-block;
  363. font-weight: bold;
  364. margin: 0.5em 0.6em 0em 0em;
  365. width: 2.5em;
  366. font-size: 0.82em;
  367. text-align: center;
  368. -webkit-transform: rotate(45deg);
  369. -moz-transform: rotate(45deg);
  370. -o-transform: rotate(45deg);
  371. -ms-transform: rotate(45deg);
  372. transform: rotate(45deg);
  373. }
  374. /* Left Corner */
  375. .ui.left.corner.label,
  376. .ui.left.corner.label:after {
  377. left: auto;
  378. right: 0em;
  379. }
  380. .ui.left.corner.label:after {
  381. border-top: 3em solid transparent;
  382. border-left: 3em solid transparent;
  383. border-bottom: 0em solid transparent;
  384. border-right: 0em solid transparent;
  385. border-top-color: inherit;
  386. }
  387. .ui.left.corner.label .icon {
  388. margin: 0.4em -0.7em 0em 0em;
  389. }
  390. .ui.left.corner.label .text {
  391. margin: 0.5em -0.6em 0em 0em;
  392. -webkit-transform: rotate(-45deg);
  393. -moz-transform: rotate(-45deg);
  394. -o-transform: rotate(-45deg);
  395. -ms-transform: rotate(-45deg);
  396. transform: rotate(-45deg);
  397. }
  398. /* Hover */
  399. .ui.corner.label:hover {
  400. background-color: transparent;
  401. }
  402. /*-------------------
  403. Fluid
  404. --------------------*/
  405. .ui.label.fluid,
  406. .ui.fluid.labels > .label {
  407. width: 100%;
  408. -webkit-box-sizing: border-box;
  409. -moz-box-sizing: border-box;
  410. -ms-box-sizing: border-box;
  411. box-sizing: border-box;
  412. }
  413. /*-------------------
  414. Inverted
  415. --------------------*/
  416. .ui.inverted.labels .label,
  417. .ui.inverted.label {
  418. color: #FFFFFF !important;
  419. }
  420. /*-------------------
  421. Colors
  422. --------------------*/
  423. /*--- Black ---*/
  424. .ui.black.labels .label,
  425. .ui.black.label {
  426. background-color: #5C6166 !important;
  427. border-color: #5C6166 !important;
  428. color: #FFFFFF !important;
  429. }
  430. .ui.labels .black.label:before,
  431. .ui.black.labels .label:before,
  432. .ui.black.label:before {
  433. background-color: #5C6166 !important;
  434. }
  435. /* Hover */
  436. a.ui.black.labels .label:hover,
  437. a.ui.black.label:hover {
  438. background-color: #333333 !important;
  439. border-color: #333333 !important;
  440. }
  441. .ui.labels a.black.label:hover:before,
  442. .ui.black.labels a.label:hover:before,
  443. a.ui.black.label:hover:before {
  444. background-color: #333333 !important;
  445. }
  446. /* Corner */
  447. .ui.black.corner.label,
  448. .ui.black.corner.label:hover {
  449. background-color: transparent !important;
  450. }
  451. /* Ribbon */
  452. .ui.black.ribbon.label {
  453. border-color: #333333 !important;
  454. }
  455. /*--- Green ---*/
  456. .ui.green.labels .label,
  457. .ui.green.label {
  458. background-color: #A1CF64 !important;
  459. border-color: #A1CF64 !important;
  460. color: #FFFFFF !important;
  461. }
  462. .ui.labels .green.label:before,
  463. .ui.green.labels .label:before,
  464. .ui.green.label:before {
  465. background-color: #A1CF64 !important;
  466. }
  467. /* Hover */
  468. a.ui.green.labels .label:hover,
  469. a.ui.green.label:hover {
  470. background-color: #89B84C !important;
  471. border-color: #89B84C !important;
  472. }
  473. .ui.labels a.green.label:hover:before,
  474. .ui.green.labels a.label:hover:before,
  475. a.ui.green.label:hover:before {
  476. background-color: #89B84C !important;
  477. }
  478. /* Corner */
  479. .ui.green.corner.label,
  480. .ui.green.corner.label:hover {
  481. background-color: transparent !important;
  482. }
  483. /* Ribbon */
  484. .ui.green.ribbon.label {
  485. border-color: #89B84C !important;
  486. }
  487. /*--- Red ---*/
  488. .ui.red.labels .label,
  489. .ui.red.label {
  490. background-color: #D95C5C !important;
  491. border-color: #D95C5C !important;
  492. color: #FFFFFF !important;
  493. }
  494. .ui.labels .red.label:before,
  495. .ui.red.labels .label:before,
  496. .ui.red.label:before {
  497. background-color: #D95C5C !important;
  498. }
  499. /* Corner */
  500. .ui.red.corner.label,
  501. .ui.red.corner.label:hover {
  502. background-color: transparent !important;
  503. }
  504. /* Hover */
  505. a.ui.red.labels .label:hover,
  506. a.ui.red.label:hover{
  507. background-color: #DE3859 !important;
  508. border-color: #DE3859 !important;
  509. color: #FFFFFF !important;
  510. }
  511. .ui.labels a.red.label:hover:before,
  512. .ui.red.labels a.label:hover:before,
  513. a.ui.red.label:hover:before {
  514. background-color: #DE3859 !important;
  515. }
  516. /* Ribbon */
  517. .ui.red.ribbon.label {
  518. border-color: #DE3859 !important;
  519. }
  520. /*--- Blue ---*/
  521. .ui.blue.labels .label,
  522. .ui.blue.label {
  523. background-color: #6ECFF5 !important;
  524. border-color: #6ECFF5 !important;
  525. color: #FFFFFF !important;
  526. }
  527. .ui.labels .blue.label:before,
  528. .ui.blue.labels .label:before,
  529. .ui.blue.label:before {
  530. background-color: #6ECFF5 !important;
  531. }
  532. /* Hover */
  533. a.ui.blue.labels .label:hover,
  534. .ui.blue.labels a.label:hover,
  535. a.ui.blue.label:hover {
  536. background-color: #1AB8F3 !important;
  537. border-color: #1AB8F3 !important;
  538. color: #FFFFFF !important;
  539. }
  540. .ui.labels a.blue.label:hover:before,
  541. .ui.blue.labels a.label:hover:before,
  542. a.ui.blue.label:hover:before {
  543. background-color: #1AB8F3 !important;
  544. }
  545. /* Corner */
  546. .ui.blue.corner.label,
  547. .ui.blue.corner.label:hover {
  548. background-color: transparent !important;
  549. }
  550. /* Ribbon */
  551. .ui.blue.ribbon.label {
  552. border-color: #1AB8F3 !important;
  553. }
  554. /*--- Purple ---*/
  555. .ui.purple.labels .label,
  556. .ui.purple.label {
  557. background-color: #564F8A !important;
  558. border-color: #564F8A !important;
  559. color: #FFFFFF !important;
  560. }
  561. .ui.labels .purple.label:before,
  562. .ui.purple.labels .label:before,
  563. .ui.purple.label:before {
  564. background-color: #564F8A !important;
  565. }
  566. /* Hover */
  567. a.ui.purple.labels .label:hover,
  568. .ui.purple.labels a.label:hover,
  569. a.ui.purple.label:hover {
  570. background-color: #3E3773 !important;
  571. border-color: #3E3773 !important;
  572. color: #FFFFFF !important;
  573. }
  574. .ui.labels a.purple.label:hover:before,
  575. .ui.purple.labels a.label:hover:before,
  576. a.ui.purple.label:hover:before {
  577. background-color: #3E3773 !important;
  578. }
  579. /* Corner */
  580. .ui.purple.corner.label,
  581. .ui.purple.corner.label:hover {
  582. background-color: transparent !important;
  583. }
  584. /* Ribbon */
  585. .ui.purple.ribbon.label {
  586. border-color: #3E3773 !important;
  587. }
  588. /*--- Orange ---*/
  589. .ui.orange.labels .label,
  590. .ui.orange.label {
  591. background-color: #F05940 !important;
  592. border-color: #F05940 !important;
  593. color: #FFFFFF !important;
  594. }
  595. .ui.labels .orange.label:before,
  596. .ui.orange.labels .label:before,
  597. .ui.orange.label:before {
  598. background-color: #F05940 !important;
  599. }
  600. /* Hover */
  601. a.ui.orange.labels .label:hover,
  602. .ui.orange.labels a.label:hover,
  603. a.ui.orange.label:hover {
  604. background-color: #FF4121 !important;
  605. border-color: #FF4121 !important;
  606. color: #FFFFFF !important;
  607. }
  608. .ui.labels a.orange.label:hover:before,
  609. .ui.orange.labels a.label:hover:before,
  610. a.ui.orange.label:hover:before {
  611. background-color: #FF4121 !important;
  612. }
  613. /* Corner */
  614. .ui.orange.corner.label,
  615. .ui.orange.corner.label:hover {
  616. background-color: transparent !important;
  617. }
  618. /* Ribbon */
  619. .ui.orange.ribbon.label {
  620. border-color: #FF4121 !important;
  621. }
  622. /*--- Teal ---*/
  623. .ui.teal.labels .label,
  624. .ui.teal.label {
  625. background-color: #00B5AD !important;
  626. border-color: #00B5AD !important;
  627. color: #FFFFFF !important;
  628. }
  629. .ui.labels .teal.label:before,
  630. .ui.teal.labels .label:before,
  631. .ui.teal.label:before {
  632. background-color: #00B5AD !important;
  633. }
  634. /* Hover */
  635. a.ui.teal.labels .label:hover,
  636. .ui.teal.labels a.label:hover,
  637. a.ui.teal.label:hover {
  638. background-color: #009A93 !important;
  639. border-color: #009A93 !important;
  640. color: #FFFFFF !important;
  641. }
  642. .ui.labels a.teal.label:hover:before,
  643. .ui.teal.labels a.label:hover:before,
  644. a.ui.teal.label:hover:before {
  645. background-color: #009A93 !important;
  646. }
  647. /* Corner */
  648. .ui.teal.corner.label,
  649. .ui.teal.corner.label:hover {
  650. background-color: transparent !important;
  651. }
  652. /* Ribbon */
  653. .ui.teal.ribbon.label {
  654. border-color: #009A93 !important;
  655. }
  656. /*-------------------
  657. Horizontal
  658. --------------------*/
  659. .ui.horizontal.labels .label,
  660. .ui.horizontal.label {
  661. margin: -0.125em 0em -0.125em 0.5em;
  662. padding: 0.35em 1em;
  663. min-width: 6em;
  664. text-align: center;
  665. }
  666. /*-------------------
  667. Circular
  668. --------------------*/
  669. .ui.circular.labels .label,
  670. .ui.circular.label {
  671. min-height: 1em;
  672. max-height: 2em;
  673. padding: 0.5em !important;
  674. line-height: 1em;
  675. text-align: center;
  676. -webkit-border-radius: 500rem;
  677. -moz-border-radius: 500rem;
  678. border-radius: 500rem;
  679. }
  680. /*-------------------
  681. Pointing
  682. --------------------*/
  683. .ui.pointing.label {
  684. position: relative;
  685. }
  686. .ui.attached.pointing.label {
  687. position: absolute;
  688. }
  689. .ui.pointing.label:before {
  690. position: absolute;
  691. content: "";
  692. width: 0.6em;
  693. height: 0.6em;
  694. background-image: none;
  695. -webkit-transform: rotate(45deg);
  696. -moz-transform: rotate(45deg);
  697. transform: rotate(45deg);
  698. z-index: 2;
  699. -webkit-transition:
  700. background 0.1s linear
  701. ;
  702. -moz-transition:
  703. background 0.1s linear
  704. ;
  705. -o-transition:
  706. background 0.1s linear
  707. ;
  708. -ms-transition:
  709. background 0.1s linear
  710. ;
  711. transition:
  712. background 0.1s linear
  713. ;
  714. }
  715. /*--- Above ---*/
  716. .ui.pointing.label:before {
  717. background-color: #E8E8E8;
  718. }
  719. .ui.pointing.label,
  720. .ui.pointing.above.label {
  721. margin-top: 1em;
  722. }
  723. .ui.pointing.label:before,
  724. .ui.pointing.above.label:before {
  725. margin-right: -0.3em;
  726. top: -0.3em;
  727. right: 50%;
  728. }
  729. /*--- Below ---*/
  730. .ui.pointing.below.label {
  731. margin-top: 0em;
  732. margin-bottom: 1em;
  733. }
  734. .ui.pointing.below.label:before {
  735. margin-right: -0.3em;
  736. top: auto;
  737. left: auto;
  738. bottom: -0.3em;
  739. right: 50%;
  740. }
  741. /*--- Left ---*/
  742. .ui.pointing.left.label {
  743. margin-top: 0em;
  744. margin-right: 1em;
  745. }
  746. .ui.pointing.left.label:before {
  747. margin-top: -0.3em;
  748. bottom: auto;
  749. left: auto;
  750. top: 50%;
  751. right: 0em;
  752. }
  753. /*--- Right ---*/
  754. .ui.pointing.right.label {
  755. margin-top: 0em;
  756. margin-left: 1em;
  757. }
  758. .ui.pointing.right.label:before {
  759. margin-top: -0.3em;
  760. left: -0.3em;
  761. top: 50%;
  762. bottom: auto;
  763. right: auto;
  764. }
  765. /*------------------
  766. Floating Label
  767. -------------------*/
  768. .ui.floating.label {
  769. position: absolute;
  770. z-index: 100;
  771. top: -1em;
  772. right: 100%;
  773. margin: 0em -1.5em 0em 0em !important;
  774. }
  775. /*-------------------
  776. Sizes
  777. --------------------*/
  778. .ui.small.labels .label,
  779. .ui.small.label {
  780. font-size: 0.75rem;
  781. }
  782. .ui.label {
  783. font-size: 0.8125rem;
  784. }
  785. .ui.large.labels .label,
  786. .ui.large.label {
  787. font-size: 0.875rem;
  788. }
  789. .ui.huge.labels .label,
  790. .ui.huge.label {
  791. font-size: 1rem;
  792. }