Merge pull request #152 from GSA-IAE-APPS/site-improvements

Logo updated and css clean up

src/app/site-components/header/header.template.html

@@ -1,7 +1,7 @@
 <header class="site-header">
   <nav class="site-container">
 
-    <a [routerLink]="['/']" class="text-logo">
+    <a [routerLink]="['/']" class="text-logo" style="display: none;">
       SAM Design System
     </a>
 
@@ -28,7 +28,7 @@
       </svg>
     </a>
 
-    <a [routerLink]="['/']" style="display: none;">
+    <a [routerLink]="['/']">
       <svg width="224px" height="43px" viewBox="0 0 224 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
           <g id="sam.govds-logo" transform="translate(0.000000, -2.000000)">

src/patterns/pages/page-a/page.template.html

@@ -18,8 +18,8 @@
 				Learning Center
 			</sam-title>
 			<div class="sam search">
-				<input class="sam input" type="search" placeholder="Search">
-				<button class="sam button left attached">
+				<input class="sam transition input" type="search" placeholder="Search">
+				<button class="sam transition button left attached">
 					<sam-icon name="search"></sam-icon>
 				</button>
 			</div>

src/patterns/pages/page-b/page.template.html

@@ -19,8 +19,8 @@
 				Learning Center
 			</sam-title>
 			<div class="sam search">
-				<input class="sam input" type="search" placeholder="Search">
-				<button class="sam button left attached">
+				<input class="sam transition input" type="search" placeholder="Search">
+				<button class="sam transition button left attached">
 					<sam-icon name="search"></sam-icon>
 				</button>
 			</div>

src/prototypes/components/picker/template.html

@@ -5,20 +5,20 @@
   </sam-title>
 
   <div class="sam search">
-    <input class="sam input" type="search" placeholder="Search">
-    <button class="sam button left attached">
+    <input class="sam transition input" type="search" placeholder="Search">
+    <button class="sam transition button left attached">
       <sam-icon name="search"></sam-icon>
     </button>
   </div>
 
   <div class="picker-radios">
     <span>
-      <input type="radio" id="search-all"name="search" value="all" checked>
-      <label for="search-all">Search All</label>
+      <input class="sam transition" type="radio" id="search-all"name="search" value="all" checked>
+      <label class="sam transition" for="search-all">Search All</label>
     </span>
     <span>
-      <input type="radio" id="search-here" name="search" value="here">
-      <label for="search-here">
+      <input class="sam transition" type="radio" id="search-here" name="search" value="here">
+      <label class="sam transition" for="search-here">
         Search here
       </label>
     </span>

src/prototypes/components/prototypes-components.component.ts

@@ -10,9 +10,7 @@ import {
 
 @Component({
   template:  `
-  <div class="prototype-page">
-    <router-outlet></router-outlet>
-  </div>
+  <router-outlet></router-outlet>
   <div class="patterns-menu">
     <a routerLink="/prototypes">Prototypes Home</a>
     <span class="patterns-menu-divider"></span>

src/styles/docs.scss

@@ -16,7 +16,12 @@
  * Removes overwrites that happen in sam-front-end layer
  */
 
+@import "transition/input";
 @import "transition/select";
+@import "transition/radio";
+@import "transition/label";
+@import "transition/button";
+@import "transition/title";
 
 /* SAM Design System Pages
    ========================================================================== */
@@ -45,7 +50,6 @@
 
 @import "sam-design-system/patterns/home";
 
-
 /**
  * Components
  */

src/styles/sam-design-system/patterns/_home.scss

@@ -25,7 +25,7 @@ ol.row{
   text-decoration: none;
 }
 .card-title {
-  margin-bottom: 1rem;
+  margin-bottom: 1rem !important;
   color: #16243A;
   font-size: 1em;
   line-height: 1.25;
@@ -103,7 +103,6 @@ ol.row{
   }
 }
 
-
 .patterns-menu{
   color: white;
   padding: .5rem;

src/styles/sam-design-system/prototypes/_base.scss

@@ -1,5 +0,0 @@
-.prototype-page{
-  background-color: #f8f8fb;
-  display: inline-block;
-  width: 100%;
-}

src/styles/transition/_button.scss

@@ -0,0 +1,3 @@
+button.sam.transition{
+  margin: 0;
+}

src/styles/transition/_input.scss

@@ -0,0 +1,6 @@
+input.sam.transition,
+select.sam.transition{
+  height: initial;
+  margin: 0;
+  line-height: 1.15;
+}

src/styles/transition/_label.scss

@@ -0,0 +1,7 @@
+label.sam.transition{
+  display: inline;
+}
+
+label.sam.transition::before{
+  content: none;
+}

src/styles/transition/_radio.scss

@@ -0,0 +1,16 @@
+input[type="radio"].sam.transition{
+  opacity: 1;
+  -webkit-appearance: radio;
+  -moz-appearance: radio;
+  margin: 0;
+  position: static;
+  max-width: none;
+  cursor: default;
+  height: auto;
+  display: inline-block;
+  width: auto;
+}
+
+input[type="radio"].sam.transition:focus{
+  box-shadow: none;
+}

src/styles/transition/_select.scss

@@ -2,7 +2,6 @@ select.sam.transition{
   background-image: none;
   display: inline-block;
   padding: initial;
-  height: initial;
   -webkit-appearance: menulist;
   -moz-appearance: menulist; 
   max-width: fit-content;

src/styles/transition/_title.scss

@@ -0,0 +1,3 @@
+sam-title h1.sam.title{
+  line-height: 25.5px;
+}