Merge pull request #1657 from cozy/fix/circleClass

fix: Circle and Avatars comes with stylus again
cozy · Nov 13, 2020 · ebcc6f0 · ebcc6f0
2 parents 7771f87 + 056b405
commit ebcc6f0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/react/Avatar/styles.styl b/react/Avatar/styles.styl
@@ -4,6 +4,7 @@
 .c-avatar
     @extend $circle
     @extend $avatar
+
 .c-avatar--text
     color white
 
@@ -18,6 +19,18 @@
         filter grayscale(1)
         opacity .3
 
+.c-avatar--xsmall
+    @extend $circle--xsmall
+
+.c-avatar--small
+    @extend $circle--small
+
+.c-avatar--large
+    @extend $circle--large
+
+.c-avatar--xlarge
+    @extend $circle--xlarge
+
 .c-avatar-initials
     @extend $circle-text
 

diff --git a/stylus/components/circle.styl b/stylus/components/circle.styl
@@ -1,19 +1,36 @@
 @require '../tools/mixins'
 
+circleSize(size)
+    width size
+    height size
+    min-width size
+    min-height size
+    font-size 'calc(%s / 2.28)' % size
+
 $circle
+    --circleSize rem(40)
     $size = var(--circleSize)
+
+    circleSize($size)
     display inline-flex
     align-items center
     justify-content center
     border-radius 50%
     overflow hidden
     background-color var(--dodgerBlue)
     color var(--white)
-    width $size
-    height $size
-    min-width $size
-    min-height $size
-    font-size 'calc(%s / 2.28)' % $size
+
+$circle--xsmall
+    circleSize(rem(16))
+
+$circle--small
+    circleSize(rem(32))
+
+$circle--large
+    circleSize(rem(48))
+
+$circle--xlarge
+    circleSize(rem(64))
 
 $circle-text
     font-weight bold