1、省略号
详细样式:css文字超出元素省略,单行、多行省略_css单行省略_前端鼓励师的博客-CSDN博客
/*
基础的单行文本省略样式,用于基础布局或flex layout 自适应 width 省略,
需要配合width-100 或 flex-grow-1使用
*/
.single-text-ellipsis-base {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
/*
单行文本省略显示
*/
.single-text-ellipsis {
.single-text-ellipsis-base;
width: 100% !important;
}
.text-truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2、tag样式
.tag-label {
border-radius: 2px;
height: 24px;
padding: 2px 8px;
border: 0;
font-weight: 400;
line-height: 18px;
}
3、字体
.font-weight {
&-normal {
font-weight: normal;
}
&-medium {
font-weight: 500;
}
&-bold {
font-weight: 700;
}
}
4、圆点样式
.circle {
display: inline-block;
width: 16rpx;
height: 16rpx;
border-radius: 8rpx;
}
.icon-circle {
&-success {
background-color: #52c41a;
}
&-claim {
background-color: #ffc53d;
}
&-waiting {
background-color: #ffc53d;
}
&-failure {
background-color: #fa5a48;
}
}
5、光标显示手样式
.point {
cursor: pointer;
}
6、一个div左右居中
.audit-content-title-fixed {
max-width: 1392px!important;
margin: 0 auto!important;
height: 48px!important;
}
7、控制面板的高度和宽度
.flow-ant-card {
box-sizing: border-box;
min-height: calc(100vh - 160px);
}
.right-width {
width: calc(100% - 280px);
}
8、美化滚动条
.scrollbar-mixin(@element-name) {
.scrollbar-inner-mixin(@enabled) when(@enabled=true) {
@{element-name} {
// FireFox
// scrollbar-color: @scrollbar-track-color @scrollbar-thumb-color;
scrollbar-color: auto;
scrollbar-width: thin;
// Other
&::-webkit-scrollbar {
width: @scrollbar-height;
height: @scrollbar-width;
animation-delay: 0s;
scrollbar-color: rgba(0, 0, 0, 0.12) #6e6e6e;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 @scrollbar-width @scrollbar-track-color;
&:hover {
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.12);
}
}
&::-webkit-scrollbar-thumb {
background-color: @scrollbar-thumb-color;
-webkit-background-clip: content-box;
background-clip: content-box;
border: 3px solid transparent;
border-radius: 8px;
outline: 0;
&:hover {
border-color: #6e6e6e;
}
}
}
}
.scrollbar-inner-mixin(@scrollbar-enabled);
}
.scrollbar-mixin(~'body');
.scrollbar-mixin(~'.scrollbar-y');
.scrollbar-mixin(~'.scrollbar-x');
.scrollbar-mixin(~'.ant-drawer-body');
.scrollbar-mixin(~'.ant-modal-body');
.scrollbar-mixin(~'.ant-table-body');
.scrollbar-mixin(~'.cdk-overlay-container .ant-table-filter-dropdown .ant-dropdown-menu');
.scrollbar-mixin(~'.ant-table');
.scrollbar-mixin(~'.ant-popover-inner-content');
.scrollbar-mixin(~'.ant-select-dropdown >div');
9、伪类选择器
详细地址:[CSS]伪类选择器_luckyboy!的博客-CSDN博客
例子:
.ellipsis-v:hover {
background-color: #40a9ff33;
}
:host ::ng-deep .ant-table-thead > tr > th:first-child,
:host ::ng-deep .ant-table-tbody > tr > td:first-child {
padding-left: 24px !important;
}
:host ::ng-deep .ant-table-thead th.ant-table-column-sort::before {
background-color: rgba(0, 0, 0, 0.06) !important;
}
:host ::ng-deep .notification .ant-table-thead > tr > th:not(:last-child)::before {
display: none;
}
10、 覆盖组件样式
html.js
<nz-select [(ngModel)]="mode"
(ngModelChange)="changeMode($event)"
nzDropdownClassName="date-style">
<nz-option *ngFor="let item of modeOptions"
[nzValue]="item.value" [nzLabel]="item.title"></nz-option>
</nz-select>
component.js
::ng-deep .date-style {
width: 120px !important;
}