diff --git a/docs/src/pages/components/Table.vue b/docs/src/pages/components/Table.vue index 9042313..a83883f 100644 --- a/docs/src/pages/components/Table.vue +++ b/docs/src/pages/components/Table.vue @@ -70,10 +70,6 @@ - - Remove - -

Nutrition

@@ -85,6 +81,16 @@
+ + + delete + + + + more_vert + + + diff --git a/src/components/mdTable/mdTable.scss b/src/components/mdTable/mdTable.scss index ae7395c..bd755cb 100644 --- a/src/components/mdTable/mdTable.scss +++ b/src/components/mdTable/mdTable.scss @@ -6,7 +6,7 @@ overflow: auto; &.md-transition-off { - tr, + .md-table-cell, .md-checkbox .md-checkbox-container, .md-checkbox .md-checkbox-container:after { transition: none !important; @@ -20,7 +20,7 @@ overflow: hidden; } - tbody tr { + tbody .md-table-row { border-top: 1px solid #e0e0e0; &.md-selected .md-table-cell { @@ -307,3 +307,26 @@ font-size: 20px; } } + +.md-table-alternate-header { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 10; + pointer-events: none; + opacity: 0; + transition: $swift-ease-out; + transition-duration: .3s; + + &.md-active { + pointer-events: auto; + opacity: 1; + transform: translate3D(0, 0, 0); + } + + .md-counter { + margin-left: 8px; + flex: 1; + } +} diff --git a/src/components/mdTable/mdTable.theme b/src/components/mdTable/mdTable.theme index 3ca224f..3a28c7c 100644 --- a/src/components/mdTable/mdTable.theme +++ b/src/components/mdTable/mdTable.theme @@ -10,4 +10,18 @@ color: #{'BACKGROUND-CONTRAST-A100'}; } } + + .md-table-alternate-header, + &.md-table-alternate-header { + background-color: #{'BACKGROUND-COLOR-A100'}; + + .md-toolbar { + background-color: #{'ACCENT-COLOR-A100-0.2'}; + color: #{'ACCENT-CONTRAST-A100'}; + } + + .md-counter { + color: #{'ACCENT-COLOR'}; + } + } } diff --git a/src/components/mdTable/mdTable.vue b/src/components/mdTable/mdTable.vue index 6c8ce09..59f6ff1 100644 --- a/src/components/mdTable/mdTable.vue +++ b/src/components/mdTable/mdTable.vue @@ -1,5 +1,5 @@