pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #792 from dod-ccpo/style-updates

Browse Source 
Style updates
This commit is contained in:
dandds 2019-05-01 11:44:24 -04:00 committed by GitHub
commit e709de1d49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 118 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
styles/components/_accordion_table.scss
View File

@ -19,9 +19,9 @@
.accordion-table__head { .accordion-table__head {
padding: $gap $gap*2; padding: $gap $gap*2;
font-size: $small-font-size;
font-weight: 700; font-weight: 700;
color: $color-gray; color: $color-gray;
text-transform: uppercase;
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
border-bottom: 1px solid $color-gray-lightest; border-bottom: 1px solid $color-gray-lightest;
border-top: none; border-top: none;
@ -107,6 +107,11 @@
} }
.accordion-table__item__expanded { .accordion-table__item__expanded {
font-size: $small-font-size;
font-weight: $font-normal;
background-color: $color-gray-lightest;
padding: $gap*2 $gap*4;
th, td { th, td {
.icon-link { .icon-link {
font-weight: $font-normal; font-weight: $font-normal;
@ -118,12 +123,7 @@
.accordion-table__item__expanded_first { .accordion-table__item__expanded_first {
float: left; float: left;
font-weight: bold;
} }
font-size: $small-font-size;
background-color: $color-gray-lightest;
padding: $gap*2.5 $gap*7 $gap*5 $gap*7;
} }
} }
} }
@ -131,8 +131,6 @@
#application-members { #application-members {
.accordion-table { .accordion-table {
.accordion-table__head { .accordion-table__head {
font-size: $small-font-size;
padding-left: $gap*3;
} }
.accordion-table__item-content, .accordion-table__head { .accordion-table__item-content, .accordion-table__head {
@ -152,5 +150,9 @@
flex-grow: 1; flex-grow: 1;
flex-basis: 0; flex-basis: 0;
} }
.accordion-table__item__toggler {
text-align: right;
}
} }
} }

5
styles/components/_alerts.scss
View File

