Merge pull request #205 from zreigz/logs_toolbar_style

Logs toolbar style adjustment to mock

src/app/frontend/_variables.scss

@@ -12,6 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+// Function
+//-- Must be defined before variables
+@function rem($multiplier) {
+  $font-size: 10px;
+  @return $multiplier * $font-size;
+}
+
+$subhead-font-size-base:   rem(1.6) !default;
+
 $primary: #326de6;
 $delicate: #aaa;
 $muted: #888;

src/app/frontend/logs/logstoolbar/logstoolbar.html

@@ -18,25 +18,24 @@ limitations under the License.
   <span flex="10"></span>
 
   <div layout="row" layout-wrap layout-margin layout-align="center center">
-    <span>Logs from pod</span>
-    <span flex></span>
-    <md-select aria-label="Logs from pod" ng-model="ctrl.pod"
+    <span class="kd-logs-toolbar-text">Logs from pod</span>
+    <md-select class="kd-logs-toolbar-select" aria-label="Logs from pod" ng-model="ctrl.pod"
                md-on-close="ctrl.onPodChange(ctrl.pod.name)"
                required>
       <md-option ng-repeat="item in ctrl.pods" ng-value="item">
-        {{item.name}}
+        <span class="kd-logs-toolbar-text">{{item.name}}</span>
       </md-option>
     </md-select>
-    <span>container</span>
-    <md-select aria-label="Containers" ng-model="ctrl.container"
+    <span class="kd-logs-toolbar-text">container</span>
+    <md-select class="kd-logs-toolbar-select" aria-label="Containers" ng-model="ctrl.container"
                md-on-close="ctrl.onContainerChange(ctrl.container.name)"
                required>
       <md-option ng-repeat="item in ctrl.containers" ng-value="item">
-        {{item.name}}
+        <span class="kd-logs-toolbar-text">{{item.name}}</span>
       </md-option>
     </md-select>
   </div>
-  <span flex>Running since {{ctrl.podCreationTime}}</span>
+  <span class="kd-logs-toolbar-text" flex>Running since {{ctrl.podCreationTime}}</span>
   <span flex></span>
   <md-button class="kd-icon-button" id="colorText"
              ng-click="ctrl.onTextColorChange()">

src/app/frontend/logs/logstoolbar/logstoolbar.scss

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import '../../variables';
+
 $logs-toolbar-color-black: #000;
 $logs-toolbar-color-white: #fff;
 
@@ -33,3 +35,12 @@ md-toolbar {
     }
   }
 }
+
+.kd-logs-toolbar-text {
+  font-size: $subhead-font-size-base;
+}
+
+.kd-logs-toolbar-select {
+  margin-bottom: 2 * $baseline-grid;
+  margin-left: auto;
+}