updated styles to work woth changes in feature and changes icon styli…

…ng so there is no unneeded space when slot is not used
microsoft · May 13, 2020 · dd8f8a3 · dd8f8a3
1 parent faf3545
commit dd8f8a3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.template.ts b/sites/fast-website/src/app/components/content-placement/content-placement.template.ts
@@ -2,7 +2,12 @@ import { html, when } from "@microsoft/fast-element";
 import { ContentPlacement } from "./content-placement";
 
 export const ContentPlacementTemplate = html<ContentPlacement>`<fast-card>
-    <div class="contentPlacement_icon">
+    <div 
+        class=${x =>
+            x.divider
+                ? ""
+                : "contentPlacement_icon"}
+    >
         <slot name="icon"></slot>
     </div>
     <slot></slot>

diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css
@@ -45,18 +45,19 @@ body {
 
 .section-component {
   --card-width: 410px;
+  color: var(--neutral-foreground-rest);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 /* This creates the blur and background color changes on hover */
 /* start */
-.section-component:hover fast-hover-card{
+.section-component:hover site-content-placement{
   filter: blur(2px);
 }
 
-.section-component:hover fast-hover-card:hover{
+.section-component:hover site-content-placement:hover{
   /* background: linear-gradient(349.8deg, rgba(143, 68, 95, 0.3) 20.91%, rgba(148, 81, 73, 0.3) 99.75%); */
   box-shadow: 0px 10px 44px rgba(0, 0, 0, 0.1);
   border-radius: var(--design-unit);