update 通知公告显示优化

This commit is contained in:
2021-07-01 22:26:11 +08:00
parent c4c35998a6
commit 850d490a1b
22 changed files with 435 additions and 193 deletions

View File

@@ -151,6 +151,8 @@
flex: 0 0 100%;
width: 100%;
text-align: inherit;
}
}
.yo-form--short {

View File

@@ -21,26 +21,25 @@
display: flex;
}
.ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
.ellipsis-line(@line) {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-line-clamp: @line;
}
.ellipsis-2 {
.ellipsis-line(2);
}
.ellipsis-3 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
.ellipsis-line(3);
}

View File

@@ -94,44 +94,76 @@
transition: @animation-duration-slow;
transition-property: color;
// 特殊工具按钮
.theme-toggle {
position: relative;
overflow: hidden;
width: 20px;
height: 20px;
margin: 7px 0;
border-radius: 50%;
&--real {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
}
&--imaginary {
position: absolute;
top: 6px;
left: -6px;
width: 18px;
height: 18px;
transform: @animation-duration-slow transform;
transform: rotate(45deg) scaleY(1);
transform-origin: top right;
border-radius: 50%;
background-color: fade(@layout-header-background, 70%);
}
}
}
&:active {
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
}
// 特殊工具按钮
.theme-toggle {
position: relative;
overflow: hidden;
width: 20px;
height: 20px;
margin: 7px 0;
border-radius: 50%;
&--real {
position: relative;
width: 20px;
height: 20px;
transition: @animation-duration-slow background-color;
border-radius: 50%;
background-color: fade(@white, 60%);
&::before {
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
content: '';
transition: @animation-duration-slow transform;
transform: scale(0);
border: 2px solid @layout-header-background;
border-radius: 50%;
}
}
&--imaginary {
position: absolute;
top: 6px;
right: -6px;
width: 18px;
height: 18px;
transition: @animation-duration-slow transform;
transform: rotate(45deg) scaleY(1);
transform-origin: top right;
border-radius: 50%;
background-color: @layout-header-background;
}
}
&:hover {
.theme-toggle {
&--real {
background-color: @white;
&::before {
transform: scale(1);
}
}
&--imaginary {
transform: rotate(45deg) scaleY(0);
}
}
}
}
.ant-select-auto-complete {
margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;

View File

@@ -151,6 +151,8 @@
flex: 0 0 100%;
width: 100%;
text-align: inherit;
}
}
.yo-form--short {

View File

@@ -21,26 +21,25 @@
display: flex;
}
.ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis-2 {
.ellipsis-line(@line) {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-line-clamp: @line;
}
.ellipsis-2 {
.ellipsis-line(2);
}
.ellipsis-3 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
.ellipsis-line(3);
}

View File

@@ -98,6 +98,72 @@
&:active {
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
}
// 特殊工具按钮
.theme-toggle {
position: relative;
overflow: hidden;
width: 20px;
height: 20px;
margin: 7px 0;
border-radius: 50%;
&--real {
position: relative;
width: 100%;
height: 100%;
transition: @animation-duration-slow background-color;
border-radius: 50%;
background-color: fade(@white, 60%);
&::before {
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
content: '';
transition: @animation-duration-slow transform;
transform: scale(1);
border: 2px solid @layout-header-background;
border-radius: 50%;
}
}
&--imaginary {
position: absolute;
top: 6px;
right: -6px;
width: 18px;
height: 18px;
transition: @animation-duration-slow transform;
transform: rotate(45deg) scaleY(0);
transform-origin: top right;
border-radius: 50%;
background-color: #334454;
}
}
&:hover {
.theme-toggle {
&--real {
background-color: @white;
&::before {
transform: scale(0);
}
}
&--imaginary {
transform: rotate(45deg) scaleY(1);
}
}
}
}
.ant-select-auto-complete {
margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;