viithiisys / School-Management-dashboard

Blame view

src/components/circle/VCircle.styl 1.71 KB
edit raw normal view history
93a68cfa1   Jatinder Singh   first commit 
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