@ -4,6 +4,11 @@
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
*/ */
.usa-alert-heading {
line-height: 2.4rem;
margin-bottom: $gap;
}
@mixin alert { @mixin alert {
padding: $gap * 2; padding: $gap * 2;
border-left-width: $gap / 2; border-left-width: $gap / 2;

26
styles/components/_portfolio_layout.scss
View File

@ -16,7 +16,7 @@
.portfolio-breadcrumbs { .portfolio-breadcrumbs {
margin-bottom: $gap * 2; margin-bottom: $gap * 2;
color: $color-gray-medium; color: $color-gray-dark;
font-size: $h5-font-size; font-size: $h5-font-size;
.icon-link { .icon-link {
@ -34,10 +34,10 @@
.portfolio-breadcrumbs__home { .portfolio-breadcrumbs__home {
&.icon-link--disabled { &.icon-link--disabled {
color: $color-gray-medium; color: $color-gray-dark;
opacity: 1; opacity: 1;
.icon { .icon {
@include icon-color($color-gray-medium); @include icon-color($color-gray-dark);
} }
} }
} }
@ -97,6 +97,7 @@
font-size: $small-font-size; font-size: $small-font-size;
.icon-link { .icon-link {
padding: 0.8rem 1.2rem;
&.active { &.active {
color: $color-gray; color: $color-gray;
.icon { .icon {
@ -152,8 +153,6 @@
color: $color-gray-dark; color: $color-gray-dark;
padding: $gap 0; padding: $gap 0;
text-transform: uppercase; text-transform: uppercase;
opacity: 0.54;
font-size: $small-font-size;
font-weight: bold; font-weight: bold;
margin-bottom: 3 * $gap; margin-bottom: 3 * $gap;
} }
@ -228,10 +227,6 @@
} }
} }
.green {
color: $color-green;
}
.name { .name {
font-weight: bold; font-weight: bold;
@ -337,6 +332,16 @@
} }
} }
} }
textarea {
max-height: 9rem;
max-width: none;
}
.panel__footer {
padding-bottom: 0;
padding-top: 0;
}
} }
.activity-log { .activity-log {
@ -378,8 +383,8 @@
} }
.application-list-item { .application-list-item {
box-shadow: $box-shadow;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);
margin-bottom: 6 * $gap; margin-bottom: 6 * $gap;
.col { .col {
@ -467,7 +472,6 @@
} }
table { table {
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
thead { thead {
th:first-child { th:first-child {
padding-left: 3 * $gap; padding-left: 3 * $gap;

8
styles/core/_util.scss
View File

@ -46,3 +46,11 @@
@content; @content;
} }
} }
.green {
color: $color-green;
}
.user-permission {
font-weight: $font-normal;
}

4
styles/core/_variables.scss
View File

@ -113,7 +113,7 @@ $color-focus: $color-gray-light;
$color-visited: $color-purple; $color-visited: $color-purple;
$color-overlay: rgba(#000, 0.5); $color-overlay: rgba(#000, 0.5);
$color-shadow: rgba(#000, 0.3); $color-shadow: rgba(208, 219, 231, 0.5);
$color-transparent: rgba(#000, 0); $color-transparent: rgba(#000, 0);
// Mobile First Breakpoints // Mobile First Breakpoints
@ -154,7 +154,7 @@ $label-border-radius: 2px;
$checkbox-border-radius: 2px; $checkbox-border-radius: 2px;
$border-radius: 3px; $border-radius: 3px;
$button-border-radius: 5px; $button-border-radius: 5px;
$box-shadow: 0 0 2px $color-shadow; $box-shadow: 0px 2px 5px 0px $color-shadow;
$focus-outline: 2px dotted $color-gray-light; $focus-outline: 2px dotted $color-gray-light;
$focus-spacing: 3px; $focus-spacing: 3px;
$nav-width: 300px; // previously 951px; $nav-width: 300px; // previously 951px;

21
styles/elements/_accordions.scss
View File

@ -1,3 +1,19 @@
.triangle-box {
position: relative;
.triangle-up {
$triangle-size: ($gap * 1.5);
position: absolute;
width: 0;
height: 0;
border-left: $triangle-size solid transparent;
border-right: $triangle-size solid transparent;
border-bottom: $triangle-size solid $color-blue-light;
bottom: -4px;
right: 50%;
}
}
.accordion { .accordion {
@include block-list; @include block-list;
@ -54,11 +70,16 @@
.accordion__actions { .accordion__actions {
margin-top: $gap; margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.icon-link { .icon-link {
font-size: $small-font-size; font-size: $small-font-size;
svg {
width: 1rem;
}
} }
.counter { .counter {

4
styles/elements/_action_group.scss
View File

@ -11,10 +11,10 @@
.usa-button, .usa-button,
a { a {
margin: 0 0 0 ($gap * 2); margin: 0 0 0 $gap;
@include media($medium-screen) { @include media($medium-screen) {
margin: 0 0 0 ($gap * 4); margin: 0 0 0 ($gap * 2);
} }
} }

3
styles/elements/_block_lists.scss
View File

@ -13,12 +13,11 @@
@mixin block-list-header { @mixin block-list-header {
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
padding: $gap * 2;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
padding: $gap 2 * $gap; padding: $gap 3 * $gap;
color: $color-gray; color: $color-gray;
.icon-tooltip { .icon-tooltip {

9
styles/elements/_panels.scss
View File

@ -22,10 +22,10 @@
margin-top: 0; margin-top: 0;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-bottom: $site-margins-mobile * 2; margin-bottom: $site-margins-mobile * 6;
@include media($medium-screen) { @include media($medium-screen) {
margin-bottom: $site-margins * 2; margin-bottom: $site-margins * 8;
} }
} }
@ -47,8 +47,8 @@
} }
@mixin shadow-panel { @mixin shadow-panel {
padding: $gap / 2 0; padding: $gap /2 0;
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); box-shadow: $box-shadow;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
} }
@ -57,6 +57,7 @@
@include panel-base; @include panel-base;
@include panel-theme-default; @include panel-theme-default;
@include panel-margin; @include panel-margin;
@include shadow-panel;
.panel__content { .panel__content {
margin: ($gap * 2) 0; margin: ($gap * 2) 0;

6
styles/elements/_sidenav.scss
View File

@ -1,6 +1,5 @@
@mixin sidenav__header { @mixin sidenav__header {
padding: $gap ($gap * 2); padding: $gap ($gap * 2);
font-size: $small-font-size;
font-weight: bold; font-weight: bold;
} }
@ -17,10 +16,11 @@
} }
width: 25rem; width: 25rem;
box-shadow: 0 6px 18px 0 rgba(48,58,65,0.15); box-shadow: $box-shadow;
.sidenav__title { .sidenav__title {
@include sidenav__header; @include sidenav__header;
font-size: $h3-font-size;
text-transform: uppercase; text-transform: uppercase;
width: 50%; width: 50%;
color: $color-gray-dark; color: $color-gray-dark;
@ -29,6 +29,8 @@
.sidenav__toggle { .sidenav__toggle {
@include sidenav__header; @include sidenav__header;
font-size: $small-font-size;
line-height: 2.8rem;
float: right; float: right;
color: $color-blue-darker; color: $color-blue-darker;

1
styles/sections/_application_list.scss
View File

@ -3,6 +3,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding: ($gap * 1.5) ($gap * 3);
.usa-input { .usa-input {
margin: 0; margin: 0;

4
templates/components/alert.html
View File

@ -25,9 +25,9 @@
<div class='usa-alert-body'> <div class='usa-alert-body'>
{% if vue_template %} {% if vue_template %}
<h2 class='usa-alert-heading' v-html='title'></h2> <h3 class='usa-alert-heading' v-html='title'></h3>
{% else %} {% else %}
<h2 class='usa-alert-heading'>{{title}}</h2> <h3 class='usa-alert-heading'>{{title}}</h3>
{% endif %} {% endif %}
{% if message %} {% if message %}

24
templates/portfolios/applications/index.html
View File

@ -54,22 +54,22 @@
<a <a
href="{{ url_for('applications.team', application_id=application.id) }}" href="{{ url_for('applications.team', application_id=application.id) }}"
class='icon-link'> class='icon-link'>
<span>{{ "portfolios.applications.team_text" | translate }}</span> <span>{{ "portfolios.applications.team_text" | translate }} ({{ application.num_users }})</span>
<span class='counter'>{{ application.num_users }}</span>
</a> </a>
<div class='separator'></div>
{% endif %} {% endif %}
<a class='icon-link triangle-box' v-on:click="toggleSection('{{ section_name }}')">
<span>Environments ({{ application.environments|length }})</span>
<span v-if="selectedSection === '{{ section_name }}'">
{{ Icon('caret_up') }}
</span>
<span v-else>
{{ Icon('caret_down') }}
</span>
<div class="triangle-up" v-if="selectedSection === '{{ section_name }}'"></div>
</a>
</div> </div>
</div> </div>
<div class='col'>
<span class='icon-link toggle-link' v-on:click="toggleSection('{{ section_name }}')">
<span v-if="selectedSection === '{{ section_name }}'">
{{ Icon('minus') }}
</span>
<span v-else>
{{ Icon('plus') }}
</span>
</span>
</div>
</header> </header>
<ul v-show="selectedSection === '{{ section_name }}'"> <ul v-show="selectedSection === '{{ section_name }}'">
{% for environment in application.environments %} {% for environment in application.environments %}

30
templates/portfolios/applications/settings.html
View File

@ -20,10 +20,10 @@
{{ "fragments.edit_application_form.explain" | translate }} {{ "fragments.edit_application_form.explain" | translate }}
</p> </p>
<div class="form-row"> <div class="form-row">
<div class="form-col form-col--half"> <div class="form-col form-col--two-thirds">
{{ TextInput(form.name) }} {{ TextInput(form.name) }}
</div> </div>
<div class="form-col form-col--half"> <div class="form-col form-col--third">
{% if user_can(permissions.DELETE_APPLICATION) %} {% if user_can(permissions.DELETE_APPLICATION) %}
<div class="usa-input"> <div class="usa-input">
<label for="delete-application"> <label for="delete-application">
@ -43,31 +43,13 @@
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-col form-col--half"> <div class="form-col form-col--two-thirds">
{{ TextInput(form.description, paragraph=True) }} {{ TextInput(form.description, paragraph=True) }}
</div> </div>
<div class="form-col form-col--third">
&nbsp;
</div>
</div> </div>
<div class="application-list-item">
<header>
<h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
<p>
{{ 'portfolios.applications.environments_description' | translate }}
</p>
</header>
<ul>
{% for environment in application.environments %}
<li class="application-edit__env-list-item">
<div class="usa-input input--disabled">
<label>Environment Name</label>
<input type="text" disabled value="{{ environment.name }}" readonly />
</div>
</li>
{% endfor %}
</ul>
</div>
</div> </div>
<div class="panel__footer"> <div class="panel__footer">
<div class="action-group"> <div class="action-group">

45
templates/portfolios/applications/team.html
View File

@ -46,7 +46,7 @@
<div class="accordion-table__head"> <div class="accordion-table__head">
<span> <span>
<span> <span>
{{ "portfolios.applications.team_settings.user" | translate }} {{ "common.name" | translate }}
</span> </span>
<span> <span>
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
@ -66,25 +66,28 @@
{% set user_info = environment_users[user.id] %} {% set user_info = environment_users[user.id] %}
{% set user_permissions = user_info["permissions"] %} {% set user_permissions = user_info["permissions"] %}
{% macro PermissionField(value) %}
<span class="user-permission{% if "Edit" in value %} green{% endif %}">{{ value }}</span>
{% endmacro %}
<toggler inline-template> <toggler inline-template>
<li class="accordion-table__item"> <li class="accordion-table__item">
<div class="accordion-table__item-content"> <div class="accordion-table__item-content">
<span> <span>
{{ name }} {{ name }}
<span>{{ user.full_name }}</span> <span>{{ user.full_name }}</span>
<span>{{ user_permissions["delete_access"] }}</span> {{ PermissionField(user_permissions["delete_access"]) }}
<span>{{ user_permissions["environment_management"] }}</span> {{ PermissionField(user_permissions["environment_management"]) }}
<span>{{ user_permissions["team_management"] }}</span> {{ PermissionField(user_permissions["team_management"]) }}
</span> </span>
<span class="icon-link icon-link--large accordion-table__item__toggler"> <span class="icon-link icon-link--large accordion-table__item__toggler">
{% set open_html %} {% set open_html %}
{{ "common.show" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_down') }}
{% endset %} {% endset %}
{% set close_html %} {% set close_html %}
{{ "common.hide" | translate }} {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ "portfolios.applications.team_settings.environments" | translate }} ({{ user_info['environments'] | length }}) {{ Icon('caret_up') }}
{% endset %} {% endset %}
{{ {{
ToggleButton( ToggleButton(
@ -98,10 +101,8 @@
{% call ToggleSection(section_name="environments") %} {% call ToggleSection(section_name="environments") %}
<ul> <ul>
{% for environment in user_info["environments"] %} {% for environment in user_info["environments"] %}
<li> <li class="accordion-table__item__expanded">
<div class="accordion-table__item-content"> {{ environment.name }}
{{ environment.name }}
</div>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

1
translations.yaml
View File

@ -39,6 +39,7 @@ common:
resource_names: resource_names:
environments: Environments environments: Environments
choose_role: Choose a role choose_role: Choose a role
name: Name
components: components:
modal: modal:
close: Close close: Close