Merge pull request #298 from maciaszczykm/styling

Style update

Author: bryk

.sass-lint.yml

@@ -77,7 +77,7 @@ rules:
   hex-notation: 2
   indentation: 2
   leading-zero: 2
-  nesting-depth: 2
+  nesting-depth: 3
   property-sort-order: 2
   quotes: 2
   shorthand-values: 2

src/app/frontend/_variables.scss

@@ -28,10 +28,12 @@ $caption-font-size-base:   rem(1.2) !default;
 $toolbar-height-size-base: rem(6.4) !default;
 
 $primary: #326de6;
+$secondary: #f51200;
 $warning: #ffa500;
 $delicate: #aaa;
 $muted: #888;
 $hover-primary: #1254df;
+$hover-secondary: #ff1c19;
 $body: #eee;
 $emphasis: #000;
 $content-background: #fff;

src/app/frontend/deploy/createnamespace.html

@@ -14,10 +14,10 @@
 limitations under the License.
 -->
 
-<md-dialog aria-label="Create a new namespace" layout="column" layout-padding>
-  <md-content layout-padding>
+<md-dialog aria-label="Create a new namespace" layout="column">
+  <md-dialog-content layout-padding>
     <h4 class="md-title" >Create a new namespace</h4>
-    <p>The new namespace will be added to the cluster.</p>
+    <div>The new namespace will be added to the cluster.</div>
     <!-- TODO(maciaszczykm): Missing detailed cluster info. -->
     <form name="ctrl.namespaceForm" ng-submit="ctrl.createNamespace()"
           novalidate>
@@ -38,5 +38,5 @@ <h4 class="md-title" >Create a new namespace</h4>
         <md-button ng-click="ctrl.cancel()">Cancel</md-button>
       </md-dialog-actions>
     </form>
-  </md-content>
+  </md-dialog-content>
 </md-dialog>

src/app/frontend/replicasetdetail/deletereplicaset.html

@@ -14,16 +14,16 @@
 limitations under the License.
 -->
 
-<md-dialog aria-label="Delete Replica Set" layout="column" layout-padding>
-  <md-content layout-padding>
+<md-dialog aria-label="Delete Replica Set" layout="column">
+  <md-dialog-content layout-padding>
     <h4 class="md-title">Delete Replica Set</h4>
-    <p>
+    <div>
       Delete replica set {{::ctrl.replicaSet}} in namespace {{::ctrl.namespace}}.<br>
       Pods managed by the replica set will be also deleted.
-    </p>
+    </div>
     <md-dialog-actions>
       <md-button class="md-primary" ng-click="ctrl.cancel()">Cancel</md-button>
       <md-button class="md-primary" ng-click="ctrl.remove()">Delete</md-button>
     </md-dialog-actions>
-  </md-content>
+  </md-dialog-content>
 </md-dialog>

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -28,9 +28,6 @@ <h1 flex class="md-title kd-replicasetdetail-app-name">
       </div>
     </div>
     <div flex layout="column" class="kd-replicasetdetail-sidebar-item">
-      <span class="kd-replicasetdetail-sidebar-title kd-replicasetdetail-sidebar-info">
-        Replica Set
-      </span>
       <div layout="row" flex="nogrow">
         <md-button class="md-primary" ng-click="ctrl.handleDeleteReplicaSetDialog()">
           <md-icon class="material-icons">delete</md-icon>

src/app/frontend/replicasetdetail/updatereplicas.html

@@ -14,16 +14,16 @@
 limitations under the License.
 -->
 
-<md-dialog aria-label="Create a new namespace" layout="column" layout-padding>
-  <md-content layout-padding>
+<md-dialog aria-label="Create a new namespace" layout="column">
+  <md-dialog-content layout-padding>
     <h4 class="md-title">Set desired number of pods</h4>
-    <p>Replica set {{ctrl.replicaSet}} will be updated to reflect the desired count.
-      <br/>
+    <div>
+      Replica set {{ctrl.replicaSet}} will be updated to reflect the desired count.<br/>
       <span class="kd-updatereplicas-pod-status">
         Current status: {{ctrl.currentPods}}
         created, {{ctrl.desiredPods}} desired
       </span>
-    </p>
+    </div>
     <form ng-submit="ctrl.updateReplicas()">
       <md-input-container class="md-block">
         <label>Number of pods</label>
@@ -34,5 +34,5 @@ <h4 class="md-title">Set desired number of pods</h4>
         <md-button class="md-primary" type="submit">OK</md-button>
       </md-dialog-actions>
     </form>
-  </md-content>
+  </md-dialog-content>
 </md-dialog>

src/app/frontend/replicasetlist/replicasetlist.scss

@@ -16,8 +16,15 @@
 
 .md-fab {
   &.kd-replicaset-deploy {
+    background-color: $secondary;
     position: fixed;
     right: 0;
     top: $toolbar-height-size-base - $baseline-grid * 3.5 - $baseline-grid;
+
+    &:not([disabled]) {
+      &:hover {
+        background-color: $hover-secondary;
+      }
+    }
   }
 }