1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- @import (reference) '../themes/color.less';
- .scale-hairline-common(@color, @top, @right, @bottom, @left) {
- content: '';
- position: absolute;
- background-color: @color;
- display: block;
- top: @top;
- right: @right;
- bottom: @bottom;
- left: @left;
- }
- .hairline(@direction, @color: @COLOR_BORDER) when (@direction = 'top') {
- &::before {
- .scale-hairline-common(@color, 0, 0, auto, 0);
- height: 1px;
- transform: scaleY(0.5);
- }
- }
- .hairline(@direction, @color: @COLOR_BORDER) when (@direction = 'right') {
- &::after {
- .scale-hairline-common(@color, 0, 0, 0, auto);
- width: 1px;
- transform: scaleX(0.5);
- }
- }
- .hairline(@direction, @color: @COLOR_BORDER) when (@direction = 'bottom') {
- &::after {
- .scale-hairline-common(@color, auto, 0, 0, 0);
- height: 1px;
- transform: scaleY(0.5);
- }
- }
- .hairline-popover(@direction, @color: @COLOR_BORDER)
- when
- (@direction = 'bottom') {
- &::after {
- .scale-hairline-common(@color, auto, 0, 0, 104 * @rpx);
- height: 1px;
- transform: scaleY(0.5);
- }
- }
- .hairline-collapse(@direction, @color: @COLOR_BORDER)
- when
- (@direction = 'bottom') {
- &::after {
- .scale-hairline-common(@color, auto, 0, 0, 24 * @rpx);
- height: 1px;
- transform: scaleY(0.5);
- width: 100%;
- }
- }
- .hairline-picker(@direction) when (@direction = 'bottom') {
- &::after {
- .scale-hairline-common(#e5e5e5, auto, 0, 0, 0);
- height: 1px;
- transform: scaleY(0.5);
- width: 100%;
- }
- }
- .hairline-radius(@color: @COLOR_BORDER, @radius) {
- position: relative;
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 200%;
- height: 200%;
- transform-origin: 0 0;
- pointer-events: none;
- border: 1px solid @color;
- border-radius: @radius;
- transform: scale(0.5);
- box-sizing: border-box;
- }
- }
|