Merge pull request #2956 from alphagov/progressively-enhance-folder-permissions

Progressively enhance folder permissions

app/assets/stylesheets/app.scss

@@ -124,10 +124,20 @@ td {
 
 .form-label {
   margin-bottom: 5px;
+
+  &.heading-small {
+    @include bold-19();
+  }
 }
 
 .hint {
   color: $secondary-text-colour;
+
+  .form-label + & {
+    display: block;
+    margin-top: -5px;
+    margin-bottom: 5px;
+  }
 }
 
 .list-bullet {

app/assets/stylesheets/components/checkboxes.scss

@@ -1,3 +1,37 @@
+.selection-summary {
+
+  .selection-summary__text {
+    @include core-19($tabular-numbers: true);
+    padding: 5px 0 0 0;
+    margin-bottom: $gutter / 2;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .selection-summary__text--folders {
+    padding: 10px 15px 5px 51px;
+    background-image: file-url('folder-black.svg');
+    background-repeat: no-repeat;
+    background-size: 39px auto;
+    background-position: 0px 4px;
+
+    @include ie-lte(8) {
+      background-image: file-url('folder-black.png');
+    }
+  }
+
+  // revert full-width button for smaller screens
+  .button {
+    display: inline-block;
+    width: auto;
+    position: relative;
+    top: 1px;
+  }
+
+}
+
 .checkboxes-nested {
 
   margin-bottom: 10px;
@@ -42,3 +76,29 @@
   }
 
 }
+
+.selection-content {
+  margin-bottom: ($gutter / 3) * 2;
+
+  .checkboxes-nested {
+    margin-bottom: 0;
+  }
+}
+
+.selection-footer {
+  clear: both;
+
+  .button-secondary {
+    // revert full-width button for smaller screens
+    display: inline-block;
+    width: auto;
+  }
+}
+
+// styles specific to the collapsible checkboxes module
+.selection-wrapper {
+  fieldset:focus {
+    outline: none;
+  }
+
+}