star-rating.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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. letter-spacing: 6px;
  50. }
  51. .rating-container .rating-stars {
  52. position: absolute;
  53. left: 0;
  54. top: 0;
  55. white-space: nowrap;
  56. overflow: hidden;
  57. color: #428bca;
  58. transition: all 0.25s ease-out;
  59. -o-transition: all 0.25s ease-out;
  60. -moz-transition: all 0.25s ease-out;
  61. -webkit-transition: all 0.25s ease-out;
  62. }
  63. .rating-container .rating-stars:before {
  64. content: attr(data-content);
  65. text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  66. letter-spacing: 6px;
  67. }
  68. .rating-container-rtl {
  69. position: relative;
  70. vertical-align: middle;
  71. display: inline-block;
  72. overflow: hidden;
  73. color: #fde16d;
  74. }
  75. .rating-container-rtl:before {
  76. content: attr(data-content);
  77. text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  78. }
  79. .rating-container-rtl .rating-stars {
  80. position: absolute;
  81. left: 0;
  82. top: 0;
  83. white-space: nowrap;
  84. overflow: hidden;
  85. color: #e3e3e3;
  86. transition: all 0.25s ease-out;
  87. -o-transition: all 0.25s ease-out;
  88. -moz-transition: all 0.25s ease-out;
  89. -webkit-transition: all 0.25s ease-out;
  90. }
  91. .rating-container-rtl .rating-stars:before {
  92. content: attr(data-content);
  93. }
  94. /**
  95. * Rating sizes
  96. */
  97. .rating-xl {
  98. font-size: 4.89em;
  99. }
  100. .rating-lg {
  101. font-size: 3.91em;
  102. }
  103. .rating-md {
  104. font-size: 3.13em;
  105. }
  106. .rating-sm {
  107. font-size: 2.5em;
  108. }
  109. .rating-xs {
  110. font-size: 1.3em;
  111. }
  112. /**
  113. * Clear rating button
  114. */
  115. .star-rating .clear-rating, .star-rating-rtl .clear-rating {
  116. color: #aaa;
  117. cursor: not-allowed;
  118. display: inline-block;
  119. vertical-align: middle;
  120. font-size: 60%;
  121. }
  122. .clear-rating-active {
  123. cursor: pointer !important;
  124. }
  125. .clear-rating-active:hover {
  126. color: #843534;
  127. }
  128. .star-rating .clear-rating {
  129. padding-right: 5px;
  130. }
  131. /**
  132. * Caption
  133. */
  134. .star-rating .caption, .star-rating-rtl .caption {
  135. color: #999;
  136. display: inline-block;
  137. vertical-align: middle;
  138. font-size: 55%;
  139. }
  140. .star-rating .caption {
  141. padding-left: 5px;
  142. }
  143. .star-rating-rtl .caption {
  144. padding-right: 5px;
  145. }