100 lines
2.5 KiB
Plaintext
100 lines
2.5 KiB
Plaintext
|
// 主题颜色
|
||
|
|
// 浅色 --> 默认使用
|
||
|
|
@ligh-background: #FFF;
|
||
|
|
@ligh-color: #3a3a3a;
|
||
|
|
|
||
|
|
// 深色
|
||
|
|
@dark-background: #353535;
|
||
|
|
@dark-color: #FFF;
|
||
|
|
|
||
|
|
@border-clor: #cecece;
|
||
|
|
|
||
|
|
// 单一设置主题
|
||
|
|
.single-theme(@position, @contrary_position, @margin_postion, @color) {
|
||
|
|
@attr : ~'[position=@{position}]';
|
||
|
|
&.layui-popper@{attr}{
|
||
|
|
margin-@{contrary_position}: 6px;
|
||
|
|
.layui-popper-arrow {
|
||
|
|
@{contrary_position}: -6px;
|
||
|
|
border-@{contrary_position}-width: 0;
|
||
|
|
border-@{position}-color: @border-clor;
|
||
|
|
&::after{
|
||
|
|
@{contrary_position}: 1px;
|
||
|
|
border-@{contrary_position}-width: 0;
|
||
|
|
margin-@{margin_postion}: -6px;
|
||
|
|
border-@{position}-color: @color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 统一设置四个方向的主题
|
||
|
|
.theme(@background-color, @color) {
|
||
|
|
background-color: @background-color;
|
||
|
|
color: @color;
|
||
|
|
.single-theme(top, bottom, left, @background-color);
|
||
|
|
.single-theme(bottom, top, left, @background-color);
|
||
|
|
.single-theme(right, left, top, @background-color);
|
||
|
|
.single-theme(left, right, top, @background-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 箭头默认居中
|
||
|
|
.arrow-default-center(@position, @prop) {
|
||
|
|
@attr : ~'[position=@{position}]';
|
||
|
|
&.layui-popper@{attr} {
|
||
|
|
.layui-popper-arrow{
|
||
|
|
@{prop}: -moz-calc(50% - 6px);
|
||
|
|
@{prop}: -webkit-calc(50% - 6px);
|
||
|
|
@{prop}: calc(50% - 6px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.all-arrow-default-center() {
|
||
|
|
.arrow-default-center(top, left);
|
||
|
|
.arrow-default-center(bottom, left);
|
||
|
|
.arrow-default-center(left, top);
|
||
|
|
.arrow-default-center(right, top);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 样式开始
|
||
|
|
.layui-popper {
|
||
|
|
position: fixed;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 3px;
|
||
|
|
word-wrap: break-word;
|
||
|
|
min-width: 12px;
|
||
|
|
min-height: 12px;
|
||
|
|
font-size: 14px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid @border-clor;
|
||
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
|
||
|
|
.theme(@ligh-background, @ligh-color);
|
||
|
|
max-width: 300px;
|
||
|
|
z-index: 9999;
|
||
|
|
|
||
|
|
// 箭头默认居中
|
||
|
|
.all-arrow-default-center();
|
||
|
|
|
||
|
|
.layui-popper-arrow {
|
||
|
|
&,&::after{
|
||
|
|
position: absolute;
|
||
|
|
display: block;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-width: 6px;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after{
|
||
|
|
content: ' ';
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 深色主题 */
|
||
|
|
&.layui-dark {
|
||
|
|
.theme(@dark-background, @dark-color);
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|