for-client/css/my-tables.styl
gridColor = rgba(255,255,255,0.9)
.my-grid
background-color gridColor
.my-grid caption
background-color gridColor
.my-grid
td, th
background-color gridColor
border-table-no-right()
border-bottom 2px solid #997
border-top 2px solid #997
border-left 2px solid #997
margin 0px
border-spacing 0px
border-collapse collapse
border-table()
border-table-no-right()
border-right 2px solid #997
.my-grid
border-table-no-right()
nowrap()
@media print
white-space unset
white-space pre
max-width 300px
.my-grid td
padding-left 2px
padding-right 3px
border-table()
nowrap()
.my-grid td[my-colname]
overflow hidden
/*
.my-grid[my-orientation=vertical] td
border-table()
white-space wrap
overflow scroll
*/
.my-grid tr td x
border-bottom 2px solid #666
border-top 2px solid #DDD
.my-grid th
font-size 90%
border-table()
.my-grid tbody th
nowrap()
overflow hidden
.my-grid caption
border-table()
.my-grid tfoot
color #777
font-size 90%
.my-grid thead th
white-space nowrap
.th-name
overflow hidden
.my-grid thead th.th-detail
font-size 60%
white-space wrap
.my-grid td[io-status=pending]
background-color #CDE
.my-grid td[io-status=updating]
background-color #DEF
.my-grid td[io-status=error]
background-color #DAA
.my-grid td[io-status=temporal-ok]
background-color #ADA
.my-grid td[io-status=write-read-conflict]
background-color #DAD
.my-grid td[io-status=background-change]
background-color #ADD
.table-button
margin 0px
border 0px
padding 0px
.table-button
background-color gridColor
.table-button img
height 16px
[has-filter='1']
[when-filter=no]
display none
[when-filter=yes]
display inherit
[has-filter='0']
[when-filter=yes]
display none
[when-filter=no]
display inherit
.filter-line
th
padding 0px
vertical-align bottom
.filter-line
td
padding 0px
vertical-align bottom
.grid-dummy-cell-ini
height: 1px;
width: 1px;
transition: height 0.6s ease;
.grid-dummy-cell-del
transition: height 0.6s ease;
@keyframes animateheight {
from {transform: scaleY(0.1)}
to {transform: scaleY(1)}
}
.empty-right-column{
background-color inherit !important
border inherit !important
padding 0 !important
}
.my-grid td.autoFilter{
nowrap()
overflow hidden
white-space nowrap
padding-left 16px
background padding-box #CEF no-repeat
background-size 16px
min-height 20px
min-width 20px
}
.number-decimals
font-size 90%
.date-year
font-size 90%
.img-lupa
height 16px
[my-orientation=vertical].my-grid
td
max-width 700px
white-space inherit
overflow inherit
th
text-align left
max-width 700px
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
rotate-infinite()
-webkit-animation-name rotate
-webkit-animation-duration 2s
-webkit-animation-iteration-count infinite
-webkit-animation-timing-function linear
div.dialog-export
text-align left
.img-preparing
height 64px
width 64px
margin-bottom 10px
rotate-infinite()
.state-dialog
display inherit
.state-preparing
display none
.state-ready
display none
div.dialog-export[current-state="preparing"]
.state-dialog
opacity 75%
.state-preparing
display inherit
.state-ready
display none
div.dialog-export[current-state="ready"]
.state-dialog
opacity 75%
.state-preparing
display none
.state-ready
display inherit
.dialog-menu .mini-menu-opt-img
height 24px
width 24px
border 2px
padding 2px
[inherited-pk-column=yes]
display none
background-color #CCC
[show-inherited-keys=yes] [inherited-pk-column=yes]
display table-cell
.hide-or-menu
min-width 100px
.my-grid
tfoot
th
text-align left
.head-info
text-align left
padding 4px
font-weight normal
font-size 90%
.sort-img
margin 0 6px
[ordered-direction="1"][ordered-order="1"]
background url("../img/order-arrow-up-1.png") top no-repeat
[ordered-direction="-1"][ordered-order="1"]
background url("../img/order-arrow-down-1.png") top no-repeat
[ordered-direction="1"][ordered-order="2"]
background url("../img/order-arrow-up-2.png") top no-repeat
[ordered-direction="-1"][ordered-order="2"]
background url("../img/order-arrow-down-2.png") top no-repeat
[ordered-direction="1"]
background url("../img/order-arrow-up-3.png") top no-repeat
[ordered-direction="-1"]
background url("../img/order-arrow-down-3.png") top no-repeat
td[my-mandatory]:empty
background url("../img/mandatory.png") top right no-repeat
background-size 12px 12px
td[my-mandatory=pk]:empty
background url("../img/mandatory-pk.png") top right no-repeat
background-size 12px 12px
th.th-agg
background-color #DDD
@media print
.grid-th-actions
display none
.grid-th-details
display none
.my-grid th button
display none
table
max-width 100%
font-size 80%
.img-lupa
display none
.my-grid th
font-size 80%
.my-grid td.my-detail-grid
overflow-x visible
border-right none
.my-grid[error-list=no-errors]
>caption
background-color #8D8
white-space nowrap
thead
display none
tbody
display none
tfoot
display none
.my-grid[error-list=have-errors]
>caption
background-color #F44
white-space nowrap
.my-grid > tbody > tr:hover
>td, >th
box-shadow inset 0 -1px 0 0 rgba(0,0,255,0.7)
&.my-detail-grid
box-shadow none
.my-grid > tbody > tr[current_line]
>td, >th
box-shadow inset 0 -1px 0 0 rgba(0,0,0,0.7)
.my-grid > thead > tr > th
position sticky
background-clip padding-box
outline 1px solid #997
top 0
&[my-pk-column], &[my-fixed2left-column]
left 0
z-index 1
.my-grid > thead > tr.head-info-row > th
position static
.my-grid > * > tr > *
&[my-pk-column], &[my-fixed2left-column]
position sticky
outline 1px solid #997
left 0
/* background-clip: padding-box; outline:2px solid black; */
.my-grid > tbody > [not-here=yes] > td
background-color #ccc
color #888