Files
notifications-admin/app/assets/stylesheets/components/table.scss
Chris Hill-Scott 4a226a7a29 Show template usage broken down by month
This follows on from:
- https://github.com/alphagov/notifications-admin/pull/1094
- https://github.com/alphagov/notifications-admin/pull/1109

It depends on:
- [ ] https://github.com/alphagov/notifications-api/pull/829

A year is too long. Month-by-month is a better timeframe for making
decisions or seeing patterns in your usage.
2017-03-16 14:04:37 +00:00

202 lines
2.8 KiB
SCSS

.table {
margin-bottom: $gutter;
width: 100%;
}
.table-heading {
text-align: left;
margin: 40px 0 $gutter-half 0;
}
.dashboard-table {
.heading-medium {
margin-bottom: 5px;
}
.table {
table-layout: fixed;
}
.table-field-headings {
th {
font-size: 1px;
}
}
.table-field-headings-visible {
th {
padding-bottom: 5px;
}
}
.table-field-heading-first {
width: 52.5%;
}
.table-row {
th {
display: table-cell;
width: 52.5%;
font-weight: normal;
.hint,
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
%table-field,
.table-field {
vertical-align: top;
&:last-child {
padding-right: 0;
}
&-error {
border-left: 5px solid $error-colour;
padding-left: 7px;
display: block;
&-label {
display: block;
color: $error-colour;
font-weight: bold;
}
}
&-status {
&-default {
color: $secondary-text-colour;
}
&-error {
color: $error-colour;
font-weight: bold;
a {
&:link,
&:visited {
color: $error-colour;
}
}
.status-hint {
display: block;
font-weight: normal;
color: $red;
margin-top: 5px;
}
}
&-yes,
&-no {
display: block;
text-indent: -999em;
background-size: 19px 19px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
&-yes {
background-image: file-url('tick.png');
}
}
&-noborder {
border: 0px;
}
&-index {
width: 15px;
}
p {
margin: 0 0 5px 0;
}
}
.table-field-headings,
.table-field-headings-visible {
th {
@include bold-19;
}
.dashboard-table &-first {
width: 52.5%;
}
}
.table-field-heading {
&:last-child {
padding-right: 0;
}
&-right-aligned {
display: block;
text-align: right;
}
}
.table-field-right-aligned {
@extend %table-field;
text-align: right;
}
.table-row-group {
border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour;
}
.table-empty-message {
@include core-16;
color: $secondary-text-colour;
border-bottom: 1px solid $border-colour;
padding: 0.75em 0 0.5625em 0;
}
.table-show-more-link {
@include core-16;
color: $secondary-text-colour;
margin-top: -30px;
margin-bottom: $gutter * 1.3333;
border-bottom: 1px solid $border-colour;
padding: 0.75em 0 0.5625em 0;
text-align: center;
}
a.table-show-more-link {
color: $link-colour;
}
.table-no-data {
@include core-16;
color: $secondary-text-colour;
margin-top: 10px;
margin-bottom: $gutter * 1.3333;
border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour;
padding: 0.75em 0 0.5625em 0;
}