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.

144 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 0.5em 0em 0em;
  19. }
  20. .ui.rating:last-child {
  21. margin-right: 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: color 0.3s ease,
  44. opacity 0.3s ease
  45. ;
  46. -moz-transition: color 0.3s ease,
  47. opacity 0.3s ease
  48. ;
  49. -ms-transition: color 0.3s ease,
  50. opacity 0.3s ease
  51. ;
  52. -o-transition: color 0.3s ease,
  53. opacity 0.3s ease
  54. ;
  55. transition: color 0.3s ease,
  56. opacity 0.3s ease
  57. ;
  58. }
  59. /*******************************
  60. Types
  61. *******************************/
  62. /*-------------------
  63. Star
  64. --------------------*/
  65. .ui.star.rating .icon {
  66. width: 1.2em;
  67. }
  68. /* Star */
  69. .ui.star.rating .icon:before {
  70. content: '\f006';
  71. font-family: 'Icons';
  72. }
  73. /* Active Star */
  74. .ui.star.rating .active.icon:before {
  75. content: '\f005';
  76. font-family: 'Icons';
  77. }
  78. /*-------------------
  79. Heart
  80. --------------------*/
  81. .ui.heart.rating .icon {
  82. width: 1.2em;
  83. }
  84. .ui.heart.rating .icon:before {
  85. content: '\f08a';
  86. font-family: 'Icons';
  87. }
  88. /* Active */
  89. .ui.heart.rating .active.icon:before {
  90. content: '\f004';
  91. font-family: 'Icons';
  92. }
  93. .ui.heart.rating .active.icon {
  94. color: !important;
  95. }
  96. /* Hovered */
  97. .ui.heart.rating .hover.icon,
  98. .ui.heart.rating .active.hover.icon {
  99. color: !important;
  100. }
  101. /*******************************
  102. States
  103. *******************************/
  104. /*-------------------
  105. Active
  106. --------------------*/
  107. /* active rating */
  108. .ui.active.rating .icon {
  109. cursor: pointer;
  110. }
  111. /* active icons */
  112. .ui.rating .active.icon {
  113. color: #FFCB08 !important;
  114. }
  115. /*-------------------
  116. Hover
  117. --------------------*/
  118. /* rating */
  119. .ui.rating.hover .active.icon {
  120. opacity: 0.5;
  121. }
  122. /* icon */
  123. .ui.rating .icon.hover,
  124. .ui.rating .icon.hover.active {
  125. opacity: 1;
  126. color: #FFB70A !important;
  127. }
  128. /*******************************
  129. Variations
  130. *******************************/
  131. .ui.small.rating .icon {
  132. font-size: 0.75rem;
  133. }
  134. .ui.rating .icon {
  135. font-size: 1rem;
  136. }
  137. .ui.large.rating .icon {
  138. font-size: 1.5rem;
  139. vertical-align: middle;
  140. }
  141. .ui.huge.rating .icon {
  142. font-size: 2rem;
  143. vertical-align: middle;
  144. }