Remove old navbar styles and refactor navigation

- Create components/buttons for btn-fab element
- Create components/avatars for defined avatar size classes and behaviour

app/assets/stylesheets/_variables.scss

@@ -19,6 +19,16 @@ $colorNames: (
   "success"
 );
 
+// Avatar variables
+$avatar-border-radius: 4px;
+
+$avatar-sizes: (
+  "xs": 20px,
+  "sm": 30px,
+  "md": 40px,
+  "lg": 80px
+);
+
 :root {
   --background: #f0edf4;
   --card-bg: #ffffff;

app/assets/stylesheets/application.css.scss

@@ -98,6 +98,8 @@ $navbar-inverse-toggle-border-color: #512da8;
  */
 
 @import
+"components/avatars",
+"components/buttons",
 "components/jumbotron";
 
 body { padding-top: 50px; }

app/assets/stylesheets/base.css.scss

@@ -12,7 +12,6 @@ body {
 @import "scss/answerbox";
 @import "scss/comments";
 @import "scss/entry";
-@import "scss/navbar";
 @import "scss/panel";
 @import "scss/user";
 @import "scss/notifications";

app/assets/stylesheets/components/_avatars.scss

@@ -0,0 +1,12 @@
+[class^="avatar-"] {
+  border-radius: $avatar-border-radius;
+}
+
+@each $name, $size in $avatar-sizes {
+  .avatar-#{$name} {
+    min-height: $size;
+    min-width: $size;
+    height: $size;
+    width: $size;
+  }
+}

app/assets/stylesheets/components/_buttons.scss

@@ -0,0 +1,19 @@
+.btn-fab {
+  border-radius: 100%;
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
+  margin: 0px;
+  padding: 3px 5px 4px 8px;
+  font-size: 26px;
+  width: 56px;
+  height: 56px;
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+  outline: medium none !important;
+  text-transform: uppercase;
+  text-decoration: none;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  margin-right: 7px;
+  margin-bottom: 7px;
+  z-index: 99;
+}

app/assets/stylesheets/scss/navbar.scss

@@ -1,158 +0,0 @@
-.navbar .nav .badge {
-  padding: 3px 6px 3px;
-  background-color: $navbar-inverse-link-active-bg;
-  color: #fff;
-}
-
-.navbar .nav .active .badge, li.dropdown.open a.dropdown-toggle span.badge {
-  padding: 3px 6px 3px;
-  background-color: $navbar-inverse-bg;
-  color: #fff;
-}
-
-.navbar--inbox-animation {
-  animation: animationFrames ease-in-out 1.5s;
-  animation-iteration-count: infinite;
-  -webkit-animation: animationFrames ease-in-out 1.5s;
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation: animationFrames ease-in-out 1.5s;
-  -moz-animation-iteration-count: infinite;
-  -o-animation: animationFrames ease-in-out 1.5s;
-  -o-animation-iteration-count: infinite;
-  -ms-animation: animationFrames ease-in-out 1.5s;
-  -ms-animation-iteration-count: infinite;
-}
-
-@keyframes animationFrames{
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-moz-keyframes animationFrames{
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-webkit-keyframes animationFrames {
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-o-keyframes animationFrames {
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-@-ms-keyframes animationFrames {
-  0% {
-    background-color: #fff;
-  }
-  100% {
-    background-color: $navbar-inverse-toggle-border-color;
-  }
-}
-
-.btn-fab {
-  border-radius: 100%;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
-  margin: 0px;
-  padding: 3px 5px 4px 8px;
-  font-size: 26px;
-  width: 56px;
-  height: 56px;
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-  outline: medium none !important;
-  text-transform: uppercase;
-  text-decoration: none;
-  position: fixed;
-  bottom: 0px;
-  right: 0px;
-  margin-right: 7px;
-  margin-bottom: 7px;
-  z-index: 99;
-}
-
-.profile--dropdown {
-  min-width: 220px;
-  margin-top: 0px !important;
-}
-
-.profile--dropdown-media {
-  padding: 3px 15px;
-}
-
-.profile--dropdown-img {
-  min-height: 45px;
-  min-width: 45px;
-  height: 45px;
-  width: 45px;
-}
-
-.profile--dropdown-username {
-  font-weight: 700;
-  font-size: 1.2em;
-  line-height: 1.33em;
-  margin-top: 10px;
-}
-
-.profile--dropdown-displayname {
-  font-weight: 700;
-  font-size: 1.2em;
-  line-height: 1.33em;
-  margin-top: 2px;
-}
-
-.profile--image-dropdown > a {
-  padding: 0px !important;
-}
-
-.profile--image-avatar {
-  min-height: 40px;
-  min-width: 40px;
-  height: 40px;
-  width: 40px;
-  border-radius: 4px;
-}
-
-.navbar-inverse {
-  border: none;
-}
-
-@media (max-width: 768px) {
-  nav.navbar .nav {
-    margin-bottom: 0;
-    margin-top: 0;
-
-    & > li {
-      &.active a {
-        background-color: $navbar-inverse-link-active-bg-mobile !important;
-      }
-
-      &.dropdown.profile--image-dropdown a .visible-xs {
-        padding-left: 15px;
-        line-height: 40px;
-        margin: 0;
-      }
-    }
-  }
-
-  body {
-    padding-bottom: 60px;
-  }
-}

app/views/navigation/main/_profile.haml

@@ -1,7 +1,7 @@
 %li.nav-item.dropdown.profile--image-dropdown
-  %a.nav-link.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
+  %a.nav-link.dropdown-toggle.p-sm-0{href: "#", "data-toggle" => "dropdown"}
-    %img.profile--image-avatar.d-none.d-sm-inline{src: current_user.profile_picture.url(:small)}
+    %img.avatar-md.d-none.d-sm-inline{src: current_user.profile_picture.url(:small)}
-    %span.d-none.d-sm-inline.d-md-none
+    %span.d-inline.d-sm-none
       = current_user.screen_name
       %b.caret
   .dropdown-menu