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.

178 lines
2.7 KiB

  1. /*
  2. * # Semantic - Rating
  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. Rating
  13. *******************************/
  14. .ui.rating {
  15. display: inline-block;
  16. font-size: 0em;
  17. vertical-align: baseline;
  18. margin: 0em 0em 0em 0.5rem;
  19. }
  20. .ui.rating:last-child {
  21. margin-left: 0em;
  22. }
  23. .ui.rating:before {
  24. display: block;
  25. content: '';
  26. visibility: hidden;
  27. clear: both;
  28. height: 0;
  29. }
  30. /* Icon */
  31. .ui.rating .icon {
  32. cursor: default;
  33. margin: 0em;
  34. width: 1em;
  35. height: auto;
  36. padding: 0em;
  37. color: rgba(0, 0, 0, 0.15);
  38. font-weight: normal;
  39. font-style: normal;
  40. }
  41. .ui.rating .icon:before {
  42. content: "\2605";
  43. -webkit-transition:
  44. color 0.3s ease,
  45. opacity 0.3s ease
  46. ;
  47. -moz-transition:
  48. color 0.3s ease,
  49. opacity 0.3s ease
  50. ;
  51. -ms-transition:
  52. color 0.3s ease,
  53. opacity 0.3s ease
  54. ;
  55. -o-transition:
  56. color 0.3s ease,
  57. opacity 0.3s ease
  58. ;
  59. transition:
  60. color 0.3s ease,
  61. opacity 0.3s ease
  62. ;
  63. }
  64. /*******************************
  65. Types
  66. *******************************/
  67. /*-------------------
  68. Star
  69. --------------------*/
  70. .ui.star.rating .icon {
  71. width: 1.2em;
  72. }
  73. /* Star */
  74. .ui.star.rating .icon:before {
  75. content: '\f006';
  76. font-family: 'Icons';
  77. }
  78. /* Active Star */
  79. .ui.star.rating .active.icon:before {
  80. content: '\f005';
  81. font-family: 'Icons';
  82. }
  83. /*-------------------
  84. Heart
  85. --------------------*/
  86. .ui.heart.rating .icon {
  87. width: 1.2em;
  88. }
  89. .ui.heart.rating .icon:before {
  90. content: '\f08a';
  91. font-family: 'Icons';
  92. }
  93. /* Active */
  94. .ui.heart.rating .active.icon:before {
  95. content: '\f004';
  96. font-family: 'Icons';
  97. }
  98. .ui.heart.rating .active.icon {
  99. color: #EF404A !important;
  100. }
  101. /* Hovered */
  102. .ui.heart.rating .hover.icon,
  103. .ui.heart.rating .active.hover.icon {
  104. color: #FF2733 !important;
  105. }
  106. /*******************************
  107. States
  108. *******************************/
  109. /*-------------------
  110. Active
  111. --------------------*/
  112. /* active rating */
  113. .ui.active.rating .icon {
  114. cursor: pointer;
  115. }
  116. /* active icons */
  117. .ui.rating .active.icon {
  118. color: #FFCB08 !important;
  119. }
  120. /*-------------------
  121. Hover
  122. --------------------*/
  123. /* rating */
  124. .ui.rating.hover .active.icon {
  125. opacity: 0.5;
  126. }
  127. /* icon */
  128. .ui.rating .icon.hover,
  129. .ui.rating .icon.hover.active {
  130. opacity: 1;
  131. color: #FFB70A !important;
  132. }
  133. /*******************************
  134. Variations
  135. *******************************/
  136. .ui.small.rating .icon {
  137. font-size: 0.75rem;
  138. }
  139. .ui.rating .icon {
  140. font-size: 1rem;
  141. }
  142. .ui.large.rating .icon {
  143. font-size: 1.5rem;
  144. vertical-align: middle;
  145. }
  146. .ui.huge.rating .icon {
  147. font-size: 2rem;
  148. vertical-align: middle;
  149. }