Styles for letter index

styles/base.css

@@ -10,6 +10,7 @@
   --color-orange: #FAA03D;
   --color-blue: #40A7D1;
   --color-marine: #688190;
+  --color-red: #F1235A;
   --color-brand: #F59134;
 }
 

styles/components/badge.css

@@ -1,6 +1,7 @@
 .badge {
   color: var(--color-white);
   display: inline-block;
+  box-sizing: border-box;
   padding: 0 15px;
   text-transform: uppercase;
   border-radius: 13px;
@@ -8,6 +9,8 @@
   line-height: 25px;
   height: 25px;
   overflow: hidden;
+  text-decoration: none;
+  border: 1px solid var(--color-gray-normal);
 
   &--big {
     border-radius: 15px;
@@ -17,17 +20,25 @@
     padding: 0 20px;
   }
 
+  &--neutral {
+    background: var(--color-gray-normal);
+    border-color: var(--color-gray-normal);
+  }
   &--adopt {
     background: var(--color-green);
+    border-color: var(--color-green);
   }
   &--trial {
     background: var(--color-orange);
+    border-color: var(--color-orange);
   }
   &--assess {
     background: var(--color-blue);
+    border-color: var(--color-blue);
   }
   &--hold {
     background: var(--color-marine);
+    border-color: var(--color-marine);
   }
 
 }

styles/components/filter.css

@@ -0,0 +1,3 @@
+.filter {
+  margin-bottom: 40px;
+}

styles/components/is-new.css

@@ -0,0 +1,10 @@
+.is-new {
+  font-size: 9px;
+  background: var(--color-red);
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 10px;
+  position: relative;
+  vertical-align: top;
+  margin-top: -2px;
+}

styles/components/item.css

@@ -4,6 +4,7 @@
   display: block;
   text-decoration: none;
   transition: background 200ms ease-out;
+  color: var(--color-gray-normal);
 
   &.is-active {
     background: var(--color-gray-dark-alt);
@@ -23,6 +24,12 @@
     }
   }
 
+  &--no-trailing-border {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
   &__title {
     font-size: 16px;
     color: var(--color-white);

styles/components/letter-index.css

@@ -0,0 +1,16 @@
+.letter-index {
+  margin-bottom: 60px;
+  &__group {
+    border-top: 1px solid var(--color-gray-normal);
+    position: relative;
+    padding: 0 0 0 200px;
+    min-height: 100px;
+  }
+  &__letter {
+    font-size: 50px;
+    color: var(--color-gray-normal);
+    position: absolute;
+    left: 50px;
+    top: 10px;
+  }
+}

styles/components/nav.css

@@ -1,6 +1,7 @@
 .nav {
+  white-space: nowrap;
   &__item {
-    display: inline-block;
+    display: inline-flex;
     & + .nav__item {
       margin-left: 20px;
     }

styles/components/split.css

@@ -2,7 +2,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  
+
+  &--align-top {
+    align-items: flex-start;
+  }
+
   &__left {
     flex: 0 1 auto;
   }