Add many new rating variables

src/definitions/modules/rating.less

@@ -37,19 +37,19 @@
   visibility: hidden;
   clear: both;
   height: 0;
+  vertical-align: middle;
 }
 
 /* Icon */
 .ui.rating .icon {
-  cursor: pointer;
-
+  padding: 0em;
   margin: 0em;
-  width: @iconWidth;
-  height: auto;
   text-align: center;
-  padding: 0em;
   font-weight: normal;
   font-style: normal;
+  cursor: @iconCursor;
+  width: @iconWidth;
+  height: @iconHeight;
 }
 
 
@@ -57,6 +57,31 @@
              Types
 *******************************/
 
+
+/*-------------------
+      Standard
+--------------------*/
+
+/* Inactive Icon */
+.ui.rating .icon {
+  background: @inactiveBackground;
+  color: @inactiveColor;
+}
+
+/* Active Icon */
+.ui.rating .active.icon {
+  background: @activeBackground;
+  color: @activeColor;
+}
+
+/* Selected Icon */
+.ui.rating .icon.selected,
+.ui.rating .icon.selected.active {
+  background: @hoverBackground;
+  color: @hoverColor;
+}
+
+
 /*-------------------
         Star
 --------------------*/
@@ -64,11 +89,14 @@
 /* Inactive */
 .ui.star.rating .icon {
   width: @starIconWidth;
+  height: @starIconHeight;
+  background: @starInactiveBackground;
   color: @starInactiveColor;
 }
 
 /* Active Star */
 .ui.star.rating .active.icon {
+  background: @starActiveBackground !important;
   color: @starActiveColor !important;
   text-shadow: @starActiveShadow;
 }
@@ -76,19 +104,10 @@
 /* Selected Star */
 .ui.star.rating .icon.selected,
 .ui.star.rating .icon.selected.active {
+  background: @starSelectedBackground !important;
   color: @starSelectedColor !important;
 }
 
-.ui.star.rating.partial {
-  position: relative;
-  z-index: 1;
-}
-.ui.star.rating.partial:before {
-  position: absolute;
-  z-index: -1;
-}
-
-
 
 /*-------------------
         Heart
@@ -96,11 +115,14 @@
 
 .ui.heart.rating .icon {
   width: @heartIconWidth;
+  height: @heartIconHeight;
+  background: @heartInactiveBackground;
   color: @heartInactiveColor;
 }
 
 /* Active Heart */
 .ui.heart.rating .active.icon {
+  background: @heartActiveBackground !important;
   color: @heartActiveColor !important;
   text-shadow: @heartActiveShadow;
 }
@@ -108,6 +130,7 @@
 /* Selected Heart */
 .ui.heart.rating .icon.selected,
 .ui.heart.rating .icon.selected.active {
+  background: @heartSelectedBackground !important;
   color: @heartSelectedColor !important;
 }
 
@@ -116,24 +139,6 @@
              States
 *******************************/
 
-
-/* Inactive Icon */
-.ui.rating .icon {
-  color: @inactiveColor;
-}
-
-/* Active Icon */
-.ui.rating .active.icon {
-  color: @activeColor;
-}
-
-/* Selected Icon */
-.ui.rating .icon.selected,
-.ui.rating .icon.selected.active {
-  color: @hoverColor;
-}
-
-
 /*-------------------
        Disabled
 --------------------*/
@@ -145,7 +150,7 @@
 
 
 /*-------------------
-     Interacting (Active)
+   User Interactive
 --------------------*/
 
 /* Selected Rating */

src/themes/default/modules/rating.variables

@@ -7,18 +7,36 @@
 
 @verticalAlign: middle;
 
-@iconWidth: 1.1em;
+@iconCursor: pointer;
+@iconWidth: 1.25em;
+@iconHeight: auto;
 
-@inactiveColor: rgba(0, 0, 0, 0.15);
 
 /*-------------------
         Types
 --------------------*/
 
+/* Standard */
+@inactiveBackground: transparent;
+@inactiveColor: rgba(0, 0, 0, 0.15);
+
+@hoverBackground: @inactiveBackground;
+@hoverColor: @textColor;
+
+@activeBackground: @inactiveBackground;
+@activeColor: @darkTextColor;
+
 /* Star */
 @starIconWidth: @iconWidth;
+@starIconHeight: @iconHeight;
+
+@starInactiveBackground: @inactiveBackground;
 @starInactiveColor: @inactiveColor;
+
+@starSelectedBackground: @selectedBackground;
 @starSelectedColor: #FFB70A;
+
+@starActiveBackground: @activeBackground;
 @starActiveColor: #FFE623;
 @starActiveShadow:
   0px -1px 0px #CFA300,
@@ -28,10 +46,18 @@
 ;
 
 /* Heart */
-@heartIconWidth: 1.25em;
+@heartIconWidth: 1.4em;
+@heartIconHeight: @iconHeight;
+
+@heartInactiveBackground: @inactiveBackground;
 @heartInactiveColor: @inactiveColor;
+
+@heartSelectedBackground: @selectedBackground;
 @heartSelectedColor: #FF2733;
+
+@heartActiveBackground: @activeBackground;
 @heartActiveColor: #FF2733;
+
 @heartActiveShadow:
   0px -1px 0px #9E0000,
   -1px 0px 0px #9E0000,
@@ -44,10 +70,6 @@
         States
 --------------------*/
 
-@inactiveColor: rgba(0, 0, 0, 0.15);
-@hoverColor: @textColor;
-@activeColor: @darkTextColor;
-
 @interactiveIconOpacity: 0.5;
 @interactiveSelectedIconOpacity: 1;