feat: 样式定义

src/static/scss/padding.scss

@@ -1,4 +1,44 @@
 // 内边距
+.p-2 {
+  padding: 2px;
+}
+.pt-2 {
+  padding-top: 2px;
+}
+
+.pb-2 {
+  padding-bottom: 2px;
+}
+
+.pl-2 {
+  padding-left: 2px;
+}
+
+.pr-2 {
+  padding-right: 2px;
+}
+
+.px-2 {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.py-2 {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.p-4 {
+  padding: 4px;
+}
+.pl-4 {
+  padding-left: 4px;
+}
+
+.pr-4 {
+  padding-right: 4px;
+}
+
 .pt-4 {
   padding-top: 4px;
 }
@@ -7,6 +47,17 @@
   padding-bottom: 4px;
 }
 
+.px-4 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.py-4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+
 .p-6 {
   padding: 6px;
 }
@@ -27,6 +78,17 @@
   padding-right: 6px;
 }
 
+.px-6 {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.py-6 {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+
 .p-8 {
   padding: 8px;
 }
@@ -47,6 +109,47 @@
   padding-bottom: 8px;
 }
 
+.px-8 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.py-8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.p-10 {
+  padding: 10px;
+}
+
+.pt-10 {
+  padding-top: 10px;
+}
+
+.pb-10 {
+  padding-bottom: 10px;
+}
+
+.pl-10 {
+  padding-left: 10px;
+}
+
+.pr-10 {
+  padding-right: 10px;
+}
+
+.px-10 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.py-10 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+
 .p-12 {
   padding: 12px;
 }
@@ -55,14 +158,6 @@
   padding-top: 12px;
 }
 
-.l-12 {
-  padding-left: 12px;
-}
-
-.pr-12 {
-  padding-right: 12px;
-}
-
 .pb-12 {
   padding-bottom: 12px;
 }
@@ -71,6 +166,45 @@
   padding-left: 12px;
 }
 
+.pr-12 {
+  padding-right: 12px;
+}
+
+.px-12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.py-12 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.p-14 {
+  padding: 14px;
+}
+.pt-14 {
+  padding-top: 14px;
+}
+.pb-14 {
+  padding-bottom: 14px;
+}
+.pl-14 {
+  padding-left: 14px;
+}
+.pr-14 {
+  padding-right: 14px;
+}
+.px-14 {
+  padding-left: 14px;
+  padding-right: 14px;
+}
+.py-14 {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+
 .p-16 {
   padding: 16px;
 }
@@ -91,6 +225,17 @@
   padding-right: 16px;
 }
 
+.px-16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.py-16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+
 .p-20 {
   padding: 20px;
 }
@@ -99,6 +244,10 @@
   padding-top: 20px;
 }
 
+.pb-20 {
+  padding-bottom: 20px;
+}
+
 .pl-20 {
   padding-left: 20px;
 }
@@ -107,10 +256,17 @@
   padding-right: 20px;
 }
 
-.pb-20 {
+.px-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.py-20 {
+  padding-top: 20px;
   padding-bottom: 20px;
 }
 
+
 .p-24 {
   padding: 24px;
 }
@@ -123,6 +279,24 @@
   padding-bottom: 24px;
 }
 
+.pl-24 {
+  padding-left: 24px;
+}
+
+.pr-24 {
+  padding-right: 24px;
+}
+
+.px-24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.py-24 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
 .pb-safe-area {
   padding-bottom: Max(env(safe-area-inset-bottom), 12px);
 }