159 lines
3.1 KiB
SCSS
159 lines
3.1 KiB
SCSS
//
|
|
// topbar.scss
|
|
//
|
|
|
|
.app-topbar {
|
|
top: 0;
|
|
z-index: 1005;
|
|
position: sticky;
|
|
transition: all 0.3s ease-in-out;
|
|
height: $topbar-height;
|
|
background-color: $topbar-bg;
|
|
padding-left: $sidebar-width;
|
|
border-bottom: $card-border-width solid $card-border-color;
|
|
|
|
.navbar-header {
|
|
display: flex;
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
// Search
|
|
.app-search {
|
|
|
|
.form-control {
|
|
border: none;
|
|
padding-left: 40px;
|
|
padding-right: 15px;
|
|
background-color: $topbar-search-bg;
|
|
box-shadow: none;
|
|
height: 38px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.search-widget-icon {
|
|
position: absolute;
|
|
z-index: 10;
|
|
font-size: 18px;
|
|
left: 11px;
|
|
top: 50%;
|
|
color: $gray-500;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search-widget-icon-close {
|
|
right: 7px;
|
|
left: auto !important;
|
|
}
|
|
}
|
|
|
|
|
|
.topbar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: $topbar-height;
|
|
|
|
.topbar-button {
|
|
border: none;
|
|
border-radius: 50%;
|
|
background-color: $topbar-search-bg;
|
|
transition: all 0.3s ease-in-out;
|
|
color: $topbar-item-color;
|
|
padding: $btn-padding-y $btn-padding-y;
|
|
position: relative;
|
|
|
|
&.show,
|
|
&.active,
|
|
&:active,
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topbar-badge {
|
|
right: -7px;
|
|
top: 7px !important;
|
|
}
|
|
}
|
|
|
|
|
|
// fullscreen exit icon
|
|
[data-toggle="fullscreen"] {
|
|
.fullscreen {
|
|
display: block;
|
|
}
|
|
|
|
.quit-fullscreen {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.fullscreen-enable {
|
|
.fullscreen {
|
|
display: none;
|
|
}
|
|
|
|
.quit-fullscreen {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
// Dark Mode Icon
|
|
.app-topbar {
|
|
#light-dark-mode {
|
|
.light-mode {
|
|
display: block;
|
|
}
|
|
|
|
.dark-mode {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-bs-theme="dark"] {
|
|
.app-topbar {
|
|
#light-dark-mode {
|
|
.light-mode {
|
|
display: none;
|
|
}
|
|
|
|
.dark-mode {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
html[data-sidebar-size="hidden"] {
|
|
.app-topbar {
|
|
padding: 0 $spacer * 0.5;
|
|
}
|
|
}
|
|
|
|
|
|
// @include media-breakpoint-down(md) {
|
|
@media (max-width: 375px) {
|
|
.app-topbar {
|
|
padding: 0 0.5 * $spacer !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.app-topbar {
|
|
.dropdown {
|
|
position: static;
|
|
|
|
.dropdown-menu {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
} |