Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-08-26 20:22:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refined header bar styles

Browse Source 
- Updated many items to be flexbox-based.
- Updated & aligned hover states across header bar items.
This commit is contained in:
Dan Brown 2022-05-17 14:16:43 +01:00
parent 340c9ec7a1
commit 4866a3a198
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 102 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
resources/sass/_header.scss
View File

@ -21,19 +21,28 @@ header {
color: rgb(250, 250, 250); color: rgb(250, 250, 250);
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
box-shadow: $bs-card; box-shadow: $bs-card;
padding: $-xxs 0;
@include lightDark(border-bottom-color, #DDD, #000); @include lightDark(border-bottom-color, #DDD, #000);
@include whenDark { @include whenDark {
filter: saturate(0.8) brightness(0.8); filter: saturate(0.8) brightness(0.8);
} }
.header-links {
display: flex;
align-items: center;
justify-content: end;
}
.links { .links {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.links a { .links a {
display: inline-block; display: inline-block;
padding: $-m; padding: 10px $-m;
color: #FFF; color: #FFF;
border-radius: 3px;
}
.links a:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, .15);
} }
.dropdown-container { .dropdown-container {
padding-inline-start: $-m; padding-inline-start: $-m;
@ -49,19 +58,25 @@ header {
.user-name { .user-name {
vertical-align: top; vertical-align: top;
position: relative; position: relative;
display: inline-block; display: inline-flex;
align-items: center;
cursor: pointer; cursor: pointer;
> * { padding: $-s;
vertical-align: top; margin: 0 (-$-s);
} border-radius: 3px;
gap: $-xs;
> span { > span {
padding-inline-start: $-xs; padding-inline-start: $-xs;
display: inline-block; display: inline-block;
padding-top: $-xxs; line-height: 1;
} }
> svg { > svg {
padding-top: 4px;
font-size: 18px; font-size: 18px;
margin-top: -2px;
margin-inline-end: 0;
}
&:hover {
background-color: rgba(255, 255, 255, 0.15);
} }
@include between($l, $xl) { @include between($l, $xl) {
padding-inline-start: $-xs; padding-inline-start: $-xs;
@ -79,7 +94,6 @@ header {
header .search-box { header .search-box {
display: inline-block; display: inline-block;
margin-top: 10px;
input { input {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
@ -91,12 +105,15 @@ header .search-box {
padding-inline-start: 40px; padding-inline-start: 40px;
&:focus { &:focus {
outline: none; outline: none;
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.4);
} }
} }
button { button {
z-index: 1; z-index: 1;
left: 16px; left: 16px;
top: 10px;
color: #FFF;
opacity: 0.6;
@include lightDark(color, rgba(255, 255, 255, 0.8), #AAA); @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
@include rtl { @include rtl {
left: auto; left: auto;
@ -106,36 +123,39 @@ header .search-box {
margin-block-end: 0; margin-block-end: 0;
} }
} }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ input::placeholder {
color: #DDD; color: #FFF;
} opacity: 0.6;
::-moz-placeholder { /* Firefox 19+ */
color: #DDD;
} }
@include between($l, $xl) { @include between($l, $xl) {
max-width: 200px; max-width: 200px;
} }
&:focus-within button {
opacity: 1;
}
} }
.logo { .logo {
display: inline-block; display: inline-flex;
padding: ($-s - 6px) $-s;
margin: 6px (-$-s);
gap: $-s;
align-items: center;
border-radius: 4px;
&:hover { &:hover {
color: #FFF; color: #FFF;
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, .15);
} }
} }
.logo-text { .logo-text {
display: inline-block;
font-size: 1.8em; font-size: 1.8em;
color: #fff; color: #fff;
font-weight: 400; font-weight: 400;
@include padding(14px, $-l, 14px, 0);
vertical-align: top;
line-height: 1; line-height: 1;
} }
.logo-image { .logo-image {
@include margin($-xs, $-s, $-xs, 0);
vertical-align: top;
height: 43px; height: 43px;
} }

4
resources/views/common/header.blade.php
View File

@ -17,7 +17,7 @@
class="mobile-menu-toggle hide-over-l">@icon('more')</button> class="mobile-menu-toggle hide-over-l">@icon('more')</button>
</div> </div>
<div class="flex-container-row justify-center hide-under-l"> <div class="flex-container-column items-center justify-center hide-under-l">
@if (hasAppAccess()) @if (hasAppAccess())
<form action="{{ url('/search') }}" method="GET" class="search-box" role="search"> <form action="{{ url('/search') }}" method="GET" class="search-box" role="search">
<button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button> <button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button>
@ -28,7 +28,6 @@
@endif @endif
</div> </div>
<div class="text-right">
<nav refs="header-mobile-toggle@menu" class="header-links"> <nav refs="header-mobile-toggle@menu" class="header-links">
<div class="links text-center"> <div class="links text-center">
@if (hasAppAccess()) @if (hasAppAccess())
@ -97,7 +96,6 @@
</div> </div>
@endif @endif
</nav> </nav>
</div>
</div> </div>
</header> </header>