123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- @import './var.less';
- :root {
- --van-circle-size: @circle-size;
- --van-circle-color: @circle-color;
- --van-circle-layer-color: @circle-layer-color;
- --van-circle-text-color: @circle-text-color;
- --van-circle-text-font-weight: @circle-text-font-weight;
- --van-circle-text-font-size: @circle-text-font-size;
- --van-circle-text-line-height: @circle-text-line-height;
- }
- .van-circle {
- position: relative;
- display: inline-block;
- width: var(--van-circle-size);
- height: var(--van-circle-size);
- text-align: center;
- svg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- &__layer {
- stroke: var(--van-circle-layer-color);
- }
- &__hover {
- fill: none;
- stroke: var(--van-circle-color);
- stroke-linecap: round;
- }
- &__text {
- position: absolute;
- top: 50%;
- left: 0;
- box-sizing: border-box;
- width: 100%;
- padding: 0 var(--van-padding-base);
- color: var(--van-circle-text-color);
- font-weight: var(--van-circle-text-font-weight);
- font-size: var(--van-circle-text-font-size);
- line-height: var(--van-circle-text-line-height);
- transform: translateY(-50%);
- }
- }
|