117 lines
2.7 KiB
SCSS
117 lines
2.7 KiB
SCSS
/* #ifndef APP-NVUE */
|
|
// @import '@/uni_modules/lime-ui/style/index.scss';
|
|
@supports(background: conic-gradient(#000, #fff)) {
|
|
.check {
|
|
height: 1rpx;
|
|
position: absolute;
|
|
}
|
|
}
|
|
@property --l-circle-percent {
|
|
syntax: '<percentage>';
|
|
initial-value: 25%;
|
|
inherits: false;
|
|
}
|
|
$fill-2: var(--l-fill-2, rgba(0, 0, 0, 0.06));
|
|
$circle-trail-cap-size: var(--l-circle-trail-cap-size, 6px);
|
|
$circle-trail-cap-color: currentColor;//var(--l-circle-trail-cap-color, currentColor);
|
|
$circle-stroke-cap-size: var(--l-circle-stroke-cap-size, 6px);
|
|
$circle-stroke-cap-start-color: var(--l-circle-stroke-cap-start-color, $fill-2);
|
|
$circle-stroke-cap-end-color: var(--l-circle-stroke-cap-end-color, $fill-2);
|
|
//:root
|
|
:root {
|
|
display: inline-block;
|
|
}
|
|
/* #endif */
|
|
.l-circle {
|
|
position: relative;
|
|
/* #ifndef APP-NVUE */
|
|
display: inline-block;
|
|
&__canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
/* #endif */
|
|
&__inner{
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
}
|
|
/* #ifdef APP-NVUE */
|
|
&__view {
|
|
flex: 1;
|
|
}
|
|
/* #endif */
|
|
/* #ifndef APP-NVUE */
|
|
&__trail,&__stroke,&__stroke-line {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
&__stroke-line {
|
|
z-index: 2;
|
|
background: var(--l-background);
|
|
}
|
|
/* #endif */
|
|
}
|
|
|
|
/* #ifndef APP-NVUE */
|
|
.is-round {
|
|
.l-circle {
|
|
&__trail {
|
|
.cap {
|
|
position: absolute;
|
|
display: block;
|
|
width: $circle-trail-cap-size;
|
|
height: $circle-trail-cap-size;
|
|
background-color: $circle-trail-cap-color;
|
|
z-index: 10;
|
|
border-radius: 50%;
|
|
&.start {
|
|
left: var(--l-circle-trail-cap-start-x, 14%);
|
|
top: var(--l-circle-trail-cap-start-y, 81%);
|
|
}
|
|
&.end {
|
|
left: var(--l-circle-trail-cap-end-x, 14%);
|
|
top: var(--l-circle-trail-cap-end-y, 81%);
|
|
}
|
|
}
|
|
}
|
|
&__stroke .cap{
|
|
position: absolute;
|
|
display: block;
|
|
width: $circle-stroke-cap-size;
|
|
height: $circle-stroke-cap-size;
|
|
background-color: $circle-stroke-cap-start-color;
|
|
/* z-index: 10; */
|
|
border-radius: 50%;
|
|
transition: opacity 300ms ease-out;
|
|
opacity: var(--l-circle-stroke-cap-opacity, 0);
|
|
&.start {
|
|
left: var(--l-circle-stroke-cap-start-x, 14%);
|
|
top: var(--l-circle-stroke-cap-start-y, 81%);
|
|
background-color: $circle-stroke-cap-start-color;
|
|
}
|
|
&.end {
|
|
left: var(--l-circle-stroke-cap-end-x, 14%);
|
|
top: var(--l-circle-stroke-cap-end-y, 81%);
|
|
z-index: -1;
|
|
background-color: $circle-stroke-cap-end-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.clockwise {
|
|
transform: translateY(var(--l-circle-offset-top, 0)) scale(-1,1);
|
|
}
|
|
.clockwise .l-circle__inner{
|
|
transform: scale(-1,1);
|
|
}
|
|
/* #endif */ |