feat: add concurrent Panda CSS watch to dev script
- Install concurrently package for running multiple processes - Update dev script to run both Next.js dev and Panda CSS watch - Automatically regenerate CSS when styles change during development - Eliminates need to manually run panda codegen after CSS changes Dev script now runs: - Next.js development server - Panda CSS file watcher for automatic style regeneration 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -88,7 +88,9 @@
|
||||
"Bash(git bisect:*)",
|
||||
"Bash(pnpm --filter @soroban/web dev)",
|
||||
"Bash(pnpm --filter @soroban/web panda:*)",
|
||||
"Bash(npx @pandacss/dev:*)"
|
||||
"Bash(npx @pandacss/dev:*)",
|
||||
"Bash(pnpm add:*)",
|
||||
"Bash(pnpm:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"dev": "concurrently \"next dev\" \"npx @pandacss/dev --watch\"",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
@@ -37,6 +37,7 @@
|
||||
"@types/node": "^20.0.0",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"concurrently": "^8.0.0",
|
||||
"eslint": "^8.0.0",
|
||||
"eslint-config-next": "^14.0.0",
|
||||
"typescript": "^5.0.0"
|
||||
|
||||
@@ -99,15 +99,6 @@
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
.hover\:shadow_modal:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
@@ -335,6 +326,18 @@
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:shadow_modal:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
@@ -343,10 +346,10 @@
|
||||
background: var(--colors-red-700)
|
||||
}
|
||||
@media screen and (min-width: 64em) {
|
||||
|
||||
.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.lg\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
@@ -1,24 +1,149 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.top_-20px {
|
||||
top: -20px
|
||||
}
|
||||
|
||||
.right_20px {
|
||||
right: 20px
|
||||
}
|
||||
|
||||
.w_min\(85vw\,_700px\) {
|
||||
width: min(85vw, 700px)
|
||||
}
|
||||
|
||||
.h_min\(50vh\,_400px\) {
|
||||
height: min(50vh, 400px)
|
||||
}
|
||||
|
||||
.mt_32px {
|
||||
margin-top: 32px
|
||||
}
|
||||
|
||||
.h_180px {
|
||||
height: 180px
|
||||
}
|
||||
|
||||
.m_40px_0 {
|
||||
margin: 40px 0
|
||||
}
|
||||
|
||||
.mb_15px {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
.font_normal {
|
||||
font-weight: var(--font-weights-normal)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#f8f9fa\,_\#e9ecef\) {
|
||||
background: linear-gradient(135deg, #f8f9fa, #e9ecef)
|
||||
}
|
||||
|
||||
.border_2px_solid_\#6c757d {
|
||||
border: 2px solid #6c757d
|
||||
}
|
||||
|
||||
.border_3px_solid_\#adb5bd {
|
||||
border: 3px solid #adb5bd
|
||||
}
|
||||
|
||||
.border_2px_solid_\#dc3545 {
|
||||
border: 2px solid #dc3545
|
||||
}
|
||||
|
||||
.border_2px_solid_\#28a745 {
|
||||
border: 2px solid #28a745
|
||||
}
|
||||
|
||||
.shadow_0_0_20px_rgba\(220\,_53\,_69\,_0\.3\) {
|
||||
box-shadow: 0 0 20px rgba(220, 53, 69, 0.3)
|
||||
}
|
||||
|
||||
.shadow_0_4px_6px_rgba\(0\,_0\,_0\,_0\.1\) {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.shadow_0_0_20px_rgba\(40\,_167\,_69\,_0\.3\) {
|
||||
box-shadow: 0 0 20px rgba(40, 167, 69, 0.3)
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.min-h_80px {
|
||||
min-height: 80px
|
||||
}
|
||||
|
||||
.p_24px {
|
||||
padding: 24px
|
||||
}
|
||||
|
||||
.fs_36px {
|
||||
font-size: 36px
|
||||
}
|
||||
|
||||
.font_Courier_New\,_Monaco\,_monospace {
|
||||
font-family: Courier New, Monaco, monospace
|
||||
}
|
||||
|
||||
.tracking_4px {
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
.p_15px {
|
||||
padding: 15px
|
||||
}
|
||||
|
||||
.rounded_20px {
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.p_40px_20px {
|
||||
padding: 40px 20px
|
||||
}
|
||||
|
||||
.max-w_700px {
|
||||
max-width: 700px
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.w_120 {
|
||||
width: 120px
|
||||
}
|
||||
|
||||
.h_160 {
|
||||
height: 160px
|
||||
}
|
||||
|
||||
.max-w_600px {
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
.gap_12px {
|
||||
gap: 12px
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(140px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
|
||||
}
|
||||
|
||||
.p_12px_16px {
|
||||
padding: 12px 16px
|
||||
}
|
||||
|
||||
.gap_4px {
|
||||
gap: 4px
|
||||
}
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.fs_11px {
|
||||
font-size: 11px
|
||||
}
|
||||
@@ -30,25 +155,19 @@
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.p_10px_20px {
|
||||
padding: 10px 20px
|
||||
}
|
||||
.hover\:border_blue\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.max-w_300px {
|
||||
max-width: 300px
|
||||
}
|
||||
@@ -61,14 +180,14 @@
|
||||
padding: 15px 30px
|
||||
}
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.box_border-box {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.gap_16px {
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.h_10px {
|
||||
height: 10px
|
||||
}
|
||||
@@ -93,12 +212,8 @@
|
||||
transition: width 0.5s ease
|
||||
}
|
||||
|
||||
.top_-20px {
|
||||
top: -20px
|
||||
}
|
||||
|
||||
.right_20px {
|
||||
right: 20px
|
||||
.justify_flex-end {
|
||||
justify-content: flex-end
|
||||
}
|
||||
|
||||
.bg_red\.500 {
|
||||
@@ -109,12 +224,13 @@
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.p_8px_16px {
|
||||
padding: 8px 16px
|
||||
}
|
||||
|
||||
.transition_background_0\.2s_ease {
|
||||
transition: background 0.2s ease
|
||||
}
|
||||
.hover\:bg_red\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.text_green\.500 {
|
||||
color: var(--colors-green-500)
|
||||
@@ -132,16 +248,20 @@
|
||||
font-size: 3rem
|
||||
}
|
||||
|
||||
.m_20px_0 {
|
||||
margin: 20px 0
|
||||
}
|
||||
|
||||
.text-shadow_2px_2px_4px_rgba\(0\,0\,0\,0\.1\) {
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1)
|
||||
}
|
||||
|
||||
.w_min\(85vw\,_700px\) {
|
||||
width: min(85vw, 700px)
|
||||
.w_min\(80vw\,_600px\) {
|
||||
width: min(80vw, 600px)
|
||||
}
|
||||
|
||||
.h_min\(50vh\,_400px\) {
|
||||
height: min(50vh, 400px)
|
||||
.h_min\(40vh\,_350px\) {
|
||||
height: min(40vh, 350px)
|
||||
}
|
||||
|
||||
.transition_transform_0\.3s_ease {
|
||||
@@ -163,40 +283,24 @@
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.mt_32px {
|
||||
margin-top: 32px
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.font_600 {
|
||||
font-weight: 600
|
||||
.p_16px {
|
||||
padding: 16px
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(140px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
|
||||
}
|
||||
|
||||
.gap_16px {
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.max-w_800px {
|
||||
max-width: 800px
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(120px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
|
||||
}
|
||||
|
||||
.perspective_1000px {
|
||||
perspective: 1000px
|
||||
}
|
||||
|
||||
.h_180px {
|
||||
height: 180px
|
||||
.h_140px {
|
||||
height: 140px
|
||||
}
|
||||
|
||||
.transform_rotateY\(0deg\) {
|
||||
@@ -248,32 +352,16 @@
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.mb_20px {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.fs_14px {
|
||||
font-size: 14px
|
||||
.m_24px_0 {
|
||||
margin: 24px 0
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.m_40px_0 {
|
||||
margin: 40px 0
|
||||
}
|
||||
|
||||
.mb_15px {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
.font_normal {
|
||||
font-weight: var(--font-weights-normal)
|
||||
.mb_12px {
|
||||
margin-bottom: 12px
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
@@ -284,8 +372,8 @@
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#f8f9fa\,_\#e9ecef\) {
|
||||
background: linear-gradient(135deg, #f8f9fa, #e9ecef)
|
||||
.bg_linear-gradient\(135deg\,_\#f0f8ff\,_\#e6f3ff\) {
|
||||
background: linear-gradient(135deg, #f0f8ff, #e6f3ff)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(45deg\,_\#f8d7da\,_\#f1b0b7\) {
|
||||
@@ -295,99 +383,157 @@
|
||||
.bg_linear-gradient\(45deg\,_\#d4edda\,_\#c3e6cb\) {
|
||||
background: linear-gradient(45deg, #d4edda, #c3e6cb)
|
||||
}
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#6c757d\,_\#adb5bd\)::before {
|
||||
background: linear-gradient(45deg, #6c757d, #adb5bd)
|
||||
}
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#007bff\,_\#4dabf7\)::before {
|
||||
background: linear-gradient(45deg, #007bff, #4dabf7)
|
||||
}
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#dc3545\,_\#e74c3c\)::before {
|
||||
background: linear-gradient(45deg, #dc3545, #e74c3c)
|
||||
}
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#28a745\,_\#20c997\)::before {
|
||||
background: linear-gradient(45deg, #28a745, #20c997)
|
||||
}
|
||||
|
||||
.border_2px_solid_\#6c757d {
|
||||
border: 2px solid #6c757d
|
||||
.shadow_0_8px_25px_rgba\(220\,_53\,_69\,_0\.2\) {
|
||||
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.2)
|
||||
}
|
||||
|
||||
.border_3px_solid_\#adb5bd {
|
||||
border: 3px solid #adb5bd
|
||||
.shadow_0_6px_20px_rgba\(0\,_123\,_255\,_0\.15\) {
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15)
|
||||
}
|
||||
|
||||
.border_2px_solid_\#dc3545 {
|
||||
border: 2px solid #dc3545
|
||||
}
|
||||
|
||||
.border_2px_solid_\#28a745 {
|
||||
border: 2px solid #28a745
|
||||
}
|
||||
|
||||
.shadow_0_0_20px_rgba\(220\,_53\,_69\,_0\.3\) {
|
||||
box-shadow: 0 0 20px rgba(220, 53, 69, 0.3)
|
||||
}
|
||||
|
||||
.shadow_0_4px_6px_rgba\(0\,_0\,_0\,_0\.1\) {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.shadow_0_0_20px_rgba\(40\,_167\,_69\,_0\.3\) {
|
||||
box-shadow: 0 0 20px rgba(40, 167, 69, 0.3)
|
||||
.shadow_0_8px_25px_rgba\(40\,_167\,_69\,_0\.2\) {
|
||||
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2)
|
||||
}
|
||||
|
||||
.cursor_not-allowed {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
.min-h_60px {
|
||||
min-height: 60px
|
||||
}
|
||||
|
||||
.min-h_80px {
|
||||
min-height: 80px
|
||||
.p_16px_20px {
|
||||
padding: 16px 20px
|
||||
}
|
||||
|
||||
.p_24px {
|
||||
padding: 24px
|
||||
.fs_28px {
|
||||
font-size: 28px
|
||||
}
|
||||
|
||||
.fs_36px {
|
||||
font-size: 36px
|
||||
.font_system-ui\,_-apple-system\,_sans-serif {
|
||||
font-family: system-ui, -apple-system, sans-serif
|
||||
}
|
||||
|
||||
.font_Courier_New\,_Monaco\,_monospace {
|
||||
font-family: Courier New, Monaco, monospace
|
||||
.font_600 {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.tracking_4px {
|
||||
letter-spacing: 4px
|
||||
.tracking_2px {
|
||||
letter-spacing: 2px
|
||||
}
|
||||
|
||||
.transition_all_0\.3s_ease {
|
||||
transition: all 0.3s ease
|
||||
}
|
||||
.\[\&\:\:before\]\:content_\"\"::before {
|
||||
content: ""
|
||||
}
|
||||
.\[\&\:\:before\]\:pos_absolute::before {
|
||||
position: absolute
|
||||
}
|
||||
.\[\&\:\:before\]\:inset_0::before {
|
||||
inset: var(--spacing-0)
|
||||
}
|
||||
.\[\&\:\:before\]\:rounded_16px::before {
|
||||
border-radius: 16px
|
||||
}
|
||||
.\[\&\:\:before\]\:p_2px::before {
|
||||
padding: 2px
|
||||
}
|
||||
.\[\&\:\:before\]\:mask_linear-gradient\(\#fff_0_0\)_content-box\,_linear-gradient\(\#fff_0_0\)::before {
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
|
||||
}
|
||||
.\[\&\:\:before\]\:mask-composite_xor::before {
|
||||
mask-composite: xor
|
||||
}
|
||||
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.right_-8px {
|
||||
right: -8px
|
||||
}
|
||||
|
||||
.transform_translateY\(-50\%\) {
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
.w_2px {
|
||||
width: 2px
|
||||
}
|
||||
|
||||
.h_24px {
|
||||
height: 24px
|
||||
}
|
||||
|
||||
.bg_\#007bff {
|
||||
background: #007bff
|
||||
}
|
||||
|
||||
.animation_blink_1s_infinite {
|
||||
animation: blink 1s infinite
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.m_20px_0 {
|
||||
margin: 20px 0
|
||||
.gap_8px {
|
||||
gap: 8px
|
||||
}
|
||||
|
||||
.min-h_60px {
|
||||
min-height: 60px
|
||||
.m_16px_0 {
|
||||
margin: 16px 0
|
||||
}
|
||||
|
||||
.p_15px {
|
||||
padding: 15px
|
||||
.min-h_40px {
|
||||
min-height: 40px
|
||||
}
|
||||
|
||||
.p_8px_16px {
|
||||
padding: 8px 16px
|
||||
.p_10px {
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.rounded_20px {
|
||||
border-radius: 20px
|
||||
.p_6px_12px {
|
||||
padding: 6px 12px
|
||||
}
|
||||
|
||||
.rounded_16px {
|
||||
border-radius: 16px
|
||||
}
|
||||
|
||||
.fs_14px {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.animation_fadeInScale_0\.3s_ease {
|
||||
animation: fadeInScale 0.3s ease
|
||||
}
|
||||
|
||||
.gap_4px {
|
||||
gap: 4px
|
||||
}
|
||||
|
||||
.pos_fixed {
|
||||
position: fixed
|
||||
}
|
||||
@@ -404,10 +550,6 @@
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.h_100vh {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.pointer-events_none {
|
||||
pointer-events: none
|
||||
}
|
||||
@@ -448,25 +590,34 @@
|
||||
animation: explode 1.5s ease-out forwards
|
||||
}
|
||||
|
||||
.gap_12px {
|
||||
gap: 12px
|
||||
}
|
||||
|
||||
.pt_16px {
|
||||
padding-top: 16px
|
||||
}
|
||||
|
||||
.border-t_1px_solid {
|
||||
border-top: 1px solid
|
||||
}
|
||||
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
.hover\:bg_blue\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.p_40px_20px {
|
||||
padding: 40px 20px
|
||||
}
|
||||
|
||||
.max-w_700px {
|
||||
max-width: 700px
|
||||
.max-w_800px {
|
||||
max-width: 800px
|
||||
}
|
||||
|
||||
.m_0_auto {
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.justify_flex-start {
|
||||
justify-content: flex-start
|
||||
}
|
||||
|
||||
.text_gray\.800 {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
@@ -511,10 +662,6 @@
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
@@ -575,10 +722,6 @@
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
@@ -594,9 +737,6 @@
|
||||
.bg_green\.500 {
|
||||
background: var(--colors-green-500)
|
||||
}
|
||||
.hover\:bg_green\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.p_12px_24px {
|
||||
padding: 12px 24px
|
||||
@@ -633,9 +773,6 @@
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
.hover\:bg_gray\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.min-h_screen {
|
||||
min-height: 100vh
|
||||
@@ -657,24 +794,32 @@
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
.h_100vh {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.max-w_100\% {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
.shrink_0 {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.d_inline-flex {
|
||||
@@ -696,9 +841,6 @@
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
.hover\:text_gray\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
@@ -724,6 +866,26 @@
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.max-h_100\% {
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.overflow_auto {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.w_280 {
|
||||
width: 280px
|
||||
}
|
||||
@@ -732,20 +894,55 @@
|
||||
height: 360px
|
||||
}
|
||||
|
||||
.w_120 {
|
||||
width: 120px
|
||||
.w_100 {
|
||||
width: 100px
|
||||
}
|
||||
|
||||
.h_160 {
|
||||
height: 160px
|
||||
.h_130 {
|
||||
height: 130px
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:px_6 {
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.hover\:border_blue\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.hover\:bg_red\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.hover\:bg_green\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
.md\:px_4,.md\:px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_screen {
|
||||
min-height: 100vh
|
||||
}
|
||||
@@ -50,9 +51,6 @@
|
||||
.transition_all_0\.3s {
|
||||
transition: all 0.3s
|
||||
}
|
||||
.hover\:transform_translateY\(-4px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-4px)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
@@ -327,12 +325,6 @@
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
.hover\:bg_blue\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-700)
|
||||
}
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
@@ -345,6 +337,18 @@
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-4px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-4px)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:px_6 {
|
||||
@@ -358,5 +362,17 @@
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.md\:fs_5xl {
|
||||
font-size: var(--font-sizes-5xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,13 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.space_y-2 {
|
||||
space: y-2
|
||||
}
|
||||
|
||||
.pos_sticky {
|
||||
position: sticky
|
||||
}
|
||||
@@ -66,18 +71,6 @@
|
||||
.bg_transparent {
|
||||
background: var(--colors-transparent)
|
||||
}
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
.hover\:text_brand\.600:is(:hover, [data-hover]) {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
.hover\:text_gray\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.border-b_2px_solid {
|
||||
border-bottom: 2px solid
|
||||
@@ -324,10 +317,6 @@
|
||||
padding-left: var(--spacing-6)
|
||||
}
|
||||
|
||||
.space_y-2 {
|
||||
space: y-2
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
@@ -509,12 +498,6 @@
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
.hover\:shadow_lg:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-lg)
|
||||
}
|
||||
|
||||
.w_120 {
|
||||
width: 120px
|
||||
@@ -635,6 +618,30 @@
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.hover\:text_brand\.600:is(:hover, [data-hover]) {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:shadow_lg:is(:hover, [data-hover]) {
|
||||
box-shadow: var(--shadows-lg)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:p_8 {
|
||||
@@ -644,14 +651,6 @@
|
||||
.md\:fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 64em) {
|
||||
|
||||
.lg\:grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
@@ -660,5 +659,27 @@
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.md\:fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.lg\:grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -23,9 +23,6 @@
|
||||
.text_brand\.800 {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
@@ -241,6 +238,10 @@
|
||||
max-width: var(--sizes-4xl)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@layer utilities {
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
@@ -14,9 +15,6 @@
|
||||
.p_1 {
|
||||
padding: var(--spacing-1)
|
||||
}
|
||||
.hover\:text_gray\.900:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:bg_white[data-state=active] {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
@@ -66,12 +64,6 @@
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.w_11 {
|
||||
width: var(--sizes-11)
|
||||
@@ -96,9 +88,6 @@
|
||||
.will-change_transform {
|
||||
will-change: transform
|
||||
}
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
@@ -160,9 +149,6 @@
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:bg_brand\.100[data-state=checked] {
|
||||
background: var(--colors-brand-100)
|
||||
}
|
||||
@@ -250,9 +236,6 @@
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
.hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
@@ -291,18 +274,6 @@
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
.focus\:border_brand\.500:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
.focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
@@ -363,4 +334,44 @@
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.focus\:border_brand\.500:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.900:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@layer utilities {
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
@@ -15,23 +16,13 @@
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
|
||||
.\[\&\[data-state\=open\]\]\:border_brand\.500[data-state=open] {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
.focus\:border_brand\.500:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
.focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
.\[\&\[data-state\=open\]\]\:border_brand\.500[data-state=open] {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
.\[\&\[data-state\=open\]\]\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\)[data-state=open] {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
|
||||
.\[\&\[data-state\=open\]\]\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\)[data-state=open] {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
@@ -127,9 +118,6 @@
|
||||
.ring_none {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:bg_brand\.100[data-state=checked] {
|
||||
background: var(--colors-brand-100)
|
||||
}
|
||||
@@ -200,4 +188,24 @@
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.focus\:ring_none:is(:focus, [data-focus]) {
|
||||
outline: var(--borders-none)
|
||||
}
|
||||
|
||||
.focus\:border_brand\.500:is(:focus, [data-focus]) {
|
||||
border-color: var(--colors-brand-500)
|
||||
}
|
||||
|
||||
.focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
|
||||
}
|
||||
|
||||
.hover\:border_gray\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
}
|
||||
@@ -11,12 +11,6 @@
|
||||
.bg_gray\.300 {
|
||||
background: var(--colors-gray-300)
|
||||
}
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.w_11 {
|
||||
width: var(--sizes-11)
|
||||
@@ -79,9 +73,6 @@
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
@@ -199,4 +190,16 @@
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.hover\:bg_brand\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-brand-700)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.400:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.hover\:border_brand\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-brand-400)
|
||||
}
|
||||
}
|
||||
@@ -21,110 +21,10 @@
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.max-w_600px {
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
.gap_12px {
|
||||
gap: 12px
|
||||
}
|
||||
|
||||
.p_12px_16px {
|
||||
padding: 12px 16px
|
||||
}
|
||||
|
||||
.gap_4px {
|
||||
gap: 4px
|
||||
}
|
||||
|
||||
.fs_11px {
|
||||
font-size: 11px
|
||||
}
|
||||
|
||||
.border_blue\.500 {
|
||||
border-color: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.p_10px_20px {
|
||||
padding: 10px 20px
|
||||
}
|
||||
|
||||
.max-w_300px {
|
||||
max-width: 300px
|
||||
}
|
||||
|
||||
.min-w_50px {
|
||||
min-width: 50px
|
||||
}
|
||||
|
||||
.p_15px_30px {
|
||||
padding: 15px 30px
|
||||
}
|
||||
|
||||
.box_border-box {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.h_10px {
|
||||
height: 10px
|
||||
}
|
||||
|
||||
.mb_10px {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(90deg\,_\#28a745\,_\#20c997\) {
|
||||
background: linear-gradient(90deg, #28a745, #20c997)
|
||||
}
|
||||
|
||||
.rounded_5px {
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
.w_0\% {
|
||||
width: 0%
|
||||
}
|
||||
|
||||
.transition_width_0\.5s_ease {
|
||||
transition: width 0.5s ease
|
||||
}
|
||||
|
||||
.right_20px {
|
||||
right: 20px
|
||||
}
|
||||
|
||||
.bg_red\.500 {
|
||||
background: var(--colors-red-500)
|
||||
}
|
||||
|
||||
.rounded_6px {
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.transition_background_0\.2s_ease {
|
||||
transition: background 0.2s ease
|
||||
}
|
||||
|
||||
.text_green\.500 {
|
||||
color: var(--colors-green-500)
|
||||
}
|
||||
|
||||
.text_blue\.500 {
|
||||
color: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.animation_pulse_0\.3s_ease {
|
||||
animation: pulse 0.3s ease
|
||||
}
|
||||
|
||||
.fs_3rem {
|
||||
font-size: 3rem
|
||||
}
|
||||
|
||||
.text-shadow_2px_2px_4px_rgba\(0\,0\,0\,0\.1\) {
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1)
|
||||
}
|
||||
|
||||
.w_min\(85vw\,_700px\) {
|
||||
width: min(85vw, 700px)
|
||||
}
|
||||
@@ -133,95 +33,14 @@
|
||||
height: min(50vh, 400px)
|
||||
}
|
||||
|
||||
.transition_transform_0\.3s_ease {
|
||||
transition: transform 0.3s ease
|
||||
}
|
||||
|
||||
.mt_32px {
|
||||
margin-top: 32px
|
||||
}
|
||||
|
||||
.font_600 {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(140px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
|
||||
}
|
||||
|
||||
.gap_16px {
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.max-w_800px {
|
||||
max-width: 800px
|
||||
}
|
||||
|
||||
.perspective_1000px {
|
||||
perspective: 1000px
|
||||
}
|
||||
|
||||
.h_180px {
|
||||
height: 180px
|
||||
}
|
||||
|
||||
.transform_rotateY\(0deg\) {
|
||||
transform: rotateY(0deg)
|
||||
}
|
||||
|
||||
.transition_transform_0\.8s {
|
||||
transition: transform 0.8s
|
||||
}
|
||||
|
||||
.transform-style_preserve-3d {
|
||||
transform-style: preserve-3d
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#6c5ce7\,_\#a29bfe\) {
|
||||
background: linear-gradient(135deg, #6c5ce7, #a29bfe)
|
||||
}
|
||||
|
||||
.fs_48px {
|
||||
font-size: 48px
|
||||
}
|
||||
|
||||
.border_3px_solid_\#5f3dc4 {
|
||||
border: 3px solid #5f3dc4
|
||||
}
|
||||
|
||||
.opacity_0\.8 {
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
.backface_hidden {
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden
|
||||
}
|
||||
|
||||
.shadow_0_4px_8px_rgba\(0\,_0\,_0\,_0\.1\) {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.border_3px_solid_\#28a745 {
|
||||
border: 3px solid #28a745
|
||||
}
|
||||
|
||||
.transform_rotateY\(180deg\) {
|
||||
transform: rotateY(180deg)
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.mb_20px {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.fs_14px {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.m_40px_0 {
|
||||
margin: 40px 0
|
||||
}
|
||||
@@ -238,14 +57,6 @@
|
||||
background: linear-gradient(135deg, #f8f9fa, #e9ecef)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(45deg\,_\#f8d7da\,_\#f1b0b7\) {
|
||||
background: linear-gradient(45deg, #f8d7da, #f1b0b7)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(45deg\,_\#d4edda\,_\#c3e6cb\) {
|
||||
background: linear-gradient(45deg, #d4edda, #c3e6cb)
|
||||
}
|
||||
|
||||
.border_2px_solid_\#6c757d {
|
||||
border: 2px solid #6c757d
|
||||
}
|
||||
@@ -298,34 +109,380 @@
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
.transition_all_0\.3s_ease {
|
||||
transition: all 0.3s ease
|
||||
}
|
||||
|
||||
.m_20px_0 {
|
||||
margin: 20px 0
|
||||
}
|
||||
|
||||
.min-h_60px {
|
||||
min-height: 60px
|
||||
}
|
||||
|
||||
.p_15px {
|
||||
padding: 15px
|
||||
}
|
||||
|
||||
.p_8px_16px {
|
||||
padding: 8px 16px
|
||||
}
|
||||
|
||||
.rounded_20px {
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.p_40px_20px {
|
||||
padding: 40px 20px
|
||||
}
|
||||
|
||||
.max-w_700px {
|
||||
max-width: 700px
|
||||
}
|
||||
|
||||
.h_160 {
|
||||
height: 160px
|
||||
}
|
||||
|
||||
.max-w_600px {
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(140px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))
|
||||
}
|
||||
|
||||
.p_12px_16px {
|
||||
padding: 12px 16px
|
||||
}
|
||||
|
||||
.fs_11px {
|
||||
font-size: 11px
|
||||
}
|
||||
|
||||
.border_blue\.500 {
|
||||
border-color: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.p_10px_20px {
|
||||
padding: 10px 20px
|
||||
}
|
||||
|
||||
.max-w_300px {
|
||||
max-width: 300px
|
||||
}
|
||||
|
||||
.min-w_50px {
|
||||
min-width: 50px
|
||||
}
|
||||
|
||||
.p_15px_30px {
|
||||
padding: 15px 30px
|
||||
}
|
||||
|
||||
.box_border-box {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.gap_16px {
|
||||
gap: 16px
|
||||
}
|
||||
|
||||
.h_10px {
|
||||
height: 10px
|
||||
}
|
||||
|
||||
.mb_10px {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(90deg\,_\#28a745\,_\#20c997\) {
|
||||
background: linear-gradient(90deg, #28a745, #20c997)
|
||||
}
|
||||
|
||||
.rounded_5px {
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
.w_0\% {
|
||||
width: 0%
|
||||
}
|
||||
|
||||
.transition_width_0\.5s_ease {
|
||||
transition: width 0.5s ease
|
||||
}
|
||||
|
||||
.justify_flex-end {
|
||||
justify-content: flex-end
|
||||
}
|
||||
|
||||
.bg_red\.500 {
|
||||
background: var(--colors-red-500)
|
||||
}
|
||||
|
||||
.rounded_6px {
|
||||
border-radius: 6px
|
||||
}
|
||||
|
||||
.p_8px_16px {
|
||||
padding: 8px 16px
|
||||
}
|
||||
|
||||
.transition_background_0\.2s_ease {
|
||||
transition: background 0.2s ease
|
||||
}
|
||||
|
||||
.text_green\.500 {
|
||||
color: var(--colors-green-500)
|
||||
}
|
||||
|
||||
.text_blue\.500 {
|
||||
color: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.animation_pulse_0\.3s_ease {
|
||||
animation: pulse 0.3s ease
|
||||
}
|
||||
|
||||
.fs_3rem {
|
||||
font-size: 3rem
|
||||
}
|
||||
|
||||
.m_20px_0 {
|
||||
margin: 20px 0
|
||||
}
|
||||
|
||||
.text-shadow_2px_2px_4px_rgba\(0\,0\,0\,0\.1\) {
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.1)
|
||||
}
|
||||
|
||||
.w_min\(80vw\,_600px\) {
|
||||
width: min(80vw, 600px)
|
||||
}
|
||||
|
||||
.h_min\(40vh\,_350px\) {
|
||||
height: min(40vh, 350px)
|
||||
}
|
||||
|
||||
.transition_transform_0\.3s_ease {
|
||||
transition: transform 0.3s ease
|
||||
}
|
||||
|
||||
.p_16px {
|
||||
padding: 16px
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(auto-fit\,_minmax\(120px\,_1fr\)\) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
|
||||
}
|
||||
|
||||
.perspective_1000px {
|
||||
perspective: 1000px
|
||||
}
|
||||
|
||||
.h_140px {
|
||||
height: 140px
|
||||
}
|
||||
|
||||
.transform_rotateY\(0deg\) {
|
||||
transform: rotateY(0deg)
|
||||
}
|
||||
|
||||
.transition_transform_0\.8s {
|
||||
transition: transform 0.8s
|
||||
}
|
||||
|
||||
.transform-style_preserve-3d {
|
||||
transform-style: preserve-3d
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#6c5ce7\,_\#a29bfe\) {
|
||||
background: linear-gradient(135deg, #6c5ce7, #a29bfe)
|
||||
}
|
||||
|
||||
.fs_48px {
|
||||
font-size: 48px
|
||||
}
|
||||
|
||||
.border_3px_solid_\#5f3dc4 {
|
||||
border: 3px solid #5f3dc4
|
||||
}
|
||||
|
||||
.opacity_0\.8 {
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
.backface_hidden {
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden
|
||||
}
|
||||
|
||||
.shadow_0_4px_8px_rgba\(0\,_0\,_0\,_0\.1\) {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.border_3px_solid_\#28a745 {
|
||||
border: 3px solid #28a745
|
||||
}
|
||||
|
||||
.transform_rotateY\(180deg\) {
|
||||
transform: rotateY(180deg)
|
||||
}
|
||||
|
||||
.mb_20px {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.m_24px_0 {
|
||||
margin: 24px 0
|
||||
}
|
||||
|
||||
.mb_12px {
|
||||
margin-bottom: 12px
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#f0f8ff\,_\#e6f3ff\) {
|
||||
background: linear-gradient(135deg, #f0f8ff, #e6f3ff)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(45deg\,_\#f8d7da\,_\#f1b0b7\) {
|
||||
background: linear-gradient(45deg, #f8d7da, #f1b0b7)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(45deg\,_\#d4edda\,_\#c3e6cb\) {
|
||||
background: linear-gradient(45deg, #d4edda, #c3e6cb)
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#6c757d\,_\#adb5bd\)::before {
|
||||
background: linear-gradient(45deg, #6c757d, #adb5bd)
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#007bff\,_\#4dabf7\)::before {
|
||||
background: linear-gradient(45deg, #007bff, #4dabf7)
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#dc3545\,_\#e74c3c\)::before {
|
||||
background: linear-gradient(45deg, #dc3545, #e74c3c)
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:bg_linear-gradient\(45deg\,_\#28a745\,_\#20c997\)::before {
|
||||
background: linear-gradient(45deg, #28a745, #20c997)
|
||||
}
|
||||
|
||||
.shadow_0_8px_25px_rgba\(220\,_53\,_69\,_0\.2\) {
|
||||
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.2)
|
||||
}
|
||||
|
||||
.shadow_0_6px_20px_rgba\(0\,_123\,_255\,_0\.15\) {
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15)
|
||||
}
|
||||
|
||||
.shadow_0_8px_25px_rgba\(40\,_167\,_69\,_0\.2\) {
|
||||
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2)
|
||||
}
|
||||
|
||||
.min-h_60px {
|
||||
min-height: 60px
|
||||
}
|
||||
|
||||
.p_16px_20px {
|
||||
padding: 16px 20px
|
||||
}
|
||||
|
||||
.fs_28px {
|
||||
font-size: 28px
|
||||
}
|
||||
|
||||
.font_system-ui\,_-apple-system\,_sans-serif {
|
||||
font-family: system-ui, -apple-system, sans-serif
|
||||
}
|
||||
|
||||
.font_600 {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.tracking_2px {
|
||||
letter-spacing: 2px
|
||||
}
|
||||
|
||||
.transition_all_0\.3s_ease {
|
||||
transition: all 0.3s ease
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:content_\"\"::before {
|
||||
content: ""
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:pos_absolute::before {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:inset_0::before {
|
||||
inset: var(--spacing-0)
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:rounded_16px::before {
|
||||
border-radius: 16px
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:p_2px::before {
|
||||
padding: 2px
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:mask_linear-gradient\(\#fff_0_0\)_content-box\,_linear-gradient\(\#fff_0_0\)::before {
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)
|
||||
}
|
||||
|
||||
.\[\&\:\:before\]\:mask-composite_xor::before {
|
||||
mask-composite: xor
|
||||
}
|
||||
|
||||
.right_-8px {
|
||||
right: -8px
|
||||
}
|
||||
|
||||
.transform_translateY\(-50\%\) {
|
||||
transform: translateY(-50%)
|
||||
}
|
||||
|
||||
.w_2px {
|
||||
width: 2px
|
||||
}
|
||||
|
||||
.h_24px {
|
||||
height: 24px
|
||||
}
|
||||
|
||||
.bg_\#007bff {
|
||||
background: #007bff
|
||||
}
|
||||
|
||||
.animation_blink_1s_infinite {
|
||||
animation: blink 1s infinite
|
||||
}
|
||||
|
||||
.gap_8px {
|
||||
gap: 8px
|
||||
}
|
||||
|
||||
.m_16px_0 {
|
||||
margin: 16px 0
|
||||
}
|
||||
|
||||
.min-h_40px {
|
||||
min-height: 40px
|
||||
}
|
||||
|
||||
.p_10px {
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.p_6px_12px {
|
||||
padding: 6px 12px
|
||||
}
|
||||
|
||||
.rounded_16px {
|
||||
border-radius: 16px
|
||||
}
|
||||
|
||||
.fs_14px {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.animation_fadeInScale_0\.3s_ease {
|
||||
animation: fadeInScale 0.3s ease
|
||||
}
|
||||
|
||||
.gap_4px {
|
||||
gap: 4px
|
||||
}
|
||||
|
||||
.pos_fixed {
|
||||
position: fixed
|
||||
}
|
||||
@@ -338,10 +495,6 @@
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.h_100vh {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.pointer-events_none {
|
||||
pointer-events: none
|
||||
}
|
||||
@@ -378,22 +531,30 @@
|
||||
animation: explode 1.5s ease-out forwards
|
||||
}
|
||||
|
||||
.gap_12px {
|
||||
gap: 12px
|
||||
}
|
||||
|
||||
.pt_16px {
|
||||
padding-top: 16px
|
||||
}
|
||||
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.p_40px_20px {
|
||||
padding: 40px 20px
|
||||
}
|
||||
|
||||
.max-w_700px {
|
||||
max-width: 700px
|
||||
.max-w_800px {
|
||||
max-width: 800px
|
||||
}
|
||||
|
||||
.m_0_auto {
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.justify_flex-start {
|
||||
justify-content: flex-start
|
||||
}
|
||||
|
||||
.text_gray\.800 {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
@@ -510,6 +671,22 @@
|
||||
--gradient-to: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.h_100vh {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.max-w_100\% {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.shrink_0 {
|
||||
flex-shrink: 0
|
||||
}
|
||||
|
||||
.d_inline-flex {
|
||||
display: inline-flex
|
||||
}
|
||||
@@ -518,6 +695,14 @@
|
||||
box-shadow: var(--shadows-xl)
|
||||
}
|
||||
|
||||
.max-h_100\% {
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
.overflow_auto {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.w_280 {
|
||||
width: 280px
|
||||
}
|
||||
@@ -526,8 +711,12 @@
|
||||
height: 360px
|
||||
}
|
||||
|
||||
.h_160 {
|
||||
height: 160px
|
||||
.w_100 {
|
||||
width: 100px
|
||||
}
|
||||
|
||||
.h_130 {
|
||||
height: 130px
|
||||
}
|
||||
|
||||
.min-h_screen {
|
||||
@@ -630,6 +819,10 @@
|
||||
background: var(--colors-indigo-100)
|
||||
}
|
||||
|
||||
.space_y-2 {
|
||||
space: y-2
|
||||
}
|
||||
|
||||
.pos_sticky {
|
||||
position: sticky
|
||||
}
|
||||
@@ -770,10 +963,6 @@
|
||||
padding-left: var(--spacing-6)
|
||||
}
|
||||
|
||||
.space_y-2 {
|
||||
space: y-2
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
@@ -1846,6 +2035,10 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.md\:px_4,.md\:px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.md\:px_6,.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
@@ -1888,6 +2081,9 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.lg\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
|
||||
3
pnpm-lock.yaml
generated
3
pnpm-lock.yaml
generated
@@ -98,6 +98,9 @@ importers:
|
||||
'@types/react-dom':
|
||||
specifier: ^18.0.0
|
||||
version: 18.0.0
|
||||
concurrently:
|
||||
specifier: ^8.0.0
|
||||
version: 8.0.0
|
||||
eslint:
|
||||
specifier: ^8.0.0
|
||||
version: 8.0.0
|
||||
|
||||
Reference in New Issue
Block a user