Merge pull request #227 from dod-ccpo/member-roles

Member roles

styles/components/_modal.scss

@@ -1,3 +1,5 @@
+$fixed-footer-height: 5rem + ($gap * 4);
+
 .modal {
   position: fixed;
   z-index: 3;
@@ -7,13 +9,20 @@
   bottom: 0;
   background-color: $color-overlay;
 
+  .modal__container {
+    height: 100vh;
+  }
+
   .modal__dialog {
     padding: $gap;
-    height: 100vh;
+    margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    max-width: 80rem;
+    max-height: 100%;
+    position: relative;
 
     @include media($medium-screen) {
       padding: $gap * 2;
@@ -26,14 +35,11 @@
     .modal__body {
       background-color: $color-white;
       padding: $gap * 2;
-      flex-grow: 1;
+      width: 100%;
       overflow-y: auto;
-      max-width: 80rem;
-      position: relative;
 
       @include media($medium-screen) {
         padding: $gap * 4;
-        flex-grow: 0;
       }
 
       h1, h2 {
@@ -50,6 +56,56 @@
         right: 0;
         width: 8rem;
       }
+
+      .block-list {
+        margin: -$gap * 2;
+        padding-bottom: $fixed-footer-height;
+
+        @include media($medium-screen) {
+          margin: -$gap * 4;
+        }
+
+        .block-list__header {
+          border-top: 0;
+        }
+
+        .block-list__item {
+          &:last-child {
+            border: 0;
+          }
+        }
+
+        .block-list__footer {
+          height: $fixed-footer-height;
+          margin: 0;
+          padding: 0 ($gap * 2);
+          display: flex;
+          justify-content: space-between;
+          position: absolute;
+          bottom: $gap;
+          left: $gap;
+          right: $gap;
+          background: $color-white;
+          border-top: 1px solid $color-gray-light;
+
+          @include media($medium-screen) {
+            bottom: $gap * 2;
+            left: $gap * 2;
+            right: $gap * 2;
+          }
+
+          @include media($large-screen) {
+            bottom: $gap * 4;
+            left: $gap * 4;
+            right: $gap * 4;
+          }
+
+          .action-group {
+            margin: 0;
+          }
+        }
+      }
+
     }
   }
 

styles/elements/_block_lists.scss

@@ -1,7 +1,7 @@
 @mixin block-list {
   @include panel-margin;
 
-  > ul {
+  ul, dl {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -95,6 +95,30 @@
 
 .block-list__item {
   @include block-list-item;
+
+  &.block-list__item--selectable {
+    > label {
+      margin: 0;
+      max-width: none;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      justify-content: space-between;
+      &::before {
+        flex-shrink: 0;
+      }
+
+      &:hover {
+        color: $color-primary;
+      }
+    }
+
+    input:checked {
+      + label {
+        color: $color-primary;
+      }
+    }
+  }
 }
 
 .block-list__footer {

styles/elements/_typography.scss

@@ -18,11 +18,15 @@ h1, h2, h3, h4, h5, h6 {
   font-family: $font-sans;
   margin: ($gap * 2) 0;
 
-  + .subtitle * {
-    margin-top: 0;
+  .subtitle,
+  + .subtitle {
     color: $color-gray;
   }
 
+  + .subtitle, * {
+    margin-top: 0;
+  }
+
 }
 
 .h1 { @include h1; }