Generalize styling for accordion tables
This commit is contained in:
Montana
parent
891bd50044
commit
f6f093ef85
@ -23,6 +23,7 @@
|
||||
@import 'elements/graphs';
|
||||
@import 'elements/menu';
|
||||
|
||||
@import 'components/accordion_table';
|
||||
@import 'components/topbar';
|
||||
@import 'components/top_message';
|
||||
@import 'components/global_layout';
|
||||
|
||||
85
styles/components/_accordion_table.scss
Normal file
85
styles/components/_accordion_table.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.accordion-table {
|
||||
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
|
||||
|
||||
.accordion-table__header {
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
border-top: none;
|
||||
border-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $gap * 2;
|
||||
|
||||
.accordion-table__title {
|
||||
@include h4;
|
||||
font-size: $lead-font-size;
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
thead th {
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-table__items {
|
||||
.accordion-table__item__toggler {
|
||||
@include icon-link-color($color-blue, $color-gray-lightest);
|
||||
margin-left: -$gap;
|
||||
color: $color-blue;
|
||||
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
.open-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 5 * $gap;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
|
||||
border-bottom: 10px solid $color-blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
th[scope=rowgroup] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.accordion-table__item__expanded {
|
||||
margin-left: 2 * $gap;
|
||||
|
||||
th, td {
|
||||
.icon-link {
|
||||
font-weight: $font-normal;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
border-bottom: 1px dashed $color-white;
|
||||
background-color: $color-blue-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -201,143 +201,60 @@
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__month-select {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spend-table {
|
||||
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
|
||||
|
||||
.spend-table__header {
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
border-top: none;
|
||||
border-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $gap * 2;
|
||||
|
||||
.spend-table__title {
|
||||
@include h4;
|
||||
font-size: $lead-font-size;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.spend-table__month-select {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
table {
|
||||
.spend-table__portfolio {
|
||||
th, td {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
thead th {
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
border-top: none;
|
||||
th, td {
|
||||
&.previous-month {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
&.meter-cell {
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
min-width: 4rem;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
@include media($medium-screen) {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
&.previous-month {
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&.meter-cell {
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
min-width: 4rem;
|
||||
meter {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: $color-white;
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
min-width: 12rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
meter {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
&::-webkit-meter-bar {
|
||||
background: $color-white;
|
||||
display: none;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::-webkit-meter-bar {
|
||||
background: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__meter-value {
|
||||
@include h5;
|
||||
|
||||
@include media($medium-screen) {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
background-color: rgba($color-blue, 0.65);
|
||||
border-radius: $gap/2;
|
||||
position: absolute;
|
||||
top: 2.3rem;
|
||||
left: $gap / 2;
|
||||
padding: 0 ($gap / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spend-table__portfolio {
|
||||
th, td {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
}
|
||||
}
|
||||
.spend-table__meter-value {
|
||||
@include h5;
|
||||
|
||||
.spend-table__application {
|
||||
.spend-table__application__toggler {
|
||||
@include icon-link-color($color-blue, $color-gray-lightest);
|
||||
margin-left: -$gap;
|
||||
color: $color-blue;
|
||||
|
||||
.icon {
|
||||
@include icon-size(12);
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
.open-indicator {
|
||||
@include media($medium-screen) {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
background-color: rgba($color-blue, 0.65);
|
||||
border-radius: $gap/2;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 5 * $gap;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
|
||||
border-bottom: 10px solid $color-blue-light;
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
th[scope=rowgroup] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spend-table__application__env {
|
||||
margin-left: 2 * $gap;
|
||||
|
||||
th, td {
|
||||
.icon-link {
|
||||
font-weight: $font-normal;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
border-bottom: 1px dashed $color-white;
|
||||
background-color: $color-blue-light;
|
||||
top: 2.3rem;
|
||||
left: $gap / 2;
|
||||
padding: 0 ($gap / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="responsive-table-wrapper panel">
|
||||
<div class="accordion-table responsive-table-wrapper panel">
|
||||
{% include "fragments/applications/environments.html" %}
|
||||
<div class="action-group">
|
||||
<a class='icon-link'>
|
||||
|
||||
@ -346,9 +346,9 @@
|
||||
</div>
|
||||
</budget-chart>
|
||||
|
||||
<div class='spend-table responsive-table-wrapper'>
|
||||
<div class='spend-table__header'>
|
||||
<h2 class='spend-table__title'>Total spent per month</h2>
|
||||
<div class='accordion-table responsive-table-wrapper'>
|
||||
<div class='accordion-table__header'>
|
||||
<h2 class='accordion-table__title'>Total spent per month</h2>
|
||||
|
||||
<select name='month' id='month' onchange='location = this.value' class='spend-table__month-select'>
|
||||
{% for m in cumulative_budget["months"] %}
|
||||
@ -402,10 +402,10 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody v-for='(application, name) in applicationsState' class='spend-table__application'>
|
||||
<tbody v-for='(application, name) in applicationsState' class='accordion-table__items'>
|
||||
<tr>
|
||||
<th scope='rowgroup'>
|
||||
<button v-on:click='toggle($event, name)' class='icon-link icon-link--large spend-table__application__toggler'>
|
||||
<button v-on:click='toggle($event, name)' class='icon-link icon-link--large accordion-table__item__toggler'>
|
||||
<template v-if='application.isVisible'>{{ Icon('caret_down') }}<div class='open-indicator'></div></template>
|
||||
<template v-else>{{ Icon('caret_right') }}</template>
|
||||
<span v-html='name'></span>
|
||||
@ -433,9 +433,9 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible' class='spend-table__application__env'>
|
||||
<tr v-for='(environment, envName) in environments[name]' v-show='application.isVisible' class='accordion-table__item__expanded'>
|
||||
<th scope='rowgroup'>
|
||||
<div class='icon-link spend-table__application__env'>
|
||||
<div class='icon-link accordion-table__item__expanded'>
|
||||
<span v-html='envName'></span>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user