More styling updates

styles/components/_accordion_table.scss

@@ -10,6 +10,11 @@
 
   ul {
     padding-left: 0;
+
+    li {
+      list-style-type: none;
+      margin: 0;
+    }
   }
 
   &__head {
@@ -45,11 +50,14 @@
   &__items {
     margin: 0;
 
-    li {
+    .accordion-table__item {
       font-weight: $font-bold;
       border-bottom: 1px solid $color-gray-lightest;
-      margin: 0;
+      padding: $gap 0;
-      list-style-type: none;
+
+      &:first-child {
+        padding-top: 0;
+      }
 
       .icon-link--large {
         padding-top: $gap * 0.5;
@@ -151,37 +159,45 @@
       }
     }
 
-    &__expanded {
+    &-toggle-content {
-      font-size: $small-font-size;
+      margin-top: $gap;
-      font-weight: $font-normal;
-      background-color: $color-gray-lightest;
-      padding: ($gap * 2) ($gap * 4);
 
-      .col--grow {
+      &__expanded {
+        font-size: $small-font-size;
         font-weight: $font-normal;
-      }
+        background-color: $color-gray-lightest;
+        padding: $gap;
 
-      th,
+        &:last-child {
-      td {
+          border-bottom: none;
-        .icon-link {
-          font-weight: $font-normal;
-          font-size: $base-font-size;
         }
 
-        border-bottom: 1px dashed $color-white;
+        .col--grow {
-      }
+          font-weight: $font-normal;
+        }
 
-      &_first {
+        th,
-        float: left;
+        td {
-      }
+          .icon-link {
+            font-weight: $font-normal;
+            font-size: $base-font-size;
+          }
 
-      &-role {
+          border-bottom: 1px dashed $color-white;
-        .icon-link {
+        }
-          padding: 0;
-          vertical-align: text-top;
 
-          .icon {
+        &_first {
-            margin: 0 0 0 0.25rem;
+          float: left;
+        }
+
+        &-role {
+          .icon-link {
+            padding: 0;
+            vertical-align: text-top;
+
+            .icon {
+              margin: 0 0 0 0.25rem;
+            }
           }
         }
       }
@@ -210,11 +226,3 @@
     }
   }
 }
-
-#application-environments {
-  .row {
-    & > .col:first-child {
-      flex-grow: 5;
-    }
-  }
-}

styles/components/_portfolio_layout.scss

@@ -270,25 +270,26 @@
       margin-top: $gap * 3;
     }
 
-    .accordion-table__item-content.form-row {
-      margin-bottom: 0;
-      margin-top: 0;
-      padding: 0;
-    }
-
     li.accordion-table__item__expanded {
       height: auto;
     }
 
-    span.accordion-table__item__toggler.icon-link {
+    a.application-list-item__environment__csp_link {
       font-size: $small-font-size;
       font-weight: $font-normal;
-      float: unset;
+
+      .icon {
+        @include icon-color($color-blue);
+      }
     }
 
-    a.application-list-item__environment__csp_link.icon-link {
+    span.accordion-table__item__toggler {
-      font-size: $small-font-size;
       font-weight: $font-normal;
+
+      &.environment-list__item__members {
+        float: unset;
+        font-size: $small-font-size;
+      }
     }
   }
 

templates/applications/settings.html

@@ -76,49 +76,43 @@
             {% set edit_form = env['edit_form'] %}
             <toggler inline-template>
               <li class="accordion-table__item">
-                <div class="accordion-table__item-content form-row">
+                <div class="accordion-table__item-content">
-                  <div class="form-col form-col--two-thirds">
+                  <div class="environment-list__item">
-                    <div class="environment-list__item">
+                    <span>
-                      <span>
+                      {{ env['name'] }}
-                        {{ env['name'] }}
+                    </span>
-                      </span>
+                    {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
-                      {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
+                    {{
-                      {{
-                        ToggleButton(
-                          open_html=members_button,
-                          close_html=members_button,
-                          section_name="members"
-                        )
-                      }}
-                      <br>
-                      {% if env['pending'] -%}
-                        <span class='usa-label'>PROCESSING</span>
-                      {% else %}
-                        <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
-                          <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
-                        </a>
-                      {%- endif %}
-                    </div>
-                  </div>
-                  <div class="form-col form-col--third">
-                      {% set edit_environment_button %}
-                        <span>Edit</span>
-                      {% endset %}
-
-                      {{
                       ToggleButton(
-                        open_html=edit_environment_button,
+                        open_html=members_button,
-                        close_html=edit_environment_button,
+                        close_html=members_button,
-                        section_name="edit"
+                        section_name="members",
-                        )
+                        classes="environment-list__item__members"
-                      }}
+                      )
+                    }}
+                    {% set edit_environment_button = "Edit" %}
+                    {{
+                    ToggleButton(
+                      open_html=edit_environment_button,
+                      close_html=edit_environment_button,
+                      section_name="edit"
+                      )
+                    }}
+                    <br>
+                    {% if env['pending'] -%}
+                      <span class='usa-label'>PROCESSING</span>
+                    {% else %}
+                      <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
+                        <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
+                      </a>
+                    {%- endif %}
                   </div>
                 </div>
 
                 {% call ToggleSection(section_name="members") %}
                   <ul>
                     {% for member in env['members'] %}
-                    <li class="accordion-table__item__expanded">
+                    <li class="accordion-table__item-toggle-content__expanded">
                       {{ member }}
                     </li>
                     {% endfor %}
@@ -127,7 +121,7 @@
 
                 {% call ToggleSection(section_name="edit") %}
                   <ul>
-                    <li class="accordion-table__item__expanded">
+                    <li class="accordion-table__item-toggle-content__expanded">
                       <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
                         {{ edit_form.csrf_token }}
                         {{ TextInput(edit_form.name, validation='requiredField') }}

templates/components/toggle_list.html

@@ -1,5 +1,5 @@
-{% macro ToggleButton(action, open_html, close_html, section_name) %}
+{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %}
-  <span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler">
+  <span v-on:click="toggleSection('{{ section_name }}')" class="accordion-table__item__toggler {{ classes }}">
     <span v-if="selectedSection === '{{ section_name }}'">
       {{ close_html }}
     </span>
@@ -10,7 +10,7 @@
 {% endmacro %}
 
 {% macro ToggleSection(section_name, classes="") %}
-  <div v-show="selectedSection === '{{ section_name }}'" class='{{ classes }}'>
+  <div v-show="selectedSection === '{{ section_name }}'" class='accordion-table__item-toggle-content {{ classes }}'>
     {{ caller() }}
   </div>
 {% endmacro %}