app/assets/stylesheets/components/_tables.sass
//----------//
// 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: $blue
+ tbody
> tr > td
border-top: none
border-bottom: 1px solid rgba($grey, 0.5)
padding: 6px 8px
vertical-align: middle
&.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
&: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
// 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 $blue
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: $blue
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
// select_toolbox
.select_toolbox
padding: 10px
background-color: #fff
box-shadow: 0 0 3px $darkgrey
position: fixed
z-index: 2000
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
> a, > button
display: block
height: 35px
width: 100%
text-align: center
line-height: 35px
border-radius: 50%
background-color: $blue
border: none
color: #fff
&:focus
outline: none
&:hover
background-color: rgba($blue, 0.5)
&[title='Supprimer']
background-color: $red
&:hover
background-color: darken($red, 5%)
&.disabled, &:disabled
&, &[title='Supprimer'], &:hover, &:focus
background-color: rgba($grey, 0.3)
cursor: not-allowed
&.noselect
> ul > .st_action > a
&, &[title='Supprimer'], &: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)
.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
.td > .headlined
&:before
content: attr(data-headline)
text-transform: uppercase
color: rgba($grey, 0.75)
.t2e-item-list
+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: 280px
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: 19px
> *: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