Merge pull request #792 from dod-ccpo/style-updates

Style updates

styles/elements/_accordions.scss

@@ -1,3 +1,19 @@
+.triangle-box {
+  position: relative;
+
+  .triangle-up {
+    $triangle-size: ($gap * 1.5);
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: $triangle-size solid transparent;
+    border-right: $triangle-size solid transparent;
+    border-bottom: $triangle-size solid $color-blue-light;
+    bottom: -4px;
+    right: 50%;
+  }
+}
+
 .accordion {
   @include block-list;
 
@@ -54,11 +70,16 @@
 
 .accordion__actions {
   margin-top: $gap;
+  margin-bottom: $gap * 0.5;
   display: flex;
   flex-direction: row;
 
   .icon-link {
     font-size: $small-font-size;
+
+    svg {
+      width: 1rem;
+    }
   }
 
   .counter {

styles/elements/_action_group.scss

@@ -11,10 +11,10 @@
 
   .usa-button,
   a {
-    margin: 0 0 0 ($gap * 2);
+    margin: 0 0 0 $gap;
 
     @include media($medium-screen) {
-      margin: 0 0 0 ($gap * 4);
+      margin: 0 0 0 ($gap * 2);
     }
   }
 

styles/elements/_block_lists.scss

@@ -13,12 +13,11 @@
 @mixin block-list-header {
   @include panel-base;
   @include panel-theme-default;
-  padding: $gap * 2;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background-color: $color-gray-lightest;
-  padding: $gap 2 * $gap;
+  padding: $gap 3 * $gap;
   color: $color-gray;
 
   .icon-tooltip {

styles/elements/_panels.scss

@@ -22,10 +22,10 @@
   margin-top: 0;
   margin-left: 0;
   margin-right: 0;
-  margin-bottom: $site-margins-mobile * 2;
+  margin-bottom: $site-margins-mobile * 6;
 
   @include media($medium-screen) {
-    margin-bottom: $site-margins * 2;
+    margin-bottom: $site-margins * 8;
   }
 }
 
@@ -47,8 +47,8 @@
 }
 
 @mixin shadow-panel {
-  padding: $gap / 2 0;
-  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+  padding: $gap /2 0;
+  box-shadow: $box-shadow;
   border-top: none;
   border-bottom: none;
 }
@@ -57,6 +57,7 @@
   @include panel-base;
   @include panel-theme-default;
   @include panel-margin;
+  @include shadow-panel;
 
   .panel__content {
     margin: ($gap * 2) 0;

styles/elements/_sidenav.scss

@@ -1,6 +1,5 @@
 @mixin sidenav__header {
   padding: $gap ($gap * 2);
-  font-size: $small-font-size;
   font-weight: bold;
 }
 
@@ -17,10 +16,11 @@
     }
     width: 25rem;
 
-    box-shadow: 0 6px 18px 0 rgba(48,58,65,0.15);
+    box-shadow: $box-shadow;
 
     .sidenav__title {
       @include sidenav__header;
+      font-size: $h3-font-size;
       text-transform: uppercase;
       width: 50%;
       color: $color-gray-dark;
@@ -29,6 +29,8 @@
 
     .sidenav__toggle {
       @include sidenav__header;
+      font-size: $small-font-size;
+      line-height: 2.8rem;
       float: right;
       color: $color-blue-darker;