Legislation process markup and styles

2016-12-01 13:37:40 +01:00
parent 54f8549c43
commit bbacd4546b
7 changed files with 658 additions and 1 deletions
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -0,0 +1,131 @@
+// Table of Contents
+//
+// 01. Hero
+// 02. Sidebar menu
+// 03. Legislation cards
+//
+
+// 01. Hero
+// -----------------
+.legislation-hero {
+    margin-bottom: 4rem;
+}
+
+.brand-heading {
+  background: $brand;
+  
+  .column {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+    
+    h4 {
+      font-weight: 400;
+      text-align: center;
+      color: white;
+    }
+  }
+}
+
+// 02. Sidebar menu
+// -----------------
+.legislation-categories {
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0;
+    
+    li {
+      cursor: pointer;
+      
+      @include breakpoint(medium) {
+        max-width: 80%;
+      }
+      
+      h4 {
+        font-weight: 400;
+        color: $text-medium;
+        margin-bottom: 3rem;
+        transition: color 0.25s ease-out, color 0.25s ease-out;
+      }
+      
+      &:hover h4, &:active h4 {
+        color: $brand;
+      }
+    }
+
+    .active h4 {
+      font-weight: 700;
+      color: $brand;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid $brand;
+    }
+  }
+}
+
+// 03. Legislation cards
+// -----------------
+.legislation {
+  margin: 0 0 4rem 0;
+}
+
+.legislation {
+  background: white;
+  border: 1px solid;
+  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
+  border-radius: 0;
+  box-shadow: 0px 1px 3px 0 #DEE0E3;
+  min-height: 12rem;
+  padding: 2rem 0 0 0;
+}
+
+.button-legislation {
+  background: white;
+  border: 1px solid #2C9BE5;
+  color: #2C9BE5;
+  display: inline-block;
+  font-weight: 700;
+  margin-top: rem-calc(12);
+  
+  .icon-comments {
+    margin-right: 0.5rem;
+    color: $text-medium;
+    transition: color 0.25s ease-out, color 0.25s ease-out;
+  }
+
+  &:hover, &:active {
+    border: 1px solid lighten(#2C9BE5, 25%);
+    cursor: pointer;
+  }
+  
+  &:hover .icon-comments, &:active .icon-comments {
+    color: white;
+  }
+}
+
+.legislation-text {
+  margin-bottom: 1rem;
+  
+  h3 a {
+    color: $black;
+  }
+}
+
+.legislation-calendar-info p {
+  font-size: $small-font-size;
+  color: $text-medium;
+  margin-bottom: 0;
+}
+
+.legislation-calendar {
+  background: #E5ECF2;
+  padding-top: 1rem;
+  
+  h5 {
+    margin-bottom: 0;
+    color: #61686E;
+  }
+  
+  p {
+    font-size: $small-font-size;
+  }
+}