hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support disabled state

Browse Source
This commit is contained in:
daudix
2024-08-07 04:25:17 +03:00
parent 3be7726775
commit e676f7f612
2 changed files with 83 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
content/demo/index.md
View File

@ -331,31 +331,76 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
### Form Input (`<input>`) ### Form Input (`<input>`)
```html ```html
<input type="checkbox" /><label>Checkbox</label> <input type="checkbox" />
<label>Checkbox</label>
``` ```
<ul> <ul>
<li><input type="checkbox" /><label>&nbsp;Milk</label></li> <li>
<li><input type="checkbox" /><label>&nbsp;Eggs</label></li> <input type="checkbox" />
<li><input type="checkbox" /><label>&nbsp;Flour</label></li> <label>&nbsp;Milk</label>
<li><input type="checkbox" checked /><label>&nbsp;Coffee</label></li> </li>
<li><input type="checkbox" disabled /><label>&nbsp;Combustible lemons</label></li> <li>
<input type="checkbox" />
<label>&nbsp;Eggs</label>
</li>
<li>
<input type="checkbox" />
<label>&nbsp;Flour</label>
</li>
<li>
<input type="checkbox" checked />
<label>&nbsp;Coffee</label>
</li>
<li>
<input type="checkbox" disabled />
<label>&nbsp;Combustible lemons</label>
</li>
</ul> </ul>
With `radio` type: With `radio` type:
```html ```html
<input type="radio" name="test" /><label>Radio</label> <input type="radio" name="test" />
<label>Radio</label>
``` ```
<ul> <ul>
<li><input type="radio" name="test" /><label>&nbsp;Milk</label></li> <li>
<li><input type="radio" name="test" /><label>&nbsp;Eggs</label></li> <input type="radio" name="test" />
<li><input type="radio" name="test" /><label>&nbsp;Flour</label></li> <label>&nbsp;Milk</label>
<li><input type="radio" name="test" checked /><label>&nbsp;Coffee</label></li> </li>
<li><input type="radio" name="test" disabled /><label>&nbsp;Combustible lemons</label></li> <li>
<input type="radio" name="test" />
<label>&nbsp;Eggs</label>
</li>
<li>
<input type="radio" name="test" />
<label>&nbsp;Flour</label>
</li>
<li>
<input type="radio" name="test" checked />
<label>&nbsp;Coffee</label>
</li>
<li>
<input type="radio" name="test" disabled />
<label>&nbsp;Combustible lemons</label>
</li>
</ul> </ul>
With `color` type:
```html
<label>Color:</label>
<input type="color" value="#000000" />
```
<label for="color">Color:</label>
<input id="color" type="color" value="#b57edc" />
<label for="color">Disabled:</label>
<input id="color" type="color" value="#b57edc" disabled />
### Figure Captions (`<figcaption>`) ### Figure Captions (`<figcaption>`)
```markdown ```markdown

47
sass/_input.scss
View File

@ -53,7 +53,7 @@ input[type="color"] {
} }
input[type="radio"] { input[type="radio"] {
vertical-align: -0.1875em; vertical-align: -0.1875em;
border-radius: 50%; border-radius: 50%;
&::before { &::before {
@ -66,7 +66,7 @@ input[type="radio"] {
} }
input[type="checkbox"] { input[type="checkbox"] {
vertical-align: -0.1875em; vertical-align: -0.1875em;
border-radius: calc(var(--rounded-corner-small) / 2); border-radius: calc(var(--rounded-corner-small) / 2);
&::before { &::before {
@ -85,27 +85,32 @@ input[type="checkbox"] {
} }
input[type="color"] { input[type="color"] {
vertical-align: -0.375em; vertical-align: -0.375em;
border: 0.25rem solid var(--fg-muted-2); border: 0.25rem solid var(--fg-muted-2);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);
padding: 0; padding: 0;
width: 3rem; width: 3rem;
height: 2rem; height: 2rem;
&:hover { &:hover {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
} }
&::-moz-color-swatch { &:disabled {
border: none; border: 0.25rem solid var(--fg-muted-2);
border-radius: calc(var(--rounded-corner-small) / 2); background-color: var(--fg-muted-1);
} }
&::-webkit-color-swatch-wrapper { &::-moz-color-swatch {
padding: 0; border: none;
} border-radius: calc(var(--rounded-corner-small) / 2);
}
&::-webkit-color-swatch { &::-webkit-color-swatch-wrapper {
border-radius: calc(var(--rounded-corner-small) / 2); padding: 0;
} }
&::-webkit-color-swatch {
border-radius: calc(var(--rounded-corner-small) / 2);
}
} }