css changes (navbar, settings page, contacts page)

app/assets/stylesheets/components/_navbar.scss

@@ -14,17 +14,18 @@
     font-weight: bold;
   }
 
-
   .right-align {
     height: 100%;
     width: 16em;
-    margin-right: 5em;
+    margin-right: 4em;
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .links {
       display: flex;
       height: inherit;
+
       div {
         height: inherit;
         display: flex;
@@ -32,17 +33,18 @@
         border-bottom: 5px solid transparent;
 
         &:first-child {
-          margin-right: 1em;
+          margin-right: 2.5em;
         }
 
-        &.active {
+        &.active, &:hover {
           border-bottom: 5px solid $primary;
           color: white;
 
-           a {
+          a {
             color: white;
-           }
+          }
         }
+
         a {
           color: #C4C4C4;
           text-decoration: none;
@@ -53,7 +55,28 @@
 
   .profile {
     img {
-      width: 3.25em;
+      width: 3em;
+      padding: 0.2em;
+    }
+  }
+
+  .burger-menu {
+    margin-right: 20px;
+    color: $primary;
+  }
+
+  .polyglot-dropdown {
+    background-color: $navbar-background;
+
+    li {
+      a {
+        color: $icon;
+
+        &:hover {
+          color: $primary;
+          background-color: $navbar-background;
+        }
+      }
     }
   }
 }

app/assets/stylesheets/pages/_contacts.scss

@@ -72,7 +72,16 @@ a:hover {
 }
 
 .video-content {
-  height: 485px;
+  // height: 485px;
+
+  padding-left: 0.2vw;
+  display: flex;
+  justify-content: center;
+  .flex-video {
+    height: 100%;
+    width: 100%;
+    flex: 1 1 auto;
+  }
   // background-color: black;
 }
 
@@ -132,16 +141,15 @@ a:hover {
   align-items: center;
 }
 
-
-
-
-
 .contact {
   color: white;
 }
 
 .contacts {
   height: 570px;
+}
+
+.contacts-list{
   overflow: scroll;
 }
 
@@ -152,10 +160,3 @@ a:hover {
 
 
 
-
-
-
-
-
-
-

app/assets/stylesheets/pages/_home.scss

@@ -1,4 +1,3 @@
-// Specific CSS for your home-page
 video {
   transform: rotateY(180deg);
   -webkit-transform:rotateY(180deg); /* Safari and Chrome */

app/assets/stylesheets/pages/_index.scss

@@ -1,3 +1,4 @@
 // Import page-specific CSS files here.
 @import "home";
-@import "contacts"
+@import "contacts";
+@import "settings";

app/assets/stylesheets/pages/_settings.scss

@@ -0,0 +1,77 @@
+.card-form {
+  padding: 20px;
+}
+
+.card-form-no-hover {
+  &:hover {
+    box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.input-dropdown {
+  width: 196px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $primary;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $primary;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.input-field-text-black {
+  color: black;
+}
+
+.settings {
+  color: white;
+}