ar-design
Version:
AR Design is a (react | nextjs) ui library.
59 lines (53 loc) • 1.23 kB
CSS
.ar-syntax {
display: flex;
flex-direction: column;
border-radius: var(--border-radius-lg);
}
.ar-syntax > .preview {
position: relative;
gap: 1rem;
border: solid 1px var(--gray-200);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
padding: 1rem;
}
.ar-syntax > .preview.left {
justify-content: left;
}
.ar-syntax > .preview.center {
justify-content: center;
}
.ar-syntax > .preview.right {
justify-content: right;
}
.ar-syntax > .ar-syntax-button-group {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0.5rem;
border: solid 1px transparent;
border-top-color: var(--gray-200);
}
.ar-syntax > .pre {
background-color: var(--gray-900);
margin: 0;
border-top: solid 2.5px var(--custom-tag-color);
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
overflow: hidden;
}
.ar-syntax > .pre.hidden {
display: none;
}
.ar-syntax > .pre.visible {
display: block;
}
.ar-syntax > .pre > code {
display: flex;
flex-direction: column;
gap: 0.5rem 0;
padding: 1rem;
font-family: var(--jetBrainsMonoRegular) ;
font-size: 0.9rem;
overflow-x: auto;
}
@import url("./core/jsx.template.css");