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

Add .big class to switches

Browse Source
This commit is contained in:
daudix
2024-09-02 01:57:46 +03:00
parent b6b2639373
commit ee33a73d22
2 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
content/demo/index.md
View File

@ -364,6 +364,36 @@ With `switch` class:
</li> </li>
</ul> </ul>
With `switch` and `big` classes:
```html
<input class="switch big" type="checkbox" />
<label>Checkbox</label>
```
<ul>
<li>
<input class="switch big" type="checkbox" />
<label>&nbsp;Milk</label>
</li>
<li>
<input class="switch big" type="checkbox" />
<label>&nbsp;Eggs</label>
</li>
<li>
<input class="switch big" type="checkbox" />
<label>&nbsp;Flour</label>
</li>
<li>
<input class="switch big" type="checkbox" checked />
<label>&nbsp;Coffee</label>
</li>
<li>
<input class="switch big" type="checkbox" disabled />
<label>&nbsp;Combustible lemons</label>
</li>
</ul>
With `radio` type: With `radio` type:
```html ```html

11
sass/_input.scss
View File

@ -94,6 +94,17 @@ input[type="checkbox"] {
width: 2.5rem; width: 2.5rem;
height: 1.5rem; height: 1.5rem;
&.big {
vertical-align: -0.625rem;
width: 3rem;
height: 2rem;
&::before {
width: 1.5rem;
height: 1.5rem;
}
}
&::before { &::before {
-webkit-mask-image: none; -webkit-mask-image: none;
top: 0.25rem; top: 0.25rem;