feat: regenerate Panda CSS styles for memory quiz and other components
- Regenerated Panda CSS after converting memory quiz to use css() functions - Added new CSS chunks for games pages, memory quiz, and various components - Updated main styles.css with all required utility classes - Includes complex animations, gradients, and transforms needed for memory quiz 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -52,8 +52,8 @@
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
@@ -64,10 +64,103 @@
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.border-t_1px_solid {
|
||||
border-top: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.pt_6 {
|
||||
padding-top: var(--spacing-6)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.cursor_not-allowed {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.opacity_0\.7 {
|
||||
opacity: 0.7
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_white {
|
||||
border-color: var(--colors-white)
|
||||
}
|
||||
|
||||
.border-t_transparent {
|
||||
border-top-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.animation_spin_1s_linear_infinite {
|
||||
animation: spin 1s linear infinite
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
@@ -88,6 +181,10 @@
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.mt_8 {
|
||||
margin-top: var(--spacing-8)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
@@ -174,6 +271,10 @@
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
@@ -198,6 +299,10 @@
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
@@ -237,8 +342,11 @@
|
||||
.hover\:bg_red\.700:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-700)
|
||||
}
|
||||
@media screen and (min-width: 64em) {
|
||||
|
||||
@media screen and (min-width: 64em) {
|
||||
.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))
|
||||
}
|
||||
|
||||
@@ -0,0 +1,752 @@
|
||||
@layer utilities {
|
||||
|
||||
.max-w_600px {
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
.gap_12px {
|
||||
gap: 12px
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.border_blue\.500 {
|
||||
border-color: var(--colors-blue-500)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.min-w_50px {
|
||||
min-width: 50px
|
||||
}
|
||||
|
||||
.p_15px_30px {
|
||||
padding: 15px 30px
|
||||
}
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.top_-20px {
|
||||
top: -20px
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
.hover\:bg_red\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.h_min\(50vh\,_400px\) {
|
||||
height: min(50vh, 400px)
|
||||
}
|
||||
|
||||
.transition_transform_0\.3s_ease {
|
||||
transition: transform 0.3s ease
|
||||
}
|
||||
.\[\&_svg\]\:w_100\% svg {
|
||||
width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:h_100\% svg {
|
||||
height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:max-w_100\% svg {
|
||||
max-width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:max-h_100\% svg {
|
||||
max-height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.mt_32px {
|
||||
margin-top: 32px
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.font_600 {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.w_100\% {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.h_100\% {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.mb_20px {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.fs_14px {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.m_40px_0 {
|
||||
margin: 40px 0
|
||||
}
|
||||
|
||||
.mb_15px {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
.font_normal {
|
||||
font-weight: var(--font-weights-normal)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.bg_gray\.200 {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#f8f9fa\,_\#e9ecef\) {
|
||||
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
|
||||
}
|
||||
|
||||
.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_not-allowed {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.transition_all_0\.3s_ease {
|
||||
transition: all 0.3s ease
|
||||
}
|
||||
|
||||
.opacity_1 {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.animation_fadeInScale_0\.3s_ease {
|
||||
animation: fadeInScale 0.3s ease
|
||||
}
|
||||
|
||||
.pos_fixed {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.top_0 {
|
||||
top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.left_0 {
|
||||
left: var(--spacing-0)
|
||||
}
|
||||
|
||||
.w_100vw {
|
||||
width: 100vw
|
||||
}
|
||||
|
||||
.h_100vh {
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
.pointer-events_none {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.z_1000 {
|
||||
z-index: 1000
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.top_50\% {
|
||||
top: 50%
|
||||
}
|
||||
|
||||
.left_50\% {
|
||||
left: 50%
|
||||
}
|
||||
|
||||
.transform_translate\(-50\%\,_-50\%\) {
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.fs_72px {
|
||||
font-size: 72px
|
||||
}
|
||||
|
||||
.text_red\.500 {
|
||||
color: var(--colors-red-500)
|
||||
}
|
||||
|
||||
.text-shadow_2px_2px_4px_rgba\(0\,_0\,_0\,_0\.3\) {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.animation_explode_1\.5s_ease-out_forwards {
|
||||
animation: explode 1.5s ease-out forwards
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.m_0_auto {
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.text_gray\.800 {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.gap_30px {
|
||||
gap: 30px
|
||||
}
|
||||
|
||||
.mb_30px {
|
||||
margin-bottom: 30px
|
||||
}
|
||||
|
||||
.p_20px {
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.rounded_12px {
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
.w_120px {
|
||||
width: 120px
|
||||
}
|
||||
|
||||
.h_120px {
|
||||
height: 120px
|
||||
}
|
||||
|
||||
.rounded_50\% {
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(45deg\,_\#007bff\,_\#0056b3\) {
|
||||
background: linear-gradient(45deg, #007bff, #0056b3)
|
||||
}
|
||||
|
||||
.fs_24px {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.gap_20px {
|
||||
gap: 20px
|
||||
}
|
||||
|
||||
.fs_18px {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.mt_16px {
|
||||
margin-top: 16px
|
||||
}
|
||||
|
||||
.mb_16px {
|
||||
margin-bottom: 16px
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.border_red\.200 {
|
||||
border-color: var(--colors-red-200)
|
||||
}
|
||||
|
||||
.m_8px_0 {
|
||||
margin: 8px 0
|
||||
}
|
||||
|
||||
.p_8px {
|
||||
padding: 8px
|
||||
}
|
||||
|
||||
.rounded_4px {
|
||||
border-radius: 4px
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.font_500 {
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.gap_15px {
|
||||
gap: 15px
|
||||
}
|
||||
|
||||
.mt_20px {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.border_none {
|
||||
border: var(--borders-none)
|
||||
}
|
||||
|
||||
.rounded_8px {
|
||||
border-radius: 8px
|
||||
}
|
||||
|
||||
.fs_16px {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.transition_all_0\.2s_ease {
|
||||
transition: all 0.2s ease
|
||||
}
|
||||
|
||||
.bg_gray\.500 {
|
||||
background: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.bg_gradient-to-br {
|
||||
background: gradient-to-br
|
||||
}
|
||||
|
||||
.from_green\.50 {
|
||||
--gradient-from: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.to_blue\.50 {
|
||||
--gradient-to: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.py_4 {
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.d_inline-flex {
|
||||
display: inline-flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.text-decor_none {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_xl {
|
||||
box-shadow: var(--shadows-xl)
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.w_280 {
|
||||
width: 280px
|
||||
}
|
||||
|
||||
.h_360 {
|
||||
height: 360px
|
||||
}
|
||||
|
||||
.w_120 {
|
||||
width: 120px
|
||||
}
|
||||
|
||||
.h_160 {
|
||||
height: 160px
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
}
|
||||
}
|
||||
362
apps/web/styled-system/chunks/src__app__games__page.css
Normal file
362
apps/web/styled-system/chunks/src__app__games__page.css
Normal file
@@ -0,0 +1,362 @@
|
||||
@layer utilities {
|
||||
.min-h_screen {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.from_blue\.50 {
|
||||
--gradient-from: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.to_purple\.50 {
|
||||
--gradient-to: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.py_8 {
|
||||
padding-block: var(--spacing-8)
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.mb_12 {
|
||||
margin-bottom: var(--spacing-12)
|
||||
}
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.max-w_2xl {
|
||||
max-width: var(--sizes-2xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.from_green\.400 {
|
||||
--gradient-from: var(--colors-green-400)
|
||||
}
|
||||
|
||||
.to_green\.600 {
|
||||
--gradient-to: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.bg_blue\.100 {
|
||||
background: var(--colors-blue-100)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.from_purple\.400 {
|
||||
--gradient-from: var(--colors-purple-400)
|
||||
}
|
||||
|
||||
.to_purple\.600 {
|
||||
--gradient-to: var(--colors-purple-600)
|
||||
}
|
||||
|
||||
.bg_purple\.100 {
|
||||
background: var(--colors-purple-100)
|
||||
}
|
||||
|
||||
.text_purple\.700 {
|
||||
color: var(--colors-purple-700)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.from_red\.400 {
|
||||
--gradient-from: var(--colors-red-400)
|
||||
}
|
||||
|
||||
.to_red\.600 {
|
||||
--gradient-to: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.bg_red\.100 {
|
||||
background: var(--colors-red-100)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.bg_yellow\.100 {
|
||||
background: var(--colors-yellow-100)
|
||||
}
|
||||
|
||||
.text_yellow\.700 {
|
||||
color: var(--colors-yellow-700)
|
||||
}
|
||||
|
||||
.shadow_lg {
|
||||
box-shadow: var(--shadows-lg)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.opacity_0\.6 {
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.w_16 {
|
||||
width: var(--sizes-16)
|
||||
}
|
||||
|
||||
.h_16 {
|
||||
height: var(--sizes-16)
|
||||
}
|
||||
|
||||
.bg_gradient-to-br {
|
||||
background: gradient-to-br
|
||||
}
|
||||
|
||||
.from_indigo\.400 {
|
||||
--gradient-from: var(--colors-indigo-400)
|
||||
}
|
||||
|
||||
.to_indigo\.600 {
|
||||
--gradient-to: var(--colors-indigo-600)
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.text_orange\.600 {
|
||||
color: var(--colors-orange-600)
|
||||
}
|
||||
|
||||
.ml_2 {
|
||||
margin-left: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_orange\.100 {
|
||||
background: var(--colors-orange-100)
|
||||
}
|
||||
|
||||
.px_2 {
|
||||
padding-inline: var(--spacing-2)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex-wrap_wrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.bg_indigo\.100 {
|
||||
background: var(--colors-indigo-100)
|
||||
}
|
||||
|
||||
.text_indigo\.700 {
|
||||
color: var(--colors-indigo-700)
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_1 {
|
||||
padding-block: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_green\.100 {
|
||||
background: var(--colors-green-100)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.mt_16 {
|
||||
margin-top: var(--spacing-16)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.shadow_sm {
|
||||
box-shadow: var(--shadows-sm)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.d_inline-block {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_blue\.600 {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.text-decor_none {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
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
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.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))
|
||||
}
|
||||
}
|
||||
}
|
||||
664
apps/web/styled-system/chunks/src__app__guide__page.css
Normal file
664
apps/web/styled-system/chunks/src__app__guide__page.css
Normal file
@@ -0,0 +1,664 @@
|
||||
@layer utilities {
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.pos_sticky {
|
||||
position: sticky
|
||||
}
|
||||
|
||||
.top_0 {
|
||||
top: var(--spacing-0)
|
||||
}
|
||||
|
||||
.z_10 {
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.text_brand\.800 {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.py_2 {
|
||||
padding-block: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#667eea_0\%\,_\#764ba2_100\%\) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
|
||||
}
|
||||
|
||||
.py_20 {
|
||||
padding-block: var(--spacing-20)
|
||||
}
|
||||
|
||||
.fs_4xl {
|
||||
font-size: var(--font-sizes-4xl)
|
||||
}
|
||||
|
||||
.text-shadow_0_4px_20px_rgba\(0\,0\,0\,0\.3\) {
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.3)
|
||||
}
|
||||
|
||||
.opacity_0\.95 {
|
||||
opacity: 0.95
|
||||
}
|
||||
|
||||
.max-w_2xl {
|
||||
max-width: var(--sizes-2xl)
|
||||
}
|
||||
|
||||
.border-b_1px_solid {
|
||||
border-bottom: 1px solid
|
||||
}
|
||||
|
||||
.border_brand\.600 {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.border_transparent {
|
||||
border-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.bg_brand\.50 {
|
||||
background: var(--colors-brand-50)
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.rounded_2xl {
|
||||
border-radius: var(--radii-2xl)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.p_10 {
|
||||
padding: var(--spacing-10)
|
||||
}
|
||||
|
||||
.fs_3xl {
|
||||
font-size: var(--font-sizes-3xl)
|
||||
}
|
||||
|
||||
.max-w_3xl {
|
||||
max-width: var(--sizes-3xl)
|
||||
}
|
||||
|
||||
.bg_yellow\.50 {
|
||||
background: var(--colors-yellow-50)
|
||||
}
|
||||
|
||||
.border_yellow\.300 {
|
||||
border-color: var(--colors-yellow-300)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.text_yellow\.800 {
|
||||
color: var(--colors-yellow-800)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.aspect_1\/2\.8 {
|
||||
aspect-ratio: 1/2.8
|
||||
}
|
||||
|
||||
.max-w_120px {
|
||||
max-width: 120px
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.fs_2xs {
|
||||
font-size: var(--font-sizes-2xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.leading_tight {
|
||||
line-height: var(--line-heights-tight)
|
||||
}
|
||||
|
||||
.mt_auto {
|
||||
margin-top: auto
|
||||
}
|
||||
|
||||
.mb_1 {
|
||||
margin-bottom: var(--spacing-1)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.border_blue\.300 {
|
||||
border-color: var(--colors-blue-300)
|
||||
}
|
||||
|
||||
.w_100\% {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.aspect_3\/4 {
|
||||
aspect-ratio: 3/4
|
||||
}
|
||||
|
||||
.max-w_180px {
|
||||
max-width: 180px
|
||||
}
|
||||
|
||||
.bg_gray\.50 {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.rounded_md {
|
||||
border-radius: var(--radii-md)
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
.\[\&_svg\]\:w_100\% svg {
|
||||
width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:h_100\% svg {
|
||||
height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.w_12 {
|
||||
width: var(--sizes-12)
|
||||
}
|
||||
|
||||
.h_12 {
|
||||
height: var(--sizes-12)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.bg_orange\.50 {
|
||||
background: var(--colors-orange-50)
|
||||
}
|
||||
|
||||
.border_orange\.200 {
|
||||
border-color: var(--colors-orange-200)
|
||||
}
|
||||
|
||||
.text_orange\.800 {
|
||||
color: var(--colors-orange-800)
|
||||
}
|
||||
|
||||
.text_orange\.700 {
|
||||
color: var(--colors-orange-700)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.bg_blue\.600 {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.text_blue\.600 {
|
||||
color: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.bg_gradient-to-br {
|
||||
background: gradient-to-br
|
||||
}
|
||||
|
||||
.to_indigo\.700 {
|
||||
--gradient-to: var(--colors-indigo-700)
|
||||
}
|
||||
|
||||
.mb_8 {
|
||||
margin-bottom: var(--spacing-8)
|
||||
}
|
||||
|
||||
.text_green\.600 {
|
||||
color: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.bg_green\.50 {
|
||||
background: var(--colors-green-50)
|
||||
}
|
||||
|
||||
.border_green\.200 {
|
||||
border-color: var(--colors-green-200)
|
||||
}
|
||||
|
||||
.text_green\.800 {
|
||||
color: var(--colors-green-800)
|
||||
}
|
||||
|
||||
.text_green\.700 {
|
||||
color: var(--colors-green-700)
|
||||
}
|
||||
|
||||
.text_red\.600 {
|
||||
color: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.pl_6 {
|
||||
padding-left: var(--spacing-6)
|
||||
}
|
||||
|
||||
.space_y-2 {
|
||||
space: y-2
|
||||
}
|
||||
|
||||
.bg_red\.50 {
|
||||
background: var(--colors-red-50)
|
||||
}
|
||||
|
||||
.border_red\.200 {
|
||||
border-color: var(--colors-red-200)
|
||||
}
|
||||
|
||||
.text_red\.800 {
|
||||
color: var(--colors-red-800)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.text_red\.700 {
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.shadow_sm {
|
||||
box-shadow: var(--shadows-sm)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.text_gray\.700 {
|
||||
color: var(--colors-gray-700)
|
||||
}
|
||||
|
||||
.bg_purple\.50 {
|
||||
background: var(--colors-purple-50)
|
||||
}
|
||||
|
||||
.border_purple\.200 {
|
||||
border-color: var(--colors-purple-200)
|
||||
}
|
||||
|
||||
.text_purple\.800 {
|
||||
color: var(--colors-purple-800)
|
||||
}
|
||||
|
||||
.text_purple\.700 {
|
||||
color: var(--colors-purple-700)
|
||||
}
|
||||
|
||||
.bg_indigo\.50 {
|
||||
background: var(--colors-indigo-50)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_indigo\.200 {
|
||||
border-color: var(--colors-indigo-200)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.text_indigo\.800 {
|
||||
color: var(--colors-indigo-800)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.text_indigo\.700 {
|
||||
color: var(--colors-indigo-700)
|
||||
}
|
||||
|
||||
.pl_4 {
|
||||
padding-left: var(--spacing-4)
|
||||
}
|
||||
|
||||
.mb_2 {
|
||||
margin-bottom: var(--spacing-2)
|
||||
}
|
||||
|
||||
.bg_gradient-to-r {
|
||||
background: gradient-to-r
|
||||
}
|
||||
|
||||
.from_purple\.600 {
|
||||
--gradient-from: var(--colors-purple-600)
|
||||
}
|
||||
|
||||
.to_indigo\.600 {
|
||||
--gradient-to: var(--colors-indigo-600)
|
||||
}
|
||||
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.p_6 {
|
||||
padding: var(--spacing-6)
|
||||
}
|
||||
|
||||
.text_center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.mb_3 {
|
||||
margin-bottom: var(--spacing-3)
|
||||
}
|
||||
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
|
||||
.opacity_0\.9 {
|
||||
opacity: 0.9
|
||||
}
|
||||
|
||||
.d_inline-block {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.text_purple\.600 {
|
||||
color: var(--colors-purple-600)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.text-decor_none {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
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
|
||||
}
|
||||
|
||||
.h_336 {
|
||||
height: 336px
|
||||
}
|
||||
|
||||
.w_180 {
|
||||
width: 180px
|
||||
}
|
||||
|
||||
.h_240 {
|
||||
height: 240px
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
|
||||
.w_80 {
|
||||
width: var(--sizes-80)
|
||||
}
|
||||
|
||||
.h_120 {
|
||||
height: 120px
|
||||
}
|
||||
|
||||
.py_4 {
|
||||
padding-block: var(--spacing-4)
|
||||
}
|
||||
|
||||
.max-w_4xl {
|
||||
max-width: var(--sizes-4xl)
|
||||
}
|
||||
|
||||
.max-w_7xl {
|
||||
max-width: var(--sizes-7xl)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.mx_auto {
|
||||
margin-inline: auto
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_12 {
|
||||
padding-block: var(--spacing-12)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.gap_12 {
|
||||
gap: var(--spacing-12)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_8 {
|
||||
gap: var(--spacing-8)
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_6 {
|
||||
gap: var(--spacing-6)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.md\:p_8 {
|
||||
padding: var(--spacing-8)
|
||||
}
|
||||
|
||||
.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))
|
||||
}
|
||||
|
||||
.md\:grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,9 @@
|
||||
.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)
|
||||
@@ -278,6 +281,7 @@
|
||||
.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
}
|
||||
|
||||
.md\:fs_6xl {
|
||||
font-size: var(--font-sizes-6xl)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,366 @@
|
||||
@layer utilities {
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
|
||||
.font_bold {
|
||||
font-weight: var(--font-weights-bold)
|
||||
}
|
||||
|
||||
.bg_gray\.100 {
|
||||
background: var(--colors-gray-100)
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:text_brand\.600[data-state=active] {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
.\[\&\[data-state\=active\]\]\:shadow_card[data-state=active] {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.mr_2 {
|
||||
margin-right: var(--spacing-2)
|
||||
}
|
||||
|
||||
.mt_6 {
|
||||
margin-top: var(--spacing-6)
|
||||
}
|
||||
|
||||
.p_4 {
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.bg_blue\.50 {
|
||||
background: var(--colors-blue-50)
|
||||
}
|
||||
|
||||
.border_blue\.200 {
|
||||
border-color: var(--colors-blue-200)
|
||||
}
|
||||
|
||||
.fs_md {
|
||||
font-size: var(--font-sizes-md)
|
||||
}
|
||||
|
||||
.text_blue\.800 {
|
||||
color: var(--colors-blue-800)
|
||||
}
|
||||
|
||||
.text_blue\.700 {
|
||||
color: var(--colors-blue-700)
|
||||
}
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.transform_translateX\(20px\) {
|
||||
transform: translateX(20px)
|
||||
}
|
||||
|
||||
.transform_translateX\(0px\) {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
|
||||
.transition_transform_0\.2s {
|
||||
transition: transform 0.2s
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
.after\:content_\"\"::after {
|
||||
content: ""
|
||||
}
|
||||
.after\:d_block::after {
|
||||
display: block
|
||||
}
|
||||
.after\:w_2::after {
|
||||
width: var(--sizes-2)
|
||||
}
|
||||
.after\:h_2::after {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
.after\:rounded_full::after {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
.after\:bg_brand\.600::after {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_modal {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.z_50 {
|
||||
z-index: 50
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:text_brand\.800[data-state=checked] {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_brand\.600 {
|
||||
color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.select_none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.touch_none {
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.bg_gray\.200 {
|
||||
background: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.grow_1 {
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.h_2 {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
|
||||
.pos_absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_brand\.600 {
|
||||
border-color: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
.hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
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)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.gap_10px {
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
@layer utilities {
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.select_none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
.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)
|
||||
}
|
||||
.\[\&\[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)
|
||||
}
|
||||
|
||||
.justify_space-between {
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.min-h_12 {
|
||||
min-height: var(--sizes-12)
|
||||
}
|
||||
|
||||
.fs_lg {
|
||||
font-size: var(--font-sizes-lg)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.text_gray\.500 {
|
||||
color: var(--colors-gray-500)
|
||||
}
|
||||
|
||||
.leading_tight {
|
||||
line-height: var(--line-heights-tight)
|
||||
}
|
||||
|
||||
.text_gray\.400 {
|
||||
color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.rounded_xl {
|
||||
border-radius: var(--radii-xl)
|
||||
}
|
||||
|
||||
.shadow_modal {
|
||||
box-shadow: var(--shadows-modal)
|
||||
}
|
||||
|
||||
.border_1px_solid {
|
||||
border: 1px solid
|
||||
}
|
||||
|
||||
.border_gray\.200 {
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.p_2 {
|
||||
padding: var(--spacing-2)
|
||||
}
|
||||
|
||||
.z_999 {
|
||||
z-index: 999
|
||||
}
|
||||
|
||||
.min-w_320px {
|
||||
min-width: 320px
|
||||
}
|
||||
|
||||
.max-h_300px {
|
||||
max-height: 300px
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.px_3 {
|
||||
padding-inline: var(--spacing-3)
|
||||
}
|
||||
|
||||
.py_3 {
|
||||
padding-block: var(--spacing-3)
|
||||
}
|
||||
|
||||
.rounded_lg {
|
||||
border-radius: var(--radii-lg)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
.\[\&\[data-state\=checked\]\]\:text_brand\.800[data-state=checked] {
|
||||
color: var(--colors-brand-800)
|
||||
}
|
||||
|
||||
.fs_xl {
|
||||
font-size: var(--font-sizes-xl)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.leading_relaxed {
|
||||
line-height: var(--line-heights-relaxed)
|
||||
}
|
||||
|
||||
.pos_popper {
|
||||
position: popper
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.gap_0 {
|
||||
gap: var(--spacing-0)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
}
|
||||
@@ -52,10 +52,6 @@
|
||||
border-color: var(--colors-gray-200)
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
@@ -118,6 +114,10 @@
|
||||
padding: var(--spacing-4)
|
||||
}
|
||||
|
||||
.overflow_hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.max-w_full {
|
||||
max-width: var(--sizes-full)
|
||||
}
|
||||
@@ -125,6 +125,18 @@
|
||||
.max-h_full {
|
||||
max-height: var(--sizes-full)
|
||||
}
|
||||
.\[\&_svg\]\:max-w_100\% svg {
|
||||
max-width: 100%
|
||||
}
|
||||
.\[\&_svg\]\:max-h_100\% svg {
|
||||
max-height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:w_auto svg {
|
||||
width: auto
|
||||
}
|
||||
.\[\&_svg\]\:h_auto svg {
|
||||
height: auto
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
@layer utilities {
|
||||
|
||||
.w_4 {
|
||||
width: var(--sizes-4)
|
||||
}
|
||||
|
||||
.h_4 {
|
||||
height: var(--sizes-4)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.border-t_transparent {
|
||||
border-top-color: var(--colors-transparent)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.animation_spin_1s_linear_infinite {
|
||||
animation: spin 1s linear infinite
|
||||
}
|
||||
|
||||
.mr_2 {
|
||||
margin-right: var(--spacing-2)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.text_gray\.400 {
|
||||
color: var(--colors-gray-400)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.gap_1 {
|
||||
gap: var(--spacing-1)
|
||||
}
|
||||
|
||||
.fs_2xl {
|
||||
font-size: var(--font-sizes-2xl)
|
||||
}
|
||||
}
|
||||
202
apps/web/styled-system/chunks/src__components__StyleControls.css
Normal file
202
apps/web/styled-system/chunks/src__components__StyleControls.css
Normal file
@@ -0,0 +1,202 @@
|
||||
@layer utilities {
|
||||
|
||||
.font_semibold {
|
||||
font-weight: var(--font-weights-semibold)
|
||||
}
|
||||
|
||||
.bg_brand\.600 {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
||||
.h_6 {
|
||||
height: var(--sizes-6)
|
||||
}
|
||||
|
||||
.transform_translateX\(20px\) {
|
||||
transform: translateX(20px)
|
||||
}
|
||||
|
||||
.transform_translateX\(0px\) {
|
||||
transform: translateX(0px)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.shadow_card {
|
||||
box-shadow: var(--shadows-card)
|
||||
}
|
||||
|
||||
.transition_transform_0\.2s {
|
||||
transition: transform 0.2s
|
||||
}
|
||||
|
||||
.will-change_transform {
|
||||
will-change: transform
|
||||
}
|
||||
|
||||
.w_5 {
|
||||
width: var(--sizes-5)
|
||||
}
|
||||
|
||||
.h_5 {
|
||||
height: var(--sizes-5)
|
||||
}
|
||||
|
||||
.rounded_full {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
}
|
||||
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
}
|
||||
|
||||
.transition_all {
|
||||
transition-property: var(--transition-prop, all);
|
||||
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)
|
||||
}
|
||||
|
||||
.mt_0\.5 {
|
||||
margin-top: var(--spacing-0\.5)
|
||||
}
|
||||
|
||||
.items_center {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.justify_center {
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.pos_relative {
|
||||
position: relative
|
||||
}
|
||||
.after\:content_\"\"::after {
|
||||
content: ""
|
||||
}
|
||||
.after\:d_block::after {
|
||||
display: block
|
||||
}
|
||||
.after\:w_2::after {
|
||||
width: var(--sizes-2)
|
||||
}
|
||||
.after\:h_2::after {
|
||||
height: var(--sizes-2)
|
||||
}
|
||||
.after\:rounded_full::after {
|
||||
border-radius: var(--radii-full)
|
||||
}
|
||||
.after\:bg_brand\.600::after {
|
||||
background: var(--colors-brand-600)
|
||||
}
|
||||
|
||||
.fs_sm {
|
||||
font-size: var(--font-sizes-sm)
|
||||
}
|
||||
|
||||
.font_medium {
|
||||
font-weight: var(--font-weights-medium)
|
||||
}
|
||||
|
||||
.text_gray\.900 {
|
||||
color: var(--colors-gray-900)
|
||||
}
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
font-size: var(--font-sizes-xs)
|
||||
}
|
||||
|
||||
.text_gray\.600 {
|
||||
color: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.leading_tight {
|
||||
line-height: var(--line-heights-tight)
|
||||
}
|
||||
|
||||
.gap_2 {
|
||||
gap: var(--spacing-2)
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.gap_0\.5 {
|
||||
gap: var(--spacing-0\.5)
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
flex: 1 1 0%
|
||||
}
|
||||
|
||||
.d_grid {
|
||||
display: grid
|
||||
}
|
||||
|
||||
.grid-cols_repeat\(1\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
.gap_4 {
|
||||
gap: var(--spacing-4)
|
||||
}
|
||||
|
||||
.d_flex {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.items_start {
|
||||
align-items: start
|
||||
}
|
||||
|
||||
.gap_3 {
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.flex_row {
|
||||
flex-direction: row
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user