@react95/core
Version:
Windows 95 styleguide
90 lines • 1.98 kB
CSS
.r95_z2881c0 {
list-style: none;
margin: 0;
padding: 0;
}
.r95_z2881c0 ul {
list-style: none;
margin: 0;
padding: 0;
margin-left: var(--r95-space-6);
}
.r95_z2881c1 {
margin-left: var(--r95-space-13);
border-left-width: thin;
border-left-style: dotted;
border-left-color: var(--r95-color-borderDarkest);
position: relative;
}
.r95_z2881c1:last-child {
border-left-color: transparent;
}
.r95_z2881c1:before {
content: "";
position: absolute;
left: 0;
width: var(--r95-space-16);
height: var(--r95-space-10);
vertical-align: top;
border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: var(--r95-color-borderDarkest);
display: inline-block;
}
.r95_z2881c1:last-child:before {
border-left-width: thin;
border-left-style: dotted;
border-left-color: var(--r95-color-borderDarkest);
left: calc(var(--r95-space-1) * -1);
width: var(--r95-space-15);
}
.r95_z2881c2 {
padding: 0;
margin: 0;
border-left: unset;
}
.r95_z2881c2:before {
content: unset;
}
.r95_z2881c3 {
display: flex;
align-items: center;
position: relative;
}
.r95_z2881c4 {
outline: none;
padding: var(--r95-space-1);
}
.r95_z2881c4:focus {
border-width: var(--r95-space-1);
border-style: dotted;
padding: var(--r95-space-0);
}
.r95_z2881c5 {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--r95-space-10);
height: var(--r95-space-10);
border-width: var(--r95-space-1);
border-style: solid;
border-color: var(--r95-color-borderDarkest);
background-color: var(--r95-color-inputBackground);
font-size: 11px;
margin-left: calc(var(--r95-space-5) * -1);
user-select: none;
}
.r95_z2881c6 {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--r95-space-20);
min-height: var(--r95-space-20);
margin-right: var(--r95-space-2);
}
.r95_z2881c7 {
margin-left: var(--r95-space-2);
}
.r95_z2881c8 {
margin-left: var(--r95-space-6);
}