Merge pull request #203 from bryk/global-styles

Global styling framework: streamline variable handling

src/app/assets/styles/_color_variables.scss → src/app/frontend/_variables.scss

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// TODO(floreks): Find appropriate place for global color definitions.
 $primary: #326de6;
 $delicate: #aaa;
 $muted: #888;
@@ -20,6 +19,8 @@ $hover-primary: #1254df;
 $body: #eee;
 $emphasis: #000;
 $content-background: #fff;
-// TODO(bryk): Reference angular_material/src/core/style/variables.scss instead of having
-// this variable here.
-$whiteframe-shadow-z1: 0 2px 5px 0 rgba(0, 0, 0, .26) !default;
+
+// TODO(bryk): Get those variables from Angular Material scss files.
+$layout-breakpoint-lg: 1280px;
+$whiteframe-shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+$baseline-grid: 8px;

src/app/frontend/chrome/chrome.html

@@ -16,7 +16,7 @@ limitations under the License.
 
 <md-content class="kd-content">
   <md-toolbar class="kd-toolbar">
-    <div class="md-toolbar-tools">
+    <div class="md-toolbar-tools kd-toolbar-tools">
       <a ui-sref="replicasets">
         <md-icon md-svg-icon="assets/images/kubernetes-logo.svg" class="kd-toolbar-logo"></md-icon>
       </a>
@@ -26,5 +26,7 @@ limitations under the License.
       <div flex ui-view="toolbar"></div>
     </div>
   </md-toolbar>
-  <div ng-transclude></div>
+  <div class="kd-app-content-wrapper">
+    <div ng-transclude class="kd-app-content"></div>
+  </div>
 </md-content>

src/app/frontend/chrome/chrome.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 .kd-toolbar-logo {
   height: 42px;
@@ -21,7 +21,7 @@
 }
 
 .kd-toolbar {
-  box-shadow: $whiteframe-shadow-z1;
+  box-shadow: $whiteframe-shadow-1dp;
 }
 
 body {
@@ -32,3 +32,12 @@ body {
 a {
   text-decoration: inherit;
 }
+
+.kd-toolbar-tools,
+.kd-app-content-wrapper {
+  margin: 0 auto;
+}
+
+.kd-app-content {
+  position: relative;
+}

src/app/frontend/deploy/deploy.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 .kd-deploy-whiteframe {
   background: $content-background;

src/app/frontend/deploy/helpsection/userhelp.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../../assets/styles/color_variables';
+@import '../../variables';
 
 .kd-user-help {
   * {

src/app/frontend/replicasetdetail/replicasetdetail.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 $replicasetdetails-sidebar-bg: #fafafa;
 $replicasetdetails-border: #ddd;

src/app/frontend/replicasetdetail/sortedheader.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 $sortedheader-font-size: 14px;
 

src/app/frontend/replicasetlist/replicasetcard.scss

@@ -12,10 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
-.kd-replicaset-card {        
-  width: 400px;  
+.kd-replicaset-card {
+  margin: $baseline-grid;
+  width: ($layout-breakpoint-lg - (2 * $baseline-grid) * 2) / 3;  
 }
 
 // This override button style to make it look like a link.
@@ -43,7 +44,7 @@
 }
 
 .kd-replicaset-card-section {
-  margin-top: 1em;
+  margin-top: 2 * $baseline-grid;
 }
 
 .kd-replicaset-card-section-image {
@@ -53,7 +54,7 @@
 }
 
 .kd-replicaset-card-label {
-  margin-right: 1em;
+  margin-right: 2 * $baseline-grid;
 }
 
 .kd-menu-logs-md-menu-item {
@@ -75,5 +76,5 @@
 
 .kd-menu-logs-link-icon {
   font-size: 1em;
-  margin-left: 5px;
+  margin-left: $baseline-grid;
 }

src/app/frontend/replicasetlist/replicasetlist.html

@@ -19,6 +19,6 @@ limitations under the License.
 </md-button>
 
 <kd-replica-set-list-container>
-    <kd-replica-set-card ng-repeat="replicaSet in ::ctrl.replicaSets" replica-set="::replicaSet">
-    </kd-replica-set-card>
+  <kd-replica-set-card ng-repeat="replicaSet in ::ctrl.replicaSets" replica-set="::replicaSet">
+  </kd-replica-set-card>
 </kd-replica-set-list-container>

src/app/frontend/replicasetlist/replicasetlist.scss

@@ -12,10 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+@import '../variables';
+
 .md-fab {
   &.kd-replicaset-deploy {
     position: absolute;
-    right: 5px;
-    top: 28px;
+    right: 0;
+    top: -56px / 2 - $baseline-grid;
   }
 }

src/app/frontend/replicasetlist/replicasetlistcontainer.scss

@@ -17,5 +17,5 @@
   align-items: center;
   display: flex;
   flex-flow: column wrap;
-  justify-content: top;  
+  justify-content: top;
 }

src/app/frontend/zerostate/zerostate.scss

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-@import '../../assets/styles/color_variables';
+@import '../variables';
 
 .kd-content {
   background-color: $body;