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.

194 lines
3.8 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Rating
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Rating
  13. *******************************/
  14. .ui.rating {
  15. display: -webkit-inline-box;
  16. display: -webkit-inline-flex;
  17. display: -ms-inline-flexbox;
  18. display: inline-flex;
  19. white-space: nowrap;
  20. vertical-align: baseline;
  21. }
  22. .ui.rating:last-child {
  23. margin-right: 0em;
  24. }
  25. /* Icon */
  26. .ui.rating .icon {
  27. padding: 0em;
  28. margin: 0em;
  29. text-align: center;
  30. font-weight: normal;
  31. font-style: normal;
  32. -webkit-box-flex: 1;
  33. -webkit-flex: 1 0 auto;
  34. -ms-flex: 1 0 auto;
  35. flex: 1 0 auto;
  36. cursor: pointer;
  37. width: 1.25em;
  38. height: auto;
  39. -webkit-transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease;
  40. transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease;
  41. }
  42. /*******************************
  43. Types
  44. *******************************/
  45. /*-------------------
  46. Standard
  47. --------------------*/
  48. /* Inactive Icon */
  49. .ui.rating .icon {
  50. background: transparent;
  51. color: rgba(0, 0, 0, 0.15);
  52. }
  53. /* Active Icon */
  54. .ui.rating .active.icon {
  55. background: transparent;
  56. color: rgba(0, 0, 0, 0.85);
  57. }
  58. /* Selected Icon */
  59. .ui.rating .icon.selected,
  60. .ui.rating .icon.selected.active {
  61. background: transparent;
  62. color: rgba(0, 0, 0, 0.87);
  63. }
  64. /*-------------------
  65. Star
  66. --------------------*/
  67. /* Inactive */
  68. .ui.star.rating .icon {
  69. width: 1.25em;
  70. height: auto;
  71. background: transparent;
  72. color: rgba(0, 0, 0, 0.15);
  73. text-shadow: none;
  74. }
  75. /* Active Star */
  76. .ui.star.rating .active.icon {
  77. background: transparent !important;
  78. color: #FFE623 !important;
  79. text-shadow: 0px -1px 0px #DDC507, -1px 0px 0px #DDC507, 0px 1px 0px #DDC507, 1px 0px 0px #DDC507 !important;
  80. }
  81. /* Selected Star */
  82. .ui.star.rating .icon.selected,
  83. .ui.star.rating .icon.selected.active {
  84. background: transparent !important;
  85. color: #FFCC00 !important;
  86. text-shadow: 0px -1px 0px #E6A200, -1px 0px 0px #E6A200, 0px 1px 0px #E6A200, 1px 0px 0px #E6A200 !important;
  87. }
  88. /*-------------------
  89. Heart
  90. --------------------*/
  91. .ui.heart.rating .icon {
  92. width: 1.4em;
  93. height: auto;
  94. background: transparent;
  95. color: rgba(0, 0, 0, 0.15);
  96. text-shadow: none !important;
  97. }
  98. /* Active Heart */
  99. .ui.heart.rating .active.icon {
  100. background: transparent !important;
  101. color: #FF6D75 !important;
  102. text-shadow: 0px -1px 0px #CD0707, -1px 0px 0px #CD0707, 0px 1px 0px #CD0707, 1px 0px 0px #CD0707 !important;
  103. }
  104. /* Selected Heart */
  105. .ui.heart.rating .icon.selected,
  106. .ui.heart.rating .icon.selected.active {
  107. background: transparent !important;
  108. color: #FF3000 !important;
  109. text-shadow: 0px -1px 0px #AA0101, -1px 0px 0px #AA0101, 0px 1px 0px #AA0101, 1px 0px 0px #AA0101 !important;
  110. }
  111. /*******************************
  112. States
  113. *******************************/
  114. /*-------------------
  115. Disabled
  116. --------------------*/
  117. /* disabled rating */
  118. .ui.disabled.rating .icon {
  119. cursor: default;
  120. }
  121. /*-------------------
  122. User Interactive
  123. --------------------*/
  124. /* Selected Rating */
  125. .ui.rating.selected .active.icon {
  126. opacity: 1;
  127. }
  128. .ui.rating.selected .icon.selected,
  129. .ui.rating .icon.selected {
  130. opacity: 1;
  131. }
  132. /*******************************
  133. Variations
  134. *******************************/
  135. .ui.mini.rating {
  136. font-size: 0.69230769rem;
  137. }
  138. .ui.tiny.rating {
  139. font-size: 0.84615385rem;
  140. }
  141. .ui.small.rating {
  142. font-size: 0.92307692rem;
  143. }
  144. .ui.rating {
  145. font-size: 1rem;
  146. }
  147. .ui.large.rating {
  148. font-size: 1.15384615rem;
  149. }
  150. .ui.huge.rating {
  151. font-size: 1.46153846rem;
  152. }
  153. .ui.massive.rating {
  154. font-size: 2rem;
  155. }
  156. /*******************************
  157. Site Overrides
  158. *******************************/