initial commit

2021-07-28 18:45:52 +05:30
commit 026f835a87
176 changed files with 10613 additions and 0 deletions
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
@@ -0,0 +1,63 @@
+
+.sidebar-avatar-tippy {
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  background-color: var(--bg-tooltip);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-popup);
+
+  .text {
+    color: var(--tc-tooltip);
+  }
+}
+
+.sidebar-avatar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  
+  & .notification-badge {
+    position: absolute;
+    right: var(--sp-extra-tight);
+    top: calc(-1 * var(--sp-ultra-tight));
+    box-shadow: 0 0 0 2px var(--bg-surface-low);
+  }
+  &:focus {
+    outline: none;
+  }
+  &:active .avatar-container {
+    box-shadow: var(--bs-surface-outline);
+  }
+
+  &:hover::before,
+  &:focus::before,
+  &--active::before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+
+    width: 3px;
+    height: 12px;
+    background-color: var(--ic-surface-normal);
+    border-radius: 0 4px 4px 0;
+    transition: height 200ms linear;
+
+    [dir=rtl] & {
+      right: 0;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  &--active:hover::before,
+  &--active:focus::before,
+  &--active::before {
+    height: 28px;
+  }
+  &--active .avatar-container {
+    background-color: var(--bg-surface);
+  }
+}