mirror of https://github.com/buster-so/buster.git
move some tailwind css variables over
This commit is contained in:
Nate Kelley
parent
600601b5a5
commit
dc57a521e9
|
|
@ -3,42 +3,20 @@ import React from 'react';
|
|||
export default function TestPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-4 bg-red-500">
|
||||
<div className="flex space-x-3">
|
||||
<h1>Test</h1>
|
||||
<h2>TESTING!</h2>
|
||||
</div>
|
||||
<div className="bg-blue-500">
|
||||
<h2>Test</h2>
|
||||
<div className="flex flex-col space-y-5">
|
||||
<div>Test</div>
|
||||
<div>TESTING!</div>
|
||||
<div>TESTING123</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 bg-green-200 dark:bg-green-900">
|
||||
<div className="bg-primary-light dark:bg-primary-dark flex flex-col gap-4">
|
||||
<h1>Test</h1>
|
||||
<h2>TESTING!!!! :)</h2>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white px-6 py-8 ring shadow-xl ring-gray-900/5 dark:bg-gray-800">
|
||||
<h3 className="mt-5 text-base font-medium tracking-tight text-gray-900 dark:text-white">
|
||||
Writes upside-down
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It
|
||||
even works in outer space.
|
||||
</p>
|
||||
<p className="border-primary-dark border font-mono">Hello</p>
|
||||
<a>This is a not link</a>
|
||||
<a href="https://www.google.com">This is a link</a>
|
||||
</div>
|
||||
|
||||
{/* <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
|
||||
<div>
|
||||
<span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
|
||||
<svg class="h-6 w-6 stroke-white" ...>
|
||||
<!-- ... -->
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
|
||||
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const PulsingDot: React.FC<{
|
|||
<>
|
||||
<span className={cx('pulsing-dot relative', styles.ringContainer)} style={style}>
|
||||
<span
|
||||
className={cx(styles.ringring)}
|
||||
className={cx(styles.ringring, 'animate-pulse')}
|
||||
style={{
|
||||
// height: size * 1.35,
|
||||
// width: size * 1.35,
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
@-webkit-keyframes pulsate {
|
||||
0% {
|
||||
-webkit-transform: scale(0.1, 0.1);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1.2, 1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,3 @@
|
|||
src: url('./fonts/Roobert-Heavy.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-app: 'Roobert_Pro', sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,288 +0,0 @@
|
|||
/* stylelint-disable */
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
input::-ms-clear,
|
||||
input::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// *,
|
||||
// *::before,
|
||||
// *::after {
|
||||
// box-sizing: border-box;
|
||||
// border: 1 solid !important;
|
||||
// }
|
||||
|
||||
html {
|
||||
font-family: var(--font-app), sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
[tabindex='-1']:focus {
|
||||
outline: none;
|
||||
}
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
border-bottom: 0;
|
||||
cursor: help;
|
||||
}
|
||||
address {
|
||||
margin-bottom: 0em;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='number'],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
dt {
|
||||
font-weight: 400;
|
||||
}
|
||||
dd {
|
||||
margin-bottom: 0em;
|
||||
margin-left: 0;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0 0 0em;
|
||||
}
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-size: 1em;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
}
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0em;
|
||||
overflow: auto;
|
||||
}
|
||||
figure {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role='button'],
|
||||
input:not([type='range']),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
caption {
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.3em;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
button,
|
||||
html [type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
input[type='date'],
|
||||
input[type='time'],
|
||||
input[type='datetime-local'],
|
||||
input[type='month'] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 0em;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-size: 1.5em;
|
||||
line-height: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[type='search'] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
[type='search']::-webkit-search-cancel-button,
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
mark {
|
||||
padding: 0.2em;
|
||||
background-color: #feffe6;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family:
|
||||
var(--font-app),
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
Segoe UI,
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
Fira Sans,
|
||||
Droid Sans,
|
||||
Helvetica Neue,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#__next {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,62 +1,12 @@
|
|||
@import './tailwind';
|
||||
@import './fonts';
|
||||
@import './tailwind';
|
||||
@import './antd';
|
||||
@import './reset';
|
||||
@import './sql';
|
||||
@import './loaders';
|
||||
@import './animations';
|
||||
@import './monaco';
|
||||
@import '../components/ui/layout/AppSplitter/SplitPane/themes/default';
|
||||
@import 'react-data-grid/lib/styles.css';
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
body,
|
||||
p,
|
||||
div,
|
||||
span,
|
||||
label,
|
||||
textarea,
|
||||
button,
|
||||
select,
|
||||
option,
|
||||
ul,
|
||||
li,
|
||||
a,
|
||||
i,
|
||||
svg,
|
||||
path,
|
||||
g,
|
||||
tspan,
|
||||
table,
|
||||
th,
|
||||
td,
|
||||
tr,
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
blockquote,
|
||||
pre {
|
||||
font-family:
|
||||
var(--font-app),
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
'Noto Sans',
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
}
|
||||
|
||||
input {
|
||||
font-family:
|
||||
var(--font-app),
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
// Text
|
||||
--font-sans: 'Roobert_Pro', sans-serif;
|
||||
--font-mono: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
|
||||
--text-xxs: 10px;
|
||||
--text-xxs--line-height: 1;
|
||||
--text-xs: 11px;
|
||||
|
|
@ -25,7 +27,9 @@
|
|||
--text-4xl: 30px;
|
||||
--text-4xl--line-height: 1;
|
||||
|
||||
// Colors
|
||||
--color-primary: #7c3aed;
|
||||
--color-primary-light: #a26cff;
|
||||
--color-primary-dark: #6d28d9;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import type { Config } from 'tailwindcss';
|
||||
|
||||
const config = {
|
||||
darkMode: false,
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
sans: ['Roobert_Pro', 'sans-serif'],
|
||||
mono: ['Menlo', 'Monaco', 'Courier New', 'monospace']
|
||||
},
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor'
|
||||
},
|
||||
fontSize: {
|
||||
xxs: ['10px', { lineHeight: '1.2' }],
|
||||
xs: ['11px', { lineHeight: '1.2' }],
|
||||
sm: ['12px', { lineHeight: '1.2' }],
|
||||
base: ['13px', { lineHeight: '1.2' }],
|
||||
md: ['14px', { lineHeight: '1.2' }],
|
||||
lg: ['18px', { lineHeight: '1.2' }],
|
||||
xl: ['18px', { lineHeight: '1.2' }],
|
||||
'2xl': ['20px', { lineHeight: '1.2' }],
|
||||
'3xl': ['24px', { lineHeight: '1.2' }],
|
||||
'4xl': ['30px', { lineHeight: '1.2' }]
|
||||
},
|
||||
extend: {
|
||||
colors: {}
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
} satisfies Config;
|
||||
|
||||
export default config;
|
||||
Loading…
Reference in New Issue