app/packs/stylesheets/components/_tables.scss
//----------//
// Tables //
//----------//
.table {
> thead {
> tr > th {
font-size: $h2-size;
font-weight: 700;
border-bottom: 2px solid $darkgrey;
vertical-align: middle;
> a {
position: relative;
display: block;
color: $darkgrey;
padding-right: 20px;
&:hover,
&:focus {
text-decoration: none;
}
> .orderers {
font-size: $base-font-size;
position: absolute;
display: block;
height: 14px;
width: 8px;
right: 10px;
top: 50%;
margin-top: -7px;
> * {
position: absolute;
right: 0;
top: 0;
bottom: auto;
color: $grey;
&:last-child {
bottom: 0;
top: auto;
}
&.active {
color: $brand-color-secondary;
}
}
}
}
}
+ tbody {
> tr {
&:nth-child(2n) {
background-color: lighten($lightergrey, 3%);
}
> td {
border-top: none;
border-bottom: 1px solid rgba($grey, 0.5);
padding: 6px 8px;
vertical-align: middle;
> :first-child:not(.open) {
overflow: hidden;
text-overflow: ellipsis;
}
&.actions {
width: 30px;
}
> .td-block {
white-space: nowrap;
> .fa:first-child,
> .sb:first-child {
margin-right: 0.5em;
}
> .fa:last-child,
> .sb:last-child {
margin-left: 0.5em;
}
}
> a {
display: block;
margin: -6px -8px;
padding: 6px 8px;
text-decoration: none;
font-weight: 700;
color: inherit;
}
> .fa,
> .sb {
&:first-child {
margin-right: 3px;
}
}
}
}
> tr:hover {
cursor: default;
> td {
background-color: whitesmoke;
}
}
}
}
.td {
position: relative;
}
&.has-filter,
&.has-search {
border-top: 2px solid $darkgrey;
margin-top: 15px;
}
// Overhead
> thead > tr.overhead {
> th {
font-size: 1.4rem;
text-align: center;
&.overheaded-default {
background-color: rgba($grey, 0.15);
&.full-border {
border-left: 2px solid rgba($grey, 0.15);
border-right: 2px solid rgba($grey, 0.15);
}
}
&.overheaded-danger {
background-color: $red;
color: #fff;
&.full-border {
border-left: 2px solid $red;
border-right: 2px solid $red;
}
}
&.overheaded-warning {
background-color: $orange;
color: #fff;
&.full-border {
border-left: 2px solid $orange;
border-right: 2px solid $orange;
}
}
&.overheaded-success {
background-color: $green;
color: #fff;
&.full-border {
border-left: 2px solid $green;
border-right: 2px solid $green;
}
}
}
}
tr:not([class*='overhead']) > th,
td {
&.overheaded-default {
border-left: 2px solid rgba($grey, 0.15);
border-right: 2px solid rgba($grey, 0.15);
}
&.overheaded-danger {
border-left: 2px solid $red;
border-right: 2px solid $red;
}
&.overheaded-warning {
border-left: 2px solid $orange;
border-right: 2px solid $orange;
}
&.overheaded-success {
border-left: 2px solid $green;
border-right: 2px solid $green;
}
}
tr:last-child {
td {
&.overheaded-default {
border-bottom: 2px solid rgba($grey, 0.15);
}
&.overheaded-danger {
border-bottom: 2px solid $red;
}
&.overheaded-warning {
border-bottom: 2px solid $orange;
}
&.overheaded-success {
border-bottom: 2px solid $green;
}
// Specific for tables displaying stop points
}
}
&.has-stoppoints {
tbody {
> tr > td:first-child {
position: relative;
padding-left: 25px;
&:before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: #fff;
border: 2px solid $darkgrey;
border-radius: 50%;
position: absolute;
z-index: 5;
left: 5px;
top: 50%;
margin-top: -5px;
}
&:after {
content: '';
display: block;
width: 4px;
margin: 0 3px;
background-color: rgba($grey, 0.5);
position: absolute;
z-index: 3;
top: 0;
left: 5px;
bottom: 0;
}
}
> tr:first-child > td:first-child {
&:after {
content: '';
top: 50%;
}
}
> tr:last-child > td:first-child {
&:after {
content: '';
bottom: 50%;
}
}
> tr:first-child > td:first-child,
> tr:last-child > td:first-child {
&:before {
content: '•';
color: $darkgrey;
text-align: center;
font-size: 28px;
letter-spacing: 0;
text-indent: -0.01em;
line-height: 12px;
width: 15px;
height: 15px;
left: 2px;
top: 50%;
margin-top: -8px;
}
}
.zdlp {
background: url('images/map/zdlp.png') no-repeat left 50%;
padding-left: 30px;
}
.lda {
background: url( 'images/map/lda.png') no-repeat left 50%;
padding-left: 30px;
}
.gdl {
background: url( 'images/map/lda.png') no-repeat left 50%;
padding-left: 30px;
}
}
}
tr.line td.state {
white-space: nowrap;
}
// select_toolbox
}
.select_toolbox {
padding: 10px;
background-color: #fff;
box-shadow: 0 0 3px $darkgrey;
position: fixed;
z-index: 2053;
right: 50px;
bottom: 15px;
body.modal-open & { // right: 65px
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
background-color: rgba(#000, 0.5);
}
}
> ul {
display: block;
margin: 0;
padding: 0;
text-align: center;
> .st_action {
display: inline-block;
width: 35px;
height: 35px;
margin: 5px;
&.with_text {
width: initial;
> a,
> button {
border-radius: 4%;
text-decoration: none;
}
span {
&.fa {
padding-left: 10px;
}
}
span {
padding: 0 10px 0 0;
}
}
> a,
> button {
display: block;
height: 35px;
width: 100%;
text-align: center;
line-height: 35px;
border-radius: 50%;
background-color: $brand-color-primary;
border: none;
color: #fff;
&:focus {
outline: none;
}
&:hover {
background-color: rgba($brand-color-primary, 0.5);
}
&.delete-button {
background-color: $red;
&:hover {
background-color: darken($red, 5%);
}
}
&.disabled,
&:disabled {
&,
&.delete-button,
&:hover,
&:focus {
background-color: rgba($grey, 0.3);
cursor: not-allowed;
}
}
&.active {
background-color: $brand-color-primary;
}
}
.svg-inline--fa {
margin-right: 0;
}
}
}
&.noselect {
> ul > .st_action > a {
&,
&.delete-button,
&:hover,
&:focus {
background-color: rgba($grey, 0.3);
cursor: not-allowed;
}
}
}
> .info-msg {
font-style: italic;
font-size: 0.85em;
}
//-----------------------------//
// Tables (column by column) //
//-----------------------------//
}
.table.table-2entries {
display: table;
table-layout: fixed;
width: 100%;
> * {
display: table-cell;
vertical-align: top;
}
.th {
padding: 6px 8px;
border-bottom: 2px solid rgba($grey, 0.5);
border-top: 1px solid rgba($grey, 0.5);
// text-transform: capitalize;
.info-button {
position: absolute;
width: 20px;
height: 20px;
top: 0;
right: 0;
margin: 6px 8px;
button {
border: none;
background: $darkgrey;
border-radius: 20px;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 14px;
color: white;
outline: none;
}
}
}
.td {
position: relative;
padding: 6px 8px;
border-bottom: 1px solid rgba($grey, 0.5);
word-wrap: break-word;
hyphens: auto;
> div {
position: relative;
height: calc(100% + 6px);
&.headlined:before {
content: '';
display: block;
border-bottom: 1px solid rgba($grey, 0.5);
margin: -6px -9px 6px -8px;
padding: 6px 9px 6px 8px;
border-right: 1px solid #fff;
height: calc(1.4em + 12px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.t2e-head {
border-right: 1px solid rgba($grey, 0.5);
.th {
text-align: right;
border-top-color: transparent;
> div:not(.btn-group) {
min-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.td > .headlined {
&:before {
content: attr(data-headline);
text-transform: uppercase;
color: rgba($grey, 0.75);
}
}
}
.t2e-item-list {
@include emptyzone(rgba($grey, 0.075), rgba($grey, 0.015));
> div {
display: inline-block;
vertical-align: top;
overflow: auto;
white-space: nowrap;
// border-right: 1px solid rgba($grey, 0.5)
max-width: 100%;
min-width: 330px;
padding-right: 1px;
}
.t2e-item {
display: inline-block;
vertical-align: top;
white-space: normal;
border-left: 1px solid rgba($grey, 0.5);
background-color: #fff;
&:first-child {
border-left: none;
}
&:last-child {
border-right: 1px solid rgba($grey, 0.5);
}
.th {
> div:not(.btn-group) {
min-height: 20px;
}
> *:first-child {
padding-right: 30px;
}
}
.th + .td,
.td:first-child {
> .headlined {
[data-headline] {
position: relative;
overflow: visible;
&:before {
content: attr(data-headline);
display: block;
position: absolute;
z-index: 5;
bottom: calc(100% + 13px);
left: 0;
right: 0;
color: rgba($grey, 0.75);
}
}
}
}
&.disabled {
color: rgba($darkgrey, 0.5);
background-color: rgba(#fff, 0.5);
}
// TD group
> .td-group {
display: inline-block;
vertical-align: top;
> .td {
display: block;
}
}
}
}
}