fully handle css for active/package_only labels (#1689)

handle the css class on the same tag to avoid conflicts

Author: ewdurbin

static/sass/style.css

@@ -3628,9 +3628,9 @@ span.highlighted {
   text-align: center; }
   #sponsorship_application_container form {
     margin-bottom: 0; }
-    #sponsorship_application_container form {
-      .package_only_label { color: #666666; }
-      .active { color: #3776ab; } }
+    #sponsorship_application_container form .package_only { color: #666666; }
+    #sponsorship_application_container form .package_only.active { color: #3776ab; }
+    #sponsorship_application_container form .active { color: #3776ab; }
   #sponsorship_application_container #package_selection {
     display: inline-block; }
     #sponsorship_application_container #package_selection li {

static/sass/style.scss

@@ -2407,9 +2407,12 @@ span.highlighted {
     form {
         margin-bottom: 0;
 
-        .package_only_label {
+        .package_only {
             color: $grey;
         }
+        .package_only.active {
+            color: $blue;
+        }
         .active {
             color: $blue;
         }

templates/sponsors/sponsorship_benefits_form.html

@@ -53,9 +53,9 @@ <h3 class="title">{{ field.label }}</h3>
             <ul id="id_{{ field.name }}">
             {% for benefit in field.field.queryset %}
                 <li class="{% cycle '' 'highlight' %}">
-                    <label for="id_{{field.name}}_{{ forloop.counter0 }}" benefit_id="{{ benefit.id }}">
+                    <label for="id_{{field.name}}_{{ forloop.counter0 }}" {% if benefit.package_only %} class='package_only'{% endif %} benefit_id="{{ benefit.id }}">
                         <input id="id_{{field.name}}_{{ forloop.counter0 }}" name="{{ field.name }}" type="checkbox" value="{{ benefit.id }}" {% if benefit.unavailability_message %}disabled{% endif %} {% if benefit.id in field.initial %}checked{% endif %} {% if benefit.package_only %}package_only='true'{% endif %}>
-                        <span {% if benefit.package_only %} class='package_only_label'{% endif %}>{{ benefit.name }}</span>
+                        <span>{{ benefit.name }}</span>
                         {% if benefit.description %}<i class="fa fa-info" title="{{ benefit.description }}"></i>{% endif %}
                         {% if benefit.package_only %}<i class="fa fa-cubes"  title="{{ benefit_model.PACKAGE_ONLY_MESSAGE }}"></i>{% endif %}
                         {% if not benefit.has_capacity %}<i class="fa fa-close"  title="{{ benefit_model.NO_CAPACITY_MESSAGE }}"></i>{% endif %}