Adds border color to ui rating

fomantic · Aug 29, 2014 · 2b38956 · 2b38956
1 parent 5b4116c
commit 2b38956
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/definitions/modules/rating.less b/src/definitions/modules/rating.less
@@ -57,6 +57,7 @@
   vertical-align: top;
 }
 
+
 /*******************************
              Types
 *******************************/
@@ -67,12 +68,14 @@
 
 /* Inactive */
 .ui.star.rating .icon {
+  width: @starIconHitbox;
   color: @starInactiveColor;
 }
 
 /* Active Star */
 .ui.star.rating .active.icon {
   color: @starActiveColor !important;
+  text-shadow: @starActiveShadow;
 }
 
 /* Hovered Star */
@@ -81,18 +84,30 @@
   color: @starHoverColor !important;
 }
 
+.ui.star.rating.partial {
+  position: relative;
+  z-index: 1;
+}
+.ui.star.rating.partial:before {
+  position: absolute;
+  z-index: -1;
+}
+
+
 
 /*-------------------
         Heart
 --------------------*/
 
-.ui.star.rating .icon {
+.ui.heart.rating .icon {
+  width: @heartIconHitbox;
   color: @heartInactiveColor;
 }
 
 /* Active Heart */
 .ui.heart.rating .active.icon {
   color: @heartActiveColor !important;
+  text-shadow: @heartActiveShadow;
 }
 
 /* Hovered Heart */

diff --git a/src/themes/packages/default/modules/rating.overrides b/src/themes/packages/default/modules/rating.overrides
@@ -43,6 +43,14 @@
   content: '\f005';
 }
 
+/* Partial */
+.ui.star.rating .partial.icon:before {
+  content: '\f006';
+}
+.ui.star.rating .partial.icon {
+  content: '\f005';
+}
+
 /*-------------------
         Heart
 --------------------*/

diff --git a/src/themes/packages/default/modules/rating.variables b/src/themes/packages/default/modules/rating.variables
@@ -16,14 +16,29 @@
 --------------------*/
 
 /* Star */
+@starIconHitbox: @iconHitbox;
 @starInactiveColor: @inactiveColor;
 @starHoverColor: #FFB70A;
-@starActiveColor: #FFCB08;
+@starActiveColor: #FFE623;
+@starActiveShadow:
+  0px -1px 0px #CFA300,
+  -1px 0px 0px #CFA300,
+  0px 1px 0px #CFA300,
+  1px 0px 0px #CFA300
+;
 
 /* Heart */
+@heartIconHitbox: 1.2em;
 @heartInactiveColor: @inactiveColor;
 @heartHoverColor: #FF2733;
 @heartActiveColor: #EF404A;
+@heartActiveShadow:
+  0px -1px 0px #EF404A,
+  -1px 0px 0px #EF404A,
+  0px 1px 0px #EF404A,
+  1px 0px 0px #EF404A
+;
+
 
 /*-------------------
         States