update avatars code and add avatar child style

3 files changed, 75 insertions, 6 deletions

diff --git a/demo/index.html b/demo/index.html
index f824a1e..6255dd3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -358,19 +358,41 @@
         <section id="avatars">
             <header class="text-center"><h4>avatars</h4></header>
             <div class="columns">
-                <div class="column col-6">
+                <div class="column col-3">
                     <img src="img/avatar-1.png" class="avatar avatar-xl" />
                     <img src="img/avatar-2.png" class="avatar avatar-lg" />
                     <img src="img/avatar-3.png" class="avatar" />
                     <img src="img/avatar-4.png" class="avatar avatar-sm" />
                     <img src="img/avatar-5.png" class="avatar avatar-xs" />
                 </div>
-                <div class="column col-6">
+                <div class="column col-3">
+                    <div class="avatar-container">
+                        <img src="img/avatar-1.png" class="avatar avatar-xl" />
+                        <img src="img/avatar-2.png" class="avatar avatar-icon" />
+                    </div>
+                    <div class="avatar-container">
+                        <img src="img/avatar-2.png" class="avatar avatar-lg" />
+                        <img src="img/avatar-3.png" class="avatar avatar-icon" />
+                    </div>
+                    <div class="avatar-container">
+                        <img src="img/avatar-3.png" class="avatar" />
+                        <img src="img/avatar-4.png" class="avatar avatar-icon" />
+                    </div>
+                    <div class="avatar-container">
+                        <img src="img/avatar-4.png" class="avatar avatar-sm" />
+                        <img src="img/avatar-5.png" class="avatar avatar-icon" />
+                    </div>
+                    <div class="avatar-container">
+                        <img src="img/avatar-5.png" class="avatar avatar-xs" />
+                        <img src="img/avatar-1.png" class="avatar avatar-icon" />
+                    </div>
+                </div>
+                <div class="column col-3">
                     <div class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></div>
-                    <div class="avatar avatar-lg" data-initial="YZ" style="background-color: #32b643;"></div>
-                    <div class="avatar" data-initial="YZ" style="background-color: #0193eb;"></div>
-                    <div class="avatar avatar-sm" data-initial="YZ" style="background-color: #ffb700;"></div>
-                    <div class="avatar avatar-xs" data-initial="YZ" style="background-color: #e85600;"></div>
+                    <div class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;"></div>
+                    <div class="avatar" data-initial="YZ" style="background-color: #7983d2;"></div>
+                    <div class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></div>
+                    <div class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></div>
                 </div>
             </div>
         </section>
diff --git a/dist/spectre.css b/dist/spectre.css
index 18bf8ad..bbe2bf3 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1062,6 +1062,7 @@ textarea.form-input {
   border-radius: 50%;
   vertical-align: middle;
   position: relative;
+  overflow: hidden;
 }
 .avatar::after {
   content: attr(data-initial);
@@ -1092,6 +1093,27 @@ textarea.form-input {
   height: 6.4rem;
   font-size: 2.6rem;
 }
+.avatar-container {
+  display: inline-block;
+  position: relative;
+}
+.avatar-container .avatar-icon {
+  width: 46%;
+  height: 46%;
+  padding: 3%;
+  background-color: #fff;
+  position: absolute;
+  right: -6%;
+  bottom: -6%;
+}
+.avatar-status::after {
+  content: '';
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background-color: #32b643;
+}
 .badge {
   position: relative;
   margin-right: 2.4rem;
diff --git a/src/avatars.less b/src/avatars.less
index 1576698..fc9ce12 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -9,6 +9,7 @@
   border-radius: 50%;
   vertical-align: middle;
   position: relative;
+  overflow: hidden;
 
   &::after {
     content: attr(data-initial);
@@ -39,4 +40,28 @@
     height: 6.4rem;
     font-size: 2.6rem;
   }
+}
+.avatar-container {
+  display: inline-block;
+  position: relative;
+
+  .avatar-icon {
+    width: 46%;
+    height: 46%;
+    padding: 3%;
+    background-color: #fff;
+    position: absolute;
+    right: -6%;
+    bottom: -6%;
+  }
+}
+.avatar-status {
+  &::after {
+    content: '';
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background-color: @control-color-success;
+  }
 }
\ No newline at end of file