star-rating.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /*!
  2. * @copyright © Kartik Visweswaran, Krajee.com, 2014
  3. * @version 2.5.0
  4. *
  5. * A simple yet powerful JQuery star rating plugin that allows rendering
  6. * fractional star ratings and supports Right to Left (RTL) input.
  7. *
  8. * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com
  9. * For more Yii related demos visit http://demos.krajee.com
  10. */
  11. /*
  12. * Stars
  13. */
  14. .rating-gly {
  15. font-family: 'Glyphicons Halflings';
  16. }
  17. .rating-gly-star {
  18. font-family: 'Glyphicons Halflings';
  19. padding-left: 2px;
  20. }
  21. .rating-gly-star .rating-stars:before {
  22. padding-left: 2px;
  23. }
  24. .rating-lg .rating-gly-star, .rating-lg .rating-gly-star .rating-stars:before {
  25. padding-left: 4px;
  26. }
  27. .rating-xl .rating-gly-star, .rating-xl .rating-gly-star .rating-stars:before {
  28. padding-left: 2px;
  29. }
  30. .rating-active {
  31. cursor: default;
  32. }
  33. .rating-disabled {
  34. cursor: not-allowed;
  35. }
  36. .rating-uni {
  37. font-size: 1.2em;
  38. margin-top: -5px;
  39. }
  40. .rating-container {
  41. position: relative;
  42. vertical-align: middle;
  43. display: inline-block;
  44. color: #e3e3e3;
  45. overflow: hidden;
  46. }
  47. .rating-container:before {
  48. content: attr(data-content);
  49. }
  50. .rating-container .rating-stars {
  51. position: absolute;
  52. left: 0;
  53. top: 0;
  54. white-space: nowrap;
  55. overflow: hidden;
  56. color: #fde16d;
  57. transition: all 0.25s ease-out;
  58. -o-transition: all 0.25s ease-out;
  59. -moz-transition: all 0.25s ease-out;
  60. -webkit-transition: all 0.25s ease-out;
  61. }
  62. .rating-container .rating-stars:before {
  63. content: attr(data-content);
  64. text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  65. }
  66. .rating-container-rtl {
  67. position: relative;
  68. vertical-align: middle;
  69. display: inline-block;
  70. overflow: hidden;
  71. color: #fde16d;
  72. }
  73. .rating-container-rtl:before {
  74. content: attr(data-content);
  75. text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  76. }
  77. .rating-container-rtl .rating-stars {
  78. position: absolute;
  79. left: 0;
  80. top: 0;
  81. white-space: nowrap;
  82. overflow: hidden;
  83. color: #e3e3e3;
  84. transition: all 0.25s ease-out;
  85. -o-transition: all 0.25s ease-out;
  86. -moz-transition: all 0.25s ease-out;
  87. -webkit-transition: all 0.25s ease-out;
  88. }
  89. .rating-container-rtl .rating-stars:before {
  90. content: attr(data-content);
  91. }
  92. /**
  93. * Rating sizes
  94. */
  95. .rating-xl {
  96. font-size: 4.89em;
  97. }
  98. .rating-lg {
  99. font-size: 3.91em;
  100. }
  101. .rating-md {
  102. font-size: 3.13em;
  103. }
  104. .rating-sm {
  105. font-size: 2.5em;
  106. }
  107. .rating-xs {
  108. font-size: 2em;
  109. }
  110. /**
  111. * Clear rating button
  112. */
  113. .star-rating .clear-rating, .star-rating-rtl .clear-rating {
  114. color: #aaa;
  115. cursor: not-allowed;
  116. display: inline-block;
  117. vertical-align: middle;
  118. font-size: 60%;
  119. }
  120. .clear-rating-active {
  121. cursor: pointer !important;
  122. }
  123. .clear-rating-active:hover {
  124. color: #843534;
  125. }
  126. .star-rating .clear-rating {
  127. padding-right: 5px;
  128. }
  129. /**
  130. * Caption
  131. */
  132. .star-rating .caption, .star-rating-rtl .caption {
  133. color: #999;
  134. display: inline-block;
  135. vertical-align: middle;
  136. font-size: 55%;
  137. }
  138. .star-rating .caption {
  139. padding-left: 5px;
  140. }
  141. .star-rating-rtl .caption {
  142. padding-right: 5px;
  143. }