Styling changes:

- move `usa-accordion` class to wrap all accordion elements
- remove background color form `accordion` class and move it to atat
specific class `accordion__header`
- create class names for styling elements instead of relying on element
type
This commit is contained in:
leigh-mil 2019-12-10 10:11:15 -05:00
parent bf6db87157
commit 78e7b1efe8
4 changed files with 45 additions and 44 deletions

View File

@ -2,13 +2,12 @@
@include shadow-panel; @include shadow-panel;
margin: $gap * 3 0; margin: $gap * 3 0;
max-width: $max-panel-width; max-width: $max-panel-width;
background-color: $color-white;
&__header { &__header {
padding: $gap * 2 $gap * 3; padding: $gap * 2 $gap * 3;
background-color: $color-white;
h3, &-text {
p {
margin: 0; margin: 0;
} }
} }

View File

@ -32,17 +32,18 @@
) }} ) }}
{% else %} {% else %}
<div class="usa-accordion">
{% for application in portfolio.applications|sort(attribute='name') %} {% for application in portfolio.applications|sort(attribute='name') %}
{% set section_name = "application-{}".format(application.id) %} {% set section_name = "application-{}".format(application.id) %}
{% set title = "Environments ({})".format(application.environments|length) %} {% set title = "Environments ({})".format(application.environments|length) %}
<div class="accordion"> <div class="accordion">
<div class="accordion__header"> <div class="accordion__header">
<h3> <h3 class="accordion__header-text">
<a href='{{ url_for("applications.settings", application_id=application.id) }}'> <a href='{{ url_for("applications.settings", application_id=application.id) }}'>
{{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }} {{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }}
</a> </a>
</h3> </h3>
<p> <p class="accordion__header-text">
{{ application.description }} {{ application.description }}
</p> </p>
</div> </div>
@ -75,6 +76,7 @@
{% endcall %} {% endcall %}
</div> </div>
{% endfor %} {% endfor %}
</div>
{% endif %} {% endif %}
</div> </div>

View File

@ -8,7 +8,7 @@
content_tag="div", content_tag="div",
content_classes="") %} content_classes="") %}
<accordion v-cloak inline-template> <accordion v-cloak inline-template>
<{{wrapper_tag}} class="usa-accordion {{ wrapper_classes }}"> <{{wrapper_tag}} class="{{ wrapper_classes }}">
<{{heading_tag}} class="accordion__button {{ heading_classes }}"> <{{heading_tag}} class="accordion__button {{ heading_classes }}">
<button <button
v-on:click="toggle($event)" v-on:click="toggle($event)"

View File

@ -14,7 +14,7 @@
{% macro TaskOrderList(task_orders, status) %} {% macro TaskOrderList(task_orders, status) %}
{% set status = "All Task Orders" %} {% set status = "All Task Orders" %}
<div class="accordion"> <div class="accordion usa-accordion">
{% call Accordion(title=status, id=status, heading_tag="h4") %} {% call Accordion(title=status, id=status, heading_tag="h4") %}
{% for task_order in task_orders %} {% for task_order in task_orders %}
<div class="accordion__content--list-item"> <div class="accordion__content--list-item">