Merge pull request #181 from GSA/workspace-dashboard-updates

UI updates to workspace dashboard components
GSA · Dec 7, 2018 · 70f8b87 · 70f8b87
2 parents 4ebde60 + d618111
commit 70f8b87
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 11 deletions.
diff --git a/sam-styles/card/_card.scss b/sam-styles/card/_card.scss
@@ -1,15 +1,14 @@
 // CARD
 // --------------------------------
 .sam.card-next{
-  border: 1px solid #979797;
   background-color: white;
   border-radius: 4px;
   padding: 10px 15px;
   margin-bottom: 20px;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
+
   .header{
     display: flex;
-    h4{
+    .sam.heading{
       flex-grow: 1;
       align-self: center;
       padding: 0;
@@ -27,3 +26,7 @@
     }
   }
 }
+.sam.card-next.raised{
+  border: 1px solid #979797;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
+}
diff --git a/sam-styles/core/theming/_all-theme.scss b/sam-styles/core/theming/_all-theme.scss
@@ -31,6 +31,8 @@
 @import '../../headers/headers';
 @import '../../utilities/link';
 @import '../../utilities/type';
+@import '../../utilities/color';
+@import '../../utilities/visible';
 
 // Create a theme.
 @mixin sam-gov-theme($theme) {

diff --git a/sam-styles/feed/_feed.scss b/sam-styles/feed/_feed.scss
@@ -1,6 +1,7 @@
 // FEED
 // --------------------------------
 .sam.feed{
+  margin-top:5px;
   margin-bottom: 15px;
 }
 .sam.feed > .event{

diff --git a/sam-styles/headers/_headers.scss b/sam-styles/headers/_headers.scss
@@ -3,10 +3,6 @@
 .sam.heading{
   display: flex;
 }
-.sam.heading.mobile.center{
-  flex-direction: column;
+.sam.heading.middle.aligned{
   align-items: center;
-  @media screen and (min-width: $medium-screen){
-    flex-direction: row;
-  }
 }
diff --git a/sam-styles/label/_label.scss b/sam-styles/label/_label.scss
@@ -66,4 +66,23 @@
 .sam.status.label.red::before{
   border: 1px solid #981B1E;
   background-color: #E59393;
+}
+
+// CIRCULAR
+.sam.circular.label{
+  display: block;
+  font-size: 24px;
+  font-weight: 700;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  line-height: 40px;
+  text-align: center;
+  padding: 0;
+}
+
+
+.sam.circular.label.red{
+  color: white;
+  background: #E31C3D;
 }
diff --git a/sam-styles/layout/_layout.scss b/sam-styles/layout/_layout.scss
@@ -1,3 +1,25 @@
+// BASIC LAYOUT
+// --------------------------------
+
+.sam.padded.vertically{
+  padding: 0 20px;
+}
+.sam.layout.basic{
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: $medium-screen){
+  .sam.layout.basic{
+    flex-direction: row;
+  }
+  .sam.flex-order-1{
+    order: 1;
+  }
+}
+.sam.layout.basic.equal.width > *{
+  flex-grow: 1;
+}
+
 /**********************************************
               <sam-main> 
 ***********************************************/ 

diff --git a/sam-styles/segment/_segement.scss b/sam-styles/segment/_segement.scss
@@ -6,6 +6,6 @@
   padding: 10px 15px;
   margin-bottom: 10px;
   .sam.heading{
-    padding-top: 0;
+    padding-top: 5px;
   }
 }
diff --git a/sam-styles/utilities/_color.scss b/sam-styles/utilities/_color.scss
@@ -0,0 +1,5 @@
+// COLOR UTILITIES
+// --------------------------------
+.sam.ink.black{
+  color: #0F0F0F;
+}
diff --git a/sam-styles/utilities/_visible.scss b/sam-styles/utilities/_visible.scss
@@ -0,0 +1,12 @@
+// VISIBILITY
+// --------------------------------
+.sam.visible.mobile.only{
+  @media (min-width: $medium-screen){
+    display: none;
+  }
+}
+.sam.visible.tablet.up{
+  @media (max-width: $medium-screen){
+    display: none;
+  }
+}
diff --git a/src/ui-kit/experimental/card/card.component.ts b/src/ui-kit/experimental/card/card.component.ts
@@ -5,5 +5,5 @@ import {Component, Input} from '@angular/core';
   templateUrl: './card.template.html'
 })
 export class SamCardComponent{
-  @Input() link: boolean;
+  @Input() raised: boolean;
 }
diff --git a/src/ui-kit/experimental/card/card.template.html b/src/ui-kit/experimental/card/card.template.html
@@ -1,4 +1,4 @@
-<div class="sam card-next">
+<div class="sam card-next" [ngClass]="{ 'raised': raised }">
   <div class="header">
     <ng-content select=".header"></ng-content>
   </div>