Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Demos: Hover state update on Nav Panel, Search Results, all Text links #8389

Closed
cogwurx wants to merge 3 commits into from
Closed

Demos: Hover state update on Nav Panel, Search Results, all Text links #8389

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b214479
Demos: Hover state update on Nav Panel, Search Results, all Text links
Feb 22, 2016
c4be13e
Demos: fixed spacing/style guide in code. Fixed the focus hover state…
Mar 9, 2016
335aadc
Demos - removed commented out code, because I forgot to take them out…
Mar 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 30 additions & 20 deletions demos/_assets/css/jqm-demos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,6 +518,13 @@
opacity: .75;
}

.ui-page-theme-a a:hover,
html .ui-bar-a a:hover,
html .ui-body-a a:hover,
html body .ui-group-theme-a a:hover {
color: #003966;
}

@media ( max-width: 60em ) {
.jqm-content > .jqm-api-docs-link::before,
.jqm-content > .jqm-api-docs-link::after {
Expand Down Expand Up @@ -713,20 +720,21 @@
background: #ececec;
}

.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button:hover,
.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button:focus,
.jqm-navmenu-panel .ui-listview li > .ui-listview-item-button:active,
.jqm-navmenu-panel .ui-listview li > .ui-accordion-header:hover,
.jqm-navmenu-panel .ui-listview li > .ui-accordion-header:focus,
.jqm-navmenu-panel .ui-listview li > .ui-accordion-header:active {
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-listview-item-button:hover,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-listview-item-button:focus,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-listview-item-button:active,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-accordion-header:hover,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-accordion-header:active,
Copy link
Contributor

@jaspermdegroot jaspermdegroot Mar 10, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li > .ui-accordion-header:focus, is missing here

Copy link
Contributor Author

@cogwurx cogwurx Mar 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I removed that due to the focus having a dark gray background style remaining on the accordion header after closure.

Copy link
Contributor

@jaspermdegroot jaspermdegroot Mar 17, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, that's because it has focus after closing. If you now tab key navigate through the menu, buttons that are links get focus style but buttons that are accordion headers don't. That's bad.

.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content .ui-accordion-header:hover {
color: #333;
text-shadow: 0 1px 0 #f3f3f3;
text-shadow: 0 1px 0 #f3f3f3;
background: #cccccc;
}

.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content .ui-accordion-header:hover {
background: transparent;
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content li > .ui-listview-item-button:hover {
background: #cccccc;
}


.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-listview-item-button:focus,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-header:focus {
outline: 0;
Expand All @@ -735,8 +743,9 @@
box-shadow: inset 0 0 1px #3388cc;
}

.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-header.ui-accordion-header-active {
background: #e1e1e1;
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-header.ui-accordion-header-active,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content .ui-accordion-header.ui-accordion-header-active {
background: #d2eac6;
color: #333;
text-shadow: 0 1px 0 #f3f3f3;
}
Expand All @@ -746,12 +755,6 @@
border-bottom: 2px solid #e1e1e1;
}

.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content .ui-accordion-header.ui-accordion-header-active {
background: #ededed;
color: #333;
text-shadow: 0 1px 0 #f3f3f3;
}

.jqm-navmenu-panel > .ui-panel-inner > .ui-listview > li .ui-accordion-content .ui-accordion-content-active {
background: #fafafa;
border-bottom: 2px solid #ededed;
Expand All @@ -760,6 +763,11 @@
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li.jqm-3rd-party .ui-listview-item-button {
background: #ebeff3;
}
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content li.jqm-3rd-party > .ui-listview-item-button:hover,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content li.jqm-3rd-party > .ui-listview-item-button:active,
.jqm-navmenu-panel > .ui-panel-inner > .ui-listview li .ui-accordion-content li.jqm-3rd-party > .ui-listview-item-button:focus {
background: #bbd9ee;
}

li.jqm-3rd-party .ui-listview-item-button::before {
content: "3rd Party";
Expand Down Expand Up @@ -965,7 +973,8 @@ li.jqm-3rd-party .ui-listview-item-button::before {
.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:hover,
.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus,
.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:active {
color: #333;
background: #ebeff3;
color: #000000;
}

.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus {
Expand Down Expand Up @@ -1000,7 +1009,8 @@ li.jqm-3rd-party .ui-listview-item-button::before {
}

.jqm-search-results-highlight {
color: #0e82a5;
background: #77d1ef;
text-shadow: 0 1px 0 #bbe8f7;
}

@media ( min-width: 60em ) {
Expand Down