Touch up styles on environment rows in applications listing

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

View File

@ -86,7 +86,7 @@
}
.portfolio-content {
margin-top: 6 * $gap;
margin: 6 * $gap $gap 0 $gap;
}
.portfolio-applications {
@ -114,7 +114,19 @@
.application-list {
.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;
}
}
}
}
}

View File

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

View File

@ -1,6 +1,8 @@
.accordian {
@include block-list;
box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5);
.icon-link {
margin: -$gap 0;
}
@ -21,6 +23,8 @@
.accordian__header {
@include block-list-header;
border-top: 3px solid $color-blue;
border-bottom: none;
box-shadow: 0 2px 4px 0 rgba(216,218,222,0.58);
}
.accordian__title {
@ -62,6 +66,10 @@
.accordian__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 {
> div {
display: flex;

View File

@ -59,15 +59,14 @@
<ul>
{% for environment in application.environments %}
<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'>
{{ Icon('link') }}
<div class='application-list-item__environment__name'>
<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>
<div class='application-list-item__environment__members'>
<div class='label'>{{ environment.num_users }}</div>
<span>members</span>
</div>
</li>
{% endfor %}
</ul>