Skip to content

Commit b6216f7

Browse files
committed
Vertically align close and kebab icons in notification drawer
Match kebab and close icon default color Fixes #2218
1 parent 5e7f02a commit b6216f7

File tree

4 files changed

+21
-16
lines changed

4 files changed

+21
-16
lines changed

app/styles/_notifications.less

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,16 @@ notification-drawer-wrapper {
5959
}
6060
.drawer-pf-notification-inner {
6161
padding: 15px;
62-
.pficon-close {
63-
color: @color-pf-black-400;
64-
&:hover,&:focus,&:active {
65-
color: @color-pf-black-700;
62+
.drawer-pf-notification-close {
63+
margin-right: (@grid-gutter-width/(-4)); // vertically align with dropdown-kebab-pf
64+
.pficon-close {
65+
color: @gray-darker; // match dropdown-kebab-pf color
66+
&:active,
67+
&:focus,
68+
&:hover
69+
{
70+
text-decoration: none;
71+
}
6672
}
6773
}
6874
}

app/views/directives/notifications/notification-body.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@
22
class="drawer-pf-notification-inner"
33
tabindex="0"
44
ng-click="$ctrl.customScope.markRead(notification)">
5-
<a
6-
class="pull-right"
7-
href=""
5+
<button
6+
class="btn btn-link pull-right drawer-pf-notification-close"
7+
type="button"
88
ng-if="!notification.actions.length"
99
ng-click="$ctrl.customScope.clear(notification, $index, notificationGroup)">
10-
<span class="sr-only">Clear notification</span>
11-
<span aria-hidden="true" class="pull-left pficon pficon-close"></span>
12-
</a>
10+
<span aria-hidden="true" class="pficon pficon-close"></span>
11+
</button>
1312
<div
1413
uib-dropdown
1514
class="dropdown pull-right dropdown-kebab-pf"

dist/scripts/templates.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7719,10 +7719,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
77197719

77207720
$templateCache.put('views/directives/notifications/notification-body.html',
77217721
"<div class=\"drawer-pf-notification-inner\" tabindex=\"0\" ng-click=\"$ctrl.customScope.markRead(notification)\">\n" +
7722-
"<a class=\"pull-right\" href=\"\" ng-if=\"!notification.actions.length\" ng-click=\"$ctrl.customScope.clear(notification, $index, notificationGroup)\">\n" +
7723-
"<span class=\"sr-only\">Clear notification</span>\n" +
7724-
"<span aria-hidden=\"true\" class=\"pull-left pficon pficon-close\"></span>\n" +
7725-
"</a>\n" +
7722+
"<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" +
7723+
"<span aria-hidden=\"true\" class=\"pficon pficon-close\"></span>\n" +
7724+
"</button>\n" +
77267725
"<div uib-dropdown class=\"dropdown pull-right dropdown-kebab-pf\" ng-if=\"notification.actions.length\">\n" +
77277726
"<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" +
77287727
"<span class=\"fa fa-ellipsis-v\"></span>\n" +

dist/styles/main.css

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)