Fixed a bunch of transitions and changed the arrow animation.

client/src/styles/partials/bdsettings/button.scss

@@ -17,16 +17,44 @@
 	}
 
 	.bd-settingsButtonBtn {
-        background-image: $logoSmallBw;
-        background-size: 50% 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 100%;
-        height: 100%;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		width: 70px;
+    height: 48px;
 		cursor: pointer;
 		filter: grayscale(100%);
 		opacity: .5;
-        transition: all .4s ease-in-out;
+		position: relative;
+		transition: all .3s cubic-bezier(.4,0,0,1);
+
+		&::before,
+		&::after {
+			content:"";
+			display: block;
+			position: absolute;
+			top:0;
+			left:0;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+
+		&::before {
+			width: 70px;
+    	height: 48px;
+			background-image: $logoSmallBw;
+			background-size: 50% 50%;
+			opacity: 1;
+			transition:all .3s cubic-bezier(.4,0,0,1), opacity .01s;
+		}
+		&::after {
+			width: 130px;
+			height: 43px;
+			background-image: $logoBigBw;
+			background-size: 100% 100%;
+			transform:translate(-7px,2px)scale(0.5);
+			opacity: 0;
+			transition:all .3s cubic-bezier(.4,0,0,1);
+		}
 
 		&:not(.bd-loading) {
 			&:hover {
@@ -69,14 +97,21 @@
 		box-shadow: none;
 
 		.bd-settingsButtonBtn {
-            background-image: $logoBigBw;
-            background-size: 100% 100%;
 			filter: none;
 			opacity: 1;
 			width: 130px;
 			height: 43px;
-            margin: 18px 0 17px 25px;
+			transform:translate(25px,18px);
 			cursor: default;
+			&::before{
+				opacity:0;
+				transform:translate(-16px,-3px)scale(1.9);
+				transition:all .3s cubic-bezier(.4,0,0,1), opacity .1s .3s;
+			}
+			&::after{
+				opacity: 1;
+				transform:scale(1);
+			}
 		}
 	}
 

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -1,13 +1,15 @@
 .bd-settings {
 	position: absolute;
+	backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
 	top: 22px;
 	left: 0;
 	bottom: 0;
 	z-index: 1001;
 	width: 310px;
-    transform: translateX(-100%) translateY(-100%);
+	transform: translateX(-310px);
 	opacity: 0;
-    transition: all .4s ease-in-out;
+	transition: transform .3s cubic-bezier(.4,0,0,1), opacity .25s ease;
 	pointer-events: none;
 
 	&.bd-active {
@@ -115,7 +117,7 @@
 
 		&.bd-active {
 			.bd-contentRegion {
-                transition: transform .4s ease-in-out, opacity .2s ease;
+				transition: all .3s cubic-bezier(.4,0,0,1);
 				transform: none;
 				opacity: 1;
 			}

client/src/styles/partials/generic/drawers.scss

@@ -26,14 +26,23 @@
         position: relative;
         margin-right: 15px;
 
-        .bd-chevron1,
+        .bd-chevron1 {
+            position: absolute;
+            svg{
+                transform: scale(1) translateY(0);
+            }
+        }
+
         .bd-chevron2{
             position: absolute;
+            svg{
+                visibility: hidden;
+                transform: scale(1.4,.5) translateY(6px) rotate(180deg);
+            }
         }
 
         svg {
-            transition: transform .5s ease;
-            transform: none;
+            transition: transform .2s cubic-bezier(.2,0,0,1);
         }
     }
 
@@ -70,16 +79,16 @@
             .bd-drawerOpenButton {
                 .bd-chevron1 {
                     svg {
-                        transform: rotate(90deg);
+                        transform: scale(1.4,.5) translateY(-6px);
+                        visibility: hidden;
                     }
                 }
             }
 
             .bd-chevron2 {
-                margin-left: -4px;
-
                 svg {
-                    transform: rotate(270deg);
+                    visibility: visible;
+                    transform: scale(1) translateY(0) rotate(180deg);
                 }
             }
         }

client/src/styles/partials/generic/forms/switches.scss

@@ -47,7 +47,7 @@
             bottom: 3px;
             background: #f6f6f7;
             border-radius: 10px;
-            transition: all .15s ease;
+            transition: all .15s cubic-bezier(.2,0,0,1);
             box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
         }
 

client/src/styles/partials/sidebarview/sidebar.scss

@@ -37,13 +37,13 @@
 		white-space: nowrap;
 		font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
 
-        &:hover,
+		&:hover {
+			background-color: rgba(185,185,185,.1);
+			color: #f6f6f6;
+		}
 		&.bd-active {
 			background: $colbdgreen;
 			color: #fff;
-        }
-
-        &.bd-active {
 			cursor: default;
 		}
 	}