Add classes to indicate collapsible is for medium screens or smaller

app/assets/stylesheets/darkswarm/collapsible.css.scss

@@ -0,0 +1,52 @@
+// A bit arbitrary, works for it's use at time of implementation
+$collapsible-max-height: 350px;
+
+.collapsible-checkbox {
+  display: none;
+}
+
+.collapsible-label > ::before {
+  content: ' ';
+  display: inline-block;
+
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid currentColor;
+
+  vertical-align: middle;
+  margin-right: .7rem;
+  transform: translateY(-2px);
+
+  transition: transform .2s ease-out;
+}
+
+.collapsible-content {
+  max-height: 0px;
+  overflow: hidden;
+
+  transition: max-height .25s ease-in-out;
+}
+
+.collapsible-checkbox:checked + .collapsible-label + .collapsible-content {
+  max-height: $collapsible-max-height;
+}
+
+.collapsible-checkbox:checked + .collapsible-label > ::before {
+  transform: rotate(90deg) translateX(-3px);
+}
+
+@media only screen and (min-width: 1025px) {
+  // This double class is used to so this rule is more specific than the one in
+  // all.scss
+  .collapsible-label.collapsible-label-md {
+    margin-left: 0;
+  }
+
+  .collapsible-label-md > ::before {
+    display: none;
+  }
+
+  .collapsible-content-md {
+    max-height: $collapsible-max-height;
+  }
+}

app/assets/stylesheets/darkswarm/pages/login_modal.css.scss

@@ -1,4 +1,5 @@
 @import '../base/colors';
+@import '../collapsible';
 
 // Styling for login modal to style tabs
 .reveal-modal.login-modal {
@@ -24,49 +25,7 @@
   }
 }
 
-.collapsible-checkbox {
-  display: none;
-}
-
-.lbl-toggle > ::before {
-  content: ' ';
-  display: inline-block;
-
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid currentColor;
-
-  vertical-align: middle;
-  margin-right: .7rem;
-  transform: translateY(-2px);
-
-  transition: transform .2s ease-out;
-}
-
-.collapsible-content {
-  max-height: 0px;
-  overflow: hidden;
-
-  transition: max-height .25s ease-in-out;
-}
-
-.collapsible-checkbox:checked + .lbl-toggle + .collapsible-content {
-  max-height: 350px;
-}
-
-.collapsible-checkbox:checked + .lbl-toggle > ::before {
-  transform: rotate(90deg) translateX(-3px);
-}
-
 @media only screen and (min-width: 1025px) {
-  .lbl-toggle > ::before {
-    display: none;
-  }
-
-  .collapsible-content {
-    max-height: 350px;
-  }
-
   // make sure styling doesn't get messed up if resizing down and back up
   .collapsible-menus-container {
     min-height: 250px;

app/views/registration/steps/_introduction.html.haml

@@ -11,9 +11,9 @@
   .row.collapsible-menus-container{ 'data-equalizer' => true }
     .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
       %input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"}
-      %label.lbl-toggle{:for => "collapsible-registration-checklist"}
+      %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-checklist"}
         %h5= t(".registration_checklist")+":"
-      .collapsible-content
+      .collapsible-content.collapsible-content-md
         %ul.check-list
           %li
             = t(".registration_time")
@@ -30,10 +30,10 @@
 
     .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true}
       %input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"}
-      %label.lbl-toggle{:for => "collapsible-registration-outcome"}
+      %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-outcome"}
         %h5
           = t(".registration_outcome_headline")
-      .collapsible-content
+      .collapsible-content.collapsible-content-md
         %p= t(".registration_outcome1_html")
         %p= t(".registration_outcome2")
         %p= t(".registration_outcome3")