perf: 默认样式配置优化

This commit is contained in:
pipipi-pikachu 2021-02-08 18:01:20 +08:00
parent 04131c2137
commit 1a7194481c
13 changed files with 59 additions and 55 deletions

View File

@ -1,3 +1,5 @@
// ant design vue 的默认样式覆盖
// popover // popover
.ant-popover { .ant-popover {
padding-top: 5px !important; padding-top: 5px !important;
@ -6,7 +8,6 @@
display: none; display: none;
} }
.ant-popover-inner { .ant-popover-inner {
box-shadow: $boxShadow;
border: 1px solid $borderColor; border: 1px solid $borderColor;
} }
.ant-popover-inner-content { .ant-popover-inner-content {
@ -18,11 +19,9 @@
min-width: 120px; min-width: 120px;
} }
.ant-dropdown-menu { .ant-dropdown-menu {
box-shadow: $boxShadow;
border: 1px solid $borderColor; border: 1px solid $borderColor;
} }
.ant-dropdown-menu-item { .ant-dropdown-menu-item {
font-size: 13px;
transition: none; transition: none;
&:hover { &:hover {
@ -31,18 +30,11 @@
} }
// button // button
.ant-btn { .ant-btn.no-padding {
font-size: 13px !important;
&.no-padding {
padding: 0; padding: 0;
} }
}
// radio // radio
.ant-radio-group {
font-size: 13px !important;
}
.ant-radio-button-wrapper { .ant-radio-button-wrapper {
text-align: center; text-align: center;
} }
@ -59,19 +51,8 @@
.ant-select { .ant-select {
user-select: none; user-select: none;
} }
.ant-select-selection-item {
font-size: 13px;
}
.ant-select-item-option-content {
font-size: 13px !important;
}
// tooltip // tooltip
.ant-tooltip-inner { .ant-tooltip-inner {
font-size: 12px; font-size: 12px;
} }
// checkbox
.ant-checkbox-wrapper {
font-size: 13px;
}

View File

@ -19,37 +19,57 @@ time, mark, audio, video {
box-sizing: border-box; box-sizing: border-box;
} }
article, aside, details, figcaption, figure, article,
footer, header, hgroup, menu, nav, section { aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
} }
html, body {
html,
body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
color: $textColor; color: $textColor;
} }
ol, ul {
ol,
ul,
li {
list-style: none; list-style: none;
} }
blockquote, q { blockquote, q {
quotes: none; quotes: none;
} }
blockquote::before, blockquote::after,
q::before, q::after { blockquote::before,
blockquote::after,
q::before,
q::after {
content: ''; content: '';
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #fff;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

View File

@ -1,12 +1,10 @@
// 单行文字行末省略 @mixin ellipsis-oneline() {
@mixin ellipsis {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
// 多行文字尾行行末省略 @mixin ellipsis-multiline($line: 2) {
@mixin multi-ellipsis($line: 2) {
word-wrap: break-word; word-wrap: break-word;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -15,12 +13,12 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
// 表格式布局 @mixin flex-grid-layout() {
@mixin grid-layout-wrapper() {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
@mixin grid-layout-item($col, $colWidth) {
@mixin flex-grid-layout-children($col, $colWidth) {
width: $colWidth; width: $colWidth;
margin-bottom: calc(#{100 - $col * $colWidth} / #{$col - 1}); margin-bottom: calc(#{100 - $col * $colWidth} / #{$col - 1});

View File

@ -1,3 +1,5 @@
// ProseMirror 富文本默认样式
.ProseMirror, .ProseMirror-static { .ProseMirror, .ProseMirror-static {
outline: 0; outline: 0;
border: 0; border: 0;

View File

@ -229,10 +229,10 @@ export default defineComponent({
} }
.picker-presets { .picker-presets {
@include grid-layout-wrapper(); @include flex-grid-layout();
} }
.picker-presets-color { .picker-presets-color {
@include grid-layout-item(10, 7%); @include flex-grid-layout-children(10, 7%);
height: 0; height: 0;
padding-bottom: 7%; padding-bottom: 7%;
@ -241,10 +241,10 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
} }
.picker-gradient-presets { .picker-gradient-presets {
@include grid-layout-wrapper(); @include flex-grid-layout();
} }
.picker-gradient-col { .picker-gradient-col {
@include grid-layout-item(10, 7%); @include flex-grid-layout-children(10, 7%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -35,10 +35,10 @@ export default defineComponent({
width: 120px; width: 120px;
margin-bottom: -5px; margin-bottom: -5px;
@include grid-layout-wrapper(); @include flex-grid-layout();
} }
.chart-item { .chart-item {
@include grid-layout-item(3, 32%); @include flex-grid-layout-children(3, 32%);
height: 0; height: 0;
padding-bottom: 32%; padding-bottom: 32%;

View File

@ -77,10 +77,10 @@ export default defineComponent({
width: 200px; width: 200px;
margin-bottom: -5px; margin-bottom: -5px;
@include grid-layout-wrapper(); @include flex-grid-layout();
} }
.line-item { .line-item {
@include grid-layout-item(5, 19%); @include flex-grid-layout-children(5, 19%);
height: 0; height: 0;
padding-bottom: 19%; padding-bottom: 19%;

View File

@ -72,12 +72,12 @@ export default defineComponent({
padding: 2px 0 2px 10px; padding: 2px 0 2px 10px;
} }
.shape-list { .shape-list {
@include grid-layout-wrapper(); @include flex-grid-layout();
margin-bottom: 10px; margin-bottom: 10px;
} }
.shape-item { .shape-item {
@include grid-layout-item(10, 8%); @include flex-grid-layout-children(10, 8%);
height: 0; height: 0;
padding-bottom: 8%; padding-bottom: 8%;

View File

@ -47,6 +47,6 @@ export default defineComponent({
.label { .label {
width: 140px; width: 140px;
@include ellipsis(); @include ellipsis-oneline();
} }
</style> </style>

View File

@ -229,10 +229,10 @@ export default defineComponent({
padding: 2px 0 2px 10px; padding: 2px 0 2px 10px;
} }
.pool-item-wrapper { .pool-item-wrapper {
@include grid-layout-wrapper(); @include flex-grid-layout();
} }
.pool-item { .pool-item {
@include grid-layout-item(4, 24%); @include flex-grid-layout-children(4, 24%);
margin-bottom: 10px; margin-bottom: 10px;
height: 40px; height: 40px;

View File

@ -411,7 +411,7 @@ export default defineComponent({
.shape-clip { .shape-clip {
margin-bottom: 10px; margin-bottom: 10px;
@include grid-layout-wrapper(); @include flex-grid-layout();
} }
.shape-clip-item { .shape-clip-item {
display: flex; display: flex;
@ -419,7 +419,7 @@ export default defineComponent({
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@include grid-layout-item(5, 16%); @include flex-grid-layout-children(5, 16%);
.shape { .shape {
width: 40px; width: 40px;

View File

@ -367,10 +367,10 @@ export default defineComponent({
} }
.theme-list { .theme-list {
@include grid-layout-wrapper(); @include flex-grid-layout();
} }
.theme-item { .theme-item {
@include grid-layout-item(4, 22%); @include flex-grid-layout-children(4, 22%);
padding-bottom: 22%; padding-bottom: 22%;
border-radius: $borderRadius; border-radius: $borderRadius;

View File

@ -14,7 +14,10 @@ module.exports = {
lessOptions: { lessOptions: {
modifyVars: { modifyVars: {
'primary-color': '#d14424', 'primary-color': '#d14424',
'link-color': '#d14424', 'text-color': '#41464b',
'font-size-base': '13px',
'border-radius-base': '2px',
'box-shadow-base': '3px 3px 3px rgba(#000, 0.15)',
}, },
javascriptEnabled: true, javascriptEnabled: true,
}, },