Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Front End styling tidied up for Search Bar and Nav Links in the Header #266

Closed
wants to merge 4 commits into from
Closed

Front End styling tidied up for Search Bar and Nav Links in the Header #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
24756e2
updated nav links padding so they don't overlap the menu at narrow br…
samuelgoddard Apr 26, 2018
7f52977
updated search box so it doesn't break at narrow viewpoints, now abso…
samuelgoddard Apr 26, 2018
c90dd82
: removed, change request - https://github.com/vuejs/vuepress/pull/26…
samuelgoddard Apr 30, 2018
a235176
multiple media queries merged
samuelgoddard Apr 30, 2018
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
11 changes: 7 additions & 4 deletions lib/default-theme/NavLinks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,17 +117,20 @@ export default {
.repo-link
margin-left 1.5rem

@media (max-width: $MQMobile)
@media (min-width: $MQMobile)
.nav-links
.nav-item, .repo-link
margin-left 0

@media (min-width: $MQMobile)
margin-left 0.75rem
.nav-links a
&:hover, &.router-link-active
color $textColor
.nav-item > a
&:hover, &.router-link-active
margin-bottom -2px
border-bottom 2px solid lighten($accentColor, 8%)

@media (min-width: $MQNarrow)
.nav-links
.nav-item, .repo-link
margin-left 1.5rem
</style>
37 changes: 28 additions & 9 deletions lib/default-theme/SearchBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,29 +184,48 @@ export default {
a
color $accentColor

@media (max-width: $MQNarrow)
@media (max-width: $MQMobile)
Copy link
Member

Choose a reason for hiding this comment

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

This should be merged with the media query on line 228

.search-box
margin-right 0
display inline-block
input
position relative
left 1rem
cursor pointer
width 0
border-color transparent
position relative
left 1rem
background-color white
z-index 10
&:focus
cursor text
left 0
width 10rem
suggestions:
rigt 0

@media (max-width: $MQNarrow) and (min-width: $MQMobile)
@media (min-width: $MQMobile) and (max-width: $MQNarrow)
.search-box
.suggestions
position relative
display inline-block
width 30px
height 23px
margin-right 0
input
cursor pointer
width 0
border-color transparent
position absolute
background-color white
z-index 10
left 0
top 0
&:focus
cursor text
width 10rem

@media (max-width: $MQMobile)
@media (max-width: $MQNarrow) and (min-width: $MQMobile)
.search-box
margin-right 0
.suggestions
right 0
left 0

@media (max-width: $MQMobileNarrow)
.search-box
Expand Down