refactor: remove margin utils, use inline pixel spacing
Delete the src/static/scss/margin.scss utility file, update all component templates to replace pre-defined margin classes with inline arbitrary pixel values (e.g. mb-[4px] instead of mb-4), and clean up long template lines for better readability.
This commit is contained in:
duanshuwen
@@ -4,7 +4,6 @@
|
||||
@import "./flex.scss";
|
||||
@import "./font-weight.scss";
|
||||
@import "./height.scss";
|
||||
@import "./margin.scss";
|
||||
@import "./font-size.scss";
|
||||
@import "./font-family.scss";
|
||||
@import "./ellipsis.scss";
|
||||
|
||||
@@ -1,356 +0,0 @@
|
||||
// 外边距
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// 2px
|
||||
.m-2 {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
// 4px
|
||||
.m-4 {
|
||||
margin: 4px;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
// 6px
|
||||
.m-6 {
|
||||
margin: 6px;
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.mr-6 {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.mx-6 {
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.my-6 {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
// 8px
|
||||
.m-8 {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mb-8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mr-8 {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mx-8 {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.my-8 {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
// 10px
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx-10 {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.my-10 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// 12px
|
||||
.m-12 {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ml-12 {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.mr-12 {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mx-12 {
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.my-12 {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// 14px
|
||||
.m-14 {
|
||||
margin: 14px;
|
||||
}
|
||||
|
||||
.mt-14 {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.mb-14 {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.ml-14 {
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.mr-14 {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.mx-14 {
|
||||
margin-left: 14px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.my-14 {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
// 16px
|
||||
.m-16 {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mb-16 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ml-16 {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.mr-16 {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.mx-16 {
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.my-16 {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// 18px
|
||||
.m-18 {
|
||||
margin: 18px;
|
||||
}
|
||||
|
||||
.mt-18 {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.mb-18 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ml-18 {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.mr-18 {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.mx-18 {
|
||||
margin-left: 18px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.my-18 {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
// 20px
|
||||
.m-20 {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mr-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mx-20 {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.my-20 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// 24px
|
||||
.m-24 {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mt-24 {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mb-24 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ml-24 {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.mr-24 {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.mx-24 {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.my-24 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
// 其他
|
||||
.ml-30 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.mr-88 {
|
||||
margin-right: 88px;
|
||||
}
|
||||
Reference in New Issue
Block a user