forked from PinSpace-Org/GistPin
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathutilities.css
More file actions
154 lines (129 loc) · 6.05 KB
/
Copy pathutilities.css
File metadata and controls
154 lines (129 loc) · 6.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/* GistPin Analytics — Utility Classes
Spacing, Typography, Colors, Flexbox helpers */
/* ── Spacing ─────────────────────────────────────────── */
.m-0 { margin: 0 } .m-1 { margin: 4px }
.m-2 { margin: 8px } .m-3 { margin: 12px }
.m-4 { margin: 16px } .m-6 { margin: 24px }
.m-8 { margin: 32px }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: 4px }
.mt-2 { margin-top: 8px } .mt-3 { margin-top: 12px }
.mt-4 { margin-top: 16px } .mt-6 { margin-top: 24px }
.mt-8 { margin-top: 32px }
.mb-0 { margin-bottom: 0 } .mb-1 { margin-bottom: 4px }
.mb-2 { margin-bottom: 8px } .mb-3 { margin-bottom: 12px }
.mb-4 { margin-bottom: 16px } .mb-6 { margin-bottom: 24px }
.mb-8 { margin-bottom: 32px }
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mx-auto { margin-left: auto; margin-right: auto }
.p-0 { padding: 0 } .p-1 { padding: 4px }
.p-2 { padding: 8px } .p-3 { padding: 12px }
.p-4 { padding: 16px } .p-6 { padding: 24px }
.p-8 { padding: 32px }
.px-2 { padding-left: 8px; padding-right: 8px }
.px-4 { padding-left: 16px; padding-right: 16px }
.px-6 { padding-left: 24px; padding-right: 24px }
.py-2 { padding-top: 8px; padding-bottom: 8px }
.py-4 { padding-top: 16px; padding-bottom: 16px }
.py-6 { padding-top: 24px; padding-bottom: 24px }
/* ── Typography ──────────────────────────────────────── */
.text-xs { font-size: 12px; line-height: 1.4 }
.text-sm { font-size: 14px; line-height: 1.5 }
.text-base { font-size: 16px; line-height: 1.6 }
.text-lg { font-size: 18px; line-height: 1.5 }
.text-xl { font-size: 20px; line-height: 1.4 }
.text-2xl { font-size: 24px; line-height: 1.3 }
.text-3xl { font-size: 30px; line-height: 1.2 }
.text-4xl { font-size: 36px; line-height: 1.1 }
.font-normal { font-weight: 400 }
.font-medium { font-weight: 500 }
.font-semibold{ font-weight: 600 }
.font-bold { font-weight: 700 }
.text-left { text-align: left }
.text-center { text-align: center }
.text-right { text-align: right }
.uppercase { text-transform: uppercase }
.lowercase { text-transform: lowercase }
.capitalize { text-transform: capitalize }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.leading-none{ line-height: 1 }
.tracking-wide{ letter-spacing: 0.05em }
/* ── Colors ──────────────────────────────────────────── */
/* Text */
.text-white { color: #ffffff }
.text-black { color: #000000 }
.text-muted { color: #64748b }
.text-primary { color: #1d4ed8 }
.text-success { color: #15803d }
.text-danger { color: #b91c1c }
.text-warning { color: #b45309 }
.text-info { color: #0369a1 }
/* Background */
.bg-white { background-color: #ffffff }
.bg-slate-50 { background-color: #f8fafc }
.bg-slate-100 { background-color: #f1f5f9 }
.bg-slate-800 { background-color: #1e293b }
.bg-slate-900 { background-color: #0f172a }
.bg-primary { background-color: #1d4ed8 }
.bg-success { background-color: #15803d }
.bg-danger { background-color: #b91c1c }
/* Border */
.border { border: 1px solid #e2e8f0 }
.border-2 { border: 2px solid #e2e8f0 }
.border-primary { border-color: #1d4ed8 }
.rounded { border-radius: 6px }
.rounded-lg { border-radius: 12px }
.rounded-xl { border-radius: 16px }
.rounded-2xl { border-radius: 24px }
.rounded-full { border-radius: 9999px }
/* ── Flexbox ─────────────────────────────────────────── */
.flex { display: flex }
.inline-flex { display: inline-flex }
.flex-col { flex-direction: column }
.flex-row { flex-direction: row }
.flex-wrap { flex-wrap: wrap }
.flex-nowrap { flex-wrap: nowrap }
.items-start { align-items: flex-start }
.items-center { align-items: center }
.items-end { align-items: flex-end }
.items-stretch{ align-items: stretch }
.justify-start { justify-content: flex-start }
.justify-center { justify-content: center }
.justify-end { justify-content: flex-end }
.justify-between{ justify-content: space-between }
.justify-around { justify-content: space-around }
.gap-1 { gap: 4px } .gap-2 { gap: 8px }
.gap-3 { gap: 12px } .gap-4 { gap: 16px }
.gap-6 { gap: 24px } .gap-8 { gap: 32px }
.flex-1 { flex: 1 1 0% }
.flex-auto { flex: 1 1 auto }
.flex-none { flex: none }
.shrink-0 { flex-shrink: 0 }
/* ── Display / Overflow ──────────────────────────────── */
.block { display: block }
.inline-block { display: inline-block }
.hidden { display: none }
.overflow-auto { overflow: auto }
.overflow-hidden { overflow: hidden }
.overflow-x-auto { overflow-x: auto }
.overflow-y-auto { overflow-y: auto }
/* ── Sizing ──────────────────────────────────────────── */
.w-full { width: 100% }
.h-full { height: 100% }
.min-w-0 { min-width: 0 }
.max-w-sm { max-width: 384px }
.max-w-md { max-width: 448px }
.max-w-lg { max-width: 512px }
.max-w-xl { max-width: 576px }
.max-w-2xl { max-width: 672px }
/* ── Shadows ─────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 1px 3px rgba(15,23,42,0.08) }
.shadow { box-shadow: 0 4px 12px rgba(15,23,42,0.10) }
.shadow-lg { box-shadow: 0 14px 36px rgba(15,23,42,0.12) }
/* ── Cursor ──────────────────────────────────────────── */
.cursor-pointer { cursor: pointer }
.cursor-default { cursor: default }
/* ── Opacity ─────────────────────────────────────────── */
.opacity-50 { opacity: 0.5 }
.opacity-75 { opacity: 0.75 }
.opacity-100 { opacity: 1 }