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.

173 lines
2.7 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
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. Theme
  13. *******************************/
  14. @type : 'module';
  15. @element : 'rating';
  16. @import '../../semantic.config';
  17. /*******************************
  18. Rating
  19. *******************************/
  20. .ui.rating {
  21. display: @display;
  22. font-size: 0em;
  23. vertical-align: @verticalAlign;
  24. margin: @margin;
  25. }
  26. .ui.rating:last-child {
  27. margin-right: 0em;
  28. }
  29. .ui.rating:before {
  30. display: block;
  31. content: '';
  32. visibility: hidden;
  33. clear: both;
  34. height: 0;
  35. }
  36. /* Icon */
  37. .ui.rating .icon {
  38. cursor: pointer;
  39. margin: 0em;
  40. width: @iconHitbox;
  41. height: auto;
  42. padding: 0em;
  43. font-weight: normal;
  44. font-style: normal;
  45. vertical-align: top;
  46. }
  47. /*******************************
  48. Types
  49. *******************************/
  50. /*-------------------
  51. Star
  52. --------------------*/
  53. /* Inactive */
  54. .ui.star.rating .icon {
  55. color: @starInactiveColor;
  56. }
  57. /* Active Star */
  58. .ui.star.rating .active.icon {
  59. color: @starActiveColor !important;
  60. }
  61. /* Hovered Star */
  62. .ui.star.rating .icon.hover,
  63. .ui.star.rating .icon.hover.active {
  64. color: @starHoverColor !important;
  65. }
  66. /*-------------------
  67. Heart
  68. --------------------*/
  69. .ui.star.rating .icon {
  70. color: @heartInactiveColor;
  71. }
  72. /* Active Heart */
  73. .ui.heart.rating .active.icon {
  74. color: @heartActiveColor !important;
  75. }
  76. /* Hovered Heart */
  77. .ui.heart.rating .icon.hover,
  78. .ui.heart.rating .icon.hover.active {
  79. color: @heartHoverColor !important;
  80. }
  81. /*******************************
  82. States
  83. *******************************/
  84. /* Inactive Icon */
  85. .ui.rating .icon {
  86. color: @inactiveColor;
  87. }
  88. /* Active Icon */
  89. .ui.rating .active.icon {
  90. color: @activeColor;
  91. }
  92. /* Hovered Icon */
  93. .ui.rating .icon.hover,
  94. .ui.rating .icon.hover.active {
  95. color: @hoverColor;
  96. }
  97. /*-------------------
  98. Disabled
  99. --------------------*/
  100. /* disabled rating */
  101. .ui.disabled.rating .icon {
  102. cursor: default;
  103. }
  104. /*-------------------
  105. Interacting
  106. --------------------*/
  107. /* Selected Rating */
  108. .ui.rating.hover .active.icon {
  109. opacity: @interactiveIconOpacity;
  110. }
  111. .ui.rating.hover .icon.hover,
  112. .ui.rating .icon.hover {
  113. opacity: @interactiveHoveredIconOpacity;
  114. }
  115. /*******************************
  116. Variations
  117. *******************************/
  118. .ui.small.rating .icon {
  119. font-size: @small;
  120. }
  121. .ui.rating .icon {
  122. font-size: @medium;
  123. }
  124. .ui.large.rating .icon {
  125. font-size: @large;
  126. }
  127. .ui.huge.rating .icon {
  128. font-size: @huge;
  129. }
  130. /* Realign */
  131. .ui.large.rating,
  132. .ui.huge.rating {
  133. vertical-align: @oversizedVerticalAlign;
  134. }
  135. .loadUIOverrides();