Skip to content

Commit

Permalink
Vertically align close and kebab icons in notification drawer
Browse files Browse the repository at this point in the history
Match kebab and close icon default color
Fixes openshift#2218
  • Loading branch information
sg00dwin committed Oct 6, 2017
1 parent ec0a953 commit 6744d66
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 10 deletions.
14 changes: 10 additions & 4 deletions app/styles/_notifications.less
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,16 @@ notification-drawer-wrapper {
}
.drawer-pf-notification-inner {
padding: 15px;
.pficon-close {
color: @color-pf-black-400;
&:hover,&:focus,&:active {
color: @color-pf-black-700;
.drawer-pf-notification-close {
margin-right: (@grid-gutter-width/(-4)); // vertically align with dropdown-kebab-pf
.pficon-close {
color: @gray-darker; // match dropdown-kebab-pf color
&:active,
&:focus,
&:hover
{
text-decoration: none;
}
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions app/views/directives/notifications/notification-body.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
tabindex="0"
ng-click="$ctrl.customScope.markRead(notification)">
<a
class="pull-right"
class="pull-right drawer-pf-notification-close"
href=""
ng-if="!notification.actions.length"
ng-click="$ctrl.customScope.clear(notification, $index, notificationGroup)">
<span class="sr-only">Clear notification</span>
<span aria-hidden="true" class="pull-left pficon pficon-close"></span>
<span aria-hidden="true" class="btn btn-link pull-left pficon pficon-close"></span>
</a>
<div
uib-dropdown
Expand Down
4 changes: 2 additions & 2 deletions dist/scripts/templates.js
Original file line number Diff line number Diff line change
Expand Up @@ -7717,9 +7717,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(

$templateCache.put('views/directives/notifications/notification-body.html',
"<div class=\"drawer-pf-notification-inner\" tabindex=\"0\" ng-click=\"$ctrl.customScope.markRead(notification)\">\n" +
"<a class=\"pull-right\" href=\"\" ng-if=\"!notification.actions.length\" ng-click=\"$ctrl.customScope.clear(notification, $index, notificationGroup)\">\n" +
"<a class=\"pull-right drawer-pf-notification-close\" href=\"\" ng-if=\"!notification.actions.length\" ng-click=\"$ctrl.customScope.clear(notification, $index, notificationGroup)\">\n" +
"<span class=\"sr-only\">Clear notification</span>\n" +
"<span aria-hidden=\"true\" class=\"pull-left pficon pficon-close\"></span>\n" +
"<span aria-hidden=\"true\" class=\"btn btn-link pull-left pficon pficon-close\"></span>\n" +
"</a>\n" +
"<div uib-dropdown class=\"dropdown pull-right dropdown-kebab-pf\" ng-if=\"notification.actions.length\">\n" +
"<button uib-dropdown-toggle class=\"btn btn-link dropdown-toggle\" type=\"button\" id=\"dropdownKebabRight-{{$id}}\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\">\n" +
Expand Down
5 changes: 3 additions & 2 deletions dist/styles/main.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 6744d66

Please sign in to comment.