mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-16 11:04:30 +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

44
client/patterns/radio-switch/Details.tsx
View File

@@ -26,23 +26,10 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Container -->
<div style="
background-color: rgba(0, 0, 0, .1);
border-radius: 9999px;
display: inline-flex;
padding: 4px;
">
<div class="container">
<!-- Radio container -->
<label style="
border-radius: 9999px;
cursor: pointer;
padding: 4px 8px;
/* For selected radio only */
background-color: #357edd;
color: #fff;
">
<input type="radio" style="display: none" />
<label class="container__label container__label--selected">
<input type="radio" class="container__input" />
<!-- Text -->
...
@@ -52,7 +39,30 @@ html={`
...
</div>
`}
css={``}
css={`
.container {
background-color: rgba(0, 0, 0, .1);
border-radius: 9999px;
display: inline-flex;
padding: 4px;
}
.container__label {
border-radius: 9999px;
cursor: pointer;
padding: 4px 8px;
}
.container__label--selected {
/* For selected radio only */
background-color: #357edd;
color: #fff;
}
.container__input {
display: none
}
`}
>
<div
style={{