| @import '../mixin/flex.scss'; | |
| 
 | |
| @mixin badge { | |
|   @include flex-h-c; | |
|   display: inline-flex; | |
|   border-radius: 5rpx; | |
|   padding: 5rpx 10rpx; | |
| } | |
| 
 | |
| @mixin circle { | |
|   @include flex-h-c; | |
|   display: inline-flex; | |
|   border-radius: 50%; | |
|   overflow: hidden; | |
| } | |
| 
 | |
| .se { | |
|   &-badge { | |
|     &-d { | |
|       @include badge; | |
|     } | |
| 
 | |
|     &-c { | |
|       @include badge; | |
|       padding: 5rpx 20rpx; | |
|       border-radius: 20rpx; | |
|     } | |
| 
 | |
|     &-m { | |
|       @include badge; | |
|       border-radius: 0 10rpx 10rpx 10rpx; | |
|     } | |
| 
 | |
|     &-r { | |
|       @include badge; | |
|       padding: 5rpx 20rpx; | |
|       border-radius: 20rpx 0 0 20rpx; | |
|     } | |
|   } | |
| 
 | |
|   &-circle { | |
|     @for $i from 0 through 200 { | |
|       @if $i % 5 == 0 { | |
|         &-#{$i} { | |
|           @include circle; | |
|           width: $i + rpx; | |
|           height: $i + rpx; | |
|         } | |
|       } | |
|     } | |
|   } | |
| }
 |