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

Touch up styles on environment rows in applications listing

Browse Source
This commit is contained in:
Patrick Smith 2019-02-07 16:28:25 -05:00
parent 0ea6f1d3ee
commit 9afa449bdf
4 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
styles/components/_portfolio_layout.scss
View File

@ -86,7 +86,7 @@
} }
.portfolio-content { .portfolio-content {
margin-top: 6 * $gap; margin: 6 * $gap $gap 0 $gap;
} }
.portfolio-applications { .portfolio-applications {
@ -114,7 +114,19 @@
.application-list { .application-list {
.application-list-item { .application-list-item {
box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5); 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);
.application-list-item__environment__name {
}
.application-list-item__environment__csp_link {
font-size: $small-font-size;
font-weight: normal;
&:hover {
background-color: $color-aqua-light;
}
}
} }
} }
} }

1
styles/core/_variables.scss
View File

@ -43,6 +43,7 @@ $font-bold: 700;
$color-blue: #0071bc; $color-blue: #0071bc;
$color-blue-darker: #205493; $color-blue-darker: #205493;
$color-blue-darkest: #112e51; $color-blue-darkest: #112e51;
$color-blue-light: #e5f1ff;
$color-aqua: #02bfe7; $color-aqua: #02bfe7;
$color-aqua-dark: #00a6d2; $color-aqua-dark: #00a6d2;

8
styles/elements/_accordians.scss
View File

@ -1,6 +1,8 @@
.accordian { .accordian {
@include block-list; @include block-list;
box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5);
.icon-link { .icon-link {
margin: -$gap 0; margin: -$gap 0;
} }
@ -21,6 +23,8 @@
.accordian__header { .accordian__header {
@include block-list-header; @include block-list-header;
border-top: 3px solid $color-blue; border-top: 3px solid $color-blue;
border-bottom: none;
box-shadow: 0 2px 4px 0 rgba(216,218,222,0.58);
} }
.accordian__title { .accordian__title {
@ -62,6 +66,10 @@
.accordian__item { .accordian__item {
@include block-list-item; @include block-list-item;
opacity: 0.75;
background-color: $color-blue-light;
border-bottom: 1px solid rgba($color-gray-light, 0.5);
&.accordian__item--selectable { &.accordian__item--selectable {
> div { > div {
display: flex; display: flex;

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

@ -59,15 +59,14 @@
<ul> <ul>
{% for environment in application.environments %} {% for environment in application.environments %}
<li class='accordian__item application-list-item__environment'> <li class='accordian__item application-list-item__environment'>
<a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__link'> <div class='application-list-item__environment__name'>
{{ Icon('link') }}
<span>{{ environment.name }}</span> <span>{{ environment.name }}</span>
</div>
<a href='{{ url_for("portfolios.access_environment", portfolio_id=portfolio.id, environment_id=environment.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
<span>CSP Console</span>
</a> </a>
<div class='application-list-item__environment__members'>
<div class='label'>{{ environment.num_users }}</div>
<span>members</span>
</div>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>