mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-11 00:24:12 +02:00
Code Issues Releases Wiki Activity

Add CSS code for input patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-03-31 20:55:44 +07:00
parent b5ef930f42
commit 14b0781512
11 changed files with 300 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/patterns/rating/Details.tsx
View File

@@ -21,8 +21,16 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<style>
.p-rating {
<div class="rating">
<button class="rating__star">☆</button>
<button class="rating__star">☆</button>
<button class="rating__star">☆</button>
<button class="rating__star">☆</button>
<button class="rating__star">★</button>
</div>
`}
css={`
.rating {
/* Center the content */
align-items: center;
display: flex;
@@ -33,8 +41,8 @@ html={`
font-size: 32px;
}
.p-rating .p-rating-star:hover,
.p-rating .p-rating-star:hover ~ .p-rating-star {
.rating__star:hover,
.rating__star:hover ~ .rating__star {
color: transparent;
}
@@ -42,15 +50,15 @@ html={`
Make all previous stars selected when hover on a star
Note that we use \`flex-direction: row-reverse\` on the container
*/
.p-rating .p-rating-star:hover:before,
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
.rating__star:hover:before,
.rating__star:hover ~ .rating__star:before {
color: #00449e;
content: '\\2605';
left: 0;
position: absolute;
}
.p-rating-star {
.rating__star {
/* Reset styles for button */
background-color: transparent;
border: transparent;
@@ -60,17 +68,7 @@ Note that we use \`flex-direction: row-reverse\` on the container
/* Used to position the hover state */
position: relative;
}
</style>
<div class="p-rating">
<button class="p-rating-star">☆</button>
<button class="p-rating-star">☆</button>
<button class="p-rating-star">☆</button>
<button class="p-rating-star">☆</button>
<button class="p-rating-star">★</button>
</div>
`}
css={``}
>
<div
style={{