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 {
padding: $gap $gap*2;
font-size: $small-font-size;
font-weight: 700;
color: $color-gray;
text-transform: uppercase;
background-color: $color-gray-lightest;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
@ -107,6 +107,11 @@
}
.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 {
.icon-link {
font-weight: $font-normal;
@ -118,12 +123,7 @@
.accordion-table__item__expanded_first {
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 {
.accordion-table {
.accordion-table__head {
font-size: $small-font-size;
padding-left: $gap*3;
}
.accordion-table__item-content, .accordion-table__head {
@ -152,5 +150,9 @@
flex-grow: 1;
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
*/
.usa-alert-heading {
line-height: 2.4rem;
margin-bottom: $gap;
}
@mixin alert {
padding: $gap * 2;
border-left-width: $gap / 2;

26
styles/components/_portfolio_layout.scss
View File

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

8
styles/core/_util.scss
View File

@ -46,3 +46,11 @@
@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-overlay: rgba(#000, 0.5);
$color-shadow: rgba(#000, 0.3);
$color-shadow: rgba(208, 219, 231, 0.5);
$color-transparent: rgba(#000, 0);
// Mobile First Breakpoints
@ -154,7 +154,7 @@ $label-border-radius: 2px;
$checkbox-border-radius: 2px;
$border-radius: 3px;
$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-spacing: 3px;
$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 {
@include block-list;
@ -54,11 +70,16 @@
.accordion__actions {
margin-top: $gap;
margin-bottom: $gap * 0.5;
display: flex;
flex-direction: row;
.icon-link {
font-size: $small-font-size;
svg {
width: 1rem;
}
}
.counter {

4
styles/elements/_action_group.scss
View File

@ -11,10 +11,10 @@
.usa-button,
a {
margin: 0 0 0 ($gap * 2);
margin: 0 0 0 $gap;
@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 {
@include panel-base;
@include panel-theme-default;
padding: $gap * 2;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: $color-gray-lightest;
padding: $gap 2 * $gap;
padding: $gap 3 * $gap;
color: $color-gray;
.icon-tooltip {

9
styles/elements/_panels.scss
View File

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

6
styles/elements/_sidenav.scss
View File

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

1
styles/sections/_application_list.scss
View File

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

4
templates/components/alert.html
View File

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

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

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

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

@ -20,10 +20,10 @@
{{ "fragments.edit_application_form.explain" | translate }}
</p>
<div class="form-row">
<div class="form-col form-col--half">
<div class="form-col form-col--two-thirds">
{{ TextInput(form.name) }}
</div>
<div class="form-col form-col--half">
<div class="form-col form-col--third">
{% if user_can(permissions.DELETE_APPLICATION) %}
<div class="usa-input">
<label for="delete-application">
@ -43,31 +43,13 @@
</div>
</div>
<div class="form-row">
<div class="form-col form-col--half">
<div class="form-col form-col--two-thirds">
{{ TextInput(form.description, paragraph=True) }}
</div>
<div class="form-col form-col--third">
&nbsp;
</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 class="panel__footer">
<div class="action-group">

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

@ -46,7 +46,7 @@
<div class="accordion-table__head">
<span>
<span>
{{ "portfolios.applications.team_settings.user" | translate }}
{{ "common.name" | translate }}
</span>
<span>
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
@ -66,6 +66,9 @@
{% set user_info = environment_users[user.id] %}
{% 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>
<li class="accordion-table__item">
@ -73,17 +76,17 @@
<span>
{{ name }}
<span>{{ user.full_name }}</span>
<span>{{ user_permissions["delete_access"] }}</span>
<span>{{ user_permissions["environment_management"] }}</span>
<span>{{ user_permissions["team_management"] }}</span>
{{ PermissionField(user_permissions["delete_access"]) }}
{{ PermissionField(user_permissions["environment_management"]) }}
{{ PermissionField(user_permissions["team_management"]) }}
</span>
<span class="icon-link icon-link--large accordion-table__item__toggler">
{% 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 %}
{% 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 %}
{{
@ -98,10 +101,8 @@
{% call ToggleSection(section_name="environments") %}
<ul>
{% for environment in user_info["environments"] %}
<li>
<div class="accordion-table__item-content">
<li class="accordion-table__item__expanded">
{{ environment.name }}
</div>
</li>
{% endfor %}
</ul>

1
translations.yaml
View File

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