Template
1
0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-22 20:09:19 +08:00
v3-admin-vite/src/styles/mixins.scss
2024-02-18 11:31:29 +08:00

70 lines
1.5 KiB
SCSS

/** 清除浮动 */
%clearfix {
&::after {
content: "";
display: table;
clear: both;
}
}
/** 美化原生滚动条 */
%scrollbar {
// 整个滚动条
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
// 滚动条上的滚动滑块
&::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #90939955;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #90939977;
}
&::-webkit-scrollbar-thumb:active {
background-color: #90939999;
}
// 当同时有垂直滚动条和水平滚动条时交汇的部分
&::-webkit-scrollbar-corner {
background-color: transparent;
}
}
/** 文本溢出时显示省略号 */
%ellipsis {
// 隐藏溢出的文本
overflow: hidden;
// 防止文本换行
white-space: nowrap;
// 文本内容溢出容器时,文本末尾显示省略号
text-overflow: ellipsis;
}
@mixin transition($timeSlot...) {
-webkit-transition: $timeSlot;
-moz-transition: $timeSlot;
-o-transition: $timeSlot;
-ms-transition: $timeSlot;
transition: $timeSlot;
}
@mixin transform($translate) {
-webkit-transform: $translate;
-moz-transform: $translate;
-o-transform: $translate;
-ms-transform: $translate;
transform: $translate;
}
@mixin transformOrigin($origin) {
-webkit-transform-origin: $origin;
-moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
transform-origin: $origin;
}
@mixin backgroundImage($url) {
background-image: $url;
background-repeat: no-repeat;
background-size: 100% 100%;
}