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 #2218
  • Loading branch information
sg00dwin committed Oct 10, 2017
1 parent 5e7f02a commit b6216f7
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 16 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
11 changes: 5 additions & 6 deletions app/views/directives/notifications/notification-body.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@
class="drawer-pf-notification-inner"
tabindex="0"
ng-click="$ctrl.customScope.markRead(notification)">
<a
class="pull-right"
href=""
<button
class="btn btn-link pull-right drawer-pf-notification-close"
type="button"
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>
</a>
<span aria-hidden="true" class="pficon pficon-close"></span>
</button>
<div
uib-dropdown
class="dropdown pull-right dropdown-kebab-pf"
Expand Down
7 changes: 3 additions & 4 deletions dist/scripts/templates.js
Original file line number Diff line number Diff line change
Expand Up @@ -7719,10 +7719,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" +
"<span class=\"sr-only\">Clear notification</span>\n" +
"<span aria-hidden=\"true\" class=\"pull-left pficon pficon-close\"></span>\n" +
"</a>\n" +
"<button class=\"btn btn-link pull-right drawer-pf-notification-close\" type=\"button\" ng-if=\"!notification.actions.length\" ng-click=\"$ctrl.customScope.clear(notification, $index, notificationGroup)\">\n" +
"<span aria-hidden=\"true\" class=\"pficon pficon-close\"></span>\n" +
"</button>\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" +
"<span class=\"fa fa-ellipsis-v\"></span>\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 b6216f7

Please sign in to comment.