Move top-bar-height variable into global scope

I'm about to use this in a calculation elsewhere.

h/static/styles/top-bar.scss

 @import 'base';
 @import 'mixins/responsive';
 
-$top-bar-height: 40px;
-
 .top-bar {
   background: $white;
   border-bottom: solid 1px $gray-lighter;

h/static/styles/variables.scss

@@ -149,4 +149,5 @@ $highlight-color-third: rgba(192, 192, 49, 0.4);
 $highlight-color-focus: rgba(156, 230, 255, 0.5);
 $score-width: 40px;
 $score-height: $score-width;
+$top-bar-height: 40px;
 $input-border-radius: 2px;