From e06ec920f7a5d784e674c4c4b4e6d1da3dc7391d Mon Sep 17 00:00:00 2001
From: Piotr Russ <mail@pruss.it>
Date: Mon, 16 Nov 2020 00:10:28 +0100
Subject: api, login, auth

---
 client/src/common/scss/_topBar.scss | 114 ++++++++++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 client/src/common/scss/_topBar.scss

(limited to 'client/src/common/scss/_topBar.scss')

diff --git a/client/src/common/scss/_topBar.scss b/client/src/common/scss/_topBar.scss
new file mode 100644
index 0000000..fb0e6a5
--- /dev/null
+++ b/client/src/common/scss/_topBar.scss
@@ -0,0 +1,114 @@
+@keyframes showTopMenu {
+  0%   {transform: translateY(100%) scale(0.8) ; opacity: 0;}
+  80%   {transform: translateY(100%) scale(1.1); opacity: 100%;}
+  100%   {transform: translateY(100%) scale(1); opacity: 100%;}
+}
+
+.top-bar {
+  flex-grow: 0;
+  display: flex;
+  justify-content: end;
+  padding: 1em;
+
+
+  &__fog {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.user {
+  position: relative;
+
+  &__list {
+    position: absolute;
+    display: block;
+    bottom: 0;
+    right: 0;
+    transform: translateY(100%);
+    background: #222;
+    animation: showTopMenu .3s;
+  }
+
+  &__main-item {
+    color: white;
+    display: block;
+    padding: .5em;
+    white-space: nowrap;
+    transition: color .3s;
+    cursor: pointer;
+
+    &--active {
+      background: #222;
+      color: yellow;
+    }
+
+    &:hover {
+      color: yellow;
+    }
+  }
+
+  &__item {
+    display: block;
+    color: white;
+    padding: .5em;
+    font-weight: normal;
+    transition: color .3s;
+    cursor: pointer;
+    white-space: nowrap;
+    text-align: right;
+
+    &:hover {
+      color: yellow;
+    }
+  }
+}
+
+.lang-switch {
+  display: inline-block;
+  position: relative;
+
+  &__list {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+    background: #222;
+    animation: showTopMenu .3s;
+  }
+
+  &__main-item {
+    transition: .3s color;
+    padding: .5em;
+    display: block;
+    color: white;
+    font-weight: normal;
+    cursor: pointer;
+
+    &:hover {
+      color: yellow;
+    }
+
+    &--active {
+      background: #222;
+      color: yellow;
+    }
+  }
+
+  &__item {
+    padding: .5em;
+    display: block;
+    color: white;
+    font-weight: normal;
+    cursor: pointer;
+    transition: color .3s;
+
+    &:hover {
+      color: yellow;
+    }
+  }
+}
-- 
cgit v1.2.3