@react95/core
Version:
Windows 95 styleguide
59 lines • 2.59 kB
CSS
.r95_6vt7xv0 {
width: var(--r95-space-12);
height: var(--r95-space-12);
display: inline-block;
position: absolute;
left: 0;
top: var(--r95-space-2);
border-left-style: solid;
border-left-width: var(--r95-space-1);
border-left-color: var(--r95-color-borderDark);
border-top-style: solid;
border-top-width: var(--r95-space-1);
border-top-color: var(--r95-color-borderDark);
background-color: var(--r95-color-inputBackground);
background-repeat: no-repeat;
background-position: center center;
background-size: 7px 7px;
box-shadow: var(--r95-shadow-input);
}
.r95_6vt7xv1 {
padding: var(--r95-space-1);
user-select: none;
}
.r95_6vt7xv2 {
width: var(--r95-space-12);
height: var(--r95-space-12);
margin: 0;
position: absolute;
top: var(--r95-space-2);
left: 0;
opacity: 0;
}
.r95_6vt7xv3 {
display: inline-block;
height: var(--r95-space-15);
line-height: 1.5;
position: relative;
margin-block: var(--r95-space-4);
padding-left: var(--r95-space-20);
}
.r95_6vt7xv3:has(:disabled) {
color: var(--r95-color-borderDark);
text-shadow: 0.5px 0.5px var(--r95-color-borderLight);
}
.r95_6vt7xv2:checked + .r95_6vt7xv0 {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMS0xaDIuMTY1djIuMTg5SC0xeiIvPjxnPjxwYXRoIGQ9Ik0uMDE0IDEuODk3TDAgNS45MDVoLjk5OGwuMDE1IDEuMDg0aC45OTh2MS4wMTNoLjk4NHYtLjk5OWwuOTk5LjAxNS4wMTQtLjg4NWguOTg0VjUuMDA2aC45OTlWMy45OTRoLjk5OEw3LjAwMyAwbC0uOTk4LjAxNHYuOTk5TDUuMDA2Ljk5OFYyLjE0bC0uOTk4LjAxNXYuODU2bC0uOTk4LjAxNHYuOTg0SDEuOTk3bC0uMDE0LS45Ny0uOTg1LS4wMTRMLjk4NCAxLjkxbC0uOTctLjAxNHoiIGZpbGwtb3BhY2l0eT0ibnVsbCIvPjwvZz48L3N2Zz4=');
}
.r95_6vt7xv2:focus ~ .r95_6vt7xv1, .r95_6vt7xv2:active ~ .r95_6vt7xv1 {
border-width: var(--r95-space-1);
border-style: dotted;
padding: 0;
}
.r95_6vt7xv2:checked:disabled + .r95_6vt7xv0 {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMS0xaDlWOWgtOXoiLz48Zz48cGF0aCBmaWxsPSJncmF5IiBkPSJNLjAxNCAxLjg5N0wwIDUuOTA1aC45OThsLjAxNSAxLjA4NGguOTk4djEuMDEzaC45ODR2LS45OTlsLjk5OS4wMTUuMDE0LS44ODVoLjk4NFY1LjAwNmguOTk5VjMuOTk0aC45OThMNy4wMDMgMGwtLjk5OC4wMTR2Ljk5OUw1LjAwNi45OThWMi4xNGwtLjk5OC4wMTV2Ljg1NmwtLjk5OC4wMTR2Ljk4NEgxLjk5N2wtLjAxNC0uOTctLjk4NS0uMDE0TC45ODQgMS45MWwtLjk3LS4wMTR6Ii8+PC9nPjwvc3ZnPg==');
background-size: 7px 7px, 1.9px 1.9px;
}
.r95_6vt7xv2:disabled + .r95_6vt7xv0 {
background-color: var(--r95-color-inputBackgroundDisabled);
}