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

Style color input, add color picker to the demo

Browse Source
This commit is contained in:
daudix
2024-08-07 04:16:15 +03:00
parent 6358403d07
commit 3be7726775
2 changed files with 106 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
sass/_input.scss
View File

@ -1,5 +1,6 @@
input[type="radio"],
input[type="checkbox"] {
input[type="checkbox"],
input[type="color"] {
-webkit-appearance: none;
position: relative;
appearance: none;
@ -52,6 +53,7 @@ input[type="checkbox"] {
}
input[type="radio"] {
vertical-align: -0.1875em;
border-radius: 50%;
&::before {
@ -64,6 +66,7 @@ input[type="radio"] {
}
input[type="checkbox"] {
vertical-align: -0.1875em;
border-radius: calc(var(--rounded-corner-small) / 2);
&::before {
@ -80,3 +83,29 @@ input[type="checkbox"] {
content: "";
}
}
input[type="color"] {
vertical-align: -0.375em;
border: 0.25rem solid var(--fg-muted-2);
border-radius: var(--rounded-corner-small);
padding: 0;
width: 3rem;
height: 2rem;
&:hover {
background-color: var(--fg-muted-2);
}
&::-moz-color-swatch {
border: none;
border-radius: calc(var(--rounded-corner-small) / 2);
}
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
border-radius: calc(var(--rounded-corner-small) / 2);
}
}