table-views.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. //
  2. // Table views
  3. // --------------------------------------------------
  4. .table-view {
  5. padding-left: 0;
  6. margin-top: 0;
  7. margin-bottom: 15px;
  8. list-style: none; // Remove usual bullet styles from table view
  9. background-color: #fff;
  10. border-top: $border-default;
  11. border-bottom: $border-default;
  12. }
  13. // Pad each table view item and add dividers
  14. .table-view-cell {
  15. position: relative;
  16. padding: 11px 65px 11px 15px;
  17. overflow: hidden;
  18. border-bottom: $border-default;
  19. // Remove the border from the last table view item
  20. &:last-child {
  21. border-bottom: 0;
  22. }
  23. // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
  24. > a:not(.btn) {
  25. position: relative;
  26. display: block;
  27. padding: inherit;
  28. margin: -11px -65px -11px -15px; // Make the entire list item tappable.
  29. overflow: hidden;
  30. color: inherit;
  31. &:active {
  32. background-color: #eee;
  33. }
  34. }
  35. p {
  36. margin-bottom: 0;
  37. }
  38. }
  39. // Table view dividers
  40. // --------------------------------------------------
  41. .table-view-divider {
  42. padding-top: 6px;
  43. padding-bottom: 6px;
  44. padding-left: 15px;
  45. margin-top: -1px; // Hides the border of the previous list item
  46. margin-left: 0;
  47. font-weight: $font-weight;
  48. color: #999;
  49. background-color: #fafafa;
  50. border-top: $border-default;
  51. border-bottom: $border-default;
  52. }
  53. // Table-views with media (images,avatars, icons)
  54. // --------------------------------------------------
  55. .table-view .media,
  56. .table-view .media-body {
  57. overflow: hidden;
  58. }
  59. .table-view .media-object {
  60. &.pull-left {
  61. margin-right: 10px;
  62. }
  63. &.pull-right {
  64. margin-left: 10px;
  65. }
  66. }
  67. // Table-views with buttons, badges and toggles
  68. // --------------------------------------------------
  69. .table-view-cell,
  70. .table-view-cell > a {
  71. > .btn,
  72. > .badge,
  73. > .toggle {
  74. position: absolute;
  75. top: 50%;
  76. right: 15px;
  77. @include transform(translateY(-50%));
  78. }
  79. // If the cell has a chevron, give some more room.
  80. .navigate-left,
  81. .navigate-right,
  82. .push-left,
  83. .push-right {
  84. > .btn,
  85. > .badge,
  86. > .toggle {
  87. right: 35px;
  88. }
  89. }
  90. }
  91. // If the table view is the first component, give it extra margin on top.
  92. .content > .table-view:first-child {
  93. margin-top: 15px;
  94. }