Skip to content
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

Commit 9ad0b4f

Browse files
matthewcarletonmatthewcarleton
authored
Merge pull request #1037 from michael-coker/update-context-selector-masthead
Update Context Selector Example to reflect lastest Masthead design
2 parents 9416127 + cbde93f commit 9ad0b4f

File tree

9 files changed

+78
-51
lines changed

9 files changed

+78
-51
lines changed

‎src/less/context-selector.less‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@
1010
width: @contextselector-pf-bootstrap-select-width-desktop !important;
1111
}
1212
&.open {
13-
background: @navbar-pf-navbar-primary-active-bg-color-stop;
1413
> .dropdown-toggle {
15-
color: @navbar-pf-vertical-active-color;
14+
&,
15+
&:hover,
16+
&:focus {
17+
background: @navbar-pf-item-open-bg-color;
18+
color: @navbar-pf-item-active-color;
19+
}
1620
&:focus {
1721
outline: 0 !important; // don't show restored focus ring when open
1822
}
@@ -28,7 +32,6 @@
2832
padding-left: @contextselector-pf-dropdown-toggle-padding-left;
2933
padding-top: @contextselector-pf-dropdown-toggle-padding-top;
3034
&:focus {
31-
color: @navbar-pf-vertical-active-color;
3235
// restore the focus ring
3336
// Default
3437
outline: thin dotted !important;
@@ -37,10 +40,12 @@
3740
outline-offset: -2px !important;
3841
}
3942
&:hover {
40-
background: @navbar-pf-navbar-primary-active-bg-color-stop;
41-
color: @navbar-pf-vertical-active-color;
4243
outline: 0 !important; // don't show restored focus ring when open
4344
}
45+
&:focus,
46+
&:hover {
47+
background-color: @navbar-pf-item-hover-bg-color;
48+
}
4449
.filter-option {
4550
text-overflow: ellipsis;
4651
}

‎src/less/navbar-vertical.less‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,25 @@
3434
padding: @navbar-pf-vertical-nav-item-iconic-padding;
3535
position: relative;
3636

37-
&:hover,
37+
&:hover {
38+
outline: 0!important;
39+
}
40+
3841
&:focus {
39-
color: @navbar-pf-vertical-active-color;
40-
background-color: transparent;
42+
outline: thin dotted;
43+
outline: 5px auto -webkit-focus-ring-color;
44+
}
4145

42-
.caret,
43-
.fa,
44-
.glyphicon,
45-
.pficon {
46-
color: @navbar-pf-vertical-active-color;
47-
}
46+
&:hover,
47+
&:focus {
48+
background-color: @navbar-pf-item-hover-bg-color;
49+
text-decoration: none;
4850
}
4951

5052
.badge {
5153
background-color: @notification-badge-color;
5254
border-radius: 20px;
53-
color: @navbar-pf-vertical-active-color;
55+
color: @navbar-pf-item-active-color;
5456
cursor: pointer;
5557
font-size: (@font-size-base - 3);
5658
font-weight: 700;
@@ -61,6 +63,7 @@
6163
min-width: 10px;
6264
min-height: 10px;
6365
top: 18px;
66+
6467
&.badge-pf-bordered {
6568
border: 1px solid @navbar-pf-vertical-bg-color;
6669
}
@@ -77,19 +80,19 @@
7780
font-size: @font-size-base;
7881
width: auto;
7982
}
80-
8183
}
8284

8385
.open > .nav-item-iconic {
8486
&,
8587
&:hover,
8688
&:focus {
87-
background: transparent;
89+
background: @navbar-pf-item-open-bg-color;
90+
color: @navbar-pf-item-active-color;
8891

8992
.caret,
9093
.fa,
9194
.pficon {
92-
color: @navbar-pf-vertical-active-color;
95+
color: @navbar-pf-item-active-color;
9396
}
9497
}
9598
}

‎src/less/navbar.less‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
.badge {
5959
background-color: @notification-badge-color;
6060
border-radius: 20px;
61-
color: @navbar-pf-vertical-active-color;
61+
color: @navbar-pf-item-active-color;
6262
cursor: pointer;
6363
font-size: (@font-size-base - 3);
6464
font-weight: 700;
@@ -277,6 +277,9 @@
277277
.navbar-utility {
278278
border-bottom: 1px solid @navbar-pf-navbar-header-border-color;
279279
li.dropdown > .dropdown-toggle {
280+
&:hover {
281+
outline: 0!important;
282+
}
280283
padding-left: 36px;
281284
position: relative;
282285
.pficon-user {
@@ -483,8 +486,8 @@
483486
> .open > a,
484487
> .open > a:hover,
485488
> .open > a:focus {
486-
background: @navbar-pf-navbar-utility-open-bg-color;
487-
color: @navbar-pf-navbar-utility-color;
489+
background: @navbar-pf-item-open-bg-color;
490+
color: @navbar-pf-active-color;
488491
}
489492
> li > a {
490493
border-left: 1px solid @navbar-pf-navbar-utility-border-color;

‎src/less/variables.less‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,14 @@
112112
@navbar-pf-color: @color-pf-black-300;
113113
@navbar-pf-height: 60px;
114114
@navbar-pf-icon-bar-bg-color: @color-pf-white;
115+
@navbar-pf-item-hover-bg-color: rgba(255, 255, 255, .14);
116+
@navbar-pf-item-open-bg-color: rgba(255, 255, 255, .24);
117+
@navbar-pf-item-active-color: @color-pf-white;
115118
@navbar-pf-navbar-navbar-brand-min-width: 270px;
116119
@navbar-pf-navbar-navbar-brand-padding: 8px 0 7px;
117120
@navbar-pf-navbar-navbar-persistent-bg-color: @color-pf-black-150;
118121
@navbar-pf-navbar-navbar-persistent-border-color: @color-pf-black-300;
119-
@navbar-pf-vertical-active-color: @color-pf-white;
122+
@navbar-pf-vertical-active-color: @navbar-pf-item-active-color;
120123
@navbar-pf-vertical-bg-color: #1d1d1d;
121124
@navbar-pf-vertical-bg-repeat: no-repeat;
122125
@navbar-pf-vertical-bg-size: auto 100%;
@@ -140,10 +143,10 @@
140143
@navbar-pf-vertical-nav-item-iconic-padding: 21px 12px;
141144
@nav-pf-container-transition-period: 250ms;
142145
@nav-pf-menu-transition-period: 100ms;
143-
@nav-pf-vertical-active-color: @color-pf-white;
144146
@nav-pf-vertical-active-before-color: @color-pf-blue-300;
145147
@nav-pf-vertical-active-bg-color: @color-pf-black-800;
146148
@nav-pf-vertical-active-border-color: @color-pf-black-900;
149+
@nav-pf-vertical-active-color: @color-pf-white;
147150
@nav-pf-vertical-active-font-weight: 600;
148151
@nav-pf-vertical-active-icon-color: @color-pf-blue-300;
149152
@nav-pf-vertical-badge-color: @color-pf-white;

‎src/sass/converted/patternfly/_context-selector.scss‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@
1010
width: $contextselector-pf-bootstrap-select-width-desktop !important;
1111
}
1212
&.open {
13-
background: $navbar-pf-navbar-primary-active-bg-color-stop;
1413
> .dropdown-toggle {
15-
color: $navbar-pf-vertical-active-color;
14+
&,
15+
&:hover,
16+
&:focus {
17+
background: $navbar-pf-item-open-bg-color;
18+
color: $navbar-pf-item-active-color;
19+
}
1620
&:focus {
1721
outline: 0 !important; // don't show restored focus ring when open
1822
}
@@ -28,7 +32,6 @@
2832
padding-left: $contextselector-pf-dropdown-toggle-padding-left;
2933
padding-top: $contextselector-pf-dropdown-toggle-padding-top;
3034
&:focus {
31-
color: $navbar-pf-vertical-active-color;
3235
// restore the focus ring
3336
// Default
3437
outline: thin dotted !important;
@@ -37,10 +40,12 @@
3740
outline-offset: -2px !important;
3841
}
3942
&:hover {
40-
background: $navbar-pf-navbar-primary-active-bg-color-stop;
41-
color: $navbar-pf-vertical-active-color;
4243
outline: 0 !important; // don't show restored focus ring when open
4344
}
45+
&:focus,
46+
&:hover {
47+
background-color: $navbar-pf-item-hover-bg-color;
48+
}
4449
.filter-option {
4550
text-overflow: ellipsis;
4651
}

‎src/sass/converted/patternfly/_navbar-vertical.scss‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,25 @@
3434
padding: $navbar-pf-vertical-nav-item-iconic-padding;
3535
position: relative;
3636

37-
&:hover,
37+
&:hover {
38+
outline: 0!important;
39+
}
40+
3841
&:focus {
39-
color: $navbar-pf-vertical-active-color;
40-
background-color: transparent;
42+
outline: thin dotted;
43+
outline: 5px auto -webkit-focus-ring-color;
44+
}
4145

42-
.caret,
43-
.fa,
44-
.glyphicon,
45-
.pficon {
46-
color: $navbar-pf-vertical-active-color;
47-
}
46+
&:hover,
47+
&:focus {
48+
background-color: $navbar-pf-item-hover-bg-color;
49+
text-decoration: none;
4850
}
4951

5052
.badge {
5153
background-color: $notification-badge-color;
5254
border-radius: 20px;
53-
color: $navbar-pf-vertical-active-color;
55+
color: $navbar-pf-item-active-color;
5456
cursor: pointer;
5557
font-size: ($font-size-base - 3);
5658
font-weight: 700;
@@ -61,6 +63,7 @@
6163
min-width: 10px;
6264
min-height: 10px;
6365
top: 18px;
66+
6467
&.badge-pf-bordered {
6568
border: 1px solid $navbar-pf-vertical-bg-color;
6669
}
@@ -77,19 +80,19 @@
7780
font-size: $font-size-base;
7881
width: auto;
7982
}
80-
8183
}
8284

8385
.open > .nav-item-iconic {
8486
&,
8587
&:hover,
8688
&:focus {
87-
background: transparent;
89+
background: $navbar-pf-item-open-bg-color;
90+
color: $navbar-pf-item-active-color;
8891

8992
.caret,
9093
.fa,
9194
.pficon {
92-
color: $navbar-pf-vertical-active-color;
95+
color: $navbar-pf-item-active-color;
9396
}
9497
}
9598
}

‎src/sass/converted/patternfly/_navbar.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
.badge {
5959
background-color: $notification-badge-color;
6060
border-radius: 20px;
61-
color: $navbar-pf-vertical-active-color;
61+
color: $navbar-pf-item-active-color;
6262
cursor: pointer;
6363
font-size: ($font-size-base - 3);
6464
font-weight: 700;
@@ -277,6 +277,9 @@
277277
.navbar-utility {
278278
border-bottom: 1px solid $navbar-pf-navbar-header-border-color;
279279
li.dropdown > .dropdown-toggle {
280+
&:hover {
281+
outline: 0!important;
282+
}
280283
padding-left: 36px;
281284
position: relative;
282285
.pficon-user {
@@ -483,8 +486,8 @@
483486
> .open > a,
484487
> .open > a:hover,
485488
> .open > a:focus {
486-
background: $navbar-pf-navbar-utility-open-bg-color;
487-
color: $navbar-pf-navbar-utility-color;
489+
background: $navbar-pf-item-open-bg-color;
490+
color: $navbar-pf-active-color;
488491
}
489492
> li > a {
490493
border-left: 1px solid $navbar-pf-navbar-utility-border-color;

‎src/sass/converted/patternfly/_variables.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,14 @@ $navbar-pf-border-color: $color-pf-bl
112112
$navbar-pf-color: $color-pf-black-300 !default;
113113
$navbar-pf-height: 60px !default;
114114
$navbar-pf-icon-bar-bg-color: $color-pf-white !default;
115+
$navbar-pf-item-hover-bg-color: rgba(255, 255, 255, .14) !default;
116+
$navbar-pf-item-open-bg-color: rgba(255, 255, 255, .24) !default;
117+
$navbar-pf-item-active-color: $color-pf-white !default;
115118
$navbar-pf-navbar-navbar-brand-min-width: 270px !default;
116119
$navbar-pf-navbar-navbar-brand-padding: 8px 0 7px !default;
117120
$navbar-pf-navbar-navbar-persistent-bg-color: $color-pf-black-150 !default;
118121
$navbar-pf-navbar-navbar-persistent-border-color: $color-pf-black-300 !default;
119-
$navbar-pf-vertical-active-color: $color-pf-white !default;
122+
$navbar-pf-vertical-active-color: $navbar-pf-item-active-color !default;
120123
$navbar-pf-vertical-bg-color: #1d1d1d !default;
121124
$navbar-pf-vertical-bg-repeat: no-repeat !default;
122125
$navbar-pf-vertical-bg-size: auto 100% !default;
@@ -140,10 +143,10 @@ $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg: $color-pf-wh
140143
$navbar-pf-vertical-nav-item-iconic-padding: 21px 12px !default;
141144
$nav-pf-container-transition-period: 250ms !default;
142145
$nav-pf-menu-transition-period: 100ms !default;
143-
$nav-pf-vertical-active-color: $color-pf-white !default;
144146
$nav-pf-vertical-active-before-color: $color-pf-blue-300 !default;
145147
$nav-pf-vertical-active-bg-color: $color-pf-black-800 !default;
146148
$nav-pf-vertical-active-border-color: $color-pf-black-900 !default;
149+
$nav-pf-vertical-active-color: $color-pf-white !default;
147150
$nav-pf-vertical-active-font-weight: 600 !default;
148151
$nav-pf-vertical-active-icon-color: $color-pf-blue-300 !default;
149152
$nav-pf-vertical-badge-color: $color-pf-white !default;

‎tests/pages/_includes/widgets/layouts/navbar-vertical.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,19 @@
2121
{% include widgets/framework/application-launcher.html icons=launchericons grid=launchergrid %}
2222
{% endif %}
2323
<li class="dropdown">
24-
<a href="#0" class="dropdown-toggle nav-item-iconic" id="dropdownMenu1{{include.navindex}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
24+
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu1{{include.navindex}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2525
<span title="Help" class="fa pficon-help"></span>
26-
<span class="caret"></span>
27-
</a>
26+
</button>
2827
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1{{include.navindex}}">
2928
<li><a href="#0">Help</a></li>
3029
<li><a href="#0">About</a></li>
3130
</ul>
3231
</li>
3332
<li class="dropdown">
34-
<a href="#0" class="dropdown-toggle nav-item-iconic" id="dropdownMenu2{{include.navindex}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
33+
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu2{{include.navindex}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
3534
<span title="Username" class="fa pficon-user"></span>
3635
Brian Johnson <span class="caret"></span>
37-
</a>
36+
</button>
3837
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2{{include.navindex}}">
3938
<li><a href="#0">Preferences</a></li>
4039
<li><a href="#0">Logout</a></li>

0 commit comments

Comments
 (0)