Index: lams_central/web/css/starability-basic.css =================================================================== diff -u --- lams_central/web/css/starability-basic.css (revision 0) +++ lams_central/web/css/starability-basic.css (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,164 @@ +.starability-result { + position: relative; + width: 150px; + height: 30px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII="); + font-size: 0.1em; + color: transparent; +} +.starability-result:after { + content: " "; + position: absolute; + left: 0; + height: 30px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII="); + background-position: 0 -30px; +} +.starability-result[data-rating="5"]::after { + width: 150px; +} +.starability-result[data-rating="4"]::after { + width: 120px; +} +.starability-result[data-rating="3"]::after { + width: 90px; +} +.starability-result[data-rating="2"]::after { + width: 60px; +} +.starability-result[data-rating="1"]::after { + width: 30px; +} +@media screen and (min-resolution: 192dpi) { + .starability-result { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg=="); + background-size: 30px auto; + } + .starability-result:after { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg=="); + background-size: 30px auto; + } +} + +.starability-basic { + display: block; + position: relative; + width: 150px; + min-height: 60px; + padding: 0; + border: none; +} +.starability-basic > input { + position: absolute; + margin-right: -100%; + opacity: 0; +} +.starability-basic > input:checked ~ label, +.starability-basic > input:focus ~ label { + background-position: 0 0; +} +.starability-basic > input:checked + label, +.starability-basic > input:focus + label { + background-position: 0 -30px; +} +.starability-basic > input[disabled]:hover + label { + cursor: default; +} +.starability-basic > input:not([disabled]):hover ~ label { + background-position: 0 0; +} +.starability-basic > input:not([disabled]):hover + label { + background-position: 0 -30px; +} +.starability-basic > input:not([disabled]):hover + label::before { + opacity: 1; +} +.starability-basic > input:focus + label { + outline: 1px dotted #999; +} +.starability-basic .starability-focus-ring { + position: absolute; + left: 0; + width: 100%; + height: 30px; + outline: 2px dotted #999; + pointer-events: none; + opacity: 0; +} +.starability-basic > .input-no-rate:focus ~ .starability-focus-ring { + opacity: 1; +} +.starability-basic > label { + position: relative; + display: inline-block; + float: left; + width: 30px; + height: 30px; + font-size: 0.1em; + color: transparent; + cursor: pointer; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII="); + background-repeat: no-repeat; + background-position: 0 -30px; +} +.starability-basic > label::before { + content: ""; + position: absolute; + display: block; + height: 30px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII="); + background-position: 0 30px; + pointer-events: none; + opacity: 0; +} +.starability-basic > label:nth-of-type(5)::before { + width: 120px; + left: -120px; +} +.starability-basic > label:nth-of-type(4)::before { + width: 90px; + left: -90px; +} +.starability-basic > label:nth-of-type(3)::before { + width: 60px; + left: -60px; +} +.starability-basic > label:nth-of-type(2)::before { + width: 30px; + left: -30px; +} +.starability-basic > label:nth-of-type(1)::before { + width: 0px; + left: 0px; +} +@media screen and (min-resolution: 192dpi) { + .starability-basic > label { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg=="); + background-size: 30px auto; + } +} +@media screen and (-ms-high-contrast: active) { + .starability-basic { + width: auto; + } + .starability-basic > input { + position: static; + margin-right: 0; + opacity: 1; + } + .starability-basic .input-no-rate { + display: none; + } + .starability-basic > label { + display: inline; + float: none; + width: auto; + height: auto; + font-size: 1em; + color: inherit; + background: none; + } + .starability-basic > label::before, .starability-basic > label::after { + display: none; + } +} Index: lams_central/web/css/starability/_starability-base.scss =================================================================== diff -u --- lams_central/web/css/starability/_starability-base.scss (revision 0) +++ lams_central/web/css/starability/_starability-base.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,161 @@ +@import 'variables'; + +@mixin starability-base() { + display: block; + position: relative; + width: $star-count * $star-size; + min-height: 2 * $star-size; + padding: 0; + border: none; + + > input { + position: absolute; + margin-right: -100%; + opacity: 0; + } + + > input:checked ~ label, + > input:focus ~ label { + background-position: 0 0; + } + + > input:checked + label, + > input:focus + label { + background-position: 0 (-$star-size); + } + + > input[disabled]:hover + label { + cursor: default; + } + + @if ($hover-enabled) { + > input:not([disabled]):hover ~ label { + background-position: 0 0; + } + + > input:not([disabled]):hover + label { + background-position: 0 (-$star-size); + } + + > input:not([disabled]):hover + label::before { + opacity: 1; + } + } + + @if ($accessible-highlight) { + > input:focus + label { + outline: 1px dotted #999; + } + } + + @if ($accessible-focus-ring) { + .starability-focus-ring { + position: absolute; + left: 0; + width: 100%; + height: $star-size; + outline: 2px dotted #999; + pointer-events: none; + opacity: 0; + } + + > .input-no-rate:focus ~ .starability-focus-ring { + opacity: 1; + } + } + + > label { + position: relative; + display: inline-block; + float: left; + width: $star-size; + height: $star-size; + font-size: 0.1em; + color: transparent; + cursor: pointer; + background-image: $img-stars-sprite; + background-repeat: no-repeat; + background-position: 0 (-$star-size); + + &::before { + content: ''; + position: absolute; + display: block; + height: $star-size; + background-image: $img-stars-sprite; + background-position: 0 $star-size; + pointer-events: none; + opacity: 0; + } + + @if ($hover-enabled) { + + // This function makes sure the right number of stars is highlighted + $star-count-highlight: $star-count; + + @while $star-count-highlight > 0 { + $star-number: $star-count-highlight; + + &:nth-of-type(#{$star-number})::before { + width: $star-number * $star-size - $star-size; + left: -($star-number * $star-size - $star-size); + } + + $star-count-highlight: $star-count-highlight - 1; + } + } + + @media screen and (min-resolution: 192dpi) { + background-image: $img-stars-sprite-2x; + background-size: $star-size auto; + } + } + + @if ($high-contrast-enabled) { + + // To make the rating widget accessible in high contrast, we remove the styling. + @media screen and (-ms-high-contrast: active) { + width: auto; + + > input { + position: static; + margin-right: 0; + opacity: 1; + } + + .input-no-rate { + display: none; + } + + > label { + display: inline; + float: none; + width: auto; + height: auto; + font-size: 1em; + color: inherit; + background: none; + + &::before, + &::after { + display: none; + } + } + } + } +} + +@mixin starability-animation-base($img-animated: $img-stars-sprite, $img-animated-2x: $img-stars-sprite-2x) { + content: ' '; + position: absolute; + opacity: 0; + width: $star-size; + height: $star-size; + background-image: $img-animated; + background-repeat: no-repeat; + + @media screen and (min-resolution: 192dpi) { + background-image: $img-animated-2x; + background-size: $star-size auto; + } +} \ No newline at end of file Index: lams_central/web/css/starability/_starability-result.scss =================================================================== diff -u --- lams_central/web/css/starability/_starability-result.scss (revision 0) +++ lams_central/web/css/starability/_starability-result.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,39 @@ +.starability-result { + position: relative; + width: $star-count * $star-size; + height: $star-size; + background-image: $img-stars-sprite; + font-size: 0.1em; + color: transparent; + + &:after { + content: ' '; + position: absolute; + left: 0; + height: $star-size; + background-image: $img-stars-sprite; + background-position: 0 (-$star-size); + } + + $star-count-result: $star-count; + + @while $star-count-result > 0 { + $star-number: $star-count-result; + + &[data-rating="#{$star-number}"]::after { + width: $star-number * $star-size; + } + + $star-count-result: $star-count-result - 1; + } + + @media screen and (min-resolution: 192dpi) { + background-image: $img-stars-sprite-2x; + background-size: $star-size auto; + + &:after { + background-image: $img-stars-sprite-2x; + background-size: $star-size auto; + } + } +} Index: lams_central/web/css/starability/_variables.scss =================================================================== diff -u --- lams_central/web/css/starability/_variables.scss (revision 0) +++ lams_central/web/css/starability/_variables.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,24 @@ +$star-count: 5 !default; +$star-size: 30px !default; + +// images are stored using base64 encoding +$img-stars-sprite: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII="); +$img-stars-sprite-2x: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg=="); + +$img-checkmark: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzM4MUFFNkVFMEFDMTFFNjkzRkJGMTdBODM0NzVDNTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzM4MUFFNkZFMEFDMTFFNjkzRkJGMTdBODM0NzVDNTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMjVDOUVGRkUwQUMxMUU2OTNGQkYxN0E4MzQ3NUM1MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMjVDOUYwMEUwQUMxMUU2OTNGQkYxN0E4MzQ3NUM1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrdrnzwAAAI6SURBVHja7Jc9SwNBEIZnL+qBIopgE7EKgtjY+gcsRA2JkEItbGxEooU2xkIs1EZBDFrZiY0pjFGwEfEviI2NpWkEEQRJIt46s4l4d9ndu5zRNB4c5D52npvZmXknjHMOjTgMaNDRMHCT/YIxpn5zLxaGdx4Dbo3hmxG8E648yQPwB2DGBTSzLCxk8yoT9m1ljgsZmIClj3XgMOvLFQaH0BJak32Af/BOdBwsOMYl7bUFkr3iJk7DUu5cBVbv8XY0CRbP1Q4ViHaxlmyoPk3qsfCUoPVIXxb98lwfatrTonUfzFNF2E2jn/ZcH2pKpLpBK2EXNnWhTsfR24/HH1De8GyVPjFDPTx5mpd7THUaOKKQReN9+ONW+txl2wkWzSEQ9BLaOidF7ZrmMF4/V0fcadu1x6IjBYFOwNxRoZwjhVVsNl2SFyO6Xh1WA9gJninXvRsHdHt8F6GLCgvh2kWCsczTyOgULOe2wDDmv6EdIz6hnuqkavC93ddX5RJbOjsQTcE04zbohg9oXgNGlZHLyhAUijeQTnSW4diJkpkXGzTlo54f1GCSNvXCQQHfS3Tb+vmKP2i1bYceCz0twr4WXiJ4bBhK1gxGYtN39pNtpcdUh6Sn2ojxAWyBdzVByaZLn6uzmkScGrsWLqtTjUgIm14zF30ZiXj9prpp2TQir2PKWsYWfq6IaMM1hXg3kOVcWtSrV9iVow+uJRuBxlv6WhJxr4RzJxKtUXjqf8r8i/H2/y/Mbx6fAgwA8wT2yCo9WaMAAAAASUVORK5CYII="); +$img-checkmark-2x: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTgyRjdBNDlFMEFDMTFFNjkzRkJGMTdBODM0NzVDNTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTgyRjdBNEFFMEFDMTFFNjkzRkJGMTdBODM0NzVDNTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMzgxQUU3OEUwQUMxMUU2OTNGQkYxN0E4MzQ3NUM1MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFODJGN0E0OEUwQUMxMUU2OTNGQkYxN0E4MzQ3NUM1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvR97twAAARDSURBVHja7JvNaxNBFMDfbEvaDQQaPFUQBYvkD7D1ZtUKVSGJhVILft16UA9qogdRKKgXm9CLCnqrLVilUJOiUJTqVT0VLz3Ugz3YU2mh0MQiWefNJqVps5Od2dnN1mQgodm0M++37828ry0xDAPqaWhQZ6MB3ABuAO/t0Wz1BSHE+ezPruiQXzsNBThFP0WAQAcYEAYwQsVV1um1VXptkX5YoLd/DlrbPsH1VzmnS1t5H2L5hSzw0wth+LMRpxD46qVXdMEZcvQmzNJXBlqCGbjxZtWfwKjN3FqCLnWXgoaU2B+Bdfr2BPS2tKjW3QVOxYbo+zBdpd2VjUfIMps/mX1ZW+DR/v3wd/Mdnb7TmyOHfIfmwHm4NfXbe+BU/Biddto1rXK1TfogmfkqAyznltKxS2AUPnsOa5K0s7VRBpn7JaxhXKhgjPsjiiCXIZGdcM+k0Yzx7oq7GrcGdWHayUrm7dyk8YDCPesfWDBloTIx2VSHlnga12LP2tnTzFOoBGZ+1ivXI0XdWYwFFBxaZgT105fa3emu9LbDpYhMfg9juOh32JJps9DWiYYxEchv/FIWG7uuZRp7twYPYsIhp2Ez6wnVyEQxZdwU0zKVFWWWPrQwxauNpn5Aq94FmjYoAR2XM+nnV3XYWF3x3O8y2GD3Vh6cjvdBoTBJfwrYDkaC4X3GtbGcmIaxUuE5LDXjppYzZUl/IjMtqGm9KLugSZtlGY9hA92VUr+3By6+p78wb3sujuy8PRzx0IyXrGBxDCxNjAkGPhFxYCy4eQWrQY9lUp+KvaY+dlBwzg5xYFZddFCZ0EjSVnSEsLdnFpXBVpGdY9JGSBpW13tpnppm+arVYcNgjePWsNEXUrBVZFdciC/Clk5ZTM4rnrBkhQKf5cPCkBs7iANM1oX953bYMrdC+pl/LMFqpIden3cP1lp23qElWgA/BPn8kYrfJLIzFPKceUBxYEdio0o0y5Gdd2gtCsexUPgI6dgJC+gvoIcjXFgwbqrJnKxl5+3hBYmFQlAwPlhCW3UPUtHHymCryK5xdvecdJ3JhI7aq6ZQWAPuKT6Z5sSBsYu3ddBIQU+xwJ9fOrqvHBZlNmUXBEbzwy6e/AiwLGckOmANazx0IXKb5TXetCp/nHG4PKZ047u6BOlYwhVYGzLzgbE/y1qWDqGxU1GqKiJswUi5VuJBmaVrWqpNj5BJ+XDR1vwPIJl9xByGdNUSm9Fmf1aBf3QVdpnJKh9alvnOYfD/GLbzlID9ZtpI7Jt/uw80abmT7So3JqfNNOy8qzJt1aaMsjnPlnYMVpEgfQ6CETdGjslk4xEIuXwY+7AaGfINLspS5dEH5wUAltSzSkaupprldP/VHFq7QsN6eqilZN5NgaPshPTyNMY1Bc1YjYbLE4E6eTBt+6irRw+3j7p5uNRK63vl8eH/dTT+BaAB3ABuAO+p8U+AAQA0fxy2fEEf3gAAAABJRU5ErkJggg=="); + +$img-heart: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAAAsJJREFUSA29lt9LFFEUx8+5u+5CLUEstlRsO5tKPvXjRXoSQpDUfiAhQS9FEIo+CP0Dbe+9FBIZEfgSRL2k4RbUq0S+SBBRGeOmmUJF6Ja67s7pnLE7O667Nis5A8M598z3nM+cuXdmLkLJMVfXuWepsHwBAc4TwF4k2AlAPxHxBREMG5l0uiTFHk4d7Oggq3Ca9S0c2A0Ii0Awi6ge1oQCD/Z9GPnmzuP6xSNjtPcTWTcYGCxG13sI+DgQiXTH3z76IVdmGjuj+aXlQQI6t17pGiGs8o1fNcz0gI7aYOrqCmTGs3eJ6LK+sJnlIu8SQTgmmkyeJvhJNG6md64hDBqXjvdiKmXZYO602yLrjiPw4qC6bsvIuuZFrjWo1BXDHL2H3+vbdi3kYRKIavVFTxYxZ+uIQp70WoQ4HwnXNAQX8tgHZFUHlSLVAjWYKJZdyfUpBKtVx/yyPL+tipf8Ib+ADocXoyLEqBPwyRGm4hf+l088B4NEWcWrZNaJ+Od8ZTCO+cfTJBxTEMDneuibZaZKKHrKn8A5v6DCEqbCyfQKAd7yCywsYfIcA0TCwQH+68xsN1wYwhKODa59P7yICnq3HcwMYTlgcRJmegQQh7YNzrVtxl+A3XERFuvhyX9VHP8fb61mrMddzf4fuwPzyTOx37T6mv8+B9zxLfuIn3dgTVPMHJ531yjpGEAEKqRO8GPPuIVb8rmG1CqFSq0NHWvAl7qz8Vwh95I7b9Cxqizix1Ag1LL/05PpcnkbOtaitQRs5s7HdcyztXOwuRJU6lTsWEOovi2cycPtKjaC93kj2CsfCV2jnP0nWCeZRjuvSrpZcctj78GwPzk16mnT6BksNzCdPHm4QDjE3R/VNySWX5eJANLFuPnsjTu+mV9xjsslSeFENN7EG7UUT9KqnOJLrBpoudqeYzPJU0fk9JxQIvwDg4rmetWjBsMAAAAASUVORK5CYII="); +$img-heart-2x: url("data:image/png;base64,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"); + +// if true there is an outline around the active star +$accessible-highlight: true !default; + +// if true there is an outline around all stars when using keyboard and no rate is selected +$accessible-focus-ring: true !default; + +// if true, stars are highlighted on hover (causes website repaints) +$hover-enabled: true !default; + +// if true, there is no styling in high contrast mode on Windows to ensure Accessibility +$high-contrast-enabled: true !default; Index: lams_central/web/css/starability/starability/all.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/all.scss (revision 0) +++ lams_central/web/css/starability/starability/all.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,9 @@ +@import 'basic'; +@import 'slot'; +@import 'grow'; +@import 'growRotate'; +@import 'fade'; +@import 'checkmark'; +@import 'heart'; +@import 'heartbeat'; +@import 'coinFlip'; \ No newline at end of file Index: lams_central/web/css/starability/starability/basic.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/basic.scss (revision 0) +++ lams_central/web/css/starability/starability/basic.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,7 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +.starability-basic { + @include starability-base; +} \ No newline at end of file Index: lams_central/web/css/starability/starability/checkmark.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/checkmark.scss (revision 0) +++ lams_central/web/css/starability/starability/checkmark.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,59 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +@keyframes checkmark { + + 0% { + transform: translateX(-0.5 * $star-size); + } + + 60% { + opacity: 1; + } + + 70% { + transform: none; + } + + 80% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +.starability-checkmark { + @include starability-base(); + + > label { + z-index: 2; + } + + > label::after { + @include starability-animation-base($img-checkmark, $img-checkmark-2x); + background-image: $img-checkmark; + } + + $star-count-checkmark: $star-count; + + @while $star-count-checkmark > 0 { + $star-number: $star-count-checkmark; + $distance: ($star-count + 1) - $star-count-checkmark; + + > label:nth-of-type(#{$star-number})::after { + right: -($distance * $star-size) - 0.5 * $star-size; + } + + $star-count-checkmark: $star-count-checkmark - 1; + } + + > input:checked + label::after { + display: inline-block; + animation-name: checkmark; + animation-duration: .7s; + animation-fill-mode: forwards; + } +} \ No newline at end of file Index: lams_central/web/css/starability/starability/coinFlip.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/coinFlip.scss (revision 0) +++ lams_central/web/css/starability/starability/coinFlip.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,63 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +@keyframes coinFlip { + + 0% { + transform: translateY(0); + opacity: 0; + } + + 25% { + transform: translateY(-34px); + opacity: 1; + } + + 30% { + transform: translateY(-30px); + } + + 35% { + transform: translateY(-30px) rotateY(0deg); + } + + 50% { + transform: translateY(-30px) rotateY(180deg); + } + + 65% { + transform: translateY(-30px) rotateY(0deg); + } + + 85% { + transform: translateY(-34px); + opacity: 1; + } + + 100% { + transform: translateY(0); + opacity: 0; + } +} + +.starability-coinFlip { + @include starability-base; + will-change: contents; + + > label::after { + @include starability-animation-base; + bottom: 0; + left: 0; + z-index: 2; + } + + > input:checked + label::after { + background-position: 0 (-$star-size); + opacity: 1; + animation-name: coinFlip; + animation-duration: 1.2s; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; + } +} \ No newline at end of file Index: lams_central/web/css/starability/starability/fade.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/fade.scss (revision 0) +++ lams_central/web/css/starability/starability/fade.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,38 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +@keyframes fade { + + 0% { + transform: translateY($star-size); + } + + 80% { + opacity: 100%; + } + + 100% { + transform: none; + opacity: 0; + } +} + +.starability-fade { + @include starability-base; + will-change: contents; + + > label::after { + @include starability-animation-base; + background-position: 0 (-$star-size); + bottom: $star-size; + left: 0; + } + + > input:checked + label::after { + opacity: 1; + animation-name: fade; + animation-duration: 1s; + animation-fill-mode: forwards; + } +} \ No newline at end of file Index: lams_central/web/css/starability/starability/grow.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/grow.scss (revision 0) +++ lams_central/web/css/starability/starability/grow.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,39 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +@keyframes grow { + + 0% { + transform: scale(1,1); + } + + 70% { + transform: scale(3,3); + opacity: 0; + } + + 100% { + transform: scale(1,1); + opacity: 0; + } +} + +.starability-grow { + @include starability-base; + will-change: contents; + + > label::after { + @include starability-animation-base; + bottom: 0; + left: 0; + } + + > input:checked + label::after { + background-position: 0 (-$star-size); + opacity: 1; + animation-duration: 1s; + animation-name: grow; + animation-fill-mode: forwards; + } +} \ No newline at end of file Index: lams_central/web/css/starability/starability/growRotate.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/growRotate.scss (revision 0) +++ lams_central/web/css/starability/starability/growRotate.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,39 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +@keyframes grow-rotate { + + 0% { + transform: scale(1,1) rotate(0deg); + } + + 99% { + transform: scale(4,4) rotate(90deg); + opacity: 0; + } + + 100% { + transform: scale(1,1) rotate(0deg); + opacity: 0; + } +} + +.starability-growRotate { + @include starability-base; + will-change: contents; + + > label::after { + @include starability-animation-base; + bottom: 0; + left: 0; + } + + > input:checked + label::after { + background-position: 0 (-$star-size); + opacity: 1; + animation-duration: 1s; + animation-name: grow-rotate; + animation-fill-mode: forwards; + } +} \ No newline at end of file Index: lams_central/web/css/starability/starability/heart.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/heart.scss (revision 0) +++ lams_central/web/css/starability/starability/heart.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,53 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +@keyframes heart { + + 0% { + transform: translateY(0.5 * $star-size); + opacity: 1; + } + + 30% { + transform: translateY(0); + opacity: 0.7; + } + + 45% { + transform: translateY(0); + transform: scale(1.1, 1.1); + } + + 50% { + transform: scale(0.9, 0.9); + } + + 80% { + opacity: 0.9; + } + + 100% { + transform: scale(0.1, 0.1); + opacity: 0; + } +} + +.starability-heart { + @include starability-base; + will-change: contents; + + > label::after { + @include starability-animation-base($img-heart, $img-heart-2x); + bottom: $star-size; + left: 0; + z-index: 2; + } + + > input:checked + label::after { + opacity: 1; + animation-name: heart; + animation-duration: 1s; + animation-fill-mode: forwards; + } +} \ No newline at end of file Index: lams_central/web/css/starability/starability/heartbeat.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/heartbeat.scss (revision 0) +++ lams_central/web/css/starability/starability/heartbeat.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,53 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +@keyframes heartbeat { + + 0% { + transform: translateY(0.5 * $star-size); + } + + 30% { + transform: translateY(0); + opacity: 1; + } + + 45% { + transform: translateY(0); + transform: scale(0.8, 0.8); + } + + 50% { + transform: scale(0.7, 0.7); + } + + 75% { + opacity: 0.9; + } + + 100% { + transform: scale(1.25, 1.25); + opacity: 0; + } +} + +.starability-heartbeat { + @include starability-base; + will-change: contents; + + > label::after { + @include starability-animation-base($img-heart, $img-heart-2x); + bottom: $star-size; + left: 0; + z-index: 2; + } + + > input:checked + label::after { + opacity: 1; + animation-name: heartbeat; + animation-timing-function: cubic-bezier(.19,1,.69,1.35); + animation-duration: 1s; + animation-fill-mode: forwards; + } +} \ No newline at end of file Index: lams_central/web/css/starability/starability/slot.scss =================================================================== diff -u --- lams_central/web/css/starability/starability/slot.scss (revision 0) +++ lams_central/web/css/starability/starability/slot.scss (revision c4a355cfa258003cbe1469eb54d96a9c14f16d70) @@ -0,0 +1,13 @@ +@import '../variables'; +@import '../starability-base'; +@import '../starability-result'; + +.starability-slot { + @include starability-base; + + > input:checked ~ label, + > input:hover ~ label, + > input:focus ~ label { + transition: background-position .7s; + } +} \ No newline at end of file