From e2823cab330224547cd584d2149dfcf54862f4b0 Mon Sep 17 00:00:00 2001 From: Maitra Khatri Date: Sat, 29 Jan 2022 22:35:41 +0530 Subject: [PATCH] feat: avatar and badge DONE --- avatar/avatar.css | 24 +++++++++ avatar/avatar.html | 24 +++++++++ avatar/avatar.svg | 102 ++++++++++++++++++++++++++++++++++++++ badge/avatar.svg | 102 ++++++++++++++++++++++++++++++++++++++ badge/badge.css | 52 +++++++++++++++++++ badge/badge.html | 72 +++++++++++++++++++++++++++ badge/chat_black_48dp.svg | 1 + 7 files changed, 377 insertions(+) create mode 100644 avatar/avatar.css create mode 100644 avatar/avatar.html create mode 100644 avatar/avatar.svg create mode 100644 badge/avatar.svg create mode 100644 badge/badge.css create mode 100644 badge/badge.html create mode 100644 badge/chat_black_48dp.svg diff --git a/avatar/avatar.css b/avatar/avatar.css new file mode 100644 index 0000000..b836249 --- /dev/null +++ b/avatar/avatar.css @@ -0,0 +1,24 @@ +@import url(../style.css); + +.avatar { + height: 32px; + width: 32px; +} + +.avatar-xl { + height: 48px; + width: 48px; +} + +.avatar-xxl { + height: 64px; + width: 64px; +} + +.avatar-round { + border-radius: 50%; +} + +.avatar-square { + border-radius: 10%; +} \ No newline at end of file diff --git a/avatar/avatar.html b/avatar/avatar.html new file mode 100644 index 0000000..c40f804 --- /dev/null +++ b/avatar/avatar.html @@ -0,0 +1,24 @@ + + + + + + + avatar + + + + + avatar + avatar + avatar + +


+ + avatar + avatar + avatar + + + + \ No newline at end of file diff --git a/avatar/avatar.svg b/avatar/avatar.svg new file mode 100644 index 0000000..0686ea1 --- /dev/null +++ b/avatar/avatar.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/badge/avatar.svg b/badge/avatar.svg new file mode 100644 index 0000000..0686ea1 --- /dev/null +++ b/badge/avatar.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/badge/badge.css b/badge/badge.css new file mode 100644 index 0000000..6b4a642 --- /dev/null +++ b/badge/badge.css @@ -0,0 +1,52 @@ +@import url(../style.css); +@import url(../avatar/avatar.css); + +.icon-with-badge { + position: relative; + width: fit-content; +} + +.badge { + position: absolute; + top: -0.7rem; + right: -0.7rem; + color: white; + height: 1.25rem; + width: 1.5rem; + padding: 0.375rem; + text-align: center; + border-radius: 50%; +} + +.red { + background-color: var(--danger); +} + +.blue { + background-color: var(--secondary); +} + +.dark-blue { + background-color: var(--primary); +} + +.yellow { + background-color: var(--warning); +} + +.green { + background-color: var(--success); +} + +.avatar-with-badge { + position: relative; + width: max-content; +} + +.badge-avatar { + position: absolute; + bottom: 0; + right: 0; + padding: .375rem; + border-radius: 50%; +} \ No newline at end of file diff --git a/badge/badge.html b/badge/badge.html new file mode 100644 index 0000000..a69a7b5 --- /dev/null +++ b/badge/badge.html @@ -0,0 +1,72 @@ + + + + + + + badge + + + + + +
+ +
+ chat icon with badge + 5 +
+ +
+ chat icon with badge +
13
+
+ +
+ chat icon with badge +
2
+
+ +
+ chat icon with badge +
13
+
+ +
+ chat icon with badge +
56
+
+ +
+ +
+ +
+ avatar +
+
+ +
+ avatar +
+
+ +
+ avatar +
+
+ +
+ + + \ No newline at end of file diff --git a/badge/chat_black_48dp.svg b/badge/chat_black_48dp.svg new file mode 100644 index 0000000..fdc578d --- /dev/null +++ b/badge/chat_black_48dp.svg @@ -0,0 +1 @@ + \ No newline at end of file