diff --git a/src/definitions/modules/rating.less b/src/definitions/modules/rating.less index 09b165ad9c..8faaa12988 100755 --- 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 index ba5dc668b0..5e8aff1503 100644 --- 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 index 9a92c0933e..0fa33dd425 100644 --- 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