update 通知公告显示优化
This commit is contained in:
@@ -151,6 +151,8 @@
|
||||
flex: 0 0 100%;
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
.yo-form--short {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -151,6 +151,8 @@
|
||||
flex: 0 0 100%;
|
||||
|
||||
width: 100%;
|
||||
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
.yo-form--short {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user