chore(board): style nitty-gritty

nikku · Oct 11, 2019 · 00ffb01 · 00ffb01
1 parent c6385a9
commit 00ffb01
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/board/src/Card.scss b/packages/board/src/Card.scss
@@ -13,16 +13,27 @@
   z-index: 1;
   padding: 4px 8px;
 
-  overflow: hidden;
-
   .header {
     margin-bottom: 7px;
   }
 }
 
+:global(.board-card-links.attached) .card-link:last-child,
+:global(.board-card) {
+  > .card-status {
+    .state:last-child {
+      border-bottom-right-radius: 4px;
+    }
+
+    .state:first-child {
+      border-bottom-left-radius: 4px;
+    }
+  }
+}
+
+
 .board-card-links {
   margin-top: 2px;
-  overflow: hidden;
 }
 
 .header {

diff --git a/packages/board/src/CardStatus.svelte b/packages/board/src/CardStatus.svelte
@@ -16,6 +16,11 @@
 
   @import "variables";
 
+  @mixin colored-scale($color) {
+    background: $color;
+    box-shadow: 0 1px 2px 0px adjust-color($color, $alpha: -0.7);
+  }
+
   .card-status {
     display: flex;
     flex-direction: row;
@@ -53,11 +58,11 @@
     }
 
     &.success {
-      background: $background-green;
+      @include colored-scale($background-green);
     }
 
     &.failure {
-      background: $background-red;
+      @include colored-scale($background-red);
     }
   }