VCircle.styl
1.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
.circle
border-radius 3px
padding .25em .4em
font-weight 400
line-height 1.3
font-size 85%
&:empty
display inline-block
vertical-align inherit
.circle-pill
color: #fff
padding-right: .6em;
padding-left: .6em;
border-radius 10rem
.circle-sm
line-height 1.2
padding-top 1px
padding-bottom 2px
font-size 75%
.circle-lg
line-height 1.5
padding 5px 7px
font-size 95%
.circle-xl
line-height 1.7
padding 7px 9px
font-size 100%
.circle-dot
width 8px
height 8px
padding 0
border-radius 100%
vertical-align middle
&.circle-sm
width 6px
height 6px
&.circle-lg
width 10px
height 10px
&.circle-xl
width 12px
height 12px
.circle-ring
position relative
width 10px
height 10px
padding 0
border-radius 100%
vertical-align middle
&::after
content ''
position absolute
top 2px
left 2px
width 6px
height 6px
border-radius 50%
background-color #fff
-webkit-transform scale(1)
transform scale(1)
-webkit-transition .3s
transition .3s
&.circle-sm
width 8px
height 8px
&::after
width 4px
height 4px
&.circle-lg
width 12px
height 12px
&::after
width 8px
height 8px
&.circle-xl
width 14px
height 14px
&::after
width 10px
height 10px
&.fill
&::after
-webkit-transform scale(0)
transform scale(0)
.circle-bold
text-transform uppercase
font-weight 500
letter-spacing 1px