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.

120 lines
2.2 KiB

  1. /*******************************
  2. Star Rating
  3. *******************************/
  4. .ui.rating {
  5. display: inline-block;
  6. vertical-align: middle;
  7. margin: 0em 0.5em;
  8. }
  9. .ui.rating:first-child {
  10. margin-left: 0em;
  11. }
  12. .ui.rating:last-child {
  13. margin-right: 0em;
  14. }
  15. .ui.rating:after {
  16. display: block;
  17. content: '';
  18. visibility: hidden;
  19. clear: both;
  20. height: 0;
  21. }
  22. /* Icon */
  23. .ui.rating .icon {
  24. cursor: default;
  25. float: left;
  26. margin: 0em;
  27. width: 1em;
  28. height: auto;
  29. padding: 0em;
  30. font-weight: normal;
  31. font-style: normal;
  32. }
  33. .ui.rating .icon:after {
  34. content: "\2605";
  35. color: rgba(0, 0, 0, 0.15);
  36. -webkit-transition: color 0.3s ease,
  37. opacity 0.3s ease
  38. ;
  39. -moz-transition: color 0.3s ease,
  40. opacity 0.3s ease
  41. ;
  42. -ms-transition: color 0.3s ease,
  43. opacity 0.3s ease
  44. ;
  45. -o-transition: color 0.3s ease,
  46. opacity 0.3s ease
  47. ;
  48. transition: color 0.3s ease,
  49. opacity 0.3s ease
  50. ;
  51. }
  52. /*******************************
  53. Types
  54. *******************************/
  55. /*-------------------
  56. Star
  57. --------------------*/
  58. .ui.star.rating .icon:after {
  59. content: '\e800';
  60. font-family: 'Icons';
  61. }
  62. .ui.star.rating .active.icon:after {
  63. content: '\e801';
  64. font-family: 'Icons';
  65. }
  66. /*-------------------
  67. Heart
  68. --------------------*/
  69. .ui.heart.rating .icon:after {
  70. content: '\2661';
  71. font-family: 'Icons';
  72. }
  73. .ui.heart.rating .active.icon:after {
  74. content: '\2665';
  75. font-family: 'Icons';
  76. color: #EF404A;
  77. }
  78. .ui.heart.rating .hover.icon:after,
  79. .ui.heart.rating .active.hover.icon:after {
  80. color: #FF2733;
  81. }
  82. /*******************************
  83. States
  84. *******************************/
  85. /*-------------------
  86. Active
  87. --------------------*/
  88. /* active rating */
  89. .ui.active.rating .icon {
  90. cursor: pointer;
  91. }
  92. /* active icons */
  93. .ui.rating .active.icon:after {
  94. color: #FFCB08;
  95. }
  96. /*-------------------
  97. Hover
  98. --------------------*/
  99. /* rating */
  100. .ui.rating.hover .active.icon:after {
  101. opacity: 0.5;
  102. }
  103. /* icon */
  104. .ui.rating .icon.hover:after,
  105. .ui.rating .icon.hover.active:after {
  106. opacity: 1;
  107. color: #FFB70A;
  108. }
  109. /*******************************
  110. Variations
  111. *******************************/
  112. .ui.small.rating {
  113. font-size: 1rem;
  114. }
  115. .ui.rating {
  116. font-size: 1.5rem;
  117. }
  118. .ui.large.rating {
  119. font-size: 2rem;
  120. }