68 lines
1.7 KiB
Stylus
68 lines
1.7 KiB
Stylus
|
|
// A snap table is an abstraction of a full page table that I use repeatedly in projects. All of the table dialogs (editing, new, details, functions, etc) are embedded in the table its self.
|
|
// A basic table will have a load more link in the controls, and will load a fixed number of values. A scroll bar attached to the table contents will provide means of accessing all the data.
|
|
// The table header will be separated (in a separate HTML table) such that it is always visible.
|
|
// Often an action column will be in the mix to provide buttons related to the row, or if in the header will be an action on the table (such as a + button for adding new rows).
|
|
.snapTable
|
|
display table
|
|
content-box border-box
|
|
padding 10px 20px
|
|
height 100%
|
|
width 100%
|
|
text-align left
|
|
position relative
|
|
|
|
.tableControls
|
|
display table
|
|
width 100%
|
|
text-align right
|
|
margin-right 20px
|
|
a
|
|
font-size 12px
|
|
font-family "Arial", san-serif
|
|
font-weight 800
|
|
color #2d1b8c
|
|
text-decoration none
|
|
a:hover
|
|
text-decoration underline
|
|
a.disabled
|
|
visibility hidden
|
|
.table
|
|
table-layout fixed
|
|
min-width 100%
|
|
tr.selected
|
|
background-color #feff00
|
|
.separatedTableHeader
|
|
.actions
|
|
text-align center
|
|
.listContainer
|
|
position absolute
|
|
top 100px
|
|
left 0
|
|
right 0
|
|
bottom 0
|
|
.listRow
|
|
display table-row
|
|
.listCell
|
|
display table-cell
|
|
position relative
|
|
height 100%
|
|
width 100%
|
|
.tableContainer
|
|
position absolute
|
|
top 0
|
|
bottom 0
|
|
left 0
|
|
right 0
|
|
width auto
|
|
height auto
|
|
border 0
|
|
font-size 12.5px
|
|
overflow-y auto
|
|
table
|
|
table-layout fixed
|
|
width 100%
|
|
thead
|
|
display none
|
|
visibility hidden
|