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.

129 lines
2.4 KiB

10 years ago
  1. /*
  2. * # Semantic - Rating
  3. * http://github.com/semantic-org/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.5rem 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: pointer;
  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. }
  44. /*******************************
  45. Types
  46. *******************************/
  47. /*-------------------
  48. Star
  49. --------------------*/
  50. .ui.star.rating .icon {
  51. width: 1.2em;
  52. }
  53. /* Star */
  54. .ui.star.rating .icon:before {
  55. content: '\f006';
  56. font-family: 'Icons';
  57. }
  58. /* Active Star */
  59. .ui.star.rating .active.icon:before {
  60. content: '\f005';
  61. font-family: 'Icons';
  62. }
  63. /*-------------------
  64. Heart
  65. --------------------*/
  66. .ui.heart.rating .icon {
  67. width: 1.2em;
  68. }
  69. .ui.heart.rating .icon:before {
  70. content: '\f08a';
  71. font-family: 'Icons';
  72. }
  73. /* Active */
  74. .ui.heart.rating .active.icon:before {
  75. content: '\f004';
  76. font-family: 'Icons';
  77. }
  78. .ui.heart.rating .active.icon {
  79. color: #EF404A !important;
  80. }
  81. /* Hovered */
  82. .ui.heart.rating .hover.icon,
  83. .ui.heart.rating .active.hover.icon {
  84. color: #FF2733 !important;
  85. }
  86. /*******************************
  87. States
  88. *******************************/
  89. /*-------------------
  90. Active
  91. --------------------*/
  92. /* disabled rating */
  93. .ui.disabled.rating .icon {
  94. cursor: default;
  95. }
  96. /* active icons */
  97. .ui.rating .active.icon {
  98. color: #FFCB08 !important;
  99. }
  100. /*-------------------
  101. Hover
  102. --------------------*/
  103. /* rating */
  104. .ui.rating.hover .active.icon {
  105. opacity: 0.5;
  106. }
  107. /* icon */
  108. .ui.rating .icon.hover,
  109. .ui.rating .icon.hover.active {
  110. opacity: 1;
  111. color: #FFB70A !important;
  112. }
  113. /*******************************
  114. Variations
  115. *******************************/
  116. .ui.small.rating .icon {
  117. font-size: 0.75rem;
  118. }
  119. .ui.rating .icon {
  120. font-size: 1rem;
  121. }
  122. .ui.large.rating .icon {
  123. font-size: 1.5rem;
  124. vertical-align: middle;
  125. }
  126. .ui.huge.rating .icon {
  127. font-size: 2rem;
  128. vertical-align: middle;
  129. }