diff --git a/core/themes/seven/images/arrow-asc-active.png b/core/themes/seven/images/arrow-asc-active.png new file mode 100644 index 0000000..7536eee --- /dev/null +++ b/core/themes/seven/images/arrow-asc-active.png @@ -0,0 +1,3 @@ +PNG + + IHDR 6YtEXtSoftwareAdobe ImageReadyqe<PLTEXtRNS0JIDATxb`F8a2X`! ^Cbl!IENDB` \ No newline at end of file diff --git a/core/themes/seven/images/arrow-asc.png b/core/themes/seven/images/arrow-asc.png index d25b8dd..56d2728 100644 --- a/core/themes/seven/images/arrow-asc.png +++ b/core/themes/seven/images/arrow-asc.png @@ -1,3 +1,3 @@ PNG  - IHDR r|IDAT(c`(? d$HSI#Ɂ3%#b8IENDB` \ No newline at end of file + IHDR 6YtEXtSoftwareAdobe ImageReadyqe<PLTEHutRNS0JIDATxb`F8a2X`! ^Cbl!IENDB` \ No newline at end of file diff --git a/core/themes/seven/images/arrow-desc-active.png b/core/themes/seven/images/arrow-desc-active.png new file mode 100644 index 0000000..f1bf910 --- /dev/null +++ b/core/themes/seven/images/arrow-desc-active.png @@ -0,0 +1,3 @@ +PNG + + IHDR 6YtEXtSoftwareAdobe ImageReadyqe<PLTEXtRNS0J IDATxb`a10 BIENDB` \ No newline at end of file diff --git a/core/themes/seven/images/arrow-desc.png b/core/themes/seven/images/arrow-desc.png index 2feade9..eaf80c5 100644 --- a/core/themes/seven/images/arrow-desc.png +++ b/core/themes/seven/images/arrow-desc.png @@ -1,3 +1,3 @@ PNG  - IHDR r|&IDAT(c`r4'E,d x5'$?R#IENDB` \ No newline at end of file + IHDR 6YtEXtSoftwareAdobe ImageReadyqe<PLTEHutRNS0J IDATxb`a10 BIENDB` \ No newline at end of file diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme index 3b11032..7429e3e 100644 --- a/core/themes/seven/seven.theme +++ b/core/themes/seven/seven.theme @@ -110,35 +110,6 @@ function seven_admin_block_content($variables) { } /** - * Overrides theme_tablesort_indicator(). - * - * Uses Seven's image versions, so the arrows show up as black and not gray on - * gray. - */ -function seven_tablesort_indicator($variables) { - $theme_path = drupal_get_path('theme', 'seven'); - - if($variables['style'] == 'asc') { - $image_uri = $theme_path . '/images/arrow-asc.png'; - $text = t('Sort ascending'); - } - else { - $image_uri = $theme_path . '/images/arrow-desc.png'; - $text = t('Sort descending'); - } - - $image = array( - '#theme' => 'image', - '#uri' => $image_uri, - '#alt' => $text, - '#width' => 13, - '#height' => 13, - '#title' => $text, - ); - return drupal_render($image); -} - -/** * Implements hook_preprocess_install_page(). */ function seven_preprocess_install_page(&$variables) { diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css index 66e1159..131ab0c 100644 --- a/core/themes/seven/style-rtl.css +++ b/core/themes/seven/style-rtl.css @@ -83,20 +83,17 @@ ul.inline li { /** * Tables. */ -table th.active a { - padding: 0 0 0 25px; +th, +td { + text-align: right; } -table th.active img { - left: 3px; - right: auto; +th > a { + padding-left: 16px; + padding-right: 0; + background: transparent no-repeat left center; } -/** - * Exception for webkit bug with the right border of the last cell - * in some tables, since it's webkit only, we can use :last-child - */ -tr td:last-child { - border-left: 1px solid #bebfb9; - border-right: none; +th.active > a { + background-position: left center; } /* Filter */ diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index 86ac064..41a148b 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -430,74 +430,105 @@ div.submitted { */ table { width: 100%; - font-size: 0.923em; margin: 0 0 10px; - border-right: 1px solid #bebfb9; - border-bottom: 1px solid #bebfb9; -} -table td, -table th { - vertical-align: middle; - padding: 8px 10px; - border: 0; - color: #000; + font-size: 0.923em; } -tr.even, -tr.odd { - border-width: 0 1px 0 1px; - border-style: solid; - border-color: #bebfb9; - background: #f3f4ee; +th { + position: relative; + padding: 0 12px; + background: #f5f5f2; + border: solid #bfbfba; + border-width: 1px 0; + color: #333; + text-align: left; /* LTR */ + text-transform: uppercase; } -tr.odd { - background: #fff; +tbody tr { + border-bottom: 1px solid #e6e4df; } -tr.drag { - background: #fe7; +tbody tr:hover { + background: #f7fcff; } -tr.drag-previous { - background: #ffb; +td, +th { + vertical-align: middle; } -table th { - text-transform: uppercase; - background: #e1e2dc; - font-weight: normal; - border-width: 1px; - border-style: solid; - border-color: #bebfb9; - padding: 3px 10px; +td { + padding: 10px 12px 11px; + text-align: left; /* LTR */ } -table th.active { - background: #bdbeb9; +th > a { + display: block; + padding: 11px 16px 9px 0; /* LTR */ + background: transparent no-repeat right center; /* LTR */ + color: #0074bd; + text-decoration: none; } -table th a { + +/** + * Pseudo-element forces the to 100% height and allows the active-bar + * effect to work no matter the height of the table headers. + * + * 1. Must match the left/right padding on the parent + */ +th > a:after { + content: ''; display: block; - position: relative; + position: absolute; + top: 0; + bottom: -1px; + left: 12px; /* 1. */ + right: 12px; /* 1. */ + border-bottom: 2px solid transparent; + transition: all 0.1s; +} +th.active > a { + background-image: url(images/arrow-asc.png); + background-repeat: no-repeat; + background-position: right center; /* LTR */ + color: #004875; +} +th.active > a:after { + border-bottom-color: #004875; +} +th > a:hover, +th.active > a:focus, +th.active > a:hover { + color: #008ee6; + text-decoration: none; } -table th.active a { - padding: 0 25px 0 0; /* LTR */ +th > a:hover:after, +th.active > a:focus:after +th.active > a:hover:after { + border-bottom-color: #008ee6; } -table th.active img { - position: absolute; - top: 3px; - right: 3px; /* LTR */ +th > a:focus, +th > a:hover { + background-image: url(images/arrow-asc-active.png); } -/** - * Force browsers to calculate the width of a 'select all' TH element. - */ -table th.select-all { - width: 1px; +/* Needs implementation */ +[aria-sort="ascending"].active > a { + background-image: url(images/arrow-asc-active.png); } -table td.active { - background: #e9e9dd; +[aria-sort="ascending"].active > a:hover { + background-image: url(images/arrow-asc.png); } -table tr.odd td.active { - background: #f3f4ee; +[aria-sort="descending"].active > a { + background-image: url(images/arrow-desc-active.png); +} +[aria-sort="descending"].active > a:hover { + background-image: url(images/arrow-desc.png); +} +td .item-list ul { + margin: 0; } -table tr.selected td.active, -table tr.selected td { - background: #ffc; - border-color: #eeb; +td.active { + background: none; +} + +/* Force browsers to calculate the width of a 'select all' TH element. */ +th.select-all { + width: 1px; } table.system-status-report tr {