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

Merge pull request #138 from Ryuno-Ki/137-layout-for-input-id

Browse Source 
Link <label for> to <input id>. Fixes #137
This commit is contained in:
phuoc-ng
2020-06-10 07:55:30 +07:00
committed by GitHub
parent 7c6afbb80d 66fe84871e
commit 73e832154d
6 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/patterns/custom-checkbox-button/Details.tsx
View File

@@ -24,6 +24,7 @@ const Details: React.FC<{}> = () => {
return ( return (
<label <label
htmlFor="custom-checkbox-button"
style={{ style={{
alignItems: 'center', alignItems: 'center',
cursor: 'pointer', cursor: 'pointer',
@@ -31,6 +32,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<input <input
id="custom-checkbox-button"
type="checkbox" type="checkbox"
name="option" name="option"
value={value} value={value}

2
client/patterns/custom-radio-button/Details.tsx
View File

@@ -24,6 +24,7 @@ const Details: React.FC<{}> = () => {
return ( return (
<label <label
htmlFor="custom-radio-button"
style={{ style={{
alignItems: 'center', alignItems: 'center',
cursor: 'pointer', cursor: 'pointer',
@@ -31,6 +32,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<input <input
id="custom-radio-button"
type="radio" type="radio"
name="option" name="option"
value={value} value={value}

2
client/patterns/floating-label/Details.tsx
View File

@@ -45,6 +45,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<input <input
id="floating-label-input"
placeholder="Placeholder" placeholder="Placeholder"
type="text" type="text"
style={{ style={{
@@ -54,6 +55,7 @@ const Details: React.FC<{}> = () => {
}} }}
/> />
<label <label
htmlFor="floating-label-input"
style={{ style={{
left: '8px', left: '8px',
padding: '0 8px', padding: '0 8px',

2
client/patterns/radio-button-group/Details.tsx
View File

@@ -26,6 +26,7 @@ const Details: React.FC<{}> = () => {
return ( return (
<label <label
htmlFor="radio-button-group"
style={{ style={{
alignItems: 'center', alignItems: 'center',
backgroundColor: value === selectedValue ? '#00449E' : 'transparent', backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
@@ -35,6 +36,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<input <input
id="radio-button-group"
type="radio" type="radio"
name="option" name="option"
value={value} value={value}

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

@@ -44,6 +44,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<label <label
htmlFor="radio-switch-first"
style={{ style={{
backgroundColor: isFirstChecked ? '#357EDD' : '', backgroundColor: isFirstChecked ? '#357EDD' : '',
borderRadius: '9999px', borderRadius: '9999px',
@@ -53,6 +54,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<input <input
id="radio-switch-first"
type="radio" type="radio"
style={{ display: 'none' }} style={{ display: 'none' }}
checked={isFirstChecked} checked={isFirstChecked}
@@ -68,6 +70,7 @@ const Details: React.FC<{}> = () => {
/> />
</label> </label>
<label <label
htmlFor="radio-switch-second"
style={{ style={{
backgroundColor: isFirstChecked ? '' : '#357EDD', backgroundColor: isFirstChecked ? '' : '#357EDD',
borderRadius: '9999px', borderRadius: '9999px',
@@ -77,6 +80,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<input <input
id="radio-switch-second"
type="radio" type="radio"
style={{ display: 'none' }} style={{ display: 'none' }}
checked={!isFirstChecked} checked={!isFirstChecked}

2
client/patterns/switch/Details.tsx
View File

@@ -39,6 +39,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<label <label
htmlFor="checkbox-switch"
style={{ style={{
backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)', backgroundColor: checked ? '#357EDD' : 'rgba(0, 0, 0, 0.1)',
border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`, border: `1px solid ${checked ? '#357EDD' : 'rgba(0, 0, 0, 0.3)'}`,
@@ -50,6 +51,7 @@ const Details: React.FC<{}> = () => {
}} }}
> >
<input <input
id="checkbox-switch"
type="checkbox" type="checkbox"
style={{ display: 'none' }} style={{ display: 'none' }}
checked={checked} checked={checked}