Transparent stars for StarsRating

SilentImp · SilentImp · commit 91ff0836caa0 · 2017-06-23T15:31:14.000+03:00
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 /example/node_modules/*
 /.idea
 /output
-/coverage
+/coverage
+.DS_Store
diff --git a/css/main.css b/css/main.css
@@ -2924,10 +2924,10 @@
   border-left-width: 10px;
 }
 .stars-rating__icon_empty {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpolygon id='path-1' points='110 15.7719334 103.81966 19.0211303 105 12.1392207 100 7.26542528 106.90983 6.2613682 110 0 113.09017 6.2613682 120 7.26542528 115 12.1392207 116.18034 19.0211303'/%3E %3Cmask id='mask-2' maskContentUnits='userSpaceOnUse' maskUnits='objectBoundingBox' x='0' y='0' width='20' height='19.0211303' fill='white'%3E %3Cuse xlink:href='%23path-1'/%3E %3C/mask%3E %3C/defs%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-719.000000, -889.000000)' stroke='%23B0BEC5' stroke-width='2'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cuse id='Star-1-Copy' mask='url(%23mask-2)' xlink:href='%23path-1'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='none'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon stroke='%23B0BEC5' stroke-width='2' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
 }
 .stars-rating__icon_half {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpath id='a' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0l3.09 6.261L20 7.265l-5 4.874 1.18 6.882z'/%3E %3Cmask id='b' x='0' y='0' width='20' height='19.021' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E%3Cuse stroke='%23B0BEC5' mask='url(%23b)' stroke-width='2' xlink:href='%23a'/%3E %3Cpath fill='%23FFAB00' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0z'/%3E %3C/g%3E %3C/svg%3E");
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpath id='a' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0l3.09 6.261L20 7.265l-5 4.874 1.18 6.882z'/%3E %3Cmask id='b' x='0' y='0' width='20' height='19.021' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E%3Cuse stroke='%23B0BEC5' fill='none' mask='url(%23b)' stroke-width='2' xlink:href='%23a'/%3E %3Cpath fill='%23FFAB00' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0z'/%3E %3C/g%3E %3C/svg%3E");
 }
 .stars-rating_hovered:hover .stars-rating__icon {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='%23FFAB00'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon id='Star-1' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
@@ -2937,7 +2937,7 @@
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='%23FFAB00'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon id='Star-1' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
 }
 .stars-rating_hovered:hover .stars-rating__icon:hover ~ .stars-rating__icon {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpolygon id='path-1' points='110 15.7719334 103.81966 19.0211303 105 12.1392207 100 7.26542528 106.90983 6.2613682 110 0 113.09017 6.2613682 120 7.26542528 115 12.1392207 116.18034 19.0211303'/%3E %3Cmask id='mask-2' maskContentUnits='userSpaceOnUse' maskUnits='objectBoundingBox' x='0' y='0' width='20' height='19.0211303' fill='white'%3E %3Cuse xlink:href='%23path-1'/%3E %3C/mask%3E %3C/defs%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-719.000000, -889.000000)' stroke='%23B0BEC5' stroke-width='2'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cuse id='Star-1-Copy' mask='url(%23mask-2)' xlink:href='%23path-1'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='none'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon stroke='%23B0BEC5' stroke-width='2' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
 }
 .stars-rating_no-hovered:hover .stars-rating__icon {
   cursor: pointer;
diff --git a/src/assets/images/icons/icon-star-empty.svg b/src/assets/images/icons/icon-star-empty.svg
@@ -1,15 +1,9 @@
 <svg viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <polygon id="path-1" points="110 15.7719334 103.81966 19.0211303 105 12.1392207 100 7.26542528 106.90983 6.2613682 110 0 113.09017 6.2613682 120 7.26542528 115 12.1392207 116.18034 19.0211303"></polygon>
-        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="20" height="19.0211303" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-    </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Downloads-1024+" transform="translate(-719.000000, -889.000000)" stroke="#B0BEC5" stroke-width="2">
+        <g id="Downloads-1024+" transform="translate(-619.000000, -889.000000)" fill="none">
             <g id="Download-item-2" transform="translate(380.000000, 758.000000)">
                 <g id="Stars" transform="translate(239.000000, 131.000000)">
-                    <use id="Star-1-Copy" mask="url(#mask-2)" xlink:href="#path-1"></use>
+                    <polygon stroke="#B0BEC5" stroke-width="2" points="10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303"></polygon>
                 </g>
             </g>
         </g>
diff --git a/src/assets/images/icons/icon-star-half.svg b/src/assets/images/icons/icon-star-half.svg
@@ -3,7 +3,7 @@
     <path id="a" d="M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0l3.09 6.261L20 7.265l-5 4.874 1.18 6.882z"/>
     <mask id="b" x="0" y="0" width="20" height="19.021" fill="#fff"><use xlink:href="#a"/></mask>
   </defs>
-  <g fill="none" fill-rule="evenodd"><use stroke="#B0BEC5" mask="url(#b)" stroke-width="2" xlink:href="#a"/>
+  <g fill="none" fill-rule="evenodd"><use stroke="#B0BEC5" fill="none" mask="url(#b)" stroke-width="2" xlink:href="#a"/>
     <path fill="#FFAB00" d="M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0z"/>
   </g>
 </svg>

Original file line number	Diff line number	Diff line change
`@@ -2924,10 +2924,10 @@`
`2924`	`2924`	`border-left-width: 10px;`
`2925`	`2925`	`}`
`2926`	`2926`	`.stars-rating__icon_empty {`
`2927`		- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpolygon id='path-1' points='110 15.7719334 103.81966 19.0211303 105 12.1392207 100 7.26542528 106.90983 6.2613682 110 0 113.09017 6.2613682 120 7.26542528 115 12.1392207 116.18034 19.0211303'/%3E %3Cmask id='mask-2' maskContentUnits='userSpaceOnUse' maskUnits='objectBoundingBox' x='0' y='0' width='20' height='19.0211303' fill='white'%3E %3Cuse xlink:href='%23path-1'/%3E %3C/mask%3E %3C/defs%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-719.000000, -889.000000)' stroke='%23B0BEC5' stroke-width='2'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cuse id='Star-1-Copy' mask='url(%23mask-2)' xlink:href='%23path-1'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
	`2927`	+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='none'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon stroke='%23B0BEC5' stroke-width='2' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
`2928`	`2928`	`}`
`2929`	`2929`	`.stars-rating__icon_half {`
`2930`		- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpath id='a' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0l3.09 6.261L20 7.265l-5 4.874 1.18 6.882z'/%3E %3Cmask id='b' x='0' y='0' width='20' height='19.021' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E%3Cuse stroke='%23B0BEC5' mask='url(%23b)' stroke-width='2' xlink:href='%23a'/%3E %3Cpath fill='%23FFAB00' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0z'/%3E %3C/g%3E %3C/svg%3E");
	`2930`	+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpath id='a' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0l3.09 6.261L20 7.265l-5 4.874 1.18 6.882z'/%3E %3Cmask id='b' x='0' y='0' width='20' height='19.021' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E%3Cuse stroke='%23B0BEC5' fill='none' mask='url(%23b)' stroke-width='2' xlink:href='%23a'/%3E %3Cpath fill='%23FFAB00' d='M10 15.772l-6.18 3.25L5 12.138 0 7.265l6.91-1.004L10 0z'/%3E %3C/g%3E %3C/svg%3E");
`2931`	`2931`	`}`
`2932`	`2932`	`.stars-rating_hovered:hover .stars-rating__icon {`
`2933`	`2933`	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='%23FFAB00'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon id='Star-1' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
`@@ -2937,7 +2937,7 @@`
`2937`	`2937`	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='%23FFAB00'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon id='Star-1' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
`2938`	`2938`	`}`
`2939`	`2939`	`.stars-rating_hovered:hover .stars-rating__icon:hover ~ .stars-rating__icon {`
`2940`		- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cdefs%3E %3Cpolygon id='path-1' points='110 15.7719334 103.81966 19.0211303 105 12.1392207 100 7.26542528 106.90983 6.2613682 110 0 113.09017 6.2613682 120 7.26542528 115 12.1392207 116.18034 19.0211303'/%3E %3Cmask id='mask-2' maskContentUnits='userSpaceOnUse' maskUnits='objectBoundingBox' x='0' y='0' width='20' height='19.0211303' fill='white'%3E %3Cuse xlink:href='%23path-1'/%3E %3C/mask%3E %3C/defs%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-719.000000, -889.000000)' stroke='%23B0BEC5' stroke-width='2'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cuse id='Star-1-Copy' mask='url(%23mask-2)' xlink:href='%23path-1'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
	`2940`	+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 19' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Downloads-1024+' transform='translate(-619.000000, -889.000000)' fill='none'%3E %3Cg id='Download-item-2' transform='translate(380.000000, 758.000000)'%3E %3Cg id='Stars' transform='translate(239.000000, 131.000000)'%3E %3Cpolygon stroke='%23B0BEC5' stroke-width='2' points='10 15.7719334 3.81966011 19.0211303 5 12.1392207 6.03961325e-14 7.26542528 6.90983006 6.2613682 10 0 13.0901699 6.2613682 20 7.26542528 15 12.1392207 16.1803399 19.0211303'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
`2941`	`2941`	`}`
`2942`	`2942`	`.stars-rating_no-hovered:hover .stars-rating__icon {`
`2943`	`2943`	`cursor: pointer;`