v1.9.0

Merge pull request #609 from TechforgoodCAST/develop

Resolve #593

Gemfile

@@ -55,6 +55,7 @@ gem 'sitemap_generator'
 gem 'stripe'
 gem 'uikit-sass-rails'
 gem 'workflow'
+gem 'xxhash'
 
 # Admin
 gem 'activeadmin'

Gemfile.lock

@@ -429,6 +429,7 @@ GEM
     workflow (1.2.0)
     xpath (2.1.0)
       nokogiri (~> 1.3)
+    xxhash (0.4.0)
 
 PLATFORMS
   ruby
@@ -498,6 +499,7 @@ DEPENDENCIES
   webmock
   webpacker
   workflow
+  xxhash
 
 RUBY VERSION
    ruby 2.4.1p111

app/assets/stylesheets/v2/custom.sass

@@ -115,18 +115,15 @@ article.featured
   .copy
     text-align: left
 
-#filter
+.filter
   select
-    appearance: none
-    -webkit-appearance: none
-    -moz-appearance: none
+    +prefix(appearance, none, webkit moz)
     border: none
-    overflow: hidden
     outline: none
     font-size: 15px
     color: map-get($colors, 'blue')
     background: none
-    min-width: 63px
+    max-width: 80px
     margin: 0 5px
     &:hover
       cursor: pointer
@@ -307,3 +304,82 @@ article.featured
     bottom: 16px
   &.bot:after
     top: 16px
+
+// Sidebar
+// =========================================================================
+
+.pills > h4, .pills > h6
+  padding: 0 map-get($scales, 5)
+.pills a, .pills label
+  display: block
+  width: 100%
+  padding: map-get($scales, 3) map-get($scales, 5)
+  margin-bottom: map-get($scales, 5)
+  color: map-get($colors, night)
+  border: 1px solid rgba(0, 0, 0, 0)
+  border-radius: $base-radius
+  font-size: map-get($scales, 15)
+  &:hover
+    background: map-get($colors, light-blue)
+    border-color: map-get($colors, pale-blue)
+    opacity: 1
+  &.selected
+    background: map-get($colors, 'blue')
+    color: map-get($colors, 'white')
+    font-weight: bold
+    &:hover
+      border-color: map-get($colors, 'blue')
+
+// Accordion
+// =========================================================================
+
+.accordion
+  position: relative
+  margin-bottom: map-get($scales, 5)
+  width: 100%
+  overflow: hidden
+
+  input
+    position: absolute
+    visibility: hidden
+    z-index: -1
+
+    &:checked + label, &:checked + label:hover
+      background: map-get($colors, 'blue')
+      color: map-get($colors, 'white') !important
+      border-color: map-get($colors, 'blue')
+
+    &:checked ~ .accordion-content
+      max-height: 30em
+
+    &[type=checkbox] + label::after
+      content: '›'
+      transform: rotate(90deg)
+    &[type=checkbox]:checked + label::after
+      transform-origin: 1px
+      transform: rotate(270deg)
+
+  label
+    position: relative
+    display: block
+    padding: map-get($scales, 3) map-get($scales, 5)
+    padding-right: 19px !important
+    color: map-get($colors, slate) !important
+    cursor: pointer
+    font-size: map-get($scales, 15)
+    border-radius: $base-radius
+    line-height: 20px
+
+    &:after
+      position: absolute
+      right: 0
+      top: 50%
+      display: block
+      margin: 1px 7px
+      line-height: 0
+      +prefix(transition, all .40s, webkit o)
+
+  .accordion-content
+    max-height: 0
+    overflow: hidden
+    +prefix(transition, max-height .40s, webkit o)

app/assets/stylesheets/v2/modules/base.sass

@@ -13,6 +13,11 @@ $base-border-width: 1px !default
 // Mixins
 // =========================================================================
 
+=prefix($prop, $val, $prefixes: ())
+  @each $prefix in $prefixes
+    #{'-' + $prefix + '-' + $prop}: $val
+    #{$prop}: $val
+
 =responsive($prop, $val, $sm-perc-change: 1, $md-perc-change: 1)
   #{$prop}: $val
   @media all and (max-width: 46.875em)

app/assets/stylesheets/v2/modules/border.sass

@@ -9,13 +9,9 @@
   border-radius: 9999px
 .rounded
   overflow: hidden
-  border-radius: $base-radius
-  -moz-border-radius: $base-radius
-  -webkit-border-radius: $base-radius
+  +prefix(border-radius, $base-radius, webkit moz)
 .rounded-top
-  border-radius: $base-radius $base-radius 0 0
-  -moz-border-radius: $base-radius $base-radius 0 0
-  -webkit-border-radius: $base-radius $base-radius 0 0
+  +prefix(border-radius, $base-radius $base-radius 0 0, webkit moz)
 
 @each $side in border, border-top, border-right, border-bottom, border-left
   .#{$side}

app/assets/stylesheets/v2/modules/button.sass

@@ -42,6 +42,8 @@
 .btn
   font-weight: bold
   padding: 6px 12px
-
   &.wide
-    width: 100%
+    width: 100%
+
+.btn-sm
+  padding: 4px 10px

app/assets/stylesheets/v2/modules/colors.scss

@@ -4,6 +4,7 @@ $colors: (
   night:        #515E70,
   slate:        #7A8799,
   'grey':       #ACB2BF,
+  mist:         #DFE2E6,
   'silver':     #E9ECED,
   ice:          #F6F9FC,
   'white':        $base-bg-color,
@@ -18,6 +19,9 @@ $colors: (
   soft-blue:    #94BEF7,
   soft-yellow:  #FFE3A6,
 
+  // Pale
+  pale-blue:    #D7EAFC,
+
   // Light
   light-blue:   #F2F9FF,
   light-yellow: #FFFDF9,

app/assets/stylesheets/v2/modules/layout.sass

@@ -30,18 +30,6 @@
     border-left-color: transparent !important
     padding-left: 0px !important
     padding-right: 0px !important
-.hide-sm
-  @media screen and (max-width: 25rem)
-    display: none
-.hide-md
-  @media screen and (max-width: 46.875rem)
-    display: none
-.to-end-sm
-  @media screen and (max-width: 25rem)
-    order: 1
-.to-end-md
-  @media screen and (max-width: 46.875rem)
-    order: 1
 
 .fit
   max-width: 100%

app/assets/stylesheets/v2/modules/tag.sass

@@ -11,31 +11,28 @@
   font-family: $heading-family
   font-size: 14px
   font-weight: bold
-  margin: 0 4px 4px 0
-  padding: 1px 6px
-  border-radius: $base-radius
 
 .tag-red
-  background-color: #EF493F
+  color: #EF493F
 .tag-pink
-  background-color: #E42A65
+  color: #E42A65
 .tag-purple
-  background-color: #992FAC
+  color: #992FAC
 .tag-dark-purple
-  background-color: #663EB3
+  color: #663EB3
 .tag-indigo
-  background-color: #4153B1
+  color: #4153B1
 .tag-cyan
-  background-color: #28BBD1
+  color: #28BBD1
 .tag-teal
-  background-color: #1E9588
+  color: #1E9588
 .tag-green
-  background-color: #53AD57
+  color: #53AD57
 .tag-light-green
-  background-color: #8EC056
+  color: #8EC056
 .tag-amber
-  background-color: #FFC107
+  color: #FFC107
 .tag-orange
-  background-color: #FB992E
+  color: #FB992E
 .tag-blue-grey
-  background-color: #627D8A
+  color: #627D8A