@react95/core
Version:
Windows 95 styleguide
50 lines • 1.74 kB
CSS
.r95_z1k3bs0 {
position: relative;
width: 200px;
height: var(--r95-space-20);
}
.r95_z1k3bs0:after {
content: '';
display: flex;
justify-content: center;
width: var(--r95-space-18);
height: var(--r95-space-17);
font-size: 14px;
line-height: 1.1;
pointer-events: none;
position: absolute;
right: var(--r95-space-1);
top: var(--r95-space-2);
background-color: var(--r95-color-material);
border-right-style: solid;
border-right-width: var(--r95-space-1);
border-bottom-style: solid;
border-bottom-width: var(--r95-space-1);
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gERFgsEvq/LcwAAACRJREFUGNNjYBgwwAil/xNSw4gk8B+PQSgK0RUzEnLOf4bBBQBR3QQDezWEtAAAAABJRU5ErkJggg==');
background-position: 60% 60%;
background-repeat: no-repeat;
box-shadow: inset 0.5px 0.7px 0px 0.7px var(--r95-color-material),
inset -1px 0px 0 1px var(--r95-color-borderDark),
inset 1.5px 1.5px 0px 1.5px var(--r95-color-borderLightest);
}
.r95_z1k3bs1 {
position: relative;
outline: none;
border: none;
border-radius: 0;
width: 100%;
height: var(--r95-space-20);
padding: var(--r95-space-3);
color: var(--r95-color-materialText);
background-color: var(--r95-color-inputBackground);
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);
appearance: none;
box-shadow: inset -1px -1px 0 0 var(--r95-color-material),
inset 1px 1px 0 0 var(--r95-color-borderDarkest),
0.5px 0.5px 0 0.5px var(--r95-color-borderLightest);;
}