mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 21:20:21 +08:00
109 lines
3.8 KiB
HTML
109 lines
3.8 KiB
HTML
<div class="rating">
|
|
<form class="rating-form">
|
|
<label for="super-happy" class="lb">
|
|
<input type="radio" name="rating" class="super-happy" id="super-happy" value="super-happy">
|
|
<svg class="svg" viewBox="0 0 24 24"><path d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
|
|
</label>
|
|
<label for="neutral" class="lb">
|
|
<input type="radio" name="rating" class="neutral" id="neutral" value="neutral">
|
|
<svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24"><path d="M8.5,11A1.5,1.5 0 0,1 7,9.5A1.5,1.5 0 0,1 8.5,8A1.5,1.5 0 0,1 10,9.5A1.5,1.5 0 0,1 8.5,11M15.5,11A1.5,1.5 0 0,1 14,9.5A1.5,1.5 0 0,1 15.5,8A1.5,1.5 0 0,1 17,9.5A1.5,1.5 0 0,1 15.5,11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M9,14H15A1,1 0 0,1 16,15A1,1 0 0,1 15,16H9A1,1 0 0,1 8,15A1,1 0 0,1 9,14Z"></path></svg>
|
|
</label>
|
|
<label for="super-sad" class="lb">
|
|
<input type="radio" name="rating" class="super-sad" id="super-sad" value="super-sad">
|
|
<svg class="svg" viewBox="0 0 24 24"><path d="M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M16.18,7.76L15.12,8.82L14.06,7.76L13,8.82L14.06,9.88L13,10.94L14.06,12L15.12,10.94L16.18,12L17.24,10.94L16.18,9.88L17.24,8.82L16.18,7.76M7.82,12L8.88,10.94L9.94,12L11,10.94L9.94,9.88L11,8.82L9.94,7.76L8.88,8.82L7.82,7.76L6.76,8.82L7.82,9.88L6.76,10.94L7.82,12M12,14C9.67,14 7.69,15.46 6.89,17.5H17.11C16.31,15.46 14.33,14 12,14Z"></path></svg>
|
|
</label></form></div>
|
|
<style>
|
|
/* From Uiverse.io by JkHuger - Tags: select, option, emotion */
|
|
.rating {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin: auto;
|
|
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);
|
|
background-color: rgb(255, 255, 255);
|
|
padding: 0.8rem;
|
|
width: 33rem;
|
|
}
|
|
|
|
.rating-container {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
padding: 0.4rem 0.8rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.rating {
|
|
background-color: rgba(0, 0, 16, 0.8);
|
|
padding: 0.4rem 0.4rem 0.1rem 0.4rem;
|
|
border-radius: 2.2rem;
|
|
}
|
|
|
|
.rating-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.svg {
|
|
fill: rgb(242, 242, 242);
|
|
height: 3.6rem;
|
|
width: 3.6rem;
|
|
margin: 0.2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rating-form-2 svg {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
#radios label {
|
|
position: relative;
|
|
}
|
|
|
|
.super-happy, [type="radio"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.input ,[type="radio"] + svg {
|
|
-webkit-transition: all 0.2s;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.super-happy[class="super-happy"]:hover + svg,
|
|
.super-happy[class="super-happy"]:checked + svg,
|
|
.super-happy[class="super-happy"]:focus + svg {
|
|
fill: rgb(0, 204, 79);
|
|
transition: 1.5s;
|
|
}
|
|
|
|
.neutral[class="neutral"]:hover + svg,
|
|
.neutral[class="neutral"]:checked + svg,
|
|
.neutral[class="neutral"]:focus + svg {
|
|
fill: rgb(232, 214, 0);
|
|
transition: 1.5s;
|
|
}
|
|
|
|
.super-sad[class="super-sad"]:hover + svg,
|
|
.super-sad[class="super-sad"]:checked + svg,
|
|
.super-sad[class="super-sad"]:focus + svg {
|
|
fill: rgb(239, 42, 16);
|
|
transition: 1.5s;
|
|
}
|
|
|
|
|
|
|
|
</style>
|