75 lines
1.3 KiB
SCSS
75 lines
1.3 KiB
SCSS
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
border: 0;
|
|
outline: 0px solid transparent;
|
|
|
|
&:focus {
|
|
@apply ring ring-brand-3 outline-1 outline-brand-6;
|
|
}
|
|
}
|
|
|
|
button {
|
|
position: relative;
|
|
|
|
@apply cursor-pointer disabled:cursor-default;
|
|
@apply bg-brand hover:bg-brand-4 disabled:bg-brand-3 text-white rounded-md border-0 transition-colors;
|
|
@apply flex items-center justify-center gap-1 px-4 py-2;
|
|
|
|
&.btn-gray {
|
|
@apply bg-coolGray-5 hover:bg-coolGray-4 disabled:bg-coolGray-3;
|
|
@apply focus:ring-coolGray-4 focus:outline-coolGray-6;
|
|
}
|
|
|
|
&:not(:disabled)::after {
|
|
content: ' ';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 16px;
|
|
pointer-events: none;
|
|
background: linear-gradient(to bottom, #fff1 60%, #fff0);
|
|
}
|
|
}
|
|
|
|
pre,
|
|
textarea,
|
|
input[type='text'] {
|
|
font-size: inherit;
|
|
font-family: Menlo, Consolas, Roboto Mono, 'Source Code Pro', 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
.popover-container {
|
|
position: relative;
|
|
|
|
.popover-content {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: max-content;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-within {
|
|
.popover-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